document all the things!

[mayank99]

right now, ecsstatic.dev is just a marketing page which links to a wee readme.

even though the library is super tiny, there needs to be proper docs for many things! these can be tackled in separate PRs, one step at a time.

• [ ] quick start guide (similar to what's in readme currently)
• [ ] links to starter templates, openable in stackblitz
  • for example: the vite-solid example can be opened in stackblitz
  • common templates to show: vite+preact, vite+react, vite+solid, astro+anything
• [ ] document how to use syntax highlighting, intellisense, etc using vscode extensions
• [ ] document how to do further transformations with vite's css pipeline
  • things like minification, syntax lowering, custom media queries
  • could show examples using postcss and lightningcss
• [ ] document how to use scss syntax
  • show examples of things like @useing variables/mixins from sibling .scss files
  • show how to use scss libraries from npm (e.g. open-props-scss)
  • show how to include additional data in vite
• [ ] document how to use string interpolation
  • basic case: inline expressions and local variables
  • show nesting other class names
  • more advanced case, e.g. importing breakpoints from a different file in a project
  • most advanced: using values that come from other npm packages
• [ ] best practices! we don't want people writing unmaintainable code using this library.
• [ ] a page titled "How do I X" which answers (with examples) common scenarios like:
  • how do i define "variants"? (use data attributes)
  • how do i use "dynamic styles"? (use inline styles, preferably with css variables)
  • how do i do "global styles"? (create a damn css file smh)
  • how do i use assets? (just use the url! vite knows how to handle it)
  • how do i become good at css? (this one might be a little out of scope)
• [ ] document how the thing works 😄 i love when libraries talk about what they are doing under the hood.
• [ ] "why ecsstatic" (vs like styled-components/emotion/vanilla-extract/css-modules)
• [ ] "why NOT ecsstatic" (i.e. only works in vite, only needed for JSX)

these can all be simple .md/.mdx files in a new folder under docsite/src/pages. the docsite is built using astro which knows how to render these.

a parallel task is to also create styling for these pages when hosted on ecsstatic.dev. but that can be tackled separately i think.

[the-lazy-learner]

I would definitely like to contribute to this if that's okay

[mayank99]

@the-lazy-learner yes definitely! you can start with one of the first few items in that list. should be pretty straightforward to create markdown files. let me know if you have questions either here or in your PR