docs: update

README.md

@@ -35,7 +35,7 @@ export const App = () => (
 )
 ```
 
-_You can create React, Astro and Hono components. You can also use Tailwind CSS._
+MistCSS can generate ⚛️ __React__, 🚀 __Astro__ and 🔥 __Hono__ components. You can use 🍃 __Tailwind CSS__ to style them.
 
 ## Documentation
 
@@ -45,6 +45,7 @@ https://typicode.github.io/mistcss
 
 - [Next.js](https://nextjs.org/)
 - [Remix](https://remix.run/)
-- [Astro](https://astro.build/)
+- [React](https://react.dev/)
 - [Hono](https://hono.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
+- [Astro](https://astro.build/)
+- [Tailwind CSS](https://tailwindcss.com/)

docs/astro.config.mjs

@@ -1,5 +1,5 @@
-import { defineConfig } from 'astro/config';
-import starlight from '@astrojs/starlight';
+import { defineConfig } from 'astro/config'
+import starlight from '@astrojs/starlight'
 
 // https://astro.build/config
 export default defineConfig({
@@ -18,10 +18,15 @@ export default defineConfig({
       },
       sidebar: [
         {
-          label: 'Basics',
+          label: 'Getting Started',
           items: [
             { label: 'Introduction', link: '/intro' },
-            { label: 'Installation', link: '/install' },
+            { label: 'Quick Start', link: '/start' },
+          ],
+        },
+        {
+          label: 'Essentials',
+          items: [
             { label: 'Writing Components', link: '/component' },
             { label: 'Ignoring Generated Files', link: '/ignore' },
           ],

docs/src/content/docs/index.mdx

@@ -25,11 +25,11 @@ hero:
     background: black;
     color: white;
 
-    &[data-variant="primary"] {
+    &[data-variant='primary'] {
       background: blue;
     }
 
-    &[data-variant="secondary"] {
+    &[data-variant='secondary'] {
       background: gray;
     }
   }
@@ -41,11 +41,37 @@ hero:
 ```jsx title="App.tsx"
 import { CustomButton } from './Button.mist'
 
-export const App = () => (
-  <CustomButton variant="primary">Save</CustomButton>
-)
+export const App = () => <CustomButton variant="primary">Save</CustomButton>
 ```
 
-Read [docs](/intro) →
-</div>
+MistCSS can generate ⚛️ __React__, 🚀 __Astro__ and 🔥 __Hono__ components. You can use 🍃 __Tailwind CSS__ to style them.
+
+### What they say
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/9jrNwmj73F4?si=UsM9k8XXSl_1rc_c"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen
+></iframe>
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/zSlORhjh5DQ?si=aXBk_CV2tgspMaBT"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen
+></iframe>
 
+## Learn more
+
+__Read [docs](/intro) ✨__
+
+</div>

docs/src/content/docs/start.mdx

@@ -0,0 +1,80 @@
+---
+title: Quick Start
+---
+
+## Install
+
+```sh
+npm install --save-dev mistcss
+```
+
+Assuming your components are in `./components`:
+
+```json title="package.json" copy
+{
+  "scripts": {
+    "mistcss:dev": "mistcss ./components --watch",
+    "mistcss:build": "mistcss ./components"
+  }
+}
+```
+
+You may want to use [concurrently](https://github.com/open-cli-tools/concurrently) to run `mistcss:dev` in parallel with your dev server.
+
+When building, `mistcss:build` must be run first.
+
+## Write
+
+Let's say you want to write a button component. It should have a default style and accept variants:
+
+```css title="./components/Button.mist.css"
+@scope (button.custom-button) {
+  :scope {
+    background: black;
+    color: white;
+
+    &[data-variant='primary'] {
+      background: blue;
+    }
+
+    &[data-variant='secondary'] {
+      background: gray;
+    }
+  }
+}
+```
+
+:::note
+
+The above code is 100% valid CSS and natively supported by browsers.
+
+:::
+
+:::note
+
+MistCSS components support enum, boolean and string props. See [Writing Components](components).
+
+:::
+
+## Build
+
+```shell
+npm run mistcss:dev
+# MistCSS will create ./components/Button.mist.tsx
+```
+
+## Use
+
+Use it in your app. No JS/TS were written ✨
+
+```jsx title="App.tsx"
+import { CustomButton } from './Button.mist'
+
+export const App = () => <CustomButton variant="primary">Save</CustomButton>
+```
+
+:::note
+
+MistCSS supports creating React, Astro and Hono components. See [frameworks](frameworks).
+
+:::

docs/src/styles/custom.css

@@ -31,4 +31,8 @@
 	--sl-color-gray-6: #e4effe;
 	--sl-color-gray-7: #f1f7fe;
 	--sl-color-black: #ffffff;
+}
+
+.sl-markdown-content :is(iframe):not(:where(.not-content *)) {
+  height: 315px;
 }