From 0c7f7ff1ffaf507d090f4ffcc25dad349cb25cfb Mon Sep 17 00:00:00 2001
From: Brian Nelson <briannelson95@proton.me>
Date: Fri, 5 Sep 2025 14:39:43 -0400
Subject: [PATCH] the  alias

---
 README.md                              | 37 +-------------------------
 src/lib/message.js                     |  1 +
 src/routes/+page.server.js             |  9 +++++++
 src/routes/+page.svelte                |  6 ++++-
 src/routes/blog/+layout.server.js      | 10 +++++++
 src/routes/blog/+page.server.js        | 10 -------
 src/routes/blog/+page.svelte           | 19 +++++++------
 src/routes/blog/[slug]/+layout.svelte  | 30 +++++++++++++++++++++
 src/routes/blog/[slug]/+page.server.ts | 14 +++++-----
 src/routes/blog/[slug]/+page.svelte    |  8 +++---
 10 files changed, 78 insertions(+), 66 deletions(-)
 create mode 100644 src/lib/message.js
 create mode 100644 src/routes/+page.server.js
 create mode 100644 src/routes/blog/+layout.server.js
 delete mode 100644 src/routes/blog/+page.server.js
 create mode 100644 src/routes/blog/[slug]/+layout.svelte

diff --git a/README.md b/README.md
index 75842c4..fc6e838 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,3 @@
 # sv
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## 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.
+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)
\ No newline at end of file
diff --git a/src/lib/message.js b/src/lib/message.js
new file mode 100644
index 0000000..a9ef581
--- /dev/null
+++ b/src/lib/message.js
@@ -0,0 +1 @@
+export const message = 'hello from $lib/messgae';
\ No newline at end of file
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
new file mode 100644
index 0000000..6cea898
--- /dev/null
+++ b/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'
+    }
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..d0849cb 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/blog/+layout.server.js b/src/routes/blog/+layout.server.js
new file mode 100644
index 0000000..8581b61
--- /dev/null
+++ b/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
+		}))
+	};
+}
diff --git a/src/routes/blog/+page.server.js b/src/routes/blog/+page.server.js
deleted file mode 100644
index 9edff62..0000000
--- a/src/routes/blog/+page.server.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { posts } from './data';
-
-export function load() {
-    return {
-        summaries: posts.map((post) => ({
-            slug: post.slug,
-            title: post.title
-        }))
-    }
-}
\ No newline at end of file
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index d414f3e..0092134 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,11 +1,14 @@
-<script lang='ts'>
-    let { data } = $props();
+<script>
+	let { data } = $props();
+    import { message } from '$lib/message.js'
 </script>
 
-<h1>Blog</h1>
+<h1>blog</h1>
 
-<ul>
-    {#each data.summaries as { slug, title }}
-        <li><a href="/blog/{slug}">{title}</a></li>
-    {/each}
-</ul>
\ No newline at end of file
+<ul class="list-disc list-inside">
+	{#each data.summaries as { slug, title }}
+		<li><a href="/blog/{slug}">{title}</a></li>
+	{/each}
+</ul>
+
+<p class="text-sm text-gray-400 italic">{message}</p>
\ No newline at end of file
diff --git a/src/routes/blog/[slug]/+layout.svelte b/src/routes/blog/[slug]/+layout.svelte
new file mode 100644
index 0000000..9951f5b
--- /dev/null
+++ b/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>
diff --git a/src/routes/blog/[slug]/+page.server.ts b/src/routes/blog/[slug]/+page.server.ts
index 3faa354..e3c4fbf 100644
--- a/src/routes/blog/[slug]/+page.server.ts
+++ b/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 {
-        post
-    }
-}
\ No newline at end of file
+	return {
+		post
+	};
+}
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index d2e8ea3..ae34354 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,6 +1,6 @@
-<script lang="ts">
-    let { data } = $props();
+<script>
+	let { data } = $props();
 </script>
 
-<h1 class="text-2xl font-bold">{data.post.title}</h1>
-<div>{@html data.post.content}</div>
\ No newline at end of file
+<h1>{data.post.title}</h1>
+<div>{@html data.post.content}</div>