chore(deps): roll up 13 Dependabot bumps (Astro 7.3, TypeScript 6, prettier-plugin-astro 1.0)

CLAUDE.md

@@ -23,6 +23,16 @@ real Prettier plugin, not a script chained on with `&&`.
 Keep comments and doc prose here as short as the neighboring entries. State the
 rule and the one non-obvious reason; skip the backstory.
 
+Two prettier-plugin-astro 1.0.x formatting bugs to write around. Close
+`<script>` and `<style>` explicitly — `<script …></script>`, never
+`<script … />`: a self-closing one inside a `{cond && …}` expression long enough
+to wrap makes the plugin emit output that fails its own `format:check`, so if
+`check:fix` leaves CI red on a file it just rewrote, run it again rather than
+hunting a stale cache. And keep multi-line `/* … */` comments out of `<style>`
+blocks — those gain two spaces of indentation every run and never converge, so
+`format:check` can never pass (upstream issue 487, open as of 1.0.1). Single-line
+`/* … */` is fine.
+
 ## Required toolchain
 
 **Use Node 22.** This is not a style preference, it is a correctness

package.json

@@ -26,35 +26,35 @@
   },
   "dependencies": {
     "@astrojs/rss": "^4.0.19",
-    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/sitemap": "^3.7.4",
     "@eliancodes/brutal-ui": "^0.2.6",
-    "@unocss/astro": "^66.7.5",
+    "@unocss/astro": "^66.10.2",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
-    "astro": "^7.2.1",
+    "astro": "^7.3.2",
     "astro-font": "^1.2.0",
-    "satori": "^0.29.0",
+    "satori": "^0.33.4",
     "satori-html": "^0.3.2",
-    "typescript": "^5.9.3",
-    "zod": "^4.4.3"
+    "typescript": "^6.0.3",
+    "zod": "^4.6.5"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",
-    "@eslint/js": "^9.8.0",
-    "@iconify-json/logos": "^1.2.12",
+    "@eslint/js": "^9.39.5",
+    "@iconify-json/logos": "^1.2.14",
     "@iconify-json/uil": "^1.2.3",
     "@resvg/resvg-js": "^2.6.2",
-    "@typescript-eslint/parser": "^8.66.0",
-    "@unocss/reset": "^66.7.5",
+    "@typescript-eslint/parser": "^8.70.0",
+    "@unocss/reset": "^66.10.2",
     "eslint": "^9.8.0",
     "eslint-plugin-astro": "^1.7.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "prettier": "^3.9.6",
-    "prettier-plugin-astro": "^0.14.1",
-    "sharp": "^0.35.3",
-    "unocss": "^66.7.5",
-    "vite": "^8.2.1"
+    "prettier-plugin-astro": "^1.0.0",
+    "sharp": "^0.35.4",
+    "unocss": "^66.10.2",
+    "vite": "^8.3.0"
   },
   "overrides": {
     "@vercel/analytics": {

src/components/blog/BlogContent.astro

@@ -44,43 +44,45 @@ const tags: string[] = Array.isArray(content?.tags) ? content.tags : [];
 </style>
 
 <article class="prose-slate prose w-full md:w-prose poppins">
-  <Button href="/blog/" data-brutal-button data-brutal-hover>&larr; Back to blog</Button>
+  <Button href="/blog/" data-brutal-button data-brutal-hover>
+    &larr; Back to blog
+  </Button>
   <h1 class="mt-8 text-2xl md:text-4xl">{content.title}</h1>
   <p class="published-color text-opacity-50 text-sm md:text-base">
     Published on {content.pubDate} by {content.author}
   </p>
   <slot />
   <p class="author-color">Written by {content.author}</p>
-  {
-    tags.length > 0 && (
-      // The click listener for these lives in BlogSummaryCard's component
-      // script, which reaches them because BlogPost always renders
-      // RecentBlogPosts. Drop that and blog_tag_click stops firing here.
-      <ul
-        class="not-prose flex flex-wrap gap-2 items-center list-none p-0 mt-4"
-        aria-label={`Tags for ${content.title}`}
-      >
-        {tags.map((tag) => (
-          <li class="max-w-full break-words">
-            <a
-              class="sanchez"
-              href={`/blog/tags/${tag.toLowerCase()}/`}
-              data-analytics-blog-tag
-              data-tag-name={tag}
-              data-tag-url={`/blog/tags/${tag.toLowerCase()}/`}
-              data-source-page="blog_post"
-            >
-              <Pill data-brutal-pill data-brutal-hover>
-                {tag}
-              </Pill>
-            </a>
-          </li>
-        ))}
-      </ul>
-    )
-  }
+  {tags.length > 0 && (
+    // The click listener for these lives in BlogSummaryCard's component
+    // script, which reaches them because BlogPost always renders
+    // RecentBlogPosts. Drop that and blog_tag_click stops firing here.
+    <ul
+      class="not-prose flex flex-wrap gap-2 items-center list-none p-0 mt-4"
+      aria-label={`Tags for ${content.title}`}
+    >
+      {tags.map((tag) => (
+        <li class="max-w-full break-words">
+          <a
+            class="sanchez"
+            href={`/blog/tags/${tag.toLowerCase()}/`}
+            data-analytics-blog-tag
+            data-tag-name={tag}
+            data-tag-url={`/blog/tags/${tag.toLowerCase()}/`}
+            data-source-page="blog_post"
+          >
+            <Pill data-brutal-pill data-brutal-hover>
+              {tag}
+            </Pill>
+          </a>
+        </li>
+      ))}
+    </ul>
+  )}
   <div class="mt-6">
-    <Button href="/blog/" data-brutal-button data-brutal-hover>&larr; Back to blog</Button>
+    <Button href="/blog/" data-brutal-button data-brutal-hover>
+      &larr; Back to blog
+    </Button>
   </div>
 </article>
 

src/components/blog/BlogList.astro

@@ -10,13 +10,11 @@ const { posts } = Astro.props;
 ---
 
 <ul class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-  {
-    posts.map((post) => {
-      return (
-        <li>
-          <BlogSummaryCard post={post} />
-        </li>
-      );
-    })
-  }
+  {posts.map((post) => {
+    return (
+      <li>
+        <BlogSummaryCard post={post} />
+      </li>
+    );
+  })}
 </ul>

src/components/blog/BlogSideBar.astro

@@ -9,21 +9,19 @@ const { headings } = Astro.props;
 <aside>
   <nav class="hidden lg:block sticky top-6">
     <ul>
-      {
-        headings.map((heading: any) => (
-          <li class="py-1">
-            {[...Array(heading.depth - 1)].map((_, _i) => (
-              <span class="inline-block w-4" />
-            ))}
-            <a
-              class="hover:text-stone transition-all duration-150 ease-in-out text-dark poppins"
-              href={`#${heading.slug}`}
-            >
-              {heading.text}
-            </a>
-          </li>
-        ))
-      }
+      {headings.map((heading: any) => (
+        <li class="py-1">
+          {[...Array(heading.depth - 1)].map((_, _i) => (
+            <span class="inline-block w-4" />
+          ))}
+          <a
+            class="hover:text-stone transition-all duration-150 ease-in-out text-dark poppins"
+            href={`#${heading.slug}`}
+          >
+            {heading.text}
+          </a>
+        </li>
+      ))}
     </ul>
   </nav>
 </aside>

src/components/blog/BlogSummaryCard.astro

@@ -36,37 +36,33 @@ const { post } = Astro.props;
     <p class="poppins mt-2">tags:</p>
     <div class="flex flex-wrap gap-2 justify-between items-start">
       <ul class="flex gap-4 mt-2 flex-wrap justify-center min-w-0">
-        {
-          post.data.tags.map((tag) => {
-            return (
-              <li class="max-w-full break-words">
-                <a
-                  class="sanchez"
-                  href={`/blog/tags/${tag.toLowerCase()}/`}
-                  data-analytics-blog-tag
-                  data-tag-name={tag}
-                  data-tag-url={`/blog/tags/${tag.toLowerCase()}/`}
-                  data-source-page="blog_index"
-                >
-                  <Pill data-brutal-pill data-brutal-hover>
-                    {tag}
-                  </Pill>
-                </a>
-              </li>
-            );
-          })
-        }
+        {post.data.tags.map((tag) => {
+          return (
+            <li class="max-w-full break-words">
+              <a
+                class="sanchez"
+                href={`/blog/tags/${tag.toLowerCase()}/`}
+                data-analytics-blog-tag
+                data-tag-name={tag}
+                data-tag-url={`/blog/tags/${tag.toLowerCase()}/`}
+                data-source-page="blog_index"
+              >
+                <Pill data-brutal-pill data-brutal-hover>
+                  {tag}
+                </Pill>
+              </a>
+            </li>
+          );
+        })}
       </ul>
-      {
-        post.data.draft && (
-          <span
-            class="bg-green rounded-full border-2 py-1 px-4 text-sm border-black card-shadow mt-2 shrink-0"
-            data-brutal-draft
-          >
-            Draft
-          </span>
-        )
-      }
+      {post.data.draft && (
+        <span
+          class="bg-green rounded-full border-2 py-1 px-4 text-sm border-black card-shadow mt-2 shrink-0"
+          data-brutal-draft
+        >
+          Draft
+        </span>
+      )}
     </div>
   </div>
 </SummaryCard>

src/components/errors/404.astro

@@ -1,5 +1,4 @@
 ---
-
 ---
 
 <section class="flex flex-col gap-8 justify-between">
@@ -10,6 +9,8 @@
     href="/"
     title="Go back home"
     class="px-4 py-2 border-2 border-black hover:bg-red transition-colors duration-150 ease-in-out w-48 text-center poppins"
-    data-brutal-hover>&larr; Go Home</a
+    data-brutal-hover
   >
+    &larr; Go Home
+  </a>
 </section>

src/components/home/MobileSocials.astro

@@ -30,14 +30,12 @@ const socials = [
 <section class="md:hidden">
   <h2 class="hidden">Socials section</h2>
   <ul class="flex justify-between gap-2 flex-wrap">
-    {
-      socials.map((item) => (
-        <li class="bg-white px-3 py-2 border-black border-2 rounded card-shadow">
-          <a href={item.url} target="_blank" title={item.title}>
-            <div class:list={[item.icon, 'w-6 h-6']} />
-          </a>
-        </li>
-      ))
-    }
+    {socials.map((item) => (
+      <li class="bg-white px-3 py-2 border-black border-2 rounded card-shadow">
+        <a href={item.url} target="_blank" title={item.title}>
+          <div class:list={[item.icon, 'w-6 h-6']} />
+        </a>
+      </li>
+    ))}
   </ul>
 </section>

src/components/layout/BaseFooter.astro

@@ -6,28 +6,26 @@ export interface Props {
 const { backToTop = false } = Astro.props;
 ---
 
-{
-  backToTop && (
-    <button
-      class:list={[
-        backToTop ? `backToTop` : null,
-        'transition-300 z-50 opacity-0 fixed flex bottom-[10px] right-[30px] w-10 h-10 bg-white border border-black card-shadow',
-      ]}
+{backToTop && (
+  <button
+    class:list={[
+      backToTop ? `backToTop` : null,
+      'transition-300 z-50 opacity-0 fixed flex bottom-[10px] right-[30px] w-10 h-10 bg-white border border-black card-shadow',
+    ]}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      height="100%"
+      width="100%"
+      stroke-width="1.5"
+      stroke="currentColor"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        height="100%"
-        width="100%"
-        stroke-width="1.5"
-        stroke="currentColor"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
-      </svg>
-    </button>
-  )
-}
+      <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+    </svg>
+  </button>
+)}
 
 <footer class="bg-black text-white p-6" data-brutal-footer>
   <h2 class="hidden">Footer</h2>
@@ -36,15 +34,18 @@ const { backToTop = false } = Astro.props;
       © <span id="current-year"></span> Eph Baum. All rights reserved.
     </p>
     <p>
-      Modified version of the Brutal theme for Astro - originally by <a
+      Modified version of the Brutal theme for Astro - originally by{' '}
+      <a
         href="https://www.elian.codes/"
         target="_blank"
         class="text-blue"
         data-analytics-footer-link
         data-link-type="external"
         data-link-destination="elian.codes"
-        data-link-url="https://www.elian.codes/">ElianCodes</a
+        data-link-url="https://www.elian.codes/"
       >
+        ElianCodes
+      </a>
     </p>
     <p class="flex items-center gap-2">
       <span class="i-uil-github-alt w-4 h-4"></span>