docs: improve component pages

scripts/create.js

@@ -20,17 +20,15 @@ const readTemplate = (filename) => readFile(join(import.meta.dirname, 'templates
 const getPageData = (component) => {
 	return svelte`
 <script lang="ts">
-	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import ComponentExamples from '$docs/components/ComponentExamples.svelte';
+	import ComponentPage from '$docs/components/ComponentPage.svelte';
 	import BasicExample from './BasicExample.svelte';
 	import basicExample from './BasicExample.svelte?raw';
-
-	const examples = [
-		//
-		{ title: 'Basic', code: basicExample, component: BasicExample },
-	];
 </script>
 
-<ExampleLayout name="${component}" {examples} />
+<ComponentPage name="${component}">
+  <ComponentExamples examples={[{ title: 'Basic', code: basicExample, component: BasicExample }]}/>
+</ComponentPage
 `;
 };
 

src/docs/components/ComponentDescription.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Text } from '@immich/ui';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	const { children }: Props = $props();
+</script>
+
+<Text color="muted">{@render children()}</Text>

src/docs/components/ExampleCard.svelte → src/docs/components/ComponentExampleCard.svelte

@@ -5,7 +5,7 @@
 	import { HighlightSvelte, LineNumbers } from 'svelte-highlight';
 	import atomOneDark from 'svelte-highlight/styles/atom-one-dark';
 
-	const { theme, title, component: Component, code }: ExampleCardProps = $props();
+	const { title, component: Component, code }: ExampleCardProps = $props();
 
 	let viewMode = $state<'code' | 'preview'>('preview');
 
@@ -37,7 +37,7 @@
 	</CardHeader>
 	<CardBody class={viewMode === 'code' ? 'p-0 pt-4' : ''}>
 		{#if viewMode === 'preview'}
-			<Component {theme} />
+			<Component />
 		{:else}
 			<HighlightSvelte code={code.trim().replaceAll(/\t/gm, '  ')} let:highlighted>
 				<LineNumbers {highlighted} hideBorder wrapLines />

src/docs/components/ComponentExamples.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ExampleCard from '$docs/components/ComponentExampleCard.svelte';
+	import type { ExampleItem } from '$docs/constants.js';
+	import { Stack } from '@immich/ui';
+
+	type Props = {
+		examples: ExampleItem[];
+	};
+
+	const { examples }: Props = $props();
+</script>
+
+<Stack gap={4} class="mt-4">
+	{#each examples as { title, code, component }}
+		<ExampleCard {title} {code} {component} />
+	{/each}
+</Stack>

src/docs/components/ComponentFieldCard.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import ComponentTipCard from '$docs/components/ComponentTipCard.svelte';
+	import { asComponentHref } from '$docs/utilities.js';
+	import { Link, Text } from '@immich/ui';
+</script>
+
+<ComponentTipCard>
+	<Text
+		>This component can be used with the <Link href={asComponentHref('Field')}>Field</Link> component
+		to build forms</Text
+	>
+</ComponentTipCard>

src/docs/components/ExampleLayout.svelte → src/docs/components/ComponentPage.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
-	import Examples from '$docs/components/Examples.svelte';
-	import { Theme, type ExampleItem } from '$docs/constants.js';
-	import { Heading, Scrollable, Stack } from '@immich/ui';
+	import { Heading, Scrollable } from '@immich/ui';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
 		name: string;
-		examples: ExampleItem[];
 		children?: Snippet;
 	};
 
-	const { name, examples, children }: Props = $props();
+	const { name, children }: Props = $props();
 </script>
 
 <div class="flex h-full flex-col">
@@ -25,13 +22,10 @@
 		</div>
 	</nav>
 
-	<Scrollable class="mt-4 flex max-w-screen-md flex-col gap-2 p-4">
-		<Stack>
+	<Scrollable>
+		<div class="flex max-w-screen-md flex-col p-4">
 			<Heading size="large">{name}</Heading>
 			{@render children?.()}
-		</Stack>
-		<Stack gap={4}>
-			<Examples theme={Theme.Dark} {examples} />
-		</Stack>
+		</div>
 	</Scrollable>
 </div>

src/docs/components/ComponentTipCard.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Alert } from '@immich/ui';
+	import { mdiLightbulbOnOutline } from '@mdi/js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	const { children }: Props = $props();
+</script>
+
+<Alert color="success" class="mt-4" title="Tip" icon={mdiLightbulbOnOutline}>
+	{@render children()}
+</Alert>

src/docs/components/Navbar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { Logo } from '@immich/ui';
+	import { Logo, Theme } from '@immich/ui';
 	import type { Snippet } from 'svelte';
-	import { Theme } from '$docs/constants.js';
 
 	type Props = {
 		theme?: Theme;
@@ -13,7 +12,7 @@
 
 <nav class="{theme} flex items-center justify-between gap-2 p-2">
 	<a href="/" class="flex gap-2 text-4xl">
-		<Logo variant="inline" {theme} />
+		<Logo variant="inline" />
 	</a>
 	{@render children?.()}
 </nav>

src/docs/constants.ts

@@ -32,18 +32,13 @@ export enum DisplayOption {
 	Dark = 'dark',
 }
 
-export enum Theme {
-	Light = 'light',
-	Dark = 'dark',
-}
-
 export type ExampleItem = {
 	title: string;
 	code: string;
-	component: Component | Component<{ theme: Theme }>;
+	component: Component;
 };
 
-export type ExampleCardProps = ExampleItem & { theme: Theme };
+export type ExampleCardProps = ExampleItem;
 
 export const componentGroups = [
 	{