summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/components/Footer.svelte14
-rw-r--r--src/lib/components/Giscus.svelte184
-rw-r--r--src/lib/components/Header.svelte38
-rw-r--r--src/lib/components/PostCard.svelte38
-rw-r--r--src/lib/components/ThemeToggle.svelte133
-rw-r--r--src/lib/styles/global.css209
-rw-r--r--src/lib/styles/global.pruned.css153
-rw-r--r--src/lib/utils/posts.server.ts32
-rw-r--r--src/lib/utils/posts.ts6
9 files changed, 407 insertions, 400 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>
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
index 8ec94fc..1ed6aca 100644
--- a/src/lib/styles/global.css
+++ b/src/lib/styles/global.css
@@ -1,42 +1,43 @@
*,
*::before,
*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
:root {
- --bg: #fff;
- --text: #333;
- --muted: #666;
- --link: #888;
- --link-hover: #000;
- --border: #eee;
- --code-bg: #f5f5f5;
- --font: "Inter", sans-serif;
- --mono: "Bitstream Vera Sans Mono", "Courier New", monospace;
+ --bg: #fff;
+ --text: #333;
+ --muted: #666;
+ --link: #888;
+ --link-hover: #000;
+ --border: #eee;
+ --code-bg: #f5f5f5;
+ --font:
+ Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", Arial, sans-serif;
+ --mono: "Bitstream Vera Sans Mono", "Courier New", monospace;
}
[data-theme="dark"] {
- --bg: #1a1a1a;
- --text: #e0e0e0;
- --muted: #999;
- --link-hover: #fff;
- --border: #333;
- --code-bg: #2a2a2a;
+ --bg: #1a1a1a;
+ --text: #e0e0e0;
+ --muted: #999;
+ --link-hover: #fff;
+ --border: #333;
+ --code-bg: #2a2a2a;
}
html {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
body {
- font: 18px/1.4 var(--font);
- color: var(--text);
- background: var(--bg);
- transition: background 0.2s, color 0.2s;
+ font: 18px/1.4 var(--font);
+ color: var(--text);
+ background: var(--bg);
}
h1,
@@ -45,162 +46,160 @@ h3,
h4,
h5,
h6 {
- margin-bottom: 2rem;
+ margin-bottom: 2rem;
}
.container {
- max-width: 900px;
- margin: 0 auto;
- padding: 0 2rem;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 2rem;
}
p {
- margin-bottom: 1rem;
+ margin-bottom: 1rem;
}
a {
- color: var(--link);
- text-decoration: none;
- transition: color 0.2s;
+ color: var(--link);
+ text-decoration: none;
}
a:hover {
- color: var(--link-hover);
+ color: var(--link-hover);
}
ul,
ol {
- margin-bottom: 1rem;
- padding-left: 1.5rem;
+ margin-bottom: 1rem;
+ padding-left: 1.5rem;
}
li {
- margin-bottom: 0.25rem;
+ margin-bottom: 0.25rem;
}
blockquote {
- border-left: 2px solid var(--muted);
- padding-left: 1em;
- margin: 1.5rem 0;
- font-style: italic;
+ border-left: 2px solid var(--muted);
+ padding-left: 1em;
+ margin: 1.5rem 0;
+ font-style: italic;
}
code {
- font-family: var(--mono);
- font-size: 0.9em;
- background: var(--code-bg);
- padding: 0.2em 0.4em;
- border-radius: 3px;
+ font-family: var(--mono);
+ font-size: 0.9em;
+ background: var(--code-bg);
+ padding: 0.2em 0.4em;
+ border-radius: 3px;
}
pre {
- font-family: var(--mono);
- background: var(--code-bg);
- padding: 1rem;
- border-radius: 4px;
- overflow-x: auto;
- margin: 1.5rem 0;
- box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
+ font-family: var(--mono);
+ background: var(--code-bg);
+ padding: 1rem;
+ border-radius: 4px;
+ overflow-x: auto;
+ margin: 1.5rem 0;
+ box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
}
pre code {
- background: none;
- padding: 0;
+ background: none;
+ padding: 0;
}
img {
- max-width: 100%;
- height: auto;
+ max-width: 100%;
+ height: auto;
}
hr {
- border: none;
- border-top: 1px solid var(--border);
- margin: 2rem 0;
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 2rem 0;
}
small,
time {
- font-size: 15px;
- color: var(--muted);
+ font-size: 15px;
+ color: var(--muted);
}
/* Layout */
.wrapper-masthead {
- margin: 0 2rem 3rem;
+ margin: 0 2rem 3rem;
}
.masthead {
- padding: 1.25rem 0;
- border-bottom: 1px solid var(--border);
- display: flex;
- justify-content: space-between;
- align-items: center;
+ padding: 1.25rem 0;
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.site-info {
- display: flex;
- flex-direction: column;
- margin-left: 2rem;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
.site-info h1 {
- margin: 0;
- font-size: 1.75rem;
- font-weight: 300;
- letter-spacing: 1px;
+ margin: 0;
+ font-size: 1.75rem;
+ font-weight: 300;
+ letter-spacing: 1px;
}
.site-description {
- margin: -0.25rem 0 0 0;
- color: var(--muted);
- font-size: 1rem;
+ margin: -0.25rem 0 0 0;
+ color: var(--muted);
+ font-size: 1rem;
}
header nav {
- display: flex;
- align-items: center;
- gap: 1.25rem;
- font-size: 18px;
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+ font-size: 18px;
}
footer {
- margin-top: 4rem;
- text-align: center;
+ margin-top: 4rem;
+ text-align: center;
}
article {
- margin-bottom: 2rem;
+ margin-bottom: 2rem;
}
.theme-toggle {
- background: transparent;
- border: none;
- padding: 0.5rem;
- cursor: pointer;
- color: var(--muted);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: color 0.2s;
+ background: transparent;
+ border: none;
+ padding: 0.5rem;
+ cursor: pointer;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.theme-toggle:hover {
- color: var(--link-hover);
+ color: var(--link-hover);
}
.giscus-container {
- margin-top: 3rem;
+ margin-top: 3rem;
}
@media (max-width: 640px) {
- .masthead {
- flex-direction: column;
- text-align: center;
- gap: 1rem;
- }
-
- header nav {
- gap: 0.75rem;
- }
-} \ No newline at end of file
+ .masthead {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ header nav {
+ gap: 0.75rem;
+ }
+}
diff --git a/src/lib/styles/global.pruned.css b/src/lib/styles/global.pruned.css
index 45f1462..9872f39 100644
--- a/src/lib/styles/global.pruned.css
+++ b/src/lib/styles/global.pruned.css
@@ -1,154 +1,153 @@
*,
*::before,
*::after {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
}
:root {
- --bg: #fff;
- --text: #333;
- --muted: #666;
- --link: #888;
- --link-hover: #000;
- --border: #eee;
- --font: "Inter", sans-serif;
+ --bg: #fff;
+ --text: #333;
+ --muted: #666;
+ --link: #888;
+ --link-hover: #000;
+ --border: #eee;
+ --font:
+ Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
- --bg: #1a1a1a;
- --text: #e0e0e0;
- --muted: #999;
- --link-hover: #fff;
- --border: #333;
+ --bg: #1a1a1a;
+ --text: #e0e0e0;
+ --muted: #999;
+ --link-hover: #fff;
+ --border: #333;
}
html {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
body {
- font: 18px/1.4 var(--font);
- color: var(--text);
- background: var(--bg);
- transition: background 0.2s, color 0.2s;
+ font: 18px/1.4 var(--font);
+ color: var(--text);
+ background: var(--bg);
}
h1,
h2,
h3 {
- margin-bottom: 2rem;
+ margin-bottom: 2rem;
}
.container {
- max-width: 900px;
- margin: 0 auto;
- padding: 0 2rem;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 2rem;
}
p {
- margin-bottom: 1rem;
+ margin-bottom: 1rem;
}
a {
- color: var(--link);
- text-decoration: none;
- transition: color 0.2s;
+ color: var(--link);
+ text-decoration: none;
}
a:hover {
- color: var(--link-hover);
+ color: var(--link-hover);
}
hr {
- border: none;
- border-top: 1px solid var(--border);
- margin: 2rem 0;
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 2rem 0;
}
small,
time {
- font-size: 15px;
- color: var(--muted);
+ font-size: 15px;
+ color: var(--muted);
}
/* Layout */
.wrapper-masthead {
- margin: 0 2rem 3rem;
+ margin: 0 2rem 3rem;
}
.masthead {
- padding: 1.25rem 0;
- border-bottom: 1px solid var(--border);
- display: flex;
- justify-content: space-between;
- align-items: center;
+ padding: 1.25rem 0;
+ border-bottom: 1px solid var(--border);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
.site-info {
- display: flex;
- flex-direction: column;
- margin-left: 2rem;
+ display: flex;
+ flex-direction: column;
+ margin-left: 2rem;
}
.site-info h1 {
- margin: 0;
- font-size: 1.75rem;
- font-weight: 300;
- letter-spacing: 1px;
+ margin: 0;
+ font-size: 1.75rem;
+ font-weight: 300;
+ letter-spacing: 1px;
}
.site-description {
- margin: -0.25rem 0 0 0;
- color: var(--muted);
- font-size: 1rem;
+ margin: -0.25rem 0 0 0;
+ color: var(--muted);
+ font-size: 1rem;
}
header nav {
- display: flex;
- align-items: center;
- gap: 1.25rem;
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
}
footer {
- margin-top: 4rem;
- text-align: center;
+ margin-top: 4rem;
+ text-align: center;
}
article {
- margin-bottom: 2rem;
+ margin-bottom: 2rem;
}
.theme-toggle {
- background: transparent;
- border: none;
- padding: 0.5rem;
- cursor: pointer;
- color: var(--muted);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: color 0.2s;
+ background: transparent;
+ border: none;
+ padding: 0.5rem;
+ cursor: pointer;
+ color: var(--muted);
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.theme-toggle:hover {
- color: var(--link-hover);
+ color: var(--link-hover);
}
.giscus-container {
- margin-top: 3rem;
+ margin-top: 3rem;
}
@media (max-width: 640px) {
- .masthead {
- flex-direction: column;
- text-align: center;
- gap: 1rem;
- }
-
- header nav {
- gap: 0.75rem;
- }
+ .masthead {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ header nav {
+ gap: 0.75rem;
+ }
}
diff --git a/src/lib/utils/posts.server.ts b/src/lib/utils/posts.server.ts
index a9b7bb9..9f34c1c 100644
--- a/src/lib/utils/posts.server.ts
+++ b/src/lib/utils/posts.server.ts
@@ -1,26 +1,28 @@
-import type { Post, PostMetadata } from './posts';
+import type { Post, PostMetadata } from "./posts";
-const postMetadataFiles = import.meta.glob<PostMetadata>('/src/posts/*.svx', {
- eager: true,
- import: 'metadata'
+const postMetadataFiles = import.meta.glob<PostMetadata>("/src/posts/*.svx", {
+ eager: true,
+ import: "metadata",
});
function getSlugFromPath(path: string): string {
- return path.split('/').pop()?.replace('.svx', '') ?? '';
+ return path.split("/").pop()?.replace(".svx", "") ?? "";
}
export function getPosts(): Post[] {
- const posts: Post[] = [];
+ const posts: Post[] = [];
- for (const path in postMetadataFiles) {
- const metadata = postMetadataFiles[path];
- const slug = getSlugFromPath(path);
+ for (const path in postMetadataFiles) {
+ const metadata = postMetadataFiles[path];
+ const slug = getSlugFromPath(path);
- posts.push({
- ...metadata,
- slug
- });
- }
+ posts.push({
+ ...metadata,
+ slug,
+ });
+ }
- return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+ return posts.sort(
+ (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+ );
}
diff --git a/src/lib/utils/posts.ts b/src/lib/utils/posts.ts
index d0eca68..ae5cf84 100644
--- a/src/lib/utils/posts.ts
+++ b/src/lib/utils/posts.ts
@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
+import type { Component } from "svelte";
export interface PostMetadata {
title: string;
@@ -16,10 +16,10 @@ export interface PostModule {
metadata: PostMetadata;
}
-const postLoaders = import.meta.glob<PostModule>('/src/posts/*.svx');
+const postLoaders = import.meta.glob<PostModule>("/src/posts/*.svx");
function getSlugFromPath(path: string): string {
- return path.split('/').pop()?.replace('.svx', '') ?? '';
+ return path.split("/").pop()?.replace(".svx", "") ?? "";
}
export function getPostSlugs(): string[] {
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-29 20:29:50 +0000