update links & add cow moo

.prettierrc

···
       "options": {
         "parser": "astro"
       }
+    },
+    {
+      "files": "*.css",
+      "options": {
+        "parser": "css"
+      }
     }
   ]
 }

package-lock.json

···
         "@atproto/api": "^0.13.35",
         "@iconify-json/fa6-brands": "^1.2.5",
         "@iconify-json/fa6-solid": "^1.2.3",
-        "@vercel/analytics": "^1.4.1",
-        "@vercel/speed-insights": "^1.1.0",
         "astro": "^5.13.4",
         "svelte": "^5.16.0",
         "typescript": "^5.7.2"
       },
-      "devDependencies": {}
+      "devDependencies": {
+        "prettier": "^3.6.2",
+        "prettier-plugin-astro": "^0.14.1"
+      }
     },
     "node_modules/@astrojs/compiler": {
       "version": "2.12.2",
···
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
-    },
-    "node_modules/@vercel/analytics": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.5.0.tgz",
-      "integrity": "sha512-MYsBzfPki4gthY5HnYN7jgInhAZ7Ac1cYDoRWFomwGHWEX7odTEzbtg9kf/QSo7XEsEAqlQugA6gJ2WS2DEa3g==",
-      "license": "MPL-2.0",
-      "peerDependencies": {
-        "@remix-run/react": "^2",
-        "@sveltejs/kit": "^1 || ^2",
-        "next": ">= 13",
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "svelte": ">= 4",
-        "vue": "^3",
-        "vue-router": "^4"
-      },
-      "peerDependenciesMeta": {
-        "@remix-run/react": {
-          "optional": true
-        },
-        "@sveltejs/kit": {
-          "optional": true
-        },
-        "next": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        },
-        "vue-router": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vercel/speed-insights": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.2.0.tgz",
-      "integrity": "sha512-y9GVzrUJ2xmgtQlzFP2KhVRoCglwfRQgjyfY607aU0hh0Un6d0OUyrJkjuAlsV18qR4zfoFPs/BiIj9YDS6Wzw==",
-      "hasInstallScript": true,
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "@sveltejs/kit": "^1 || ^2",
-        "next": ">= 13",
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "svelte": ">= 4",
-        "vue": "^3",
-        "vue-router": "^4"
-      },
-      "peerDependenciesMeta": {
-        "@sveltejs/kit": {
-          "optional": true
-        },
-        "next": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "svelte": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        },
-        "vue-router": {
-          "optional": true
-        }
-      }
     },
     "node_modules/acorn": {
       "version": "8.15.0",
···
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-astro": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.1.tgz",
+      "integrity": "sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/compiler": "^2.9.1",
+        "prettier": "^3.0.0",
+        "sass-formatter": "^0.7.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.0.0"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
···
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sass-formatter": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz",
+      "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
···
       "license": "MIT",
       "dependencies": {
         "inline-style-parser": "0.2.4"
+      }
+    },
+    "node_modules/suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "s.color": "0.0.15"
       }
     },
     "node_modules/svelte": {

package.json

···
     "@atproto/api": "^0.13.35",
     "@iconify-json/fa6-brands": "^1.2.5",
     "@iconify-json/fa6-solid": "^1.2.3",
-    "@vercel/analytics": "^1.4.1",
-    "@vercel/speed-insights": "^1.1.0",
     "astro": "^5.13.4",
     "svelte": "^5.16.0",
     "typescript": "^5.7.2"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1"
+  }
 }

src/components/BandcampWishlist.astro

···
     border-radius: 4px;
     color: var(--base);
     padding: 0.25rem 0.5rem;
+    text-decoration: none;
   }
 </style>

src/components/LiberaPayDonate.astro

···
     border-radius: 4px;
     color: var(--base);
     padding: 0.25rem 0.5rem;
+    text-decoration: none;
   }
 </style>

src/components/Link.astro

···
     display: flex;
     align-items: center;
     gap: 8px;
-    text-decoration: none;
     color: var(--text);
   }
 

src/components/Navigation.astro

···
 ---
