fix: timer leak, observer leak, withAlpha helper, colophon hostname

- CelebrationEffect: guard recursive setTimeout against unmount race
- SearchWithAlgolia: reuse single dropdownObserver instead of leaking per open
- BlogColophon: derive hostname from URL instead of hardcoding "Medium"
- theme.ts: extract withAlpha helper, replace 6 brittle slice(0,-1) patterns
- Nav: replace bare wrapper div with Fragment
- Navbar: reduce backdrop blur 12px → 8px

Author: quantizor

components/BlogMeta.tsx

@@ -63,7 +63,7 @@ export function BlogColophon({ author, originalUrl }: { author: string; original
         <ColophonNote>
           Originally published on{' '}
           <Link href={originalUrl} variant="inline">
-            Medium
+            {new URL(originalUrl).hostname.replace('www.', '')}
           </Link>
           .
         </ColophonNote>

components/CelebrationEffect.tsx

@@ -328,10 +328,12 @@ export default function CelebrationEffect() {
 
     spawnFirework();
     let timer: ReturnType<typeof setTimeout>;
+    let stopped = false;
 
     function scheduleNext() {
       timer = setTimeout(
         () => {
+          if (stopped) return;
           spawnFirework();
           scheduleNext();
         },
@@ -340,7 +342,10 @@ export default function CelebrationEffect() {
     }
     scheduleNext();
 
-    return () => clearTimeout(timer);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
   }, []);
 
   // fwId/particleId come from data attributes rather than a per-particle

components/Nav/Navbar.tsx

@@ -37,8 +37,8 @@ export default function Navbar({ onSideToggle, isSideFolded }: NavbarProps) {
 const Wrapper = styled.nav.attrs({ 'aria-label': 'Main' })<{ children?: React.ReactNode }>`
   align-items: center;
   background-color: ${theme.color.navBg};
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   box-sizing: border-box;
   color: ${theme.color.navText};
   display: flex;

components/Nav/SearchWithAlgolia.tsx

@@ -60,6 +60,7 @@ function injectStartScreen(modal: Element, latestPost: LatestPost) {
 let docSearchInitialized = false;
 let docSearchTarget: HTMLDivElement | null = null;
 let modalObserver: MutationObserver | null = null;
+let dropdownObserver: MutationObserver | null = null;
 
 function initDocSearch(container: HTMLElement, latestPost: LatestPost, onReady: () => void) {
   if (docSearchInitialized) {
@@ -83,11 +84,13 @@ function initDocSearch(container: HTMLElement, latestPost: LatestPost, onReady:
           injectStartScreen(node, latestPost);
           const dropdown = node.querySelector('.DocSearch-Dropdown');
           if (dropdown) {
-            new MutationObserver(() => {
+            if (dropdownObserver) dropdownObserver.disconnect();
+            dropdownObserver = new MutationObserver(() => {
               if (!dropdown.querySelector('.DocSearch-Dropdown-Container')) {
                 injectStartScreen(node, latestPost);
               }
-            }).observe(dropdown, { childList: true });
+            });
+            dropdownObserver.observe(dropdown, { childList: true });
           }
         }
       }

components/Nav/index.tsx

@@ -14,13 +14,13 @@ export interface NavProps {
 
 const Nav = ({ isSideFolded, onSideToggle, latestPost }: NavProps) => {
   return (
-    <div>
+    <>
       <Navbar isSideFolded={isSideFolded} onSideToggle={onSideToggle} />
 
       <Sidebar $isFolded={isSideFolded}>
         <SidebarMenu latestPost={latestPost} />
       </Sidebar>
-    </div>
+    </>
   );
 };
 

utils/theme.ts

@@ -1,5 +1,9 @@
 import { createTheme } from 'styled-components';
 
+function withAlpha(oklch: string, alpha: number): string {
+  return `${oklch.slice(0, -1)} / ${alpha})`;
+}
+
 // Neutral hue for achromatic code tokens (text, comment, punctuation, variable)
 const CODE_NEUTRAL = 54;
 const CODE_NEUTRAL_DARK = 270; // cooler neutral for dark mode
@@ -53,7 +57,7 @@ export const lightTheme = {
     accentLight: 'oklch(0.76 0.18 266.6)',
     accentLighter: 'oklch(0.85 0.12 266.6)',
     accentDark: 'oklch(0.56 0.22 266.6)',
-    accentSubtle: `${lightPalette[13].slice(0, -1)} / 0.08)`,
+    accentSubtle: withAlpha(lightPalette[13], 0.08),
 
     // Borders
     border: 'oklch(0 0 0 / 0.1)',
@@ -75,8 +79,8 @@ export const lightTheme = {
 
     // Blog (derived from P[2] warm amber ~65°)
     blogAccent: lightPalette[2],
-    blogAccentSubtle: `${lightPalette[2].slice(0, -1)} / 0.08)`,
-    blogAccentMuted: `${lightPalette[2].slice(0, -1)} / 0.4)`,
+    blogAccentSubtle: withAlpha(lightPalette[2], 0.08),
+    blogAccentMuted: withAlpha(lightPalette[2], 0.4),
 
     // Nav (glassmorphism)
     navBg: 'oklch(1 0 0 / 0.85)',
@@ -211,15 +215,15 @@ export const darkColors: Partial<typeof lightTheme.color> = {
   accentLight: 'oklch(0.76 0.18 264.5)',
   accentLighter: 'oklch(0.85 0.12 264.5)',
   accentDark: 'oklch(0.56 0.18 264.5)',
-  accentSubtle: `${darkPalette[13].slice(0, -1)} / 0.15)`,
+  accentSubtle: withAlpha(darkPalette[13], 0.15),
   border: 'oklch(1 0 0 / 0.1)',
   borderStrong: 'oklch(1 0 0 / 0.15)',
   shadow: 'oklch(0 0 0 / 0.4)',
   selection: 'oklch(0.6 0.12 290 / 0.3)',
   linkUnderline: 'oklch(1 0 0 / 0.2)',
   linkUnderlineHover: 'oklch(1 0 0 / 0.45)',
-  blogAccentSubtle: `${darkPalette[2].slice(0, -1)} / 0.12)`,
-  blogAccentMuted: `${darkPalette[2].slice(0, -1)} / 0.25)`,
+  blogAccentSubtle: withAlpha(darkPalette[2], 0.12),
+  blogAccentMuted: withAlpha(darkPalette[2], 0.25),
   navBg: 'oklch(0.1 0.01 270 / 0.85)',
   navText: 'oklch(0.95 0 0)',
   codeBg: 'oklch(0.18 0.01 270)',