From 6311297b230114356c97d8a5d40e0316905a87d7 Mon Sep 17 00:00:00 2001
From: Alexander Liu <a@alexanderliu.com>
Date: Mon, 24 Jun 2024 18:25:47 -0400
Subject: [PATCH] docs: landing page code block link and heading

---
 package.json                         |  1 +
 pnpm-lock.yaml                       |  8 ++++++
 src/routes/(homepage)/+layout.svelte | 11 +++++++++
 src/routes/(homepage)/+page.svelte   | 37 ++++++++++++++++++++++++++++
 src/routes/+page.svelte              | 26 -------------------
 src/routes/demo.txt/+server.ts       | 10 ++++++++
 uno.config.ts                        |  7 +++++-
 7 files changed, 73 insertions(+), 27 deletions(-)
 create mode 100644 src/routes/(homepage)/+layout.svelte
 create mode 100644 src/routes/(homepage)/+page.svelte
 delete mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/demo.txt/+server.ts

diff --git a/package.json b/package.json
index a70655c..0b8d45e 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1aeec2d..6296ad1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      '@fontsource-variable/archivo':
+        specifier: 5.0.19
+        version: 5.0.19
       '@sveltejs/adapter-vercel':
         specifier: 4.0.5
         version: 4.0.5(@sveltejs/kit@2.5.17(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(sass@1.77.6)))(svelte@4.2.18)(vite@5.3.1(sass@1.77.6)))
@@ -513,6 +516,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fontsource-variable/archivo@5.0.19':
+    resolution: {integrity: sha512-dJdRylf/50fqAY6UufqfsdW4TTznA7weeaSMy6258eG11RALWeHwZa4CDWPQ5e0Pj6OFQEV9IXZkjXdeOacvbg==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -2090,6 +2096,8 @@ snapshots:
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
+  '@fontsource-variable/archivo@5.0.19': {}
+
   '@iconify/types@2.0.0': {}
 
   '@iconify/utils@2.1.25':
diff --git a/src/routes/(homepage)/+layout.svelte b/src/routes/(homepage)/+layout.svelte
new file mode 100644
index 0000000..8e94f69
--- /dev/null
+++ b/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 />
diff --git a/src/routes/(homepage)/+page.svelte b/src/routes/(homepage)/+page.svelte
new file mode 100644
index 0000000..b80cde0
--- /dev/null
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index 8e8172b..0000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import Embed from '$lib/Embed.svelte';
-
-	import landingCode from './landing-code.txt?raw';
-</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="code-embed">
-	<Embed code={landingCode} wrapLines={false} />
-</div>
-
-<style lang="scss">
-	.code-embed {
-		margin: 12px;
-		border-radius: 12px;
-		overflow-x: hidden;
-		max-height: 512px;
-	}
-</style>
diff --git a/src/routes/demo.txt/+server.ts b/src/routes/demo.txt/+server.ts
new file mode 100644
index 0000000..9ea7c40
--- /dev/null
+++ b/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'
+		}
+	});
+};
diff --git a/uno.config.ts b/uno.config.ts
index 8d07f3f..3129e6a 100644
--- a/uno.config.ts
+++ b/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'
+		}
+	}
 });