80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import Script from 'next/script';
|
|
import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
|
|
import { HeroContainer } from '@/app/(home)/_sections/hero';
|
|
import { Testimonials } from '@/app/(home)/_sections/testimonials';
|
|
import { GuideCard } from '@/components/guide-card';
|
|
import { Section, SectionHeader } from '@/components/section';
|
|
import { url } from '@/lib/layout.shared';
|
|
import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
|
|
import { guideSource } from '@/lib/source';
|
|
|
|
export const metadata: Metadata = getPageMetadata({
|
|
title: 'Implementation Guides',
|
|
description:
|
|
'Step-by-step tutorials for adding privacy-first analytics to your app with OpenPanel.',
|
|
url: url('/guides'),
|
|
image: getOgImageUrl('/guides'),
|
|
});
|
|
|
|
export default async function Page() {
|
|
const guides = (await guideSource.getPages()).sort(
|
|
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
|
);
|
|
|
|
// Create ItemList schema for SEO
|
|
const itemListSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'ItemList',
|
|
name: 'OpenPanel Implementation Guides',
|
|
description: 'Step-by-step tutorials for adding analytics to your app',
|
|
itemListElement: guides.map((guide, index) => {
|
|
const slug = guide.url.replace(/^\/guides\//, '').replace(/\/$/, '');
|
|
return {
|
|
'@type': 'ListItem',
|
|
position: index + 1,
|
|
name: guide.data.title,
|
|
url: url(guide.url),
|
|
};
|
|
}),
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<HeroContainer className="-mb-32">
|
|
<SectionHeader
|
|
align="center"
|
|
as="h1"
|
|
className="flex-1"
|
|
description="Step-by-step tutorials for adding privacy-first analytics to your app with OpenPanel."
|
|
title="Implementation Guides"
|
|
/>
|
|
</HeroContainer>
|
|
|
|
<Script
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(itemListSchema) }}
|
|
id="guides-itemlist-schema"
|
|
strategy="beforeInteractive"
|
|
type="application/ld+json"
|
|
/>
|
|
|
|
<Section className="container grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3">
|
|
{guides.map((item) => (
|
|
<GuideCard
|
|
cover={item.data.cover}
|
|
date={item.data.date}
|
|
difficulty={item.data.difficulty}
|
|
key={item.url}
|
|
team={item.data.team}
|
|
timeToComplete={item.data.timeToComplete}
|
|
title={item.data.title}
|
|
url={item.url}
|
|
/>
|
|
))}
|
|
</Section>
|
|
<Testimonials />
|
|
<CtaBanner />
|
|
</div>
|
|
);
|
|
}
|