From e3f4a8efa6f606255499353e232bab5424d0681f Mon Sep 17 00:00:00 2001
From: Thor Engelstad <hello@vhq.co>
Date: Sat, 30 May 2026 12:50:14 +0200
Subject: [PATCH] Cap CDN TTL on catalog count pages with ISR revalidation

Static pages with no revalidation get s-maxage=31536000 (1 year),
so a CDN can keep serving year-old skill/platform counts after a
deploy that updates lib/skills.ts. Add export const revalidate = 3600
to /, /skills, and /official so the edge TTL caps at one hour.

To allow the home page (which renders STATS) to use route segment
config cleanly, drop "use client" and move the featured-card hover
state to a CSS :hover rule. No other client behavior was used.

Co-authored-by: multica-agent <github@multica.ai>
---
 app/globals.css       |  3 +++
 app/official/page.tsx |  3 +++
 app/page.tsx          | 10 ++++++----
 app/skills/page.tsx   |  5 +++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index e8c40eb..869df42 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -136,6 +136,9 @@ summary:focus-visible {
   .ss-stats > .ss-stat:last-child { border-bottom: none; }
 }
 
+/* Home featured cards: CSS hover (keeps the page a Server Component). */
+.ss-featured-card:hover { background: #0a0a0a; }
+
 /* ---- Inner-page responsive layout ----
    These grids are set via inline styles, so the breakpoint overrides
    need !important to win over the element's inline grid-template-columns. */
diff --git a/app/official/page.tsx b/app/official/page.tsx
index 5444691..a3b00e7 100644
--- a/app/official/page.tsx
+++ b/app/official/page.tsx
@@ -7,6 +7,9 @@ export const metadata: Metadata = {
     "Official agent skills from the companies that build the technology — the makers teaching you how to use their product. Indexed from skills.sh.",
 }
 
+// Match /skills: cap edge TTL so maker/skill counts refresh within an hour of a deploy.
+export const revalidate = 3600
+
 const mono = "var(--font-jetbrains-mono), monospace"
 
 export default function OfficialPage() {
diff --git a/app/page.tsx b/app/page.tsx
index 87fa643..c9a7941 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,12 @@
-"use client"
 import Link from "next/link"
 import { skills, getFeaturedSkills, STATS } from "@/lib/skills"
 import { priceDisplay } from "@/lib/x402"
 
+// Stats come from lib/skills.ts (bundled at build). Defaulting to fully-static
+// emits s-maxage=31536000, so a CDN can serve year-old counts after a deploy.
+// ISR caps the edge TTL at one hour and regenerates against the deployed bundle.
+export const revalidate = 3600
+
 export default function HomePage() {
   const featured = getFeaturedSkills()
 
@@ -107,7 +111,7 @@ export default function HomePage() {
           gap: "0",
         }}>
           {featured.map((skill, i) => (
-            <Link key={skill.id} href={`/skills/${skill.slug}`} style={{
+            <Link key={skill.id} href={`/skills/${skill.slug}`} className="ss-featured-card" style={{
               display: "block",
               padding: "32px",
               borderRight: "1px solid #222222",
@@ -115,8 +119,6 @@ export default function HomePage() {
               borderLeft: i === 0 ? "1px solid #222222" : "none",
               transition: "background 0.1s",
             }}
-            onMouseEnter={e => (e.currentTarget.style.background = "#0a0a0a")}
-            onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
             >
               <div style={{
                 fontFamily: "monospace",
diff --git a/app/skills/page.tsx b/app/skills/page.tsx
index dc42e6b..ec977a6 100644
--- a/app/skills/page.tsx
+++ b/app/skills/page.tsx
@@ -8,6 +8,11 @@ export const metadata: Metadata = {
   description: "Browse and filter AI agent skills for Claude, OpenClaw, NemoClaw, Antigravity, and any agent runtime.",
 }
 
+// Counts come from lib/skills.ts (bundled at build). Defaulting to fully-static
+// emits s-maxage=31536000, so a CDN can serve year-old counts after a deploy.
+// ISR caps the edge TTL at one hour and regenerates against the deployed bundle.
+export const revalidate = 3600
+
 export default function SkillsPage() {
   return (
     <div style={{ backgroundColor: "#000000", minHeight: "100vh" }}>