feat: enhance integrations overview with search functionality and related integrations display

2026-02-07 00:56:20 +01:00
parent 738c8e24d6
commit a074ba7dd9
22 changed files with 3638 additions and 1090 deletions
--- a/app/integrations/[slug]/page.tsx
+++ b/app/integrations/[slug]/page.tsx
@@ -0,0 +1,111 @@
+/**
+ * @file Dynamic route for individual integration guide pages.
+ *
+ * Handles all 50 integration routes via [slug].
+ * Exports generateStaticParams for static generation and
+ * generateMetadata for per-page SEO (title, description, OG, JSON-LD).
+ */
+
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { integrations, getIntegration } from '@/lib/integrations'
+import { getGuideContent } from '@/lib/integration-guides'
+import { IntegrationGuide } from '@/components/IntegrationGuide'
+
+// * ─── Static Params ───────────────────────────────────────────────
+export function generateStaticParams() {
+  return integrations.map((i) => ({ slug: i.id }))
+}
+
+// * ─── SEO Metadata ────────────────────────────────────────────────
+interface PageProps {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params
+  const integration = getIntegration(slug)
+  if (!integration) return {}
+
+  const title = `How to Add Pulse Analytics to ${integration.name} | Pulse by Ciphera`
+  const description = integration.seoDescription
+  const url = `https://pulse.ciphera.net/integrations/${integration.id}`
+
+  return {
+    title,
+    description,
+    keywords: [
+      `${integration.name} analytics`,
+      `${integration.name} Pulse`,
+      'privacy-first analytics',
+      'website analytics',
+      'Ciphera Pulse',
+      integration.name,
+    ],
+    alternates: { canonical: url },
+    openGraph: {
+      title,
+      description,
+      url,
+      siteName: 'Pulse by Ciphera',
+      type: 'article',
+    },
+    twitter: {
+      card: 'summary',
+      title,
+      description,
+    },
+  }
+}
+
+// * ─── Page Component ──────────────────────────────────────────────
+export default async function IntegrationPage({ params }: PageProps) {
+  const { slug } = await params
+  const integration = getIntegration(slug)
+  if (!integration) return notFound()
+
+  const content = getGuideContent(slug)
+  if (!content) return notFound()
+
+  // * HowTo JSON-LD for rich search snippets
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: `How to Add Pulse Analytics to ${integration.name}`,
+    description: integration.seoDescription,
+    step: [
+      {
+        '@type': 'HowToStep',
+        name: `Open your ${integration.name} project`,
+        text: `Navigate to your ${integration.name} project and locate the file where you manage the HTML head or layout.`,
+      },
+      {
+        '@type': 'HowToStep',
+        name: 'Add the Pulse tracking script',
+        text: 'Insert the Pulse analytics script tag with your data-domain attribute into the head section of your page.',
+      },
+      {
+        '@type': 'HowToStep',
+        name: 'Deploy and verify',
+        text: 'Deploy your changes and visit your Pulse dashboard to verify that page views are being recorded.',
+      },
+    ],
+    tool: {
+      '@type': 'HowToTool',
+      name: 'Pulse by Ciphera',
+      url: 'https://pulse.ciphera.net',
+    },
+  }
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <IntegrationGuide integration={integration}>
+        {content}
+      </IntegrationGuide>
+    </>
+  )
+}