moved to static api route instead

Author: tg339

apps/framework-docs-v2/package.json

@@ -12,6 +12,7 @@
     "test:snippets": "tsx scripts/test-snippets.ts"
   },
   "dependencies": {
+    "@iarna/toml": "^2.2.5",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
@@ -39,7 +40,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "@iarna/toml": "^2.2.5",
     "gray-matter": "^4.0.3",
     "html-to-text": "^9.0.5",
     "motion": "^12.23.12",

apps/framework-docs-v2/src/app/api/templates/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+import { getAllItems } from "@/lib/templates";
+
+export const dynamic = "force-static";
+
+export async function GET() {
+  try {
+    const items = getAllItems();
+
+    return NextResponse.json(items, {
+      headers: {
+        "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
+      },
+    });
+  } catch (error) {
+    console.error("Failed to generate templates data:", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    );
+  }
+}

apps/framework-docs-v2/src/components/mdx/templates-grid-server.tsx

@@ -1,7 +1,49 @@
-import { TemplateGrid } from "@/components/mdx/template-grid";
-import { getAllItems } from "@/lib/templates";
+"use client";
+
+import * as React from "react";
+import { TemplateGrid } from "./template-grid";
+import type { ItemMetadata } from "@/lib/template-types";
+
+export function TemplatesGridServer() {
+  const [items, setItems] = React.useState<ItemMetadata[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    fetch("/api/templates")
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("Failed to fetch templates");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        setItems(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Error fetching templates:", err);
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <p>Loading templates...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <p className="text-lg font-medium mb-2">Error loading templates</p>
+        <p className="text-sm">{error}</p>
+      </div>
+    );
+  }
 
-export async function TemplatesGridServer() {
-  const items = getAllItems();
   return <TemplateGrid items={items} />;
 }

apps/framework-docs-v2/src/lib/templates.ts

@@ -164,7 +164,7 @@ export function getAllTemplates(): TemplateMetadata[] {
 
     try {
       const configContent = fs.readFileSync(configPath, "utf-8");
-      const config = parse(configContent) as TemplateConfig;
+      const config = parse(configContent) as unknown as TemplateConfig;
 
       // Skip if visible is explicitly false
       if (config.visible === false) {
@@ -186,7 +186,7 @@ export function getAllTemplates(): TemplateMetadata[] {
         slug: templateName,
         language: config.language,
         description: config.description,
-        visible: config.visible !== false,
+        visible: config.visible ?? true,
         category,
         frameworks,
         features,