chore(docs): move docs into main repository

package.json

@@ -17,6 +17,7 @@
   "scripts": {
     "ci:biome": "biome ci",
     "build": "tsdown",
+    "build:docs": "pnpm -C packages/docs run build",
     "typecheck": "pnpm -r run typecheck",
     "test": "vitest run"
   }

packages/docs/astro.config.mjs

@@ -0,0 +1,61 @@
+// @ts-check
+
+import starlight from "@astrojs/starlight";
+import { defineConfig } from "astro/config";
+import starlightLinksValidator from "starlight-links-validator";
+
+// https://astro.build/config
+export default defineConfig({
+  experimental: {
+    clientPrerender: true,
+  },
+  integrations: [
+    starlight({
+      title: "Mighty",
+      plugins: [starlightLinksValidator()],
+      logo: {
+        src: "@/assets/mighty.svg",
+      },
+      components: {
+        SiteTitle: "@/components/starlight/SiteTitle.astro",
+        Hero: "@/components/starlight/Hero.astro",
+      },
+      customCss: ["./src/styles/custom.css"],
+      social: [
+        {
+          icon: "github",
+          label: "GitHub",
+          href: "https://github.com/gomighty/mighty",
+        },
+      ],
+      head: [
+        {
+          tag: "link",
+          attrs: {
+            rel: "icon",
+            type: "image/png",
+            href: "/favicon-96x96.png",
+            sizes: "96x96",
+          },
+        },
+      ],
+      sidebar: [
+        {
+          label: "Hello, World!",
+          autogenerate: { directory: "guides/hello-world" },
+        },
+        {
+          label: "Core Concepts",
+          autogenerate: { directory: "guides/core-concepts" },
+        },
+        {
+          label: "Backend Adapters",
+          autogenerate: { directory: "guides/backend-adapters" },
+        },
+        {
+          slug: "guides/roadmap",
+        },
+      ],
+    }),
+  ],
+});

packages/docs/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@gomighty/docs",
+  "private": true,
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "typecheck": "astro check"
+  },
+  "engines": {
+    "node": "24.x"
+  },
+  "dependencies": {
+    "@astrojs/starlight": "^0.38.2",
+    "astro": "catalog:",
+    "motion": "^12.23.12",
+    "sharp": "^0.34.2",
+    "starlight-links-validator": "^0.20.1"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.4",
+    "typescript": "^5.9.3"
+  }
+}

packages/docs/src/components/PackageManagerTabs.astro

@@ -0,0 +1,15 @@
+---
+import { TabItem, Tabs } from "@astrojs/starlight/components";
+---
+
+<Tabs syncKey="package-managers">
+  <TabItem label="npm">
+    <slot name="npm" />
+  </TabItem>
+  <TabItem label="pnpm">
+    <slot name="pnpm" />
+  </TabItem>
+  <TabItem label="bun">
+    <slot name="bun" />
+  </TabItem>
+</Tabs>

packages/docs/src/components/starlight/Hero.astro

@@ -0,0 +1,143 @@
+---
+import { LinkButton } from "@astrojs/starlight/components";
+import MightyLogo from "@/assets/mighty.svg";
+
+const { data } = Astro.locals.starlightRoute.entry;
+const { title = data.title, tagline, actions = [] } = data.hero || {};
+
+const PAGE_TITLE_ID = "_top";
+---
+
+<div class="hero">
+  <MightyLogo class="mighty-logo" width="400" height="400" />
+  <div class="sl-flex stack">
+    <div class="sl-flex copy">
+      <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+      {tagline && <div class="tagline" set:html={tagline} />}
+    </div>
+    {
+      actions.length > 0 && (
+        <div class="sl-flex actions">
+          {actions.map(
+            ({
+              attrs: { class: className, ...attrs } = {},
+              icon,
+              link: href,
+              text,
+              variant,
+            }) => (
+              <LinkButton
+                {href}
+                {variant}
+                icon={icon?.name}
+                class:list={[className]}
+                {...attrs}
+              >
+                {text}
+                {icon?.html && <Fragment set:html={icon.html} />}
+              </LinkButton>
+            ),
+          )}
+        </div>
+      )
+    }
+  </div>
+</div>
+
+<style>
+  @layer starlight.core {
+    .hero {
+      display: grid;
+      align-items: center;
+      gap: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    .hero > .mighty-logo,
+    .hero > .hero-html {
+      object-fit: contain;
+      width: min(70%, 20rem);
+      height: auto;
+      margin-inline: auto;
+    }
+
+    .stack {
+      flex-direction: column;
+      gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
+      text-align: center;
+    }
+
+    .copy {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .copy > * {
+      max-width: 50ch;
+    }
+
+    h1 {
+      font-size: clamp(
+        var(--sl-text-3xl),
+        calc(0.25rem + 5vw),
+        var(--sl-text-6xl)
+      );
+      line-height: var(--sl-line-height-headings);
+      font-weight: 600;
+      color: var(--sl-color-white);
+    }
+
+    .tagline {
+      font-size: clamp(
+        var(--sl-text-base),
+        calc(0.0625rem + 2vw),
+        var(--sl-text-xl)
+      );
+      color: var(--sl-color-gray-2);
+    }
+
+    .actions {
+      gap: 1rem 2rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    @media (min-width: 50rem) {
+      .hero {
+        grid-template-columns: 7fr 4fr;
+        gap: 3%;
+        padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
+      }
+
+      .hero > .mighty-logo,
+      .hero > .hero-html {
+        order: 2;
+        width: min(100%, 25rem);
+      }
+
+      .stack {
+        text-align: start;
+      }
+
+      .copy {
+        align-items: flex-start;
+      }
+
+      .actions {
+        justify-content: flex-start;
+      }
+    }
+  }
+</style>
+
+<style is:global>
+  .mighty-logo svg path {
+    transition: transform 0.5s ease;
+    transform-origin: center;
+  }
+
+  .mighty-logo:hover svg path {
+    transform: rotateY(540deg);
+  }
+</style>