prefetch links
This commit is contained in:
parent
18e8883063
commit
a2a2b4f200
31
src/lib/Link.svelte
Normal file
31
src/lib/Link.svelte
Normal 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}
|
@ -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>
|
||||
|
@ -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} />
|
||||
|
@ -23,3 +23,9 @@ 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.
|
||||
|
||||
[External link](https://www.google.com)
|
||||
|
||||
[Internal link](/posts)
|
||||
|
||||
[Internal absolute link](http://localhost:3000/simpler-socketio)
|
@ -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} />
|
||||
|
@ -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',
|
||||
|
Loading…
x
Reference in New Issue
Block a user