0.4.0

.github/workflows/deploy.yml

@@ -1,64 +1,39 @@
-# Sample workflow for building and deploying a VitePress site to GitHub Pages
-#
-name: Deploy VitePress site to Pages
+name: Deploy to GitHub Pages
 
 on:
-  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
-  # using the `master` branch as the default branch.
+  # Trigger the workflow every time you push to the `main` branch
+  # Using a different branch name? Replace `main` with your branch’s name
   push:
-    branches: [main]
-
-  # Allows you to run this workflow manually from the Actions tab
+    branches: [ main ]
+  # Allows you to run this workflow manually from the Actions tab on GitHub.
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+# Allow this job to clone the repo and create a page deployment
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
 jobs:
-  # Build job
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
+      - name: Checkout your repository using git
         uses: actions/checkout@v4
+      - name: Install, build, and upload your site
+        uses: withastro/action@v2
         with:
-          fetch-depth: 0 # Not needed if lastUpdated is not enabled
-      # - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
-      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm # or pnpm / yarn
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Install dependencies
-        run: npm ci # or pnpm install / yarn install / bun install
-      - name: Build with VitePress
-        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: docs/.vitepress/dist
+          path: ./docs # The root location of your Astro project inside the repository. (optional)
+          # node-version: 20 # The specific version of Node that should be used to build your site. Defaults to 20. (optional)
+          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
 
-  # Deployment job
   deploy:
+    needs: build
+    runs-on: ubuntu-latest
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

README.md

@@ -8,43 +8,45 @@ MistCSS is a new, better and faster way to write visual components. ~~CSS-in-JS~
 
 View the [site](https://typicode.github.io/mistcss) to learn more.
 
-Supports Next.js, Remix and TailwindCSS. More to come.
-
-`Paragraph.mist.css`
-
-```css
-@scope (.paragraph) {
-  p:scope {
-    color: black;
+It supports:
+- [Next.js](https://nextjs.org/)
+- [Remix](https://remix.run/)
+- [React](https://react.dev/)
+- [Hono](https://hono.dev/)
+- [Tailwind CSS](https://tailwindcss.com/)
+
+## Write your component in CSS only
+
+```css title="Button.mist.css"
+@scope (button.custom-button) {
+  :scope {
+    background: black;
+    color: white;
+
+    &[data-variant="primary"] {
+      background: blue;
+    }
 
-    &[data-error] {
-      color: red;
+    &[data-variant="secondary"] {
+      background: gray;
     }
   }
 }
 ```
 
-`App.jsx`
-
-```jsx
-import { Paragraph } from 'Paragraph.mist'
+## Get a type-safe component without writing TypeScript
 
-export default const App = () => (
-  <main>
-    <Paragraph>I'm a React component written in CSS only</Paragraph>
-    <Paragraph error>props can be passed</Paragraph>
+```jsx title="App.tsx"
+import { CustomButton } from './Button.mist'
 
-    {/* 💥 TypeScript will catch errors */}
-    <Paragraph eror>typo</Paragraph>
-    <Paragraph type="button">invalid prop</Paragraph>
-  </main>
+export const App = () => (
+  <CustomButton variant="primary">Save</CustomButton>
 )
 ```
 
+Read [docs](/intro) →
+</div>
+
 ## Documentation
 
 https://typicode.github.io/mistcss
-
-## Why the name?
-
-C in CSS stands for cascade 🌊 → atomized water forms mist 🌫️ → MistCSS creates pure CSS atomic components 🌬️

docs.md

@@ -0,0 +1,45 @@
+# Create a component
+
+```css
+@scope (div.badge) {
+  :scope {
+    background: black;
+    color: white;
+  }
+}
+```
+
+```jsx
+<Badge>hello</Badge>
+
+<Badge onSubmit={}>Error</Badge>
+```
+
+# Enum properties
+
+```css
+@scope (button.custom-button) {
+  :scope {
+    font-size: 1rem;
+
+    &[data-size='small'] {
+      font-size: 0.5rem;
+    }
+
+    &[data-size='large'] {
+      font-size: 2rem;
+    }
+  }
+}
+```
+
+```jsx
+<CustomButton>Save</CustomButton>
+<CustomButton size="large">Save</CustomButton>
+
+<CustomButton size="extra-large">Save</CustomButton>
+```
+
+# Boolean properties
+
+# String values

docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

docs/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

docs/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

docs/README.md

@@ -0,0 +1,54 @@
+# Starlight Starter Kit: Basics
+
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgit.luolix.top%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro + Starlight project, you'll see the following folders and files:
+
+```
+.
+├── public/
+├── src/
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
+```
+
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+
+Static assets, like favicons, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

docs/astro.config.mjs

@@ -0,0 +1,36 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://typicode.github.io',
+  base: 'mistcss',
+  integrations: [
+    starlight({
+      title: 'MistCSS',
+      logo: { src: './src/assets/emoji_u1f32c.svg' },
+      customCss: [
+        // Relative path to your custom CSS file
+        './src/styles/custom.css',
+      ],
+      social: {
+        github: 'https://github.com/typicode/mistcss',
+      },
+      sidebar: [
+        {
+          label: 'Basics',
+          items: [
+            { label: 'Introduction', link: '/intro' },
+            { label: 'Installation', link: '/install' },
+            { label: 'Writing Components', link: '/component' },
+            { label: 'Ignoring Generated Files', link: '/ignore' },
+          ],
+        },
+        {
+          label: 'Integrations',
+          autogenerate: { directory: 'integration' },
+        },
+      ],
+    }),
+  ],
+})