Comments (34)
Hi @argyleink,
I'd love to work on this. But, please can you explain a little bit better? Thanks
from open-props.
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
from open-props.
https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
from open-props.
woh, hardcore mode https://www.sublimetext.com/docs/completions.html#completion_files
from open-props.
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.
from open-props.
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.
from open-props.
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?
from open-props.
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?
from open-props.
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.
from open-props.
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...
from open-props.
Maybe we could build a workflow?
Or, can you remember where you saw the workflow? or how to go about building one.
from open-props.
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?
from open-props.
where do you think folks will go to try and learn how to do this? docsite? wiki on github? separate blog post somewhere?
from open-props.
shared in the Discord, here's how Pollen helps folks get it setup https://www.pollen.style/getting-started#vs-code
from open-props.
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.
from open-props.
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.
from open-props.
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
from open-props.
Yes, that sounds fine.
Placing it in "getting started" section would surely help in getting the attention of first time users
from open-props.
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.
from open-props.
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>
from open-props.
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.🙏
from open-props.
no markdown conveniences here yet, are you OK hand writing HTML?
aka, this is a bespoke docsite
from open-props.
Oh okay.
Yes, I'm good at writing HTML.
from open-props.
Hi @argyleink,
Any update on this?
from open-props.
Sorry didn't know you were waiting on anything! What can I help ya get past?
from open-props.
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.
from open-props.
I think it'll be appropriate placed here https://github.com/argyleink/open-props/blob/main/docsite/index.html#L816, underneath the CLI section 👍🏻
from open-props.
Awesome!
I'll start right away 😎
from open-props.
When I have more information on this, I'll add it.
Sorry for the delay @argyleink
from open-props.
I think this was closed by #130.
from open-props.
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.
from open-props.
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
?
from open-props.
hey! cd into the docsite/
and then install the node deps npm i
and spin it all up with npm start
from open-props.
worked like a charm!
Thanks! 😎
from open-props.
Related Issues (20)
- `clip-path` border shapes
- Need rotate and scale animation additions
- Add constructible stylesheet as an output format HOT 3
- [enhancement] Click color swatch to copy hex code to clipboard? HOT 11
- Animations Shake-Y on Safari not stacking with other animations HOT 1
- Add dialog animation styles to normalize
- Add social media brand colors pack HOT 6
- Consider offering a few turbulence props to the svg pack
- Add SDR/HDR neon color props HOT 1
- Add scalable font size import HOT 2
- Sizes Counters Wrong HOT 8
- normalize table hover colors HOT 7
- Add Spacing Props HOT 2
- width: fit-content for tables is hard to override or customize HOT 3
- Media query conflict at "only" breakpoints HOT 1
- beta grays in v1.* aren't on :host in the shadow export
- `<a>` negative margin in normalize HOT 1
- Ensure Shadows Do Not Switch to Dark When Normalize Is Not Used
- Request: Dark mode as opt-in HOT 2
- Normalize toggle white/dark mode HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-props.