layout

Author: stellaaa42

src/routes/blog/+page.server.js src/routes/blog/+layout.server.jssrc/routes/blog/+page.server.js renamed to src/routes/blog/+layout.server.js

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { posts } from './posts.js';
-
     let { data } = $props();
 </script>
 

src/routes/blog/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    let {data, children} = $props();
+</script>
+
+<div class="more">
+    <main>
+        {@render children()}
+    </main>
+
+    <aside>
+        <h3>More posts</h3>
+        <ul>
+            {#each data.summaries as {slug, title}}
+                <li>
+                    <a href="/blog/{slug}">{title}</a>
+                </li>
+            {/each}
+        </ul>
+    </aside>
+</div>
+
+
+<style>
+    @media (min-width: 640px) {
+        .more {
+            display: grid;
+            gap: 2em;
+            grid-template-columns: 1fr 16em;
+        }
+    }
+</style>

src/routes/blog/[slug]/+layout.svelte

@@ -2,7 +2,8 @@ import { posts } from '../posts.js';
 import { error } from '@sveltejs/kit'
 
 export function load({ params }) {
-    const post = posts.find((post) => post.slug === params.slug);
+    const post = 
+        posts.find((post) => post.slug === params.slug);
 
     if (!post) error(404);
 

src/routes/blog/[slug]/+page.server.js

@@ -1,4 +1,3 @@
-
 <script lang="ts">
     let { data } = $props();
 </script>