initial commit

5 files changed, 168 insertions, 0 deletions

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..f06e5a6
--- /dev/null
+++ b/src/lib/components/Footer.svelte
@@ -0,0 +1,9 @@
+<footer class="container">
+	<hr />
+	<p>
+		<small
+			>{new Date().getFullYear()}
+			<a href="https://svelte.dev">SvelteKit</a></small
+		>
+	</p>
+</footer>
diff --git a/src/lib/components/Giscus.svelte b/src/lib/components/Giscus.svelte
new file mode 100644
index 0000000..96be4a4
--- /dev/null
+++ b/src/lib/components/Giscus.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    let container: HTMLDivElement;
+
+    onMount(() => {
+        const script = document.createElement("script");
+        script.src = "https://giscus.app/client.js";
+        script.setAttribute("data-repo", "wenekar/giscus");
+        script.setAttribute("data-repo-id", "R_kgDOREZgEQ");
+        script.setAttribute("data-category", "Announcements");
+        script.setAttribute("data-category-id", "DIC_kwDOREZgEc4C1nRY");
+        script.setAttribute("data-mapping", "pathname");
+        script.setAttribute("data-strict", "0");
+        script.setAttribute("data-reactions-enabled", "1");
+        script.setAttribute("data-emit-metadata", "0");
+        script.setAttribute("data-input-position", "bottom");
+        script.setAttribute("data-theme", "preferred_color_scheme");
+        script.setAttribute("data-lang", "en");
+        script.setAttribute("data-loading", "lazy");
+        script.crossOrigin = "anonymous";
+        script.async = true;
+        container.appendChild(script);
+    });
+</script>
+
+<div class="giscus-container" bind:this={container}></div>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
new file mode 100644
index 0000000..804497e
--- /dev/null
+++ b/src/lib/components/Header.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ThemeToggle from "./ThemeToggle.svelte";
+
+	interface Props {
+		title?: string;
+		description?: string;
+	}
+
+	let { title = "My Blog", description = "Super. Good. Code." }: Props =
+		$props();
+</script>
+
+<div class="wrapper-masthead">
+	<header class="container masthead">
+		<div class="site-info">
+			<h1><a href="/">{title}</a></h1>
+			<p class="site-description">{description}</p>
+		</div>
+
+		<nav>
+			<a href="/">Blog</a>
+			<a href="/apps">Apps</a>
+			<a href="/about">About</a>
+			<ThemeToggle />
+		</nav>
+	</header>
+</div>
diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
new file mode 100644
index 0000000..7fb9361
--- /dev/null
+++ b/src/lib/components/PostCard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Post } from "$lib/utils/posts";
+
+	interface Props {
+		post: Post;
+	}
+
+	let { post }: Props = $props();
+
+	function formatDate(dateStr: string): string {
+		return new Date(dateStr).toLocaleDateString("en-US", {
+			year: "numeric",
+			month: "long",
+			day: "numeric",
+		});
+	}
+</script>
+
+<article>
+	<header>
+		<a href="/posts/{post.slug}">
+			<h1 style="text-decoration: none;">{post.title}</h1>
+		</a>
+		<small><time datetime={post.date}>{formatDate(post.date)}</time></small>
+	</header>
+	<p>{post.description}</p>
+</article>
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
new file mode 100644
index 0000000..f136246
--- /dev/null
+++ b/src/lib/components/ThemeToggle.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+
+    function getInitialTheme(): "light" | "dark" {
+        if (browser) {
+            const stored = localStorage.getItem("theme");
+            if (stored === "light" || stored === "dark") return stored;
+            return window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+        }
+        return "light";
+    }
+
+    let theme = $state<"light" | "dark">(getInitialTheme());
+
+    function applyTheme(newTheme: "light" | "dark") {
+        if (browser) {
+            document.documentElement.setAttribute("data-theme", newTheme);
+            localStorage.setItem("theme", newTheme);
+        }
+    }
+
+    $effect(() => {
+        applyTheme(theme);
+    });
+
+    function toggleTheme() {
+        theme = theme === "light" ? "dark" : "light";
+    }
+</script>
+
+<button
+    class="theme-toggle"
+    onclick={toggleTheme}
+    aria-label={theme === "light"
+        ? "Switch to dark mode"
+        : "Switch to light mode"}
+    title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+>
+    {#if theme === "light"}
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+        </svg>
+    {:else}
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        >
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+    {/if}
+</button>