docs: ✏️ add docs site

.github/workflows/gh-pages.yml

@@ -1,4 +1,4 @@
-name: Node.js CI
+name: Publish Docs Site
 
 on:
   push:
@@ -7,6 +7,8 @@ on:
 jobs:
   gh-pages:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     strategy:
       matrix:
         node-version: [20.x]
@@ -17,10 +19,12 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: yarn
-      - run: yarn install --frozen-lockfile
-      - run: yarn test --coverage
+          cache-dependency-path: site/yarn.lock
+      - run: yarn --cwd site --frozen-lockfile
+      - run: yarn --cwd site build
+      - run: touch site/out/.nojekyll
       - name: Publish to gh-pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./coverage/lcov-report
+          publish_dir: ./site/out

.gitignore

@@ -12,3 +12,8 @@ lerna-debug.log
 /dist/
 _book/
 /demo/
+
+# Static docs site artifacts
+site/.next/
+site/out/
+site/node_modules/

site/app/[[...mdxPath]]/page.jsx

@@ -0,0 +1,50 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { notFound } from 'next/navigation'
+import { useMDXComponents as getMDXComponents } from '../../mdx-components'
+
+const isAssetLikePath = (mdxPath = []) =>
+  mdxPath.some((segment) => segment.includes('.'))
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+export async function generateMetadata(props) {
+  const params = await props.params
+  const mdxPath = params?.mdxPath ?? []
+
+  if (isAssetLikePath(mdxPath)) {
+    return {}
+  }
+
+  try {
+    const { metadata } = await importPage(mdxPath)
+    return metadata
+  } catch {
+    return {}
+  }
+}
+
+const Wrapper = getMDXComponents().wrapper
+
+export default async function Page(props) {
+  const params = await props.params
+  const mdxPath = params?.mdxPath ?? []
+
+  if (isAssetLikePath(mdxPath)) {
+    notFound()
+  }
+
+  let page
+  try {
+    page = await importPage(mdxPath)
+  } catch {
+    notFound()
+  }
+
+  const { default: MDXContent, toc, metadata, sourceCode } = page
+
+  return (
+    <Wrapper toc={toc} metadata={metadata} sourceCode={sourceCode}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}

site/app/globals.css

@@ -0,0 +1,220 @@
+/* nano-css docs - Professional theme overrides */
+
+:root {
+  --nano-accent: #0a0a0a;
+  --nano-muted: #666;
+  --nano-border: #e5e5e5;
+  --nano-surface: #fafafa;
+  --nano-brand: #0969da;
+}
+
+.dark {
+  --nano-accent: #fafafa;
+  --nano-muted: #999;
+  --nano-border: #2a2a2a;
+  --nano-surface: #111;
+  --nano-brand: #58a6ff;
+}
+
+/* Landing page hero */
+.nano-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 6rem 1.5rem 4rem;
+  min-height: 70vh;
+}
+
+.nano-hero h1 {
+  font-size: clamp(3rem, 8vw, 5.5rem);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin: 0;
+  color: var(--nano-accent);
+}
+
+.nano-hero .nano-tagline {
+  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
+  color: var(--nano-muted);
+  margin-top: 1.25rem;
+  font-weight: 400;
+  letter-spacing: -0.01em;
+  max-width: 540px;
+}
+
+.nano-hero .nano-version {
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  color: var(--nano-muted);
+  border: 1px solid var(--nano-border);
+  border-radius: 999px;
+  background: var(--nano-surface);
+}
+
+.nano-cta {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 2.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.nano-cta a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 150ms ease;
+}
+
+.nano-cta .primary {
+  background: var(--nano-accent);
+  color: var(--nano-surface);
+}
+.nano-cta .primary:hover {
+  opacity: 0.85;
+}
+
+.nano-cta .secondary {
+  border: 1px solid var(--nano-border);
+  color: var(--nano-accent);
+  background: transparent;
+}
+.nano-cta .secondary:hover {
+  background: var(--nano-surface);
+  border-color: var(--nano-muted);
+}
+
+/* Stats bar */
+.nano-stats {
+  display: flex;
+  gap: 3rem;
+  margin-top: 4rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.nano-stat {
+  text-align: center;
+}
+
+.nano-stat .value {
+  display: block;
+  font-size: 1.8rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--nano-accent);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.nano-stat .label {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--nano-muted);
+  margin-top: 0.25rem;
+}
+
+/* Feature grid */
+.nano-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  max-width: 960px;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+}
+
+.nano-feature {
+  padding: 1.75rem;
+  border: 1px solid var(--nano-border);
+  border-radius: 12px;
+  background: var(--nano-surface);
+  transition: border-color 150ms ease;
+}
+.nano-feature:hover {
+  border-color: var(--nano-muted);
+}
+
+.nano-feature h3 {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem;
+  color: var(--nano-accent);
+}
+
+.nano-feature p,
+.nano-feature-text {
+  font-size: 0.9rem;
+  color: var(--nano-muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* Install snippet */
+.nano-install {
+  max-width: 480px;
+  margin: 0 auto 4rem;
+  text-align: center;
+}
+
+.nano-install code {
+  display: inline-block;
+  padding: 0.6rem 1.25rem;
+  font-size: 0.9rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  background: var(--nano-surface);
+  border: 1px solid var(--nano-border);
+  border-radius: 8px;
+  color: var(--nano-accent);
+}
+
+/* Footer section on landing */
+.nano-footer-section {
+  text-align: center;
+  padding: 3rem 1.5rem 5rem;
+  color: var(--nano-muted);
+  font-size: 0.85rem;
+}
+
+.nano-footer-section a {
+  color: var(--nano-brand);
+  text-decoration: none;
+}
+.nano-footer-section a:hover {
+  text-decoration: underline;
+}
+
+/* Quick start code block on landing */
+.nano-quickstart {
+  max-width: 560px;
+  margin: 0 auto 4rem;
+  text-align: left;
+}
+
+.nano-quickstart h2 {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  color: var(--nano-accent);
+  letter-spacing: -0.02em;
+}
+
+/* Separator line */
+.nano-separator {
+  max-width: 960px;
+  margin: 0 auto;
+  border: none;
+  border-top: 1px solid var(--nano-border);
+}

site/app/layout.jsx

@@ -0,0 +1,55 @@
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+import { Head } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+import 'nextra-theme-docs/style.css'
+import './globals.css'
+
+export const metadata = {
+  title: {
+    default: 'nano-css — Tiny CSS-in-JS Library',
+    template: '%s — nano-css',
+  },
+  description:
+    'nano-css is a tiny 5th generation CSS-in-JS library with a ~0.5 Kb core and 40+ addons. Framework agnostic, isomorphic, and fast.',
+}
+
+const navbar = (
+  <Navbar
+    logo={
+      <span style={{ fontWeight: 700, fontSize: '1.1rem', letterSpacing: '-0.02em' }}>
+        nano-css
+      </span>
+    }
+    projectLink="https://github.com/streamich/nano-css"
+  />
+)
+
+const footer = (
+  <Footer>
+    <span style={{ fontSize: '0.85rem', color: '#888' }}>
+      Unlicense {new Date().getFullYear()} © nano-css contributors
+    </span>
+  </Footer>
+)
+
+export default async function RootLayout({ children }) {
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <Head>
+        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+      </Head>
+      <body>
+        <Layout
+          navbar={navbar}
+          pageMap={await getPageMap()}
+          docsRepositoryBase="https://github.com/streamich/nano-css/tree/master/site"
+          footer={footer}
+          sidebar={{ defaultMenuCollapseLevel: 1 }}
+          editLink="Edit this page on GitHub"
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}

site/content/_meta.js

@@ -0,0 +1,22 @@
+export default {
+  index: {
+    title: 'Home',
+    type: 'page',
+    theme: {
+      layout: 'full',
+      timestamp: false,
+      breadcrumb: false,
+      pagination: false,
+      toc: false,
+      sidebar: false,
+    },
+  },
+  docs: {
+    title: 'Documentation',
+    type: 'page',
+  },
+  github_link: {
+    title: 'GitHub',
+    href: 'https://github.com/streamich/nano-css',
+  },
+}