chore: release v0.3.1

app/components/OgImage/BlogPost.vue

@@ -110,6 +110,8 @@ const formattedAuthorNames = computed(() => {
               v-if="author.avatar"
               :src="author.avatar"
               :alt="author.name"
+              width="48"
+              height="48"
               class="w-full h-full object-cover"
             />
             <span v-else style="font-size: 20px; color: #666; font-weight: 500">

app/components/Settings/Toggle.client.vue

@@ -27,7 +27,7 @@ const id = useId()
 <template>
   <label
     :for="id"
-    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto] cursor-pointer"
     :class="[justify === 'start' ? 'justify-start' : '']"
     :style="
       props.reverseOrder
@@ -39,9 +39,9 @@ const id = useId()
       <input
         role="switch"
         type="checkbox"
-        :id
+        :id="id"
         v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg hover:bg-fg/60 checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
         style="grid-area: toggle"
       />
       <TooltipApp
@@ -85,9 +85,9 @@ const id = useId()
       <input
         role="switch"
         type="checkbox"
-        :id
+        :id="id"
         v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg hover:bg-fg/60 checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
         style="grid-area: toggle; justify-self: end"
       />
     </template>
@@ -98,82 +98,37 @@ const id = useId()
 </template>
 
 <style scoped>
-/* Thumb position: logical property for RTL support */
-.toggle::before {
-  inset-inline-start: 1px;
-}
-
-/* Track transition */
-.toggle {
-  transition:
-    background-color 200ms ease-in-out,
-    border-color 100ms ease-in-out;
-}
-
-.toggle::before {
-  transition:
-    background-color 200ms ease-in-out,
-    translate 200ms ease-in-out;
-}
-
-/* Hover states */
-.toggle:hover:not(:checked) {
-  background: var(--fg-muted);
-}
-
-.toggle:checked:hover {
-  background: var(--fg-muted);
-  border-color: var(--fg-muted);
-}
-
-/* RTL-aware checked thumb position */
-:dir(ltr) .toggle:checked::before {
-  translate: 20px;
-}
-
-:dir(rtl) .toggle:checked::before {
-  translate: -20px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle,
-  .toggle::before {
-    transition: none;
-  }
-}
-
 /* Support forced colors */
 @media (forced-colors: active) {
-  label > span {
+  .toggle {
     background: Canvas;
-    color: Highlight;
-    forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
-  label:has(.toggle:checked) > span {
+  .toggle:checked {
     background: Highlight;
-    color: Canvas;
+    border-color: CanvasText;
   }
 
   .toggle::before {
-    forced-color-adjust: none;
-    background-color: Highlight;
+    background-color: CanvasText;
   }
 
-  .toggle,
-  .toggle:hover {
-    background: Canvas;
-    border-color: CanvasText;
+  .toggle:checked::before {
+    background-color: Canvas;
   }
 
-  .toggle:checked,
-  .toggle:checked:hover {
-    background: Highlight;
-    border-color: CanvasText;
+  .toggle::after {
+    background-color: Highlight;
   }
+}
 
-  .toggle:checked::before {
-    background: Canvas;
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle::before,
+  .toggle::after {
+    transition: none !important;
+    animation: none !important;
   }
 }
 </style>

app/components/Settings/Toggle.server.vue

@@ -4,6 +4,10 @@ const props = withDefaults(
     label: string
     description?: string
     justify?: 'between' | 'start'
+    tooltip?: string
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
+    tooltipTo?: string
+    tooltipOffset?: number
     reverseOrder?: boolean
   }>(),
   {
@@ -15,7 +19,7 @@ const props = withDefaults(
 
 <template>
   <div
-    class="grid items-center gap-4 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto]"
     :class="[justify === 'start' ? 'justify-start' : '']"
     :style="
       props.reverseOrder
@@ -51,84 +55,3 @@ const props = withDefaults(
     {{ description }}
   </p>
 </template>
-
-<style scoped>
-/* Thumb position: logical property for RTL support */
-.toggle::before {
-  inset-inline-start: 1px;
-}
-
-/* Track transition */
-.toggle {
-  transition:
-    background-color 200ms ease-in-out,
-    border-color 100ms ease-in-out;
-}
-
-.toggle::before {
-  transition:
-    background-color 200ms ease-in-out,
-    translate 200ms ease-in-out;
-}
-
-/* Hover states */
-.toggle:hover:not(:checked) {
-  background: var(--fg-muted);
-}
-
-.toggle:checked:hover {
-  background: var(--fg-muted);
-  border-color: var(--fg-muted);
-}
-
-/* RTL-aware checked thumb position */
-:dir(ltr) .toggle:checked::before {
-  translate: 20px;
-}
-
-:dir(rtl) .toggle:checked::before {
-  translate: -20px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle,
-  .toggle::before {
-    transition: none;
-  }
-}
-
-/* Support forced colors */
-@media (forced-colors: active) {
-  label > span {
-    background: Canvas;
-    color: Highlight;
-    forced-color-adjust: none;
-  }
-
-  label:has(.toggle:checked) > span {
-    background: Highlight;
-    color: Canvas;
-  }
-
-  .toggle::before {
-    forced-color-adjust: none;
-    background-color: Highlight;
-  }
-
-  .toggle,
-  .toggle:hover {
-    background: Canvas;
-    border-color: CanvasText;
-  }
-
-  .toggle:checked,
-  .toggle:checked:hover {
-    background: Highlight;
-    border-color: CanvasText;
-  }
-
-  .toggle:checked::before {
-    background: Canvas;
-  }
-}
-</style>

modules/blog.ts

@@ -51,14 +51,18 @@ async function fetchBlueskyAvatars(
     for (const profile of data.profiles) {
       if (profile.avatar) {
         const hash = crypto.createHash('sha256').update(profile.avatar).digest('hex')
-        const dest = join(imagesDir, `${hash}.jpg`)
+        const dest = join(imagesDir, `${hash}.png`)
 
         if (!existsSync(dest)) {
-          const res = await fetch(profile.avatar)
-          await writeFile(join(imagesDir, `${hash}.jpg`), res.body!)
+          const res = await fetch(`${profile.avatar}@png`)
+          if (!res.ok || !res.body) {
+            console.warn(`[blog] Failed to fetch Bluesky avatar: ${profile.avatar}@png`)
+            continue
+          }
+          await writeFile(join(imagesDir, `${hash}.png`), res.body)
         }
 
-        avatarMap.set(profile.handle, `/blog/avatar/${hash}.jpg`)
+        avatarMap.set(profile.handle, `/blog/avatar/${hash}.png`)
       }
     }
   } catch (error) {
@@ -85,7 +89,7 @@ function resolveAuthors(authors: Author[], avatarMap: Map<string, string>): Reso
  * Resolves Bluesky avatars at build time.
  */
 async function loadBlogPosts(blogDir: string, imagesDir: string): Promise<BlogPostFrontmatter[]> {
-  const files: string[] = globSync(join(blogDir, '*.md'))
+  const files: string[] = globSync(join(blogDir, '*.md').replace(/\\/g, '/'))
 
   // First pass: extract raw frontmatter and collect all Bluesky handles
   const rawPosts: Array<{ frontmatter: Record<string, unknown> }> = []

package.json

@@ -119,7 +119,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-g52709db6.20260226-1136",
     "vue": "3.5.29",
-    "vue-data-ui": "3.15.9"
+    "vue-data-ui": "3.15.10"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",
@@ -146,7 +146,7 @@
     "h3": "1.15.5",
     "h3-next": "npm:h3@2.0.1-rc.14",
     "knip": "5.85.0",
-    "lint-staged": "16.3.1",
+    "lint-staged": "16.3.2",
     "markdown-it-anchor": "9.2.0",
     "oxfmt": "0.36.0",
     "oxlint": "1.51.0",