summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorBerke Güzel <wenekar1@gmail.com>2026-02-09 01:24:23 +0300
committerBerke Güzel <wenekar1@gmail.com>2026-02-09 01:24:23 +0300
commit3955fbabc9ed05116be07c9f659cd550734f8593 (patch)
tree109ebc5e0946d44b4766219a02b74dac36795300 /src
parentf2bb77e460acfd5929ecc6de053b68932f2c8121 (diff)
go FAST
Diffstat (limited to 'src')
-rw-r--r--src/app.html3
-rw-r--r--src/lib/components/Giscus.svelte88
-rw-r--r--src/lib/components/PostCard.svelte2
-rw-r--r--src/lib/components/ThemeToggle.svelte118
-rw-r--r--src/lib/styles/global.css12
-rw-r--r--src/lib/styles/global.pruned.css12
-rw-r--r--src/routes/+layout.svelte42
-rw-r--r--src/routes/+layout.ts1
8 files changed, 78 insertions, 200 deletions
diff --git a/src/app.html b/src/app.html
index 60ddb65..e9369b4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -19,10 +19,11 @@
}
})();
</script>
+ <script src="/boot.js" defer></script>
%sveltekit.head%
</head>
- <body data-sveltekit-preload-data="hover">
+ <body>
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
diff --git a/src/lib/components/Giscus.svelte b/src/lib/components/Giscus.svelte
index 3179764..4caf6e7 100644
--- a/src/lib/components/Giscus.svelte
+++ b/src/lib/components/Giscus.svelte
@@ -1,83 +1,11 @@
-<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();
- };
- });
-</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>
+<svelte:head>
+ <script src="/giscus-loader.js" defer></script>
+</svelte:head>
+
+<div class="giscus-container" data-giscus-root>
+ <button class="comments-toggle" type="button">Show comments</button>
+ <div class="giscus-trigger"></div>
+ <div class="giscus-slot"></div>
</div>
<style>
diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
index 83ae71d..a354518 100644
--- a/src/lib/components/PostCard.svelte
+++ b/src/lib/components/PostCard.svelte
@@ -19,7 +19,7 @@
<article>
<header>
<a href="/posts/{post.slug}">
- <h1 style="text-decoration: none;">{post.title}</h1>
+ <h1>{post.title}</h1>
</a>
<small><time datetime={post.date}>{formatDate(post.date)}</time></small>
</header>
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index 08f4ef5..1f09e06 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -1,81 +1,45 @@
-<script lang="ts">
- import { browser } from "$app/environment";
-
- 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());
-
- 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"}
+ type="button"
+ aria-label="Toggle theme"
+ title="Toggle theme"
>
- {#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}
+ <svg
+ class="theme-icon theme-icon-moon"
+ 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"
+ aria-hidden="true"
+ >
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+ </svg>
+ <svg
+ class="theme-icon theme-icon-sun"
+ 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"
+ aria-hidden="true"
+ >
+ <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>
</button>
diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css
index 1ed6aca..fbf5f02 100644
--- a/src/lib/styles/global.css
+++ b/src/lib/styles/global.css
@@ -184,6 +184,18 @@ article {
justify-content: center;
}
+.theme-icon-sun {
+ display: none;
+}
+
+[data-theme="dark"] .theme-icon-moon {
+ display: none;
+}
+
+[data-theme="dark"] .theme-icon-sun {
+ display: block;
+}
+
.theme-toggle:hover {
color: var(--link-hover);
}
diff --git a/src/lib/styles/global.pruned.css b/src/lib/styles/global.pruned.css
index 9872f39..4c6c3a3 100644
--- a/src/lib/styles/global.pruned.css
+++ b/src/lib/styles/global.pruned.css
@@ -132,6 +132,18 @@ article {
justify-content: center;
}
+.theme-icon-sun {
+ display: none;
+}
+
+[data-theme="dark"] .theme-icon-moon {
+ display: none;
+}
+
+[data-theme="dark"] .theme-icon-sun {
+ display: block;
+}
+
.theme-toggle:hover {
color: var(--link-hover);
}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 19a7b85..0662a9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,53 +1,13 @@
<script lang="ts">
- import { onMount } from "svelte";
import Header from "$lib/components/Header.svelte";
import Footer from "$lib/components/Footer.svelte";
- import favicon from "$lib/assets/favicon.svg";
import "$lib/styles/global.css";
let { children } = $props();
-
- onMount(() => {
- const loadAnalytics = () => {
- if (document.querySelector('script[data-goatcounter-script="true"]'))
- return;
-
- const script = document.createElement("script");
- script.src = "https://stats.wsap.dev/count.js";
- script.async = true;
- script.defer = true;
- script.setAttribute("data-goatcounter", "https://stats.wsap.dev/count");
- script.setAttribute("data-goatcounter-script", "true");
- document.head.appendChild(script);
- };
-
- const runDeferredAnalytics = () => {
- const idleWindow = window as Window & {
- requestIdleCallback?: (
- callback: IdleRequestCallback,
- options?: IdleRequestOptions,
- ) => number;
- };
-
- if (typeof idleWindow.requestIdleCallback === "function") {
- idleWindow.requestIdleCallback(loadAnalytics, { timeout: 3000 });
- return;
- }
- window.setTimeout(loadAnalytics, 1500);
- };
-
- if (document.readyState === "complete") {
- runDeferredAnalytics();
- return;
- }
-
- window.addEventListener("load", runDeferredAnalytics, { once: true });
- return () => window.removeEventListener("load", runDeferredAnalytics);
- });
</script>
<svelte:head>
- <link rel="icon" href={favicon} />
+ <link rel="icon" href="/favicon.svg" />
<meta name="color-scheme" content="light dark" />
</svelte:head>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 189f71e..9d6b691 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1 +1,2 @@
export const prerender = true;
+export const csr = false;
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-29 18:20:00 +0000