treewide: fix article preview and page freeze bugs

- Fix Markdown component using $derived() instead of $derived.by()
- Add @tailwindcss/typography for prose styling
- Remove all $effect usage (caused infinite loops)
- Move view count increment to server-side

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: aster-void

bun.lock

@@ -20,6 +20,7 @@
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/kit": "^2.49.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.1.17",
         "@types/marked": "^6.0.0",
         "@types/node": "^22",
@@ -288,6 +289,8 @@
 
     "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],
 
+    "@tailwindcss/typography": ["@tailwindcss/[email protected]", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
+
     "@tailwindcss/vite": ["@tailwindcss/[email protected]", "", { "dependencies": { "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "tailwindcss": "4.1.18" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA=="],
 
     "@types/cookie": ["@types/[email protected]", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
@@ -692,7 +695,7 @@
 
     "postcss-scss": ["[email protected]", "", { "peerDependencies": { "postcss": "^8.4.29" } }, "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
 
     "prelude-ls": ["[email protected]", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
@@ -882,6 +885,8 @@
 
     "postcss-load-config/yaml": ["[email protected]", "", {}, "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="],
 
+    "svelte-eslint-parser/postcss-selector-parser": ["[email protected]", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
+
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm" }, "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw=="],
 
     "@esbuild-kit/core-utils/esbuild/@esbuild/android-arm64": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm64" }, "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ=="],

package.json

@@ -30,6 +30,7 @@
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.49.1",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
     "@types/marked": "^6.0.0",
     "@types/node": "^22",

src/app.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 @plugin "daisyui" {
   logs: false;
 }

src/lib/components/Markdown.svelte

@@ -8,13 +8,13 @@
 
   const { content }: Props = $props();
 
-  const html = $derived(() => {
+  const html = $derived.by(() => {
     const rawHtml = marked.parse(content, { async: false });
     return DOMPurify.sanitize(rawHtml);
   });
 </script>
 
-<div class="prose-zinc prose max-w-none">
+<div class="prose max-w-none prose-zinc">
   <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html html}
 </div>

src/lib/components/admin-search-modal.svelte

@@ -25,24 +25,17 @@
   import type { AdminSearchResult } from "$lib/shared/logic/search";
 
   let query = $state("");
-  let inputRef: HTMLInputElement | null = $state(null);
   let selectedIndex = $state(0);
-  let prevQuery = $state("");
 
   const results = $derived(query.trim() ? await searchAdmin(query) : []);
 
-  $effect(() => {
-    if (modalState.open && inputRef) {
-      inputRef.focus();
-    }
-  });
-
-  $effect(() => {
-    if (query !== prevQuery) {
-      prevQuery = query;
+  function handleQueryInput(e: Event & { currentTarget: HTMLInputElement }) {
+    const newQuery = e.currentTarget.value;
+    if (newQuery !== query) {
+      query = newQuery;
       selectedIndex = 0;
     }
-  });
+  }
 
   function handleGlobalKeydown(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -160,8 +153,8 @@
       <div class="flex items-center gap-3 border-b border-base-300 px-4">
         <Search class="h-5 w-5 shrink-0 text-base-content/40" />
         <input
-          bind:this={inputRef}
-          bind:value={query}
+          value={query}
+          oninput={handleQueryInput}
           type="text"
           placeholder="Search articles, projects, members..."
           class="h-14 flex-1 bg-transparent text-base outline-none placeholder:text-base-content/40"

src/lib/components/site-search-modal.svelte

@@ -25,24 +25,17 @@
   import type { SearchResult } from "$lib/shared/logic/search";
 
   let query = $state("");
-  let inputRef: HTMLInputElement | null = $state(null);
   let selectedIndex = $state(0);
-  let prevQuery = $state("");
 
   const results = $derived(query.trim() ? await searchPublic(query) : []);
 
-  $effect(() => {
-    if (modalState.open && inputRef) {
-      inputRef.focus();
-    }
-  });
-
-  $effect(() => {
-    if (query !== prevQuery) {
-      prevQuery = query;
+  function handleQueryInput(e: Event & { currentTarget: HTMLInputElement }) {
+    const newQuery = e.currentTarget.value;
+    if (newQuery !== query) {
+      query = newQuery;
       selectedIndex = 0;
     }
-  });
+  }
 
   function handleGlobalKeydown(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === "k") {
@@ -163,8 +156,8 @@
       <div class="flex items-center gap-3 border-b border-zinc-200 px-4">
         <Search class="h-5 w-5 shrink-0 text-zinc-400" />
         <input
-          bind:this={inputRef}
-          bind:value={query}
+          value={query}
+          oninput={handleQueryInput}
           type="text"
           placeholder="記事やプロジェクトを検索..."
           class="h-14 flex-1 bg-transparent text-base outline-none placeholder:text-zinc-400"

src/lib/data/public/index.remote.ts

@@ -1,9 +1,8 @@
 import * as v from "valibot";
-import { query, command } from "$app/server";
+import { query } from "$app/server";
 import {
   listPublishedArticles,
   getPublishedArticle,
-  incrementViewCount,
   getRelatedArticles,
   searchPublishedArticles,
 } from "$lib/server/database/articles.server";
@@ -17,7 +16,6 @@ import type { SearchResult } from "$lib/shared/logic/search";
 
 export const getPublicArticles = query(listPublishedArticles);
 export const getPublicArticle = query(v.string(), getPublishedArticle);
-export const incrementArticleViewCount = command(v.string(), incrementViewCount);
 export const getPublicRelatedArticles = query(
   v.object({
     articleId: v.string(),

src/lib/server/database/articles.server.ts

@@ -22,10 +22,20 @@ export async function getArticleBySlug(slug: string) {
 }
 
 export async function getPublishedArticle(slug: string) {
-  return db.query.article.findFirst({
+  const result = await db.query.article.findFirst({
     where: and(eq(article.slug, slug), eq(article.published, true)),
     with: { author: true },
   });
+
+  // Increment view count (fire-and-forget)
+  if (result) {
+    db.update(article)
+      .set({ viewCount: sql`${article.viewCount} + 1` })
+      .where(eq(article.slug, slug))
+      .run();
+  }
+
+  return result;
 }
 
 export async function listAllArticles() {

src/routes/(site)/articles/[slug]/+page.svelte

@@ -2,11 +2,7 @@
   import { page } from "$app/state";
   import Markdown from "$lib/components/Markdown.svelte";
   import { Eye } from "lucide-svelte";
-  import {
-    getPublicArticle,
-    getPublicRelatedArticles,
-    incrementArticleViewCount,
-  } from "$lib/data/public/index.remote";
+  import { getPublicArticle, getPublicRelatedArticles } from "$lib/data/public/index.remote";
 
   const slug = $derived(page.params.slug ?? "");
   const article = $derived(await getPublicArticle(slug));
@@ -19,13 +15,6 @@
         })
       : [],
   );
-
-  // Increment view count when article is loaded
-  $effect(() => {
-    if (article) {
-      incrementArticleViewCount(slug);
-    }
-  });
 </script>
 
 <svelte:head>