Update Astro to v7 and bring all dependencies to latest

.prettierrc.mjs

@@ -5,6 +5,8 @@ export default {
 	printWidth: 200,
 	trailingComma: "none",
 	plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+	// Tailwind v4 is configured in CSS, so the class sorter needs the stylesheet entry point.
+	tailwindStylesheet: "./src/styles/global.css",
 	overrides: [
 		{
 			files: "*.astro",

astro.config.mjs

@@ -1,12 +1,18 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
 import icon from "astro-icon";
 import react from "@astrojs/react";
 import mdx from "@astrojs/mdx";
 import vercel from "@astrojs/vercel";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind(), icon(), react(), mdx()],
-	adapter: vercel()
+	integrations: [icon(), react(), mdx()],
+	adapter: vercel(),
+	// Astro 7 defaults to "jsx", which strips the whitespace between inline
+	// elements (e.g. the space before a link in a sentence).
+	compressHTML: true,
+	vite: {
+		plugins: [tailwindcss()]
+	}
 });

package.json

@@ -10,38 +10,38 @@
 		"astro": "astro"
 	},
 	"dependencies": {
-		"@astrojs/check": "^0.9.6",
-		"@astrojs/mdx": "^4.3.13",
-		"@astrojs/react": "^4.4.2",
-		"@astrojs/tailwind": "^6.0.2",
-		"@astrojs/vercel": "^9.0.4",
-		"@fontsource-variable/dm-sans": "^5.0.6",
-		"@formkit/auto-animate": "^0.8.2",
-		"@iconify-json/fa6-brands": "^1.2.5",
-		"@iconify-json/mdi": "^1.2.2",
+		"@astrojs/check": "^0.9.10",
+		"@astrojs/mdx": "^7.0.8",
+		"@astrojs/react": "^6.0.4",
+		"@astrojs/vercel": "^11.0.8",
+		"@fontsource-variable/dm-sans": "^5.3.0",
+		"@formkit/auto-animate": "^0.10.0",
+		"@iconify-json/fa6-brands": "^1.2.6",
+		"@iconify-json/mdi": "^1.2.3",
 		"@octokit/rest": "^22.0.1",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
+		"@tailwindcss/vite": "^4.3.3",
+		"@types/react": "^19.2.18",
+		"@types/react-dom": "^19.2.5",
 		"@types/whois-json": "^2.0.4",
-		"astro": "^5.16.11",
-		"astro-icon": "^1.1.5",
-		"bluesky-comments": "^0.9.0",
-		"jspdf": "^4.1.0",
+		"astro": "^7.2.7",
+		"astro-icon": "^1.2.0",
+		"bluesky-comments": "^0.13.1",
+		"jspdf": "^4.2.1",
 		"jszip": "^3.10.1",
-		"react": "^18.3.1",
-		"react-confetti": "^6.1.0",
-		"react-dom": "^18.3.1",
-		"react-tooltip": "^5.28.0",
-		"sharp": "^0.33.4",
-		"tailwindcss": "^3.4.7",
-		"typescript": "^5.5.4",
-		"use-lanyard": "^1.7.0"
+		"react": "^19.2.8",
+		"react-confetti": "^6.4.0",
+		"react-dom": "^19.2.8",
+		"react-tooltip": "^6.0.8",
+		"sharp": "^0.35.3",
+		"tailwindcss": "^4.3.3",
+		"typescript": "^6.0.3",
+		"use-lanyard": "^2.0.0"
 	},
 	"devDependencies": {
-		"@tailwindcss/typography": "^0.5.13",
+		"@tailwindcss/typography": "^0.5.20",
 		"prettier-plugin-astro": "^0.14.1",
-		"prettier-plugin-tailwindcss": "^0.6.6",
-		"tailwind-scrollbar": "^3.1.0"
+		"prettier-plugin-tailwindcss": "^0.8.1",
+		"tailwind-scrollbar": "^4.0.2"
 	},
 	"patchedDependencies": {
 		"@octokit/openapi-types@27.0.0": "patches/@octokit%2Fopenapi-types@27.0.0.patch"

src/components/DiscordStatus.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
-import { useLanyardWS } from "use-lanyard";
+import { useLanyard } from "use-lanyard";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import rawGames from "../assets/gameList.json";
 
@@ -27,7 +27,7 @@ const LanyardStatus = () => {
 	const [visible, setVisible] = useState(false);
 	const [currentTime, setCurrentTime] = useState(new Date().getTime());
 
-	const status = useLanyardWS("342874998375186432");
+	const status = useLanyard("342874998375186432");
 
 	useEffect(() => {
 		const timer = setTimeout(() => setVisible(true), 500);
@@ -73,7 +73,7 @@ const LanyardStatus = () => {
 					<h3 className="text-md mb-2 font-bold">Listening to Spotify</h3>
 
 					<div className="flex items-center space-x-4">
-						<img src={status.spotify.album_art_url as string} alt="Album Art" className="h-16 w-16 rounded" />
+						<img src={status.spotify.album_art_url as string} alt="Album Art" className="h-16 w-16 rounded-sm" />
 						<div>
 							<h4 className="w-32 truncate text-sm md:w-48 lg:w-32 xl:w-32 2xl:w-48" title={status.spotify.song}>
 								{status.spotify.song}
@@ -118,11 +118,11 @@ const LanyardStatus = () => {
 				<div className="m-2 rounded-lg bg-viola-100 p-8 shadow-lg">
 					<h2 className="mb-4 text-2xl font-bold">Status</h2>
 					<div className="flex items-center space-x-4">
-						<div className="relative flex-shrink-0">
-							{largeImage && <img src={largeImage} alt="Large Activity Icon" className="h-16 w-16 rounded" />}
+						<div className="relative shrink-0">
+							{largeImage && <img src={largeImage} alt="Large Activity Icon" className="h-16 w-16 rounded-sm" />}
 							{!largeImage && !smallImage && activity.emoji?.name && <span className="text-3xl">{activity.emoji.name}</span>}
-							{smallImage && !largeImage && <img src={smallImage} alt="Activity Icon" className="h-16 w-16 rounded" />}
-							{smallImage && largeImage && <img src={smallImage} alt="Small Activity Icon" className="ring-3 absolute bottom-0 right-0 h-6 w-6 rounded" />}
+							{smallImage && !largeImage && <img src={smallImage} alt="Activity Icon" className="h-16 w-16 rounded-sm" />}
+							{smallImage && largeImage && <img src={smallImage} alt="Small Activity Icon" className="ring-3 absolute bottom-0 right-0 h-6 w-6 rounded-sm" />}
 						</div>
 
 						<div>

src/components/GithubFeed.astro

@@ -95,7 +95,7 @@ const events = await fetchGitHubEvents();
 		events.map((item) => (
 			<div class="group mx-2 rounded-xl bg-viola-50 p-4 transition-transform duration-500 hover:scale-[1.01] hover:transition hover:duration-500 sm:mx-4 sm:p-5">
 				<a href={item.url} target="_blank" rel="noopener noreferrer" class="flex items-start space-x-3 sm:space-x-4">
-					<img src={item.actor.avatar_url} alt={item.actor.login} class="h-8 w-8 shrink-0 rounded-full border-2 border-white bg-viola-100 shadow-sm sm:h-10 sm:w-10" />
+					<img src={item.actor.avatar_url} alt={item.actor.login} class="h-8 w-8 shrink-0 rounded-full border-2 border-white bg-viola-100 shadow-xs sm:h-10 sm:w-10" />
 
 					<div class="min-w-0 flex-1">
 						<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">

src/components/GithubFeedSkeleton.astro

@@ -6,11 +6,11 @@
 
         <div class="min-w-0 flex-1 space-y-3">
           <div class="flex justify-between">
-            <div class="h-4 w-2/3 rounded bg-viola-200"></div>
-            <div class="h-3 w-12 rounded bg-viola-200"></div>
+            <div class="h-4 w-2/3 rounded-sm bg-viola-200"></div>
+            <div class="h-3 w-12 rounded-sm bg-viola-200"></div>
           </div>
-          <div class="h-3 w-full rounded bg-viola-200"></div>
-          <div class="h-3 w-24 rounded bg-viola-200"></div>
+          <div class="h-3 w-full rounded-sm bg-viola-200"></div>
+          <div class="h-3 w-24 rounded-sm bg-viola-200"></div>
         </div>
       </div>
     </div>

src/components/port/RecentGames.tsx

@@ -1,5 +1,6 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useState } from "react";
+import type { JSX } from "react";
 
 interface StatusData {
 	success: boolean;
@@ -99,7 +100,7 @@ export default function RecentGames({ children }: { children: JSX.Element }) {
 						type="text"
 						id="inputBox"
 						placeholder="Search..."
-						className="w-5/6 flex-grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-none"
+						className="w-5/6 grow rounded-lg border border-gray-200 px-6 py-4 text-xl focus:border-viola-500 focus:outline-hidden"
 						onInput={(e) => setUsername((e.target as HTMLInputElement).value)}
 						onKeyDown={(e) => e.key === "Enter" && handleInput()}
 					></input>

src/content/config.ts → src/content.config.ts

@@ -1,7 +1,9 @@
-import { z, defineCollection } from "astro:content";
+import { defineCollection } from "astro:content";
+import { glob } from "astro/loaders";
+import { z } from "astro/zod";
 
 const posts = defineCollection({
-	type: "content",
+	loader: glob({ base: "./src/content/posts", pattern: "**/*.{md,mdx}" }),
 	schema: z.object({
 		title: z.string(),
 		description: z.string(),

src/layouts/Layout.astro

@@ -1,7 +1,8 @@
 ---
 import "@fontsource-variable/dm-sans";
+import "../styles/global.css";
 import Nav from "../components/Nav.astro";
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from "astro:transitions";
 import PostHog from "../components/PostHog.astro";
 
 interface Props {
@@ -28,7 +29,7 @@ const { title, description } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 
-		<ViewTransitions />
+		<ClientRouter />
 		<PostHog />
 	</head>
 	<body class="container mx-auto my-10 bg-viola-50">

src/pages/blog/[...slug].astro

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 import type { CollectionEntry } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 
@@ -13,7 +13,7 @@ export async function getStaticPaths() {
 	const posts = await getCollection("posts");
 
 	return posts.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: { post }
 	}));
 }
@@ -24,7 +24,7 @@ const {
 		data: { title, description, date }
 	}
 } = Astro.props;
-const { Content } = await post.render();
+const { Content } = await render(post);
 ---
 
 <Layout title={title} description={description}>

src/pages/blog/index.astro

@@ -15,7 +15,7 @@ const allBlogPosts = await getCollection("posts");
 						return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
 					})
 					.map((post) => (
-						<a href={`/blog/${post.slug}`} class="m-2 rounded-lg bg-viola-50 p-8 shadow-lg">
+						<a href={`/blog/${post.id}`} class="m-2 rounded-lg bg-viola-50 p-8 shadow-lg">
 							<div class="mb-4 flex flex-row items-center justify-between">
 								<span class="text-lg font-bold">{post.data.title}</span>
 								<span>{post.data.date.toLocaleDateString()}</span>

src/pages/eq.astro

@@ -10,13 +10,13 @@ import Layout from "../layouts/Layout.astro";
 				<p>
 					Test headphones/speakers by uploading an audio file and sculpting the sound.
 					<div class="mt-2 flex flex-wrap gap-3">
-						<a href="/symbolism.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
+						<a href="/symbolism.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
 							🌌 <span>Symbolism</span>
 						</a>
-						<a href="/invincible.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
+						<a href="/invincible.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
 							💪 <span>Invincible</span>
 						</a>
-						<a href="/mortals.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300">
+						<a href="/mortals.mp3" download class="inline-flex items-center gap-1 rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300">
 							🥁 <span>Mortals</span>
 						</a>
 					</div>
@@ -29,7 +29,7 @@ import Layout from "../layouts/Layout.astro";
 						type="file"
 						id="audio-file"
 						accept=".mp3,.flac,.wav, .m4a, .ogg, .aac"
-						class="block rounded-lg border border-viola-300 bg-viola-50 px-3 py-2 text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-viola-200 file:px-4 file:py-2 hover:file:bg-viola-300 focus:outline-none focus:ring-2 focus:ring-viola-400"
+						class="block rounded-lg border border-viola-300 bg-viola-50 px-3 py-2 text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-viola-200 file:px-4 file:py-2 hover:file:bg-viola-300 focus:outline-hidden focus:ring-2 focus:ring-viola-400"
 					/>
 
 					<div class="relative flex items-center gap-2 rounded-lg border border-viola-300 bg-viola-200 p-4 shadow-xl">
@@ -47,7 +47,7 @@ import Layout from "../layouts/Layout.astro";
 						/>
 						<span
 							id="detail-tooltip"
-							class="pointer-events-none absolute left-1/2 top-10 -translate-x-1/2 rounded bg-viola-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-200"
+							class="pointer-events-none absolute left-1/2 top-10 -translate-x-1/2 rounded-sm bg-viola-800 px-2 py-1 text-xs text-white opacity-0 transition-opacity duration-200"
 							style="white-space:nowrap;"
 						>
 							8192
@@ -97,7 +97,7 @@ import Layout from "../layouts/Layout.astro";
 						<h3 class="text-lg font-semibold">Parametric EQ</h3>
 						<label
 							for="auto-trim-toggle"
-							class="flex cursor-pointer items-center gap-1.5 rounded-lg bg-viola-200 px-2 py-1 text-xs shadow"
+							class="flex cursor-pointer items-center gap-1.5 rounded-lg bg-viola-200 px-2 py-1 text-xs shadow-sm"
 							title="Lowers the output by however much the EQ boosts, so a boosted band cannot push the signal into clipping."
 						>
 							<input type="checkbox" id="auto-trim-toggle" checked class="cursor-pointer accent-viola-600" />
@@ -106,15 +106,15 @@ import Layout from "../layouts/Layout.astro";
 						</label>
 						<span
 							id="limit-indicator"
-							class="hidden rounded-lg bg-viola-600 px-2 py-1 text-xs font-medium text-white shadow"
+							class="hidden rounded-lg bg-viola-600 px-2 py-1 text-xs font-medium text-white shadow-sm"
 							title="The output limiter is pulling the level down to keep the signal from clipping."
 						>
 							Limiting
 						</span>
 					</div>
 					<div class="flex gap-2">
-						<button id="add-band-btn" class="rounded-lg bg-viola-300 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-400"> + Add Band </button>
-						<button id="reset-eq-btn" class="rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300"> Reset EQ </button>
+						<button id="add-band-btn" class="rounded-lg bg-viola-300 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-400"> + Add Band </button>
+						<button id="reset-eq-btn" class="rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow-sm transition hover:bg-viola-300"> Reset EQ </button>
 					</div>
 				</div>
 				<div id="eq-details" class="grid grid-cols-1 gap-4 pt-4 md:grid-cols-3 lg:grid-cols-5"></div>
@@ -712,7 +712,7 @@ import Layout from "../layouts/Layout.astro";
 							card.innerHTML = `
                         <div class="flex items-center justify-between mb-2">
                             <p class="font-bold text-center flex-1" id="freq-display-${index}">${freqLabel(band.freq)}</p>
-                            <button class="remove-band-btn ml-2 px-2 py-1 bg-viola-600 hover:bg-viola-700 rounded text-xs font-medium text-white transition" data-index="${index}">×</button>
+                            <button class="remove-band-btn ml-2 px-2 py-1 bg-viola-600 hover:bg-viola-700 rounded-sm text-xs font-medium text-white transition" data-index="${index}">×</button>
                         </div>
                         <div class="mt-2">
                             <label for="freq-${index}" class="block text-xs">Frequency: <span id="freq-val-${index}">${freqLabel(band.freq)}</span></label>
@@ -724,7 +724,7 @@ import Layout from "../layouts/Layout.astro";
                         </div>
                         <div class="mt-2">
                             <label for="type-${index}" class="block text-xs">Type:</label>
-                            <select id="type-${index}" class="w-full mt-1 px-2 py-1 bg-viola-50 border border-viola-300 rounded text-xs">
+                            <select id="type-${index}" class="w-full mt-1 px-2 py-1 bg-viola-50 border border-viola-300 rounded-sm text-xs">
                                 <option value="peaking" ${band.type === "peaking" ? "selected" : ""}>Peaking</option>
                                 <option value="lowshelf" ${band.type === "lowshelf" ? "selected" : ""}>Low Shelf</option>
                                 <option value="highshelf" ${band.type === "highshelf" ? "selected" : ""}>High Shelf</option>

src/pages/pptx.astro

@@ -73,7 +73,7 @@ import { Icon } from "astro-icon/components";
 
         filesToProcess.forEach(file => {
             const row = document.createElement('div');
-            row.className = "flex items-center justify-between rounded-lg bg-viola-50 p-4 shadow-sm border border-viola-200";
+            row.className = "flex items-center justify-between rounded-lg bg-viola-50 p-4 shadow-xs border border-viola-200";
             row.innerHTML = `
                 <span class="font-medium text-viola-900 truncate max-w-[70%]">${file.name}</span>
                 <span id="status-${file.name.replace(/\W/g, '')}" class="text-xs font-bold uppercase tracking-wider text-viola-400">Ready</span>

src/pages/smp-archive.astro

@@ -142,7 +142,7 @@ margins.push(0);
 		<div class="text-center">
 			<h1 class="text-4xl font-extrabold text-gray-900">SMP Timeline/Archive</h1>
 			<p class="mx-auto mt-3 max-w-md text-sm text-gray-500">
-				Download the <code class="rounded bg-viola-200 px-1.5 py-0.5 font-mono text-xs text-viola-700">.zip</code> and drag it into
+				Download the <code class="rounded-sm bg-viola-200 px-1.5 py-0.5 font-mono text-xs text-viola-700">.zip</code> and drag it into
 				<a href="https://prismlauncher.org/" target="_blank" rel="noopener noreferrer">Prism Launcher</a> to play.
 			</p>
 		</div>
@@ -156,7 +156,7 @@ margins.push(0);
 				return (
 					<div class:list={["timeline-entry group relative flex items-start", "pl-16 md:pl-0", isLeft ? "md:flex-row-reverse" : "md:flex-row"]} style={`margin-bottom: ${margins[i]}rem`}>
 							<div class="absolute left-5 top-5 z-10 flex -translate-x-1/2 items-center justify-center md:left-1/2">
-								<span class="h-4 w-4 rounded-full border-[3px] border-viola-400 bg-viola-50 shadow transition-colors duration-300 group-hover:border-viola-600 group-hover:bg-viola-200" />
+								<span class="h-4 w-4 rounded-full border-[3px] border-viola-400 bg-viola-50 shadow-sm transition-colors duration-300 group-hover:border-viola-600 group-hover:bg-viola-200" />
 							</div>
 
 							<div class:list={["hidden w-1/2 items-start pt-4 md:flex", isLeft ? "justify-start pl-14" : "justify-end pr-14"]}>
@@ -195,7 +195,7 @@ margins.push(0);
 										{smp.subtitle && <span class="text-xs font-medium uppercase tracking-wide text-viola-600">{smp.subtitle}</span>}
 										{smp.missing && <span class="text-xs font-medium uppercase tracking-wide text-yellow-600">No World Available</span>}
 										<div class="mt-1 flex items-center gap-2 font-mono text-xs text-gray-400">
-											{smp.version && <span class="rounded bg-viola-200 px-1.5 py-0.5 text-viola-700">{smp.version}</span>}
+											{smp.version && <span class="rounded-sm bg-viola-200 px-1.5 py-0.5 text-viola-700">{smp.version}</span>}
 											{smp.size && <span>{smp.size}</span>}
 										</div>
 

src/pages/youtube.astro

@@ -15,7 +15,7 @@ import Layout from "../layouts/Layout.astro";
 					type="text"
 					name="url"
 					placeholder="https://www.youtube.com/watch?v=khy_ltiFBN0"
-					class="w-5/6 flex-grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-none"
+					class="w-5/6 grow rounded-lg border border-gray-200 px-6 py-4 text-xl focus:border-viola-500 focus:outline-hidden"
 				/>
 
 				<select name="format" class="rounded-xl p-4">