the alias

README.md

@@ -1,38 +1,3 @@
 # sv
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+This is a tutorial project being used for me to learn svelte. Following the official documentation at [svelte.dev](https://svelte.dev/tutorial/kit/introducing-sveltekit)
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

src/lib/message.js

@@ -0,0 +1 @@
+export const message = 'hello from $lib/messgae';

src/routes/+page.server.js

@@ -0,0 +1,9 @@
+export function load({ cookies }) {
+    const visited = cookies.get('visited');
+
+    cookies.set('visited', 'true', { path: '/' });
+
+    return {
+        visited: visited === 'true'
+    }
+}

src/routes/+page.svelte

@@ -1,2 +1,6 @@
-<h1>Welcome to SvelteKit</h1>
+<script>
+    let { data } = $props();
+</script>
+
+<h1>Welcome to SvelteKit, {data.visited ? 'friend' : 'stranger'}</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

src/routes/blog/+layout.server.js

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

src/routes/blog/+page.server.js

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

src/routes/blog/+page.svelte

@@ -1,11 +1,14 @@
-<script lang='ts'>
+<script>
-    let { data } = $props();
+	let { data } = $props();
+    import { message } from '$lib/message.js'
 </script>
 
-<h1>Blog</h1>
+<h1>blog</h1>
 
-<ul>
+<ul class="list-disc list-inside">
-    {#each data.summaries as { slug, title }}
+	{#each data.summaries as { slug, title }}
-        <li><a href="/blog/{slug}">{title}</a></li>
+		<li><a href="/blog/{slug}">{title}</a></li>
-    {/each}
+	{/each}
 </ul>
+
+<p class="text-sm text-gray-400 italic">{message}</p>

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

@@ -0,0 +1,30 @@
+<script>
+	let { data, children } = $props();
+</script>
+
+<div class="layout">
+	<main>
+		{@render children()}
+	</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>

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

@@ -1,12 +1,12 @@
 import { error } from '@sveltejs/kit';
-import { posts } from '../data';
+import { posts } from '../data.js';
 
 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)
+	if (!post) error(404);
 
-    return {
+	return {
-        post
+		post
-    }
+	};
 }

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

@@ -1,6 +1,6 @@
-<script lang="ts">
+<script>
-    let { data } = $props();
+	let { data } = $props();
 </script>
 
-<h1 class="text-2xl font-bold">{data.post.title}</h1>
+<h1>{data.post.title}</h1>
 <div>{@html data.post.content}</div>