-import { Link, ThemeToggle } from "@/components";
+import { Link } from '@/components';
 ---
 
+<script>
+  const homeLink = document.querySelector<HTMLAnchorElement>('a[href="/"]');
+  const mooAudio = document.querySelector<HTMLAudioElement>('audio#moo');
+
+  homeLink?.addEventListener('click', (event) => {
+    event.preventDefault();
+    mooAudio?.addEventListener('ended', function () {
+      const anchor = event.target as HTMLAnchorElement;
+      window.location.href = anchor.href;
+    });
+    mooAudio?.play();
+  });
+</script>
+
+<audio id="moo">
+  <source src="/moo.wav" type="audio/wav" />
+</audio>
 <nav>
   <ol>
     <li>
···
     </li>
     <li>
       <Link href="/blog">Blog</Link>
-    </li>
-    <li>
-      <ThemeToggle client:load />
     </li>
   </ol>
 </nav>
···
   nav > ol > li:first-child {
     flex-grow: 1;
     font-size: large;
+  }
+
+  nav > ol > li:first-child > a {
+    text-decoration: none;
   }
 </style>

src/components/ThemeToggle.svelte

···
-<script lang="ts">
-    import type { HTMLButtonAttributes } from "svelte/elements";
-    import { Button } from "@/components";
-
-    interface Props extends HTMLButtonAttributes {}
-
-    let { onclick, ...props }: Props = $props();
-
-    let isDark = $state(true);
-
-    function onToggleClick() {
-        isDark = !isDark;
-        document.body.setAttribute("data-theme", isDark ? "dark" : "light");
-    }
-</script>
-
-<Button onclick={onToggleClick} {...props}>
-    <span class="sr-only">Toggle color palette theme</span>
-    <iconify-icon
-        icon={isDark ? "fa6-solid:moon" : "fa6-solid:sun"}
-        width={32}
-        height={32}
-    ></iconify-icon>
-</Button>

src/components/index.ts

···
-export { default as BandcampWishlist } from "./BandcampWishlist.astro";
-export { default as BlogPreviewCard } from "./BlogPreviewCard.astro";
-export { default as Footer } from "./Footer.astro";
-export { default as Head } from "./Head.astro";
-export { default as LiberaPayDonate } from "./LiberaPayDonate.astro";
-export { default as Link } from "./Link.astro";
-export { default as Navigation } from "./Navigation.astro";
-export { default as BlueskyComments } from "./BlueskyComments.svelte";
-export { default as Button } from "./Button.svelte";
-export { default as ThemeToggle } from "./ThemeToggle.svelte";
+export { default as BandcampWishlist } from './BandcampWishlist.astro';
+export { default as BlogPreviewCard } from './BlogPreviewCard.astro';
+export { default as Footer } from './Footer.astro';
+export { default as Head } from './Head.astro';
+export { default as LiberaPayDonate } from './LiberaPayDonate.astro';
+export { default as Link } from './Link.astro';
+export { default as Navigation } from './Navigation.astro';
+export { default as BlueskyComments } from './BlueskyComments.svelte';
+export { default as Button } from './Button.svelte';

src/styles/global.css

···
 :root {
-  font-family: Helvetica Neue, Helvetica, sans-serif;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    sans-serif;
+
+  color-scheme: light dark;
 }
 
