[PULSE-45] Integrations page overhaul — 75 guides, SEO, search & filters

[uz1mani]

Work Item

PULSE-45

Summary

• Expanded integrations from 16 to 75 with real brand logos (simple-icons), centralized data store, and detailed guide content with external/internal links
• Added search (with / keyboard shortcut), category filter chips, popular integrations row, count badge, and result count to the overview page
• Implemented per-page SEO (generateMetadata, JSON-LD HowTo schema, SSG via generateStaticParams) and fixed card height inconsistency

Changes

• lib/integrations.tsx — New centralized data store: Integration interface, 75 entries with official SVG paths, brand colors, officialUrl, seoDescription, relatedIds, and helper functions (getIntegration, getGroupedIntegrations)
• lib/integration-guides.tsx — New file: getGuideContent(slug) returning JSX guide content for all 75 integrations with CodeBlock snippets, external plugin/doc links, and internal cross-links
• app/integrations/[slug]/page.tsx — New dynamic route replacing 16 static directories; generateStaticParams for SSG, generateMetadata for unique SEO per page, HowTo JSON-LD structured data
• components/IntegrationGuide.tsx — New server component: shared guide layout with hero, prose content area, "Related Integrations" cross-linking section, and back/CTA navigation
• components/CodeBlock.tsx — New server component: VS-Code-style code snippet renderer
• app/integrations/page.tsx — Rewrote overview page:
  • Search input with / keyboard shortcut and clear button
  • Category filter chips (All + 7 categories) with active state
  • Pinned "Popular" row (8 featured integrations) shown when unfiltered
  • Integration count badge ("75+") next to heading
  • Dynamic result count shown when searching/filtering
  • "Missing something?" card on zero results + persistent CTA at bottom
  • Fixed card height inconsistency (added h-full to Link elements)
• Deleted 16 individual integration directories (angular, svelte, nuxt, astro, remix, gatsby, hugo, shopify, webflow, squarespace, wix, ghost, etc.) — replaced by [slug] dynamic route

Test Plan

[ ] Navigate to /integrations — verify count badge, popular row, category chips, and all 75 cards render
[ ] Search for "react" — verify filtered results and result count message
[ ] Search for "xyznonexistent" — verify "Missing something?" card appears
[ ] Click a category chip (e.g. "CMS") — verify only CMS integrations shown, chip highlighted
[ ] Press "/" on keyboard — verify search input receives focus
[ ] Open an integration guide (e.g. /integrations/nextjs) — verify logo, guide content, external links, related integrations section
[ ] Inspect page source of a guide page — verify meta title, description, OG tags, canonical URL, and JSON-LD HowTo script
[ ] Check last row of integration cards — verify all cards have consistent height
[ ] Verify all 75 slugs resolve (no 404s) by checking generateStaticParams output or spot-checking several

[greptile-apps]

Greptile Overview

Greptile Summary

• Replaces multiple hard-coded integration guide routes with a single dynamic app/integrations/[slug] page that statically generates all guides and emits per-page SEO + HowTo JSON-LD.
• Introduces a centralized integration registry (lib/integrations.tsx) and a large JSX guide-content registry (lib/integration-guides.tsx) to support ~75 integrations.
• Reworks /integrations into a searchable, filterable overview with category chips, a pinned Popular row, result counts, and consistent card heights.
• Adds shared UI components (IntegrationGuide, CodeBlock) used by the new guide pages.
• Adds new icon assets and (unexpectedly) a generated service worker bundle under public/.

Confidence Score: 2/5

• This PR has merge-blocking runtime and deployment issues that should be fixed before merging.
• app/integrations/[slug]/page.tsx incorrectly treats params as a Promise and awaits it, which will break routing at runtime. Additionally, public/sw 2.js appears to be a generated Workbox service worker artifact with build-specific precache revisions; committing it will go stale and can cause incorrect caching after subsequent builds.
• app/integrations/[slug]/page.tsx, public/sw 2.js

Important Files Changed

