Add /agent-skills-by-the-numbers, a dated compilation of the public agent skills counts

analytics/posthog/events.ts

@@ -79,6 +79,10 @@ type NonTeamEventPropertiesMap = {
       | "cowork_skills_hero"
       | "cowork_skills_inline"
       | "cowork_skills_closing"
+      | "agent_skills_by_the_numbers_header"
+      | "agent_skills_by_the_numbers_hero"
+      | "agent_skills_by_the_numbers_inline"
+      | "agent_skills_by_the_numbers_closing"
       | "manage_ai_skills_header"
       | "manage_ai_skills_hero"
       | "manage_ai_skills_inline"

app/agent-skills-by-the-numbers/layout.tsx

@@ -0,0 +1,11 @@
+import { ResourceShell } from "@/components/resources/resource-chrome"
+
+export default function AgentSkillsByTheNumbersLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <ResourceShell location="agent_skills_by_the_numbers_header">
+      {children}
+    </ResourceShell>
+  )
+}

app/agent-skills-by-the-numbers/opengraph-image.tsx

@@ -0,0 +1,10 @@
+import { createSocialImageResponse, OG_SIZE } from "@/lib/og/template"
+import { agentSkillsByTheNumbers } from "@/lib/seo/agent-skills-by-the-numbers"
+
+export const alt = agentSkillsByTheNumbers.ogAlt
+export const size = OG_SIZE
+export const contentType = "image/png"
+
+export default function OpenGraphImage() {
+  return createSocialImageResponse(size, agentSkillsByTheNumbers.og)
+}

app/agent-skills-by-the-numbers/page.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next"
+
+import { AgentSkillsByTheNumbersPage } from "@/components/agent-skills-by-the-numbers/agent-skills-by-the-numbers-page"
+import { markdownTwinAlternates } from "@/lib/markdown/twins"
+import { OG_SIZE, TWITTER_SIZE } from "@/lib/og/template"
+import { agentSkillsByTheNumbers } from "@/lib/seo/agent-skills-by-the-numbers"
+import { siteConfig } from "@/lib/site"
+
+const socialTitle = "Agent skills by the numbers"
+
+export const metadata: Metadata = {
+  title: { absolute: agentSkillsByTheNumbers.seoTitle },
+  description: agentSkillsByTheNumbers.description,
+  alternates: markdownTwinAlternates(agentSkillsByTheNumbers.path),
+  openGraph: {
+    type: "article",
+    url: agentSkillsByTheNumbers.path,
+    title: socialTitle,
+    description: agentSkillsByTheNumbers.description,
+    siteName: siteConfig.name,
+    locale: siteConfig.locale,
+    publishedTime: agentSkillsByTheNumbers.publishedAt,
+    modifiedTime: agentSkillsByTheNumbers.modifiedAt,
+    images: [
+      {
+        url: `${agentSkillsByTheNumbers.path}/opengraph-image`,
+        width: OG_SIZE.width,
+        height: OG_SIZE.height,
+        alt: agentSkillsByTheNumbers.ogAlt,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: socialTitle,
+    description: agentSkillsByTheNumbers.description,
+    images: [
+      {
+        url: `${agentSkillsByTheNumbers.path}/twitter-image`,
+        width: TWITTER_SIZE.width,
+        height: TWITTER_SIZE.height,
+        alt: agentSkillsByTheNumbers.ogAlt,
+      },
+    ],
+  },
+}
+
+export default function Page() {
+  return <AgentSkillsByTheNumbersPage entry={agentSkillsByTheNumbers} />
+}

app/agent-skills-by-the-numbers/twitter-image.tsx

@@ -0,0 +1,10 @@
+import { createSocialImageResponse, TWITTER_SIZE } from "@/lib/og/template"
+import { agentSkillsByTheNumbers } from "@/lib/seo/agent-skills-by-the-numbers"
+
+export const alt = agentSkillsByTheNumbers.ogAlt
+export const size = TWITTER_SIZE
+export const contentType = "image/png"
+
+export default function TwitterImage() {
+  return createSocialImageResponse(size, agentSkillsByTheNumbers.og)
+}