-body[data-theme="light"] {
-  --rosewater: #dc8a78;
-  --flamingo: #dd7878;
-  --pink: #ea76cb;
-  --mauve: #8839ef;
-  --red: #d20f39;
-  --maroon: #e64553;
-  --peach: #fe640b;
-  --yellow: #df8e1d;
-  --green: #40a02b;
-  --teal: #179299;
-  --sky: #04a5e5;
-  --sapphire: #209fb5;
-  --blue: #1e66f5;
-  --lavender: #7287fd;
-  --text: #4c4f69;
-  --subtext1: #5c5f77;
-  --subtext0: #6c6f85;
-  --overlay2: #7c7f93;
-  --overlay1: #8c8fa1;
-  --overlay0: #9ca0b0;
-  --surface2: #acb0be;
-  --surface1: #bcc0cc;
-  --surface0: #ccd0da;
-  --base: #eff1f5;
-  --mantle: #e6e9ef;
-  --crust: #dce0e8;
+@media (prefers-color-scheme: dark) {
+  body {
+    --rosewater: #f5e0dc;
+    --flamingo: #f2cdcd;
+    --pink: #f5c2e7;
+    --mauve: #cba6f7;
+    --red: #f38ba8;
+    --maroon: #eba0ac;
+    --peach: #fab387;
+    --yellow: #f9e2af;
+    --green: #a6e3a1;
+    --teal: #94e2d5;
+    --sky: #89dceb;
+    --sapphire: #74c7ec;
+    --blue: #89b4fa;
+    --lavender: #b4befe;
+    --text: #cdd6f4;
+    --subtext1: #bac2de;
+    --subtext0: #a6adc8;
+    --overlay2: #9399b2;
+    --overlay1: #7f849c;
+    --overlay0: #6c7086;
+    --surface2: #585b70;
+    --surface1: #45475a;
+    --surface0: #313244;
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --crust: #11111b;
+  }
 }
 
-body[data-theme="dark"] {
-  --rosewater: #f5e0dc;
-  --flamingo: #f2cdcd;
-  --pink: #f5c2e7;
-  --mauve: #cba6f7;
-  --red: #f38ba8;
-  --maroon: #eba0ac;
-  --peach: #fab387;
-  --yellow: #f9e2af;
-  --green: #a6e3a1;
-  --teal: #94e2d5;
-  --sky: #89dceb;
-  --sapphire: #74c7ec;
-  --blue: #89b4fa;
-  --lavender: #b4befe;
-  --text: #cdd6f4;
-  --subtext1: #bac2de;
-  --subtext0: #a6adc8;
-  --overlay2: #9399b2;
-  --overlay1: #7f849c;
-  --overlay0: #6c7086;
-  --surface2: #585b70;
-  --surface1: #45475a;
-  --surface0: #313244;
-  --base: #1e1e2e;
-  --mantle: #181825;
-  --crust: #11111b;
+@media (prefers-color-scheme: light) {
+  body {
+    --rosewater: #dc8a78;
+    --flamingo: #dd7878;
+    --pink: #ea76cb;
+    --mauve: #8839ef;
+    --red: #d20f39;
+    --maroon: #e64553;
+    --peach: #fe640b;
+    --yellow: #df8e1d;
+    --green: #40a02b;
+    --teal: #179299;
+    --sky: #04a5e5;
+    --sapphire: #209fb5;
+    --blue: #1e66f5;
+    --lavender: #7287fd;
+    --text: #4c4f69;
+    --subtext1: #5c5f77;
+    --subtext0: #6c6f85;
+    --overlay2: #7c7f93;
+    --overlay1: #8c8fa1;
+    --overlay0: #9ca0b0;
+    --surface2: #acb0be;
+    --surface1: #bcc0cc;
+    --surface0: #ccd0da;
+    --base: #eff1f5;
+    --mantle: #e6e9ef;
+    --crust: #dce0e8;
+  }
 }
 
 body {
···
 }
 
 @font-face {
-  font-family: "Atkinson";
-  src: url("/fonts/atkinson-regular.woff") format("woff");
+  font-family: 'Atkinson';
+  src: url('/fonts/atkinson-regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: "Atkinson";
-  src: url("/fonts/atkinson-bold.woff") format("woff");
+  font-family: 'Atkinson';
+  src: url('/fonts/atkinson-bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;

src/utils/cookies.ts

···
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+  return match ? decodeURIComponent(match[2]) : null;
+}
+
+export function setCookie(name: string, value: string, days?: number): void {
+  let expires = '';
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = `; expires=${date.toUTCString()}`;
+  }
+  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
+}

src/utils/index.ts

···
 export { default as formatDate } from "./formatDate";
 export { default as formatBlogTitleUrl } from "./formatBlogTitleUrl";
+export * from './cookies';