92 lines
4.2 KiB
Plaintext
92 lines
4.2 KiB
Plaintext
---
|
||
description: Guide for creating and editing feature landing pages on the public site
|
||
globs: apps/public/content/features/**,apps/public/src/app/(content)/features/**,apps/public/src/lib/features.ts
|
||
alwaysApply: false
|
||
---
|
||
|
||
# Feature Landing Pages
|
||
|
||
Feature pages live at `/features/[slug]` and follow the same JSON-driven pattern as the compare pages (`/compare/[slug]`).
|
||
|
||
## Architecture
|
||
|
||
- **Content**: JSON files in `apps/public/content/features/[slug].json`
|
||
- **Types & loaders**: `apps/public/src/lib/features.ts` (interfaces + `getFeatureData`, `getAllFeatureSlugs`, `loadFeatureSourceSync`)
|
||
- **Source export**: `featureSource` in `apps/public/src/lib/source.ts` (sync-loaded at build time)
|
||
- **Dynamic route**: `apps/public/src/app/(content)/features/[slug]/page.tsx`
|
||
- **Index page**: `apps/public/src/app/(content)/features/page.tsx`
|
||
- **Sitemap**: Feature pages are registered in `apps/public/src/app/sitemap.ts`
|
||
|
||
## Adding a new feature page
|
||
|
||
1. Create `apps/public/content/features/[slug].json` matching the `FeatureData` interface
|
||
2. That's it — the dynamic route, index page, sitemap, and source all pick it up automatically
|
||
|
||
## JSON schema (FeatureData)
|
||
|
||
Every JSON file must have these fields:
|
||
|
||
```
|
||
slug - URL slug (e.g. "event-tracking")
|
||
short_name - Short internal name for nav, footer, links (e.g. "Event tracking", "Funnels")
|
||
seo.title - Page title for SEO
|
||
seo.description - Meta description
|
||
seo.keywords - Optional keyword array
|
||
hero.heading - H1 text
|
||
hero.subheading - Subtitle under H1
|
||
hero.badges - Array of short feature-specific perks (NOT generic OpenPanel perks)
|
||
definition.title - Optional section heading (e.g. "What is event tracking?")
|
||
definition.text - Markdown string explaining the feature in depth (supports bold, lists, code, links)
|
||
capabilities_section.title - Section heading for capabilities
|
||
capabilities_section.intro - Optional intro text
|
||
capabilities - Array of { title, description, icon? }
|
||
screenshots - Array of { src?, srcDark?, srcLight?, alt, caption? } (up to 3 shown between sections; use `src` for a single image or `srcDark`+`srcLight` for theme variants)
|
||
how_it_works - Optional { title, intro?, steps: [{ title, description }] }
|
||
use_cases - { title, intro?, items: [{ title, description }] }
|
||
related_features - Array of { slug, title, description? } linking to other feature pages
|
||
faqs - { title, intro?, items: [{ question, answer }] }
|
||
cta - { label, href }
|
||
```
|
||
|
||
## Content guidelines
|
||
|
||
- **short_name**: Use for footer, nav, and any compact link list. Keep it to 1–3 words (e.g. "Event tracking", "Funnels"). The full `hero.heading` stays for the page H1 and SEO.
|
||
- **Badges**: Should describe what *this feature* does, not generic OpenPanel selling points
|
||
- **Definition**: Rich markdown — use bold, bullet lists, inline code for event names. This is the main SEO content block
|
||
- **Related features**: Only link to feature pages that already exist (to avoid 404s)
|
||
- **Screenshots**: Feature-specific screenshots go in `/public/features/` (e.g. `feature-events-list.webp`). Generic screenshots are in `/public/screenshots/` with dark/light .webp variants. Use `src` for single images or `srcDark`+`srcLight` for theme pairs
|
||
|
||
## Section components
|
||
|
||
Located in `features/[slug]/_components/`:
|
||
|
||
| Component | Reuses |
|
||
|-----------|--------|
|
||
| `feature-hero.tsx` | `HeroContainer`, `SectionHeader`, `GetStartedButton`, `Perks` |
|
||
| `what-it-is.tsx` | `Section`, `SectionHeader`, `react-markdown` |
|
||
| `capabilities.tsx` | `FeatureCard`, `Section`, `SectionHeader` |
|
||
| `how-it-works.tsx` | `Section`, `SectionHeader` |
|
||
| `feature-use-cases.tsx` | `Section`, `SectionHeader` |
|
||
| `related-features.tsx` | `FeatureCardContainer`, `Section`, `SectionHeader` |
|
||
| `feature-faq.tsx` | `Faqs`, `FaqItem`, `Section`, `SectionHeader`, JSON-LD schema |
|
||
|
||
The page also reuses `WindowImage` and `CtaBanner` directly.
|
||
|
||
## Planned feature slugs
|
||
|
||
From the roadmap (create JSON files as needed):
|
||
|
||
- `event-tracking` ✅
|
||
- `funnels` ✅
|
||
- `session-tracking` ✅
|
||
- `retention` ✅
|
||
- `identify-users` ✅
|
||
- `revenue-tracking` ✅
|
||
- `data-visualization` ✅
|
||
- `product-analytics`
|
||
- `web-analytics` ✅
|
||
- `conversion` ✅
|
||
- `integrations` ✅
|
||
- `notifications` ✅
|
||
- `share-and-collaborate` ✅
|