import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { LitroPage } from '@beatzball/litro/runtime';
import { definePageData } from '@beatzball/litro';
import { getGlobalData } from 'litro:content';
import { siteConfig } from '../server/starlight.config.js';
import { starlightHead } from '../src/route-meta.js';
// Register components used in render()
import '../src/components/starlight-header.js';
import '../src/components/litro-footer.js';
import '../src/components/litro-card.js';
import '../src/components/litro-card-grid.js';
export interface SplashData {
siteTitle: string;
description: string;
nav: Array<{ label: string; href: string }>;
features: Array<{ title: string; description: string; icon?: string }>;
}
export const pageData = definePageData(async (_event) => {
const metadata = await getGlobalData();
return {
siteTitle: String(metadata.title ?? siteConfig.title),
description: String(metadata.description ?? siteConfig.description),
nav: siteConfig.nav,
features: [
{
icon: '📄',
title: 'Docs',
description: 'Structured documentation with sidebar, TOC, and prev/next navigation.',
},
{
icon: '✍️',
title: 'Blog',
description: 'Write posts in Markdown. Tags, dates, and listing pages auto-generated.',
},
{
icon: '🎨',
title: 'Theming',
description: 'Light and dark mode via CSS custom properties. Zero JavaScript required.',
},
{
icon: '⚡',
title: 'Static',
description: 'Pre-rendered to plain HTML. Deploy to any CDN with no server required.',
},
],
} satisfies SplashData;
});
export const routeMeta = {
head: starlightHead,
title: '{{projectName}}',
};
@customElement('page-home')
export class SplashPage extends LitroPage {
override render() {
const data = this.serverData as SplashData | null;
const { siteTitle = '{{projectName}}', description = '', nav = [], features = [] } = data ?? {};
return html`
${siteTitle}
${description ? html`
${description}
` : ''}
${features.map(f => html`
`)}
`;
}
}
export default SplashPage;