formatting and more perf

5 files changed, 207 insertions, 200 deletions

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index f06e5a6..e725ff9 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,9 +1,9 @@
 <footer class="container">
-	<hr />
-	<p>
-		<small
-			>{new Date().getFullYear()}
-			<a href="https://svelte.dev">SvelteKit</a></small
-		>
-	</p>
+  <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
index 6659b36..3179764 100644
--- a/src/lib/components/Giscus.svelte
+++ b/src/lib/components/Giscus.svelte
@@ -1,98 +1,102 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-
-	let container: HTMLDivElement | undefined;
-	let trigger: HTMLDivElement | undefined;
-	let observer: IntersectionObserver | undefined;
-	let isLoading = false;
-	let hasLoaded = false;
-
-	function loadComments() {
-		if (!container || isLoading || hasLoaded) return;
-
-		isLoading = true;
-
-		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", "top");
-		script.setAttribute("data-theme", "preferred_color_scheme");
-		script.setAttribute("data-lang", "en");
-		script.setAttribute("data-loading", "lazy");
-		script.crossOrigin = "anonymous";
-		script.async = true;
-
-		script.addEventListener("load", () => {
-			isLoading = false;
-		});
-
-		script.addEventListener("error", () => {
-			isLoading = false;
-			hasLoaded = false;
-			script.remove();
-		});
-
-		container.appendChild(script);
-		hasLoaded = true;
-		observer?.disconnect();
-		observer = undefined;
-	}
-
-	onMount(() => {
-		if (!trigger || !("IntersectionObserver" in window)) return;
-
-		observer = new IntersectionObserver(
-			(entries) => {
-				if (entries.some((entry) => entry.isIntersecting)) {
-					loadComments();
-				}
-			},
-			{ rootMargin: "300px 0px" },
-		);
-
-		observer.observe(trigger);
-
-		return () => {
-			observer?.disconnect();
-		};
-	});
+  import { onMount } from "svelte";
+
+  let container: HTMLDivElement | undefined;
+  let trigger: HTMLDivElement | undefined;
+  let observer: IntersectionObserver | undefined;
+  let isLoading = false;
+  let hasLoaded = false;
+
+  function loadComments() {
+    if (!container || isLoading || hasLoaded) return;
+
+    isLoading = true;
+
+    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", "top");
+    script.setAttribute("data-theme", "preferred_color_scheme");
+    script.setAttribute("data-lang", "en");
+    script.setAttribute("data-loading", "lazy");
+    script.crossOrigin = "anonymous";
+    script.async = true;
+
+    script.addEventListener("load", () => {
+      isLoading = false;
+    });
+
+    script.addEventListener("error", () => {
+      isLoading = false;
+      hasLoaded = false;
+      script.remove();
+    });
+
+    container.appendChild(script);
+    hasLoaded = true;
+    observer?.disconnect();
+    observer = undefined;
+  }
+
+  onMount(() => {
+    if (!trigger || !("IntersectionObserver" in window)) return;
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          loadComments();
+        }
+      },
+      { rootMargin: "300px 0px" },
+    );
+
+    observer.observe(trigger);
+
+    return () => {
+      observer?.disconnect();
+    };
+  });
 </script>
 
 <div class="giscus-container">
-	{#if !hasLoaded}
-		<button class="comments-toggle" on:click={loadComments} disabled={isLoading}>
-			{isLoading ? "Loading comments..." : "Show comments"}
-		</button>
-	{/if}
-
-	<div class="giscus-trigger" bind:this={trigger}></div>
-	<div bind:this={container}></div>
+  {#if !hasLoaded}
+    <button
+      class="comments-toggle"
+      on:click={loadComments}
+      disabled={isLoading}
+    >
+      {isLoading ? "Loading comments..." : "Show comments"}
+    </button>
+  {/if}
+
+  <div class="giscus-trigger" bind:this={trigger}></div>
+  <div bind:this={container}></div>
 </div>
 
 <style>
-	.comments-toggle {
-		margin-bottom: 1rem;
-		padding: 0.6rem 0.9rem;
-		border: 1px solid var(--border);
-		background: transparent;
-		color: var(--text);
-		font: inherit;
-		cursor: pointer;
-	}
-
-	.comments-toggle:disabled {
-		opacity: 0.75;
-		cursor: default;
-	}
-
-	.giscus-trigger {
-		height: 1px;
-	}
+  .comments-toggle {
+    margin-bottom: 1rem;
+    padding: 0.6rem 0.9rem;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .comments-toggle:disabled {
+    opacity: 0.75;
+    cursor: default;
+  }
+
+  .giscus-trigger {
+    height: 1px;
+  }
 </style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 804497e..a6708ca 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import ThemeToggle from "./ThemeToggle.svelte";
+  import ThemeToggle from "./ThemeToggle.svelte";
 
-	interface Props {
-		title?: string;
-		description?: string;
-	}
+  interface Props {
+    title?: string;
+    description?: string;
+  }
 
-	let { title = "My Blog", description = "Super. Good. Code." }: Props =
-		$props();
+  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>
+  <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>
+    <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
index 7fb9361..83ae71d 100644
--- a/src/lib/components/PostCard.svelte
+++ b/src/lib/components/PostCard.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import type { Post } from "$lib/utils/posts";
+  import type { Post } from "$lib/utils/posts";
 
-	interface Props {
-		post: Post;
-	}
+  interface Props {
+    post: Post;
+  }
 
-	let { post }: Props = $props();
+  let { post }: Props = $props();
 
-	function formatDate(dateStr: string): string {
-		return new Date(dateStr).toLocaleDateString("en-US", {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-		});
-	}
+  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>
+  <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
index f136246..08f4ef5 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -1,78 +1,81 @@
 <script lang="ts">
-    import { browser } from "$app/environment";
+  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";
+  function getInitialTheme(): "light" | "dark" {
+    if (browser) {
+      const fromRoot = document.documentElement.getAttribute("data-theme");
+      if (fromRoot === "light" || fromRoot === "dark") return fromRoot;
+
+      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());
+  let theme = $state<"light" | "dark">(getInitialTheme());
 
-    function applyTheme(newTheme: "light" | "dark") {
-        if (browser) {
-            document.documentElement.setAttribute("data-theme", newTheme);
-            localStorage.setItem("theme", newTheme);
-        }
+  function applyTheme(newTheme: "light" | "dark") {
+    if (browser) {
+      document.documentElement.setAttribute("data-theme", newTheme);
+      localStorage.setItem("theme", newTheme);
     }
+  }
 
-    $effect(() => {
-        applyTheme(theme);
-    });
+  $effect(() => {
+    applyTheme(theme);
+  });
 
-    function toggleTheme() {
-        theme = theme === "light" ? "dark" : "light";
-    }
+  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"}
+  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}
+  {#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>