From a2a2b4f2007c342c13cd95bc0d4831dbd142914c Mon Sep 17 00:00:00 2001
From: Joseph Montanaro <jfmontanaro@modg.org>
Date: Tue, 19 Oct 2021 10:26:50 -0700
Subject: [PATCH] prefetch links

---
 src/lib/Link.svelte                           | 31 +++++++++++++++++++
 src/lib/Post.svelte                           | 11 +++++--
 src/routes/[slug].svelte                      |  8 ++---
 .../imagining-a-passwordless-future.svx       |  8 ++++-
 src/routes/index.svelte                       |  8 ++---
 svelte.config.js                              |  2 +-
 6 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/Link.svelte

diff --git a/src/lib/Link.svelte b/src/lib/Link.svelte
new file mode 100644
index 0000000..ebde0cb
--- /dev/null
+++ b/src/lib/Link.svelte
@@ -0,0 +1,31 @@
+<script>
+    import { page } from '$app/stores';
+    export let href;
+    let pageHost;
+    page.subscribe(p => pageHost = p.host); // apparently this works?
+
+    function isLocal(url) {
+        if (url.startsWith('/')) {
+            return true;
+        }
+
+        try {
+            let parsed = new URL(url);
+            return parsed.host === pageHost;
+        }
+        catch {
+            return false;
+        }
+    }
+</script>
+
+<!-- we pass href explicitly so a11y doesn't scream at us -->
+{#if isLocal(href)}
+    <a sveltekit:prefetch {href} {...$$props}>
+        <slot></slot>
+    </a>
+{:else}
+    <a {href} {...$$props}>
+        <slot></slot>
+    </a>
+{/if}
diff --git a/src/lib/Post.svelte b/src/lib/Post.svelte
index 18353bb..e28206b 100644
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@@ -1,9 +1,14 @@
+<script context="module">
+    import Link from './Link.svelte';
+    export { Link as a };
+</script>
+
 <script>
-    export let meta, body;
+    export let title, date;
 </script>
 
 
 <div id="post">
-    <h1>{meta.title}</h1>
-    <svelte:component this={body} />
+    <h1>{title}</h1>
+    <slot></slot>
 </div>
diff --git a/src/routes/[slug].svelte b/src/routes/[slug].svelte
index 2617f0c..4709160 100644
--- a/src/routes/[slug].svelte
+++ b/src/routes/[slug].svelte
@@ -4,8 +4,7 @@
             let post = await import(`./_posts/${page.params.slug}.svx`);
             return {
                 props: {
-                    meta: post.metadata,
-                    body: post.default
+                    post: post.default
                 }
             }
         }
@@ -19,8 +18,7 @@
 </script>
 
 <script>
-    import Post from '$lib/Post.svelte';
-    export let meta, body;
+    export let post;
 </script>
 
-<Post {meta} {body}></Post>
+<svelte:component this={post} />
diff --git a/src/routes/_posts/imagining-a-passwordless-future.svx b/src/routes/_posts/imagining-a-passwordless-future.svx
index 388307f..408a62e 100644
--- a/src/routes/_posts/imagining-a-passwordless-future.svx
+++ b/src/routes/_posts/imagining-a-passwordless-future.svx
@@ -22,4 +22,10 @@ are a pain, and it seems to be a pretty intractable problem.
 
 You know what aren't a pain, or at least not nearly to the same extent? Keys.
 That's right, physical stick-em-in-a-lock-and-turn metal keys. They've been
-around since forever, and I doubt they'll be going anywhere any time soon.
\ No newline at end of file
+around since forever, and I doubt they'll be going anywhere any time soon.
+
+[External link](https://www.google.com)
+
+[Internal link](/posts)
+
+[Internal absolute link](http://localhost:3000/simpler-socketio)
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cf4c5fc..9cf032b 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,16 +5,14 @@
         const post = await import(`./_posts/${metadata.slug}.svx`);
         return {
             props: {
-                meta: post.metadata,
-                body: post.default,
+                post: post.default,
             }
         }
     }
 </script>
 
 <script>
-    import Post from '$lib/Post.svelte';
-    export let meta, body;
+    export let post;
 </script>
 
-<Post {meta} {body}></Post>
+<svelte:component this={post} />
diff --git a/svelte.config.js b/svelte.config.js
index 362f28d..cbe9bfc 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -4,7 +4,7 @@ import staticAdapter from '@sveltejs/adapter-static';
 
 const config = {
 	extensions: ['.svelte', '.svx'],
-	preprocess: mdsvex(),
+	preprocess: mdsvex({layout: './src/lib/Post.svelte'}),
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',