diff --git a/docs/package.json b/docs/package.json index eb2a6a627..b806f865b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -124,11 +124,15 @@ "@codemirror/lang-html": "^6.4.11", "@codemirror/lang-javascript": "^6.2.4", "@codemirror/state": "^6.5.4", + "@fontsource/inter": "^5.2.8", + "@resvg/resvg-js": "^2.6.2", "@stackblitz/sdk": "^1.11.0", "@uiw/codemirror-theme-github": "^4.25.4", "@webcontainer/api": "^1.6.1", "ansi_up": "^6.0.6", "codemirror": "^6.0.2", - "flexsearch": "^0.8.212" + "flexsearch": "^0.8.212", + "satori": "^0.19.2", + "satori-html": "^0.3.2" } } diff --git a/docs/src/lib/assets/favicon.svg b/docs/src/lib/assets/favicon.svg deleted file mode 100644 index cc5dc66a3..000000000 --- a/docs/src/lib/assets/favicon.svg +++ /dev/null @@ -1 +0,0 @@ -svelte-logo \ No newline at end of file diff --git a/docs/src/routes/+layout.svelte b/docs/src/routes/+layout.svelte index 363eb45f4..edbec76be 100644 --- a/docs/src/routes/+layout.svelte +++ b/docs/src/routes/+layout.svelte @@ -7,7 +7,6 @@ import { dev } from '$app/environment'; import { page } from '$app/state'; import { preparePageTransition } from '$lib/page-transitions'; - import '@fontsource-variable/inter'; import '../app.css'; @@ -55,8 +54,60 @@ // View transition for navigation preparePageTransition(); + + const defaultDescription = + 'Composable Svelte chart components to build a large variety of visualizations'; + + let pageTitle = $derived( + page.data.metadata?.name ? `${page.data.metadata.name} | LayerChart` : 'LayerChart' + ); + let pageDescription = $derived(page.data.metadata?.description ?? defaultDescription); + // TODO: Switch back to dynamic satori-based OG image once Cloudflare compatibility is resolved + // let ogImageUrl = $derived( + // `${page.url.origin}/og?title=${encodeURIComponent(page.data.metadata?.name ?? 'LayerChart')}${page.data.metadata?.description ? `&description=${encodeURIComponent(page.data.metadata.description)}` : `&description=${encodeURIComponent(defaultDescription)}`}${page.data.metadata?.category ? `&component=${encodeURIComponent(page.data.metadata.category)}` : ''}` + // ); + let ogImageUrl = $derived(`${page.url.origin}/images/og-image.png`); + + {pageTitle} + + + + + + + + + + + + + + + + + + + + + + {#if page.url.origin.includes('https')} + + + + {/if} + +
diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte index 4abfeba8d..46330e486 100644 --- a/docs/src/routes/+page.svelte +++ b/docs/src/routes/+page.svelte @@ -134,6 +134,7 @@ ]; +