refresh svelte Learning opensas#1

Author: hvacsteve-chi

01-getting-started/package-lock.json

@@ -0,0 +1,6 @@
+<nav>
+	<a href="/">home</a>
+	<a href="/blog">blog</a>
+</nav>
+
+<slot />

01-getting-started/src/routes/+layout.svelte

@@ -0,0 +1 @@
+<p>home</p>

01-getting-started/src/routes/+page.svelte

@@ -0,0 +1,10 @@
+import { posts } from './data.js';
+
+export function load(){
+    return {
+        summaries: posts.map((post) => ({
+            slug: post.slug,
+            title: post.title
+        }))
+    };
+}

01-getting-started/src/routes/blog/+layout.server.js

@@ -0,0 +1,11 @@
+<script>
+    export let data
+</script>
+
+<h1>blog</h1>
+
+<ul>
+    {#each data.summaries as { slug, title }}
+    <li><a href="/blog/{slug}">{title}</a></li>
+    {/each}
+</ul>

01-getting-started/src/routes/blog/+page.svelte

@@ -0,0 +1,30 @@
+<script>
+	export let data;
+</script>
+
+<div class="layout">
+	<main>
+		<slot></slot>
+	</main>
+
+	<aside>
+		<h2>More posts</h2>
+		<ul>
+			{#each data.summaries as { slug, title }}
+				<li>
+					<a href="/blog/{slug}">{title}</a>
+				</li>
+			{/each}
+		</ul>
+	</aside>
+</div>
+
+<style>
+	@media (min-width: 640px) {
+		.layout {
+			display: grid;
+			gap: 2em;
+			grid-template-columns: 1fr 16em;
+		}
+	}
+</style>

01-getting-started/src/routes/blog/[slug]/+layout.svelte

@@ -0,0 +1,12 @@
+import { error } from '@sveltejs/kit';
+import { posts } from '../data.js';
+
+export function load({ params }) {
+	const post = posts.find((post) => post.slug === params.slug);
+	
+    if (!post) throw error(404);
+
+	return {
+		post
+	};
+}

01-getting-started/src/routes/blog/[slug]/+page.server.js

@@ -0,0 +1,6 @@
+<script>
+    export let data;
+</script>
+
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>