Docs: help folks setup autocomplete for variables

[argyleink]

VScode lets you point to files, could have them point to props.css in the npm module or remote file?

[argyleink]

https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables

[argyleink]

woh, hardcore mode https://www.sublimetext.com/docs/completions.html#completion_files

[kaf-lamed-beyt]

Hi @argyleink,

I'd love to work on this. But, please can you explain a little bit better? Thanks

[argyleink]

yeah! thanks!

the goal is so folks can see a list of open-props vars while they're typing CSS in their editor. There's multiple ways to help folks do this, and we need to research the easiest way to get started. maybe it's a plugin, or maybe it's a remote file we simply provide instructions for how to point an editor to it.

like, the main open props file https://unpkg.com/open-props, if remote files can be provided to the editor as auto-complete references, then this may just be a documentation task. but if that doesnt work, we may need to look into editor specific plugins.

does that help provide clarity? it's all so that moment in code, when you type var(-- that it pops up with all the open props, making it so you dont need memorize them.

[kaf-lamed-beyt]

This is an awesome explanation @argyleink,

I'll start my research on how to create VScode (or general IDE) plugins that'll help me accomplish this task.

If this sounds fine, kindly let me know so I can get on it. Also if you have some resources that you think could speed up my process, I'd love you to share them with me.

Thanks, and I look forward to your reply.

[kaf-lamed-beyt]

I saw that you referenced this VScode extension just now...

So now I'm guessing all I have to do is add the code in the main css open-prop file into the extension?

[argyleink]

yeah, if we make an extension. but i saw easier ways where you can tell your editor where to source autocomplete files, and someone points to node_modules, and it'd pick it up if it could. i imagined just a small section in the docs telling folks how to point to open-props in their settings, no extension required, but have open-props installed for that project..

i'm open to strategies on how to do it, if you want to research alternatives to extensions?

[kaf-lamed-beyt]

Yeah.

Your idea sounds fine. I'll go with it. Let me go over some resources that'll help me accomplish this. I'll be back here with feedbacks.

[argyleink]

Dang, I can't find the "simple path" where no extensions are required! driving me nuts. I know i saw a workflow where you just show VS Code a CSS file of props, and it'll use it for intellisense...

[kaf-lamed-beyt]

Maybe we could build a workflow?

Or, can you remember where you saw the workflow? or how to go about building one.

[argyleink]

Or we document how to install an extension and get it working with open props? Then document how to get it working with sublime or atom extensions next? That what you meant by workflow?

[kaf-lamed-beyt]

Yes.

I think this would be better. Instead of building a whole new extension we can just provide the open-props vars to the extension that we're using and prepare a documentation for all the instances of popular IDEs

[argyleink]

where do you think folks will go to try and learn how to do this? docsite? wiki on github? separate blog post somewhere?

[argyleink]

shared in the Discord, here's how Pollen helps folks get it setup https://www.pollen.style/getting-started#vs-code

[kaf-lamed-beyt]

where do you think folks will go to try and learn how to do this? docsite? wiki on github? separate blog post somewhere?

Hi @argyleink,

I was thinking we can point people to this workaround by creating a tutorial via the docs of this project.

And I can also write about how people can do that. I am a Technical Writer, BTW. I've written quite an amount of guides on the internet.

If you want to check them out, I can share them with you.

[kaf-lamed-beyt]

shared in the Discord, here's how Pollen helps folks get it setup https://www.pollen.style/getting-started#vs-code

Exactly!

We can have something like this on the open-props docs site. Kindly let me know what you think.

[argyleink]

Sounds good, let's put a section on the docsite about it. Where does it fit you think? I'm thinking an expandable details/summary element in the Getting Started section could encapsulate it all?

VS Code Autocomplete

Write out steps for plugin installation and populating the settings with paths to OP, etc

[kaf-lamed-beyt]

Yes, that sounds fine.

Placing it in "getting started" section would surely help in getting the attention of first time users

[kaf-lamed-beyt]

Can you point me to where I'll be writing the guide? I'm guessing I'll be using markdown to do that right? Because I checked the docsite directory just now and I couldn't find anywhere that I'll be adding the guide.

[argyleink]

I can help yep! I imagine you could copy the CLI section and paste it right underneath. Then work inside of that HTML block.

like:

<div class="contain-pre" id="autocomplete">
  <h4>Autocomplete</h4>

   <details class="started-details">
     <summary>VS Code</summary>

     /* help instruction goes here */
  <details>
</div>

[kaf-lamed-beyt]

I can help yep! I imagine you could copy the CLI section and paste it right underneath. Then work inside of that HTML block.

like:

<div class="contain-pre" id="autocomplete">
  <h4>Autocomplete</h4>

   <details class="started-details">
     <summary>VS Code</summary>

     /* help instruction goes here */
  <details>
</div>

I'm not getting you. Can you explain a little bit more?

Which file will I be working with? Do i have to pass all the content as markdown to a particular html file? Or I'll just have to update a specific markdown file.

I'm sorry for all these questions. I've worked with docusaurus before, when it comes to documentation that's what I'm kinda familiar with.

I'm asking all these questions so that I can be clear on what to do.🙏

[argyleink]

no markdown conveniences here yet, are you OK hand writing HTML?

aka, this is a bespoke docsite

[kaf-lamed-beyt]

Oh okay.

Yes, I'm good at writing HTML.

[kaf-lamed-beyt]

Hi @argyleink,

Any update on this?

[argyleink]

Sorry didn't know you were waiting on anything! What can I help ya get past?

[kaf-lamed-beyt]

I was going to ask about the html file I'm to work on. But, I found it already.

So now, this code block below 👇🏼

<div class="contain-pre" id="autocomplete">
  <h4>Autocomplete</h4>

   <details class="started-details">
     <summary>VS Code</summary>

     /* help instruction goes here */
  <details>
</div>```

Is there a specific place that it is supposed to be? If yes, kindly point it to me, thanks.

[argyleink]

I think it'll be appropriate placed here https://github.com/argyleink/open-props/blob/main/docsite/index.html#L816, underneath the CLI section 👍🏻

[kaf-lamed-beyt]

Awesome!

I'll start right away 😎

[kaf-lamed-beyt]

When I have more information on this, I'll add it.

Sorry for the delay @argyleink

[geoffrich]

I think this was closed by https://github.com/argyleink/open-props/pull/130.

[kaf-lamed-beyt]

I think this was closed by #130.

Yes it was @geoffrich. But, I still want to add documentation for autocomplete with other IDEs like atom and sublime text.

[kaf-lamed-beyt]

Hi @argyleink,

I think I may have forgotten how to get the dev server up and running. Should I use the build command in the scripts object inside package.json?

[argyleink]

hey! cd into the docsite/ and then install the node deps npm i and spin it all up with npm start

[kaf-lamed-beyt]

worked like a charm!

Thanks! 😎