fix templates in docs

cli/package.json

@@ -36,7 +36,7 @@
     "package.json"
   ],
   "engines": {
-    "node": ">=20.12.0"
+    "node": "^20.0.0 || ^22.0.0"
   },
   "scripts": {
     "typecheck": "tsc",

docs/.nvmrc

@@ -1 +1 @@
-22.0.0 
+22 

docs/package.json

@@ -2,6 +2,9 @@
   "name": "docs",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "scripts": {
     "dev": "npm run generate-templates && astro dev",
     "start": "astro dev",
@@ -12,20 +15,20 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/starlight": "^0.28.2",
-    "@astrojs/vercel": "^7.8.1",
+    "@astrojs/react": "^4.2.2",
+    "@astrojs/starlight": "^0.32.5",
+    "@astrojs/vercel": "^8.1.3",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.15.3",
+    "astro": "^5.5.5",
     "fuse.js": "^7.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.32.5",
     "typescript": "^5.6.3"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/tailwind": "^6.0.2",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.3",

docs/src/components/TemplateGrid.astro

@@ -0,0 +1,137 @@
+---
+import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
+
+interface Template {
+  id: string;
+  requireData: boolean;
+  label: string;
+  hint?: string;
+  templatePath: string;
+  tags?: string[];
+}
+
+interface Props {
+  templates: Template[];
+}
+
+const { templates } = Astro.props;
+---
+
+<div class="template-grid">
+  {
+    templates.map((template) => (
+      <div class="template-card">
+        <div class="template-header">
+          <h3>{template.label}</h3>
+          {!template.requireData && (
+            <span class="no-data-badge">No Data Required</span>
+          )}
+        </div>
+
+        <p class="template-description">
+          {template.hint || "A blank page template"}
+        </p>
+
+        <div class="template-footer">
+          <Tabs syncKey="packageManager">
+            <TabItem label="pnpm">
+              <Code
+                code={`pnpm proofkit add page --template ${template.id}`}
+                lang="bash"
+                frame="terminal"
+              />
+            </TabItem>
+            <TabItem label="npm">
+              <Code
+                code={`npm run proofkit add page --template ${template.id}`}
+                lang="bash"
+                frame="terminal"
+              />
+            </TabItem>
+            <TabItem label="yarn">
+              <Code
+                code={`yarn proofkit add page --template ${template.id}`}
+                lang="bash"
+                frame="terminal"
+              />
+            </TabItem>
+          </Tabs>
+
+          {template.tags && template.tags.length > 0 && (
+            <div class="template-tags">
+              {template.tags.map((tag) => (
+                <span class="tag">{tag}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  .template-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 2rem;
+  }
+
+  .template-card {
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    background-color: var(--sl-color-black);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .template-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .template-header h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: var(--sl-color-white);
+  }
+
+  .no-data-badge {
+    font-size: 0.75rem;
+    background-color: var(--sl-color-green-high);
+    color: var(--sl-color-green-low);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    white-space: nowrap;
+    font-weight: 500;
+  }
+
+  .template-description {
+    font-size: 0.875rem;
+    color: var(--sl-color-gray-3);
+    margin-bottom: 1.5rem;
+  }
+
+  .template-footer {
+    margin-top: auto;
+  }
+
+  .template-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  .tag {
+    font-size: 0.75rem;
+    background-color: var(--sl-color-gray-6);
+    color: var(--sl-color-gray-2);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+  }
+</style>

docs/src/content/docs/templates/browser.mdx

@@ -5,7 +5,12 @@ sidebar:
   order: 2
 ---
 
-import { TemplateGrid } from "../../../components/TemplateList";
-import data from "../../config/templates.json";
+import TemplateGrid from "../../../components/TemplateGrid.astro";
+import data from "../../../content/config/templates.json";
 
-<TemplateGrid templates={data.nextjs} client:load />
+<TemplateGrid
+  templates={Object.entries(data.nextjs).map(([id, template]) => ({
+    id,
+    ...template,
+  }))}
+/>

docs/src/content/docs/templates/web-viewer.mdx

@@ -5,7 +5,12 @@ sidebar:
   order: 3
 ---
 
-import { TemplateGrid } from "../../../components/TemplateList";
-import data from "../../config/templates.json";
+import TemplateGrid from "../../../components/TemplateGrid.astro";
+import data from "../../../content/config/templates.json";
 
-<TemplateGrid templates={data.wv} client:load />
+<TemplateGrid
+  templates={Object.entries(data.wv).map(([id, template]) => ({
+    id,
+    ...template,
+  }))}
+/>