link prefetching

src/routes/[slug].svelte

@@ -1,10 +1,18 @@
 <script context="module">
     export async function load({ page }) {
-        let post = await import(`./_posts/${page.params.slug}.svx`);
+        try {
-        return {
+            let post = await import(`./_posts/${page.params.slug}.svx`);
-            props: {
+            return {
-                meta: post.metadata,
+                props: {
-                body: post.default
+                    meta: post.metadata,
+                    body: post.default
+                }
+            }
+        }
+        catch (err) {
+            return {
+                status: 404,
+                error: `Not found: ${page.path}`,
             }
         }
     }

src/routes/__layout.svelte

@@ -31,9 +31,9 @@
 
 <div id="header">
     <nav id="nav-main">
-        <a href="/">Home</a>
+        <a sveltekit:prefetch href="/">Home</a>
-        <a href="/posts">Posts</a>
+        <a sveltekit:prefetch href="/posts">Posts</a>
-        <a href="#">About</a>
+        <a sveltekit:prefetch href="#">About</a>
     </nav>
 </div>
 

src/routes/all.json.js

@@ -1,19 +1,12 @@
 const posts = import.meta.globEager('./_posts/*.svx');
 
-// let postData = [];
+export let postData = [];
 
-// for (const path in posts) {
+for (const path in posts) {
-//     const slug = path.slice(9, -4)
+    const slug = path.slice(9, -4)
-//     posts[path].metadata.slug = slug;
+    posts[path].metadata.slug = slug;
-//     postData.push(posts[path].metadata);
+    postData.push(posts[path].metadata);
-// }
+}
-
-export let postData = import.meta.glob('./_posts/*.svx');
-export const postData = Object.entries(posts).map((path, post) => {
-    const slug = path.slice(9, -4);
-    post.metadata.slug = slug;
-    return post.metadata;
-})
 postData.sort((a, b) => {
     // sorting in reverse, so we flip the intuitive order
     if (a.date > b.date) return -1;

src/routes/index.svelte

@@ -1,7 +1,7 @@
 <script context="module">
     export async function load({ fetch }) {
         const resp = await fetch('/latest.json');
-        const metadata = (await resp.json());
+        const metadata = await resp.json();
         const post = await import(`./_posts/${metadata.slug}.svx`);
         return {
             props: {

src/routes/latest.json.js

@@ -1,5 +1,5 @@
 import { postData } from './all.json.js';
 
 export async function get() {
-    return postData[0];
+    return {body: postData[0]};
 }

src/routes/posts.svelte

@@ -31,7 +31,7 @@
     <h1>All Posts</h1>
     {#each postData as post}
     <p>
-        <a class="post-link" href="/{post.slug}"><h3>{post.title}</h3></a>
+        <a sveltekit:prefetch class="post-link" href="/{post.slug}"><h3>{post.title}</h3></a>
     </p>
     {/each}
 </div>