import { html, css, repeat } from '@microsoft/fast-element';
import { LitroPage } from '@beatzball/litro/adapter/fast/page';
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 — namespace imports prevent Rollup tree-shaking.
import * as _starlightHeader from '../src/components/starlight-header.js';
import * as _litroCard from '../src/components/litro-card.js';
import * as _litroCardGrid from '../src/components/litro-card-grid.js';
import * as _litroFooter from '../src/components/litro-footer.js';
globalThis.__litro_ce__ = { ...(globalThis as any).__litro_ce__, _starlightHeader, _litroCard, _litroCardGrid, _litroFooter };
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: '\u{1F4C4}',
title: 'Docs',
description: 'Structured documentation with sidebar, TOC, and prev/next navigation.',
},
{
icon: '\u270D\uFE0F',
title: 'Blog',
description: 'Write posts in Markdown. Tags, dates, and listing pages auto-generated.',
},
{
icon: '\u{1F3A8}',
title: 'Theming',
description: 'Light and dark mode via CSS custom properties. Zero JavaScript required.',
},
{
icon: '\u26A1',
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}}',
};
export class SplashPage extends LitroPage {}
const template = html`
${(x) => {
const data = x.serverData as SplashData | null;
const siteTitle = data?.siteTitle ?? '{{projectName}}';
const description = data?.description ?? '';
const nav = data?.nav ?? [];
const features = data?.features ?? [];
return html`
${() => siteTitle}
${() => description ? html`
${description}
` : ''}
${repeat(() => features, html`
`)}
`;
}}
`;
const styles = css``;
SplashPage.define({ name: 'page-home', template, styles });
export default SplashPage;