Markdown output

AGENTS.md

@@ -1,8 +1,8 @@
 # Equality Design System
 
-Equality is the design system for all EQTYLab projects. It is a monorepo composed of packages available under `packages`.
+Equality is the design system for all EQTY Lab projects. It is a monorepo composed of packages available under `packages`.
 
-The "demo" package is Astro documentation site. Each component has a coorisponding MDX docs page under `packages/demo/src/content/components`.
+The "demo" package is Astro documentation site. Each component has a corresponding MDX docs page under `packages/demo/src/content/components`.
 
 The "tokens" package contains a design tokens formatted JSON file which is generated using Bjango's Pinwheel app. Tokens should always be added with Pinwheel and exported to JSON. Tokens are automatically built by the
 

packages/demo/astro.config.mjs

@@ -2,6 +2,7 @@
 import { defineConfig } from "astro/config";
 import { fileURLToPath } from "url";
 import { resolve } from "path";
+import markdownExport from "astro-markdown-export";
 
 import tailwindcss from "@tailwindcss/vite";
 
@@ -43,5 +44,19 @@ export default defineConfig({
       },
     },
   },
-  integrations: [mdx(), react()],
+  integrations: [
+    mdx(),
+    react(),
+    markdownExport({
+      siteUrl: "https://equality.eqtylab.io",
+      contentDir: "src/content/components",
+      outputDir: "/components/",
+      includeSourceUrls: true,
+      normalizeExtension: true,
+      additionalFrontmatter: {
+        generator: "Astro Markdown Export",
+        version: "1.0.0",
+      },
+    }),
+  ],
 });

packages/demo/package.json

@@ -10,12 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.9",
-    "@astrojs/prism": "^3.3.0",
-    "@astrojs/react": "^4.4.1",
+    "@astrojs/mdx": "^5.0.0",
+    "@astrojs/prism": "^4.0.0",
+    "@astrojs/react": "^5.0.0",
     "@eqtylab/equality": "workspace:*",
     "@tailwindcss/vite": "^4.1.16",
-    "astro": "^5.15.3",
+    "astro": "^6.0.2",
+    "astro-markdown-export": "^0.2.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
@@ -24,12 +25,15 @@
     "react-hook-form": "^7.65.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^4.1.16",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
+    "@astrojs/check": "^0.9.7",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "prettier": "^3.6.2",
-    "prettier-plugin-astro": "0.14.1"
+    "prettier-plugin-astro": "0.14.1",
+    "typescript": ">=5.4.x"
   }
 }

packages/demo/src/components/ui/page-header.astro

@@ -1,17 +1,39 @@
 ---
 import Heading from "@demo/components/ui/heading.astro";
+import { Icon } from "@eqtylab/equality";
+import { getEntry } from "astro:content";
 
 const { heading, description } = Astro.props;
+
+const slug = Astro.url.pathname.replace(/\/$/, "").split("/").pop();
+const componentEntry = slug ? await getEntry("components", slug) : undefined;
+const markdownHref = componentEntry ? `/components/${slug}.md` : null;
 ---
 
 <section class="space-y-3 border-b pb-4">
-  <Heading as="h1">{heading}</Heading>
-  {
-    description && (
-      <p
-        class="text-text-secondary [&>b]:text-text-primary max-w-4xl text-lg [&>b]:font-medium"
-        set:html={description}
-      />
-    )
-  }
+  <div class="flex items-center gap-3">
+    <Heading as="h1">{heading}</Heading>
+  </div>
+  <div class="flex gap-2 justify-between items-center">
+    {
+      description && (
+        <p
+          class="text-text-secondary [&>b]:text-text-primary max-w-4xl text-lg [&>b]:font-medium"
+          set:html={description}
+        />
+      )
+    }
+    {
+      markdownHref && (
+        <a
+          href={markdownHref}
+          aria-label="View markdown"
+          class="text-text-link hover:text-text-primary mt-1 transition-colors inline-flex items-center gap-1"
+        >
+          <Icon icon="FileType" size="sm" />
+          View Markdown
+        </a>
+      )
+    }
+  </div>
 </section>

packages/demo/src/content.config.ts

@@ -1,5 +1,6 @@
-import { defineCollection, z } from "astro:content";
+import { defineCollection } from "astro:content";
 import { glob } from "astro/loaders";
+import { z } from "zod";
 
 const components = defineCollection({
   loader: glob({ pattern: "*.{md,mdx}", base: "./src/content/components" }),

packages/demo/src/pages/components.md.ts

@@ -0,0 +1,25 @@
+import type { APIRoute } from "astro";
+import { getCollection } from "astro:content";
+
+export const GET: APIRoute = async (ctx) => {
+  const entries = await getCollection("components");
+
+  const sorted = entries.sort((a, b) =>
+    a.data.heading.localeCompare(b.data.heading),
+  );
+
+  const base = (ctx.site ?? new URL(ctx.request.url)).origin;
+
+  const lines = [
+    "# Components",
+    "",
+    ...sorted.map((entry) => {
+      const desc = entry.data.description ? ` — ${entry.data.description}` : "";
+      return `- [${entry.data.heading}](${base}/components/${entry.id}.md)${desc}`;
+    }),
+  ];
+
+  return new Response(lines.join("\n"), {
+    headers: { "Content-Type": "text/markdown; charset=utf-8" },
+  });
+};

packages/demo/src/pages/index.mdx

@@ -17,6 +17,8 @@ It provides a consistent visual system, fully scoped components, and a flexible
 - **Framer Motion animations** for polished, consistent interactions
 - **Built for reuse** across EQTY Lab products — from dashboards to marketing sites
 
+For our agent friends, a full list of components in Markdown format along with links to the component documentation (also in Markdown is available at [/components.md](https://equality.eqtylab.io/components.md)
+
 ## Design philosophy
 
 Equality UI is built around three core principles: