prefetch links

This commit is contained in:
Joseph Montanaro 2021-10-19 10:26:50 -07:00
parent 18e8883063
commit a2a2b4f200
6 changed files with 53 additions and 15 deletions

31
src/lib/Link.svelte Normal file
View File

@ -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}

View File

@ -1,9 +1,14 @@
<script context="module">
import Link from './Link.svelte';
export { Link as a };
</script>
<script> <script>
export let meta, body; export let title, date;
</script> </script>
<div id="post"> <div id="post">
<h1>{meta.title}</h1> <h1>{title}</h1>
<svelte:component this={body} /> <slot></slot>
</div> </div>

View File

@ -4,8 +4,7 @@
let post = await import(`./_posts/${page.params.slug}.svx`); let post = await import(`./_posts/${page.params.slug}.svx`);
return { return {
props: { props: {
meta: post.metadata, post: post.default
body: post.default
} }
} }
} }
@ -19,8 +18,7 @@
</script> </script>
<script> <script>
import Post from '$lib/Post.svelte'; export let post;
export let meta, body;
</script> </script>
<Post {meta} {body}></Post> <svelte:component this={post} />

View File

@ -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. 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 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. 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)

View File

@ -5,16 +5,14 @@
const post = await import(`./_posts/${metadata.slug}.svx`); const post = await import(`./_posts/${metadata.slug}.svx`);
return { return {
props: { props: {
meta: post.metadata, post: post.default,
body: post.default,
} }
} }
} }
</script> </script>
<script> <script>
import Post from '$lib/Post.svelte'; export let post;
export let meta, body;
</script> </script>
<Post {meta} {body}></Post> <svelte:component this={post} />

View File

@ -4,7 +4,7 @@ import staticAdapter from '@sveltejs/adapter-static';
const config = { const config = {
extensions: ['.svelte', '.svx'], extensions: ['.svelte', '.svx'],
preprocess: mdsvex(), preprocess: mdsvex({layout: './src/lib/Post.svelte'}),
kit: { kit: {
// hydrate the <div id="svelte"> element in src/app.html // hydrate the <div id="svelte"> element in src/app.html
target: '#svelte', target: '#svelte',