diff options
Diffstat (limited to 'src/lib/components')
| -rw-r--r-- | src/lib/components/Footer.svelte | 9 | ||||
| -rw-r--r-- | src/lib/components/Giscus.svelte | 27 | ||||
| -rw-r--r-- | src/lib/components/Header.svelte | 27 | ||||
| -rw-r--r-- | src/lib/components/PostCard.svelte | 27 | ||||
| -rw-r--r-- | src/lib/components/ThemeToggle.svelte | 78 |
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> |