Filename	Overview
app/integrations/[slug]/page.tsx	Adds dynamic integration guide route with SSG + metadata + JSON-LD, but params is incorrectly typed as a Promise and awaited, which will break runtime routing.
app/integrations/nextjs/page.tsx	Deletes legacy static Next.js integration page in favor of the new dynamic [slug] route.
app/integrations/page.tsx	Overhauls integrations overview with search, category chips, popular row, and grouped cards; no blocking issues found in the new filtering/render logic.
app/integrations/react/page.tsx	Deletes legacy static React integration page replaced by dynamic [slug] guide.
app/integrations/vue/page.tsx	Deletes legacy static Vue integration page replaced by dynamic [slug] guide.
app/integrations/wordpress/page.tsx	Deletes legacy static WordPress integration page replaced by dynamic [slug] guide.
components/CodeBlock.tsx	Adds a simple reusable code block component for guide snippets; straightforward server component rendering preformatted text.
components/IntegrationGuide.tsx	Adds shared guide page layout with hero/header and related integrations section; uses registry data for cross-linking.
lib/integration-guides.tsx	Adds JSX guide content registry for all integrations; large content-only file, no obvious runtime issues found in the export pattern.
lib/integrations.tsx	Adds centralized integration metadata (75 entries) plus helper lookups/grouping; appears consistent and used by overview + guide pages.
public/Icon Padding left & right 192x192.png	Adds a new 192x192 icon PNG asset.
public/Icon Padding left & right 512x512.png	Adds a new 512x512 icon PNG asset.
public/sw 2.js	Adds a minified generated service worker bundle with build-specific precache entries; should not be committed as source.

Sequence Diagram

sequenceDiagram
  participant U as User
  participant IP as /integrations (client page)
  participant IR as integrations registry
  participant GP as /integrations/[slug] (server page)
  participant GG as guide registry

  U->>IP: Visit /integrations
  IP->>IR: Load integrations + category labels/order
  IP->>IP: Filter by query/category
  IP-->>U: Render grouped cards + Popular row

  U->>GP: Click /integrations/{slug}
  GP->>IR: getIntegration(slug)
  alt integration missing
    GP-->>U: 404 (notFound)
  else integration found
    GP->>GG: getGuideContent(slug)
    alt guide missing
      GP-->>U: 404 (notFound)
    else guide found
      GP-->>U: Render IntegrationGuide + JSON-LD
    end
  end

Loading

[greptile-apps]

_{13 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Incorrect params typing

In the App Router, params is a plain object, not a Promise. Typing it as params: Promise<{ slug: string }> and then await params will break at runtime when Next passes { slug: '...' }. Update PageProps to params: { slug: string } and remove the await usages in both generateMetadata and the page component.

Prompt To Fix With AI

This is a comment left during a code review.
Path: app/integrations/[slug]/page.tsx
Line: 26:28

Comment:
**Incorrect params typing**

In the App Router, `params` is a plain object, not a `Promise`. Typing it as `params: Promise<{ slug: string }>` and then `await params` will break at runtime when Next passes `{ slug: '...' }`. Update `PageProps` to `params: { slug: string }` and remove the `await` usages in both `generateMetadata` and the page component.

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Built artifact committed

public/sw 2.js looks like a generated Workbox service worker bundle containing hashed /_next/static/... entries and build-specific revisions. Committing this will go stale on the next build and can cause clients to cache incorrect assets. This file should be generated during the build/deploy process (or removed from source control) rather than checked in.

Prompt To Fix With AI

This is a comment left during a code review.
Path: public/sw 2.js
Line: 1:1

Comment:
**Built artifact committed**

`public/sw 2.js` looks like a generated Workbox service worker bundle containing hashed `/_next/static/...` entries and build-specific revisions. Committing this will go stale on the next build and can cause clients to cache incorrect assets. This file should be generated during the build/deploy process (or removed from source control) rather than checked in.

How can I resolve this? If you propose a fix, please make it concise.