docs: landing page code block link and heading

package.json

@@ -12,6 +12,7 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
+		"@fontsource-variable/archivo": "5.0.19",
 		"@sveltejs/adapter-vercel": "4.0.5",
 		"@sveltejs/kit": "2.5.17",
 		"@sveltejs/vite-plugin-svelte": "3.1.1",

src/routes/(homepage)/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import 'virtual:uno.css';
+	import '@fontsource-variable/archivo';
+	import archivoWoff2 from '@fontsource-variable/archivo/files/archivo-latin-wght-normal.woff2?url';
+</script>
+
+<svelte:head>
+	<link rel="preload" as="font" type="font/woff2" href={archivoWoff2} crossorigin="anonymous" />
+</svelte:head>
+
+<slot />

src/routes/(homepage)/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Embed from '$lib/Embed.svelte';
+
+	import landingCode from '../landing-code.txt?raw';
+
+	const embedUrl = new URL('embed', $page.url);
+	embedUrl.searchParams.set('code', new URL('demo.txt', $page.url).toString());
+
+	$: embedUrlSearchParamsArray = Array.from(embedUrl.searchParams.entries());
+</script>
+
+<svelte:head>
+	<title>Code Block Embed</title>
+	<meta
+		name="description"
+		content="A site that displays raw text files with syntax highliting. Primarily designed to be embeded within presentations, such as with Tome."
+	/>
+</svelte:head>
+
+<div class="m3 border-rd-xl overflow-hidden bg-stone-1">
+	<div class="border-rd-xl overflow-x-hidden max-h-lg">
+		<Embed code={landingCode} wrapLines={false} />
+	</div>
+	<p class="mx5 my3 font-sans text-sm text-stone-5">
+		<span>{embedUrl.protocol}//{embedUrl.host}{embedUrl.pathname}?</span
+		>{#each embedUrlSearchParamsArray as [key, value], i}<span class="text-green-7">{key}</span
+			>=<span class="text-blue-7">{value}</span
+			>{#if embedUrlSearchParamsArray.length - 1 !== i}<span>&</span>{/if}{/each}
+	</p>
+</div>
+<div class="mx3 my12 font-sans">
+	<p class="my6 font-archivo font-medium max-w-lg text-balance text-xl">
+		Display interactive code blocks in your presentations, or wherever you can embed a webpage.
+		<!-- View this example <a class="text-blue-7 decoration-none hover:underline" href="">Tome</a>. -->
+	</p>
+</div>

src/routes/demo.txt/+server.ts

@@ -0,0 +1,10 @@
+import type { RequestHandler } from './$types';
+import landingCode from '../landing-code.txt?raw';
+
+export const GET: RequestHandler = () => {
+	return new Response(landingCode, {
+		headers: {
+			'Content-Type': 'text/plain; charset=utf-8'
+		}
+	});
+};

uno.config.ts

@@ -2,5 +2,10 @@ import { defineConfig } from 'unocss';
 import presetMini from '@unocss/preset-mini';
 
 export default defineConfig({
-	presets: [presetMini()]
+	presets: [presetMini()],
+	theme: {
+		fontFamily: {
+			archivo: 'Archivo Variable'
+		}
+	}
 });