Added 404

astro.config.mjs

@@ -13,7 +13,6 @@ export default defineConfig({
     "/feed": "/rss.xml",
   },
   output: "server",
-  prefetch: true,
   build: {
     inlineStylesheets: "always",
   },

src/components/FuzzyText.vue

@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, nextTick, useTemplateRef } from 'vue';
+
+interface FuzzyTextProps {
+  text: string;
+  fontSize?: number | string;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  color?: string;
+  enableHover?: boolean;
+  baseIntensity?: number;
+  hoverIntensity?: number;
+}
+
+const props = withDefaults(defineProps<FuzzyTextProps>(), {
+  text: '',
+  fontSize: 'clamp(2rem, 8vw, 8rem)',
+  fontWeight: 900,
+  fontFamily: 'inherit',
+  color: '#fff',
+  enableHover: true,
+  baseIntensity: 0.18,
+  hoverIntensity: 0.5
+});
+
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
+let animationFrameId: number;
+let isCancelled = false;
+let cleanup: (() => void) | null = null;
+
+const waitForFont = async (fontFamily: string, fontWeight: string | number, fontSize: string): Promise<boolean> => {
+  if (document.fonts?.check) {
+    const fontString = `${fontWeight} ${fontSize} ${fontFamily}`;
+
+    if (document.fonts.check(fontString)) {
+      return true;
+    }
+
+    try {
+      await document.fonts.load(fontString);
+      return document.fonts.check(fontString);
+    } catch (error) {
+      console.warn('Font loading failed:', error);
+      return false;
+    }
+  }
+
+  return new Promise(resolve => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      resolve(false);
+      return;
+    }
+
+    ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+    const testWidth = ctx.measureText('M').width;
+
+    let attempts = 0;
+    const checkFont = () => {
+      ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+      const newWidth = ctx.measureText('M').width;
+
+      if (newWidth !== testWidth && newWidth > 0) {
+        resolve(true);
+      } else if (attempts < 20) {
+        attempts++;
+        setTimeout(checkFont, 50);
+      } else {
+        resolve(false);
+      }
+    };
+
+    setTimeout(checkFont, 10);
+  });
+};
+
+const initCanvas = async () => {
+  if (document.fonts?.ready) {
+    await document.fonts.ready;
+  }
+
+  if (isCancelled) return;
+
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const computedFontFamily =
+    props.fontFamily === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : props.fontFamily;
+
+  const fontSizeStr = typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize;
+  let numericFontSize: number;
+
+  if (typeof props.fontSize === 'number') {
+    numericFontSize = props.fontSize;
+  } else {
+    const temp = document.createElement('span');
+    temp.style.fontSize = props.fontSize;
+    temp.style.fontFamily = computedFontFamily;
+    document.body.appendChild(temp);
+    const computedSize = window.getComputedStyle(temp).fontSize;
+    numericFontSize = parseFloat(computedSize);
+    document.body.removeChild(temp);
+  }
+
+  const fontLoaded = await waitForFont(computedFontFamily, props.fontWeight, fontSizeStr);
+  if (!fontLoaded) {
+    console.warn(`Font not loaded: ${computedFontFamily}`);
+  }
+
+  const text = props.text;
+
+  const offscreen = document.createElement('canvas');
+  const offCtx = offscreen.getContext('2d');
+  if (!offCtx) return;
+
+  const fontString = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+  offCtx.font = fontString;
+
+  const testMetrics = offCtx.measureText('M');
+  if (testMetrics.width === 0) {
+    setTimeout(() => {
+      if (!isCancelled) {
+        initCanvas();
+      }
+    }, 100);
+    return;
+  }
+
+  offCtx.textBaseline = 'alphabetic';
+  const metrics = offCtx.measureText(text);
+
+  const actualLeft = metrics.actualBoundingBoxLeft ?? 0;
+  const actualRight = metrics.actualBoundingBoxRight ?? metrics.width;
+  const actualAscent = metrics.actualBoundingBoxAscent ?? numericFontSize;
+  const actualDescent = metrics.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+
+  const textBoundingWidth = Math.ceil(actualLeft + actualRight);
+  const tightHeight = Math.ceil(actualAscent + actualDescent);
+
+  const extraWidthBuffer = 10;
+  const offscreenWidth = textBoundingWidth + extraWidthBuffer;
+
+  offscreen.width = offscreenWidth;
+  offscreen.height = tightHeight;
+
+  const xOffset = extraWidthBuffer / 2;
+  offCtx.font = `${props.fontWeight} ${fontSizeStr} ${computedFontFamily}`;
+  offCtx.textBaseline = 'alphabetic';
+  offCtx.fillStyle = props.color;
+  offCtx.fillText(text, xOffset - actualLeft, actualAscent);
+
+  const horizontalMargin = 50;
+  const verticalMargin = 0;
+  canvas.width = offscreenWidth + horizontalMargin * 2;
+  canvas.height = tightHeight + verticalMargin * 2;
+  ctx.translate(horizontalMargin, verticalMargin);
+
+  const interactiveLeft = horizontalMargin + xOffset;
+  const interactiveTop = verticalMargin;
+  const interactiveRight = interactiveLeft + textBoundingWidth;
+  const interactiveBottom = interactiveTop + tightHeight;
+
+  let isHovering = false;
+  const fuzzRange = 30;
+
+  const run = () => {
+    if (isCancelled) return;
+    ctx.clearRect(-fuzzRange, -fuzzRange, offscreenWidth + 2 * fuzzRange, tightHeight + 2 * fuzzRange);
+    const intensity = isHovering ? props.hoverIntensity : props.baseIntensity;
+    for (let j = 0; j < tightHeight; j++) {
+      const dx = Math.floor(intensity * (Math.random() - 0.5) * fuzzRange);
+      ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+    }
+    animationFrameId = window.requestAnimationFrame(run);
+  };
+
+  run();
+
+  const isInsideTextArea = (x: number, y: number) =>
+    x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!props.enableHover) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    isHovering = isInsideTextArea(x, y);
+  };
+
+  const handleMouseLeave = () => {
+    isHovering = false;
+  };
+
+  const handleTouchMove = (e: TouchEvent) => {
+    if (!props.enableHover) return;
+    e.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    isHovering = isInsideTextArea(x, y);
+  };
+
+  const handleTouchEnd = () => {
+    isHovering = false;
+  };
+
+  if (props.enableHover) {
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseleave', handleMouseLeave);
+    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
+    canvas.addEventListener('touchend', handleTouchEnd);
+  }
+
+  cleanup = () => {
+    window.cancelAnimationFrame(animationFrameId);
+    if (props.enableHover) {
+      canvas.removeEventListener('mousemove', handleMouseMove);
+      canvas.removeEventListener('mouseleave', handleMouseLeave);
+      canvas.removeEventListener('touchmove', handleTouchMove);
+      canvas.removeEventListener('touchend', handleTouchEnd);
+    }
+  };
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initCanvas();
+  });
+});
+
+onUnmounted(() => {
+  isCancelled = true;
+  if (animationFrameId) {
+    window.cancelAnimationFrame(animationFrameId);
+  }
+  if (cleanup) {
+    cleanup();
+  }
+});
+
+watch(
+  [
+    () => props.text,
+    () => props.fontSize,
+    () => props.fontWeight,
+    () => props.fontFamily,
+    () => props.color,
+    () => props.enableHover,
+    () => props.baseIntensity,
+    () => props.hoverIntensity
+  ],
+  () => {
+    isCancelled = true;
+    if (animationFrameId) {
+      window.cancelAnimationFrame(animationFrameId);
+    }
+    if (cleanup) {
+      cleanup();
+    }
+    isCancelled = false;
+    nextTick(() => {
+      initCanvas();
+    });
+  }
+);
+</script>
+
+<template>
+  <canvas ref="canvasRef" />
+</template>

src/components/NavigationBar.vue

@@ -90,7 +90,7 @@ onUnmounted(() => {
     >
         <div class="overflow-visible">
             <ul
-                class="menu menu-horizontal bg-base-200 rounded-box border-1 border-solid border-primary p-1.5 sm:p-2 flex flex-nowrap whitespace-nowrap"
+                class="menu menu-horizontal bg-base-200 rounded-box border border-solid border-primary p-1.5 sm:p-2 flex flex-nowrap whitespace-nowrap"
             >
                 <li
                     v-for="item in enabledNavigationItems"
@@ -99,7 +99,7 @@ onUnmounted(() => {
                 >
                     <a
                         :href="item.path"
-                        class="tooltip tooltip-top min-h-[44px] min-w-[44px] inline-flex items-center justify-center"
+                        class="tooltip tooltip-top min-h-11 min-w-11 inline-flex items-center justify-center"
                         :class="{
                             'menu-active': item.isActive
                                 ? item.isActive(normalizedPath)

src/layouts/Layout.astro

@@ -33,7 +33,7 @@ const pageDescription = description || config.siteConfig.meta.description;
     </head>
     <body class="flex flex-col min-h-screen overflow-x-hidden">
         <main
-            class="flex-grow flex flex-col gap-4 items-center justify-center pb-[68px] sm:pb-[76px]"
+            class="grow flex flex-col gap-4 items-center justify-center pb-17 sm:pb-19"
         >
             <slot />
         </main>

src/pages/404.astro

@@ -0,0 +1,24 @@
+---
+import Layout from "../layouts/Layout.astro";
+import FuzzyText from "../components/FuzzyText.vue";
+---
+
+<Layout title="404 - Not Found">
+    <div class="flex flex-col items-center justify-center w-full">
+        <FuzzyText
+            text="404"
+            :font-size="140"
+            font-weight="900"
+            color="#c6a0f6"
+            :enable-hover="true"
+            :base-intensity="0.18"
+            :hover-intensity="0.5"
+            client:load
+        />
+        <a
+            href="/"
+            class="mt-4 text-primary hover:text-primary/80 transition-colors"
+            >Take me back!</a
+        >
+    </div>
+</Layout>