chore: complete Astro 7 migration, bump CI actions

Drop the `compressHTML: true` pin from ac977de and adopt Astro 7's `'jsx'`
default, after auditing every whitespace boundary it changes.

Of 607 boundaries where 'jsx' removes whitespace the v6 build emitted, 604
are benign: the two text runs are separated by a block-level box, or are
flex/grid items that space themselves with `gap-*` (nav, footer, breadcrumbs,
chip rows). The mobile menu looks like a regression in the markup but is not
— it is `hidden flex-col gap-4` and gets `display:flex` from the JS-toggled
`.nav-open` class, so its links are flex items.

The remaining 3 are real, all the same pattern in Pricing: `{plan.perLesson}
USD` followed by a newline and an inline unit <span>, which 'jsx' welds into
"24 USD/ lesson". Fixed with an explicit `{" "}`.

<EsTip> is fine as written — every usage already sits on one line with its
surrounding text — but it is inline-block in running prose, so it is the most
likely thing to break next. Both it and the price line are now covered by a
test asserting rendered spacing, a property nothing else in the suite read.
Verified the test fails ("24 USD/ lesson") when the fix is reverted.

Net: rendered text is identical to the pre-upgrade build apart from the
intended Pricing fix, structure is unchanged, and HTML shrinks ~2.9 KB.

Also bump actions/checkout and actions/setup-node v4 → v7, clearing the CI
annotation about being force-run on Node 24.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: mrtnzlml

.github/workflows/ci.yml

@@ -10,9 +10,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v7
         with:
           node-version: 22
           cache: npm

CLAUDE.md

@@ -19,6 +19,8 @@ Requires Node.js >=22.12.0. Deployed to Cloudflare Workers Builds: push to `main
 
 **Static site built with Astro 7 + Tailwind CSS 4.** Zero client-side JavaScript by default — games use inline `<script>` blocks with vanilla JS, no framework hydration. The homepage additionally ships three tiny progressive-enhancement scripts (seasonal papel-picado swap, daily word-of-the-day, EsTip width measurement); with JS disabled it renders the year-round banner, the fallback word, and Spanish-sized swap boxes.
 
+**Whitespace (Astro 7):** `compressHTML` defaults to `'jsx'`, so whitespace and line breaks *around* elements are stripped; whitespace within a single line is kept. Putting an inline element (`<span>`, `<a>`, `<EsTip>`) on its own source line inside running text welds the words together — `24 USD` + newline + `<span>/ lesson</span>` renders as `24 USD/ lesson`. Keep the inline element on the same line as its neighbouring text, or add an explicit `{" "}`. This only bites inline elements: flex/grid children (nav, footer, breadcrumbs, chip rows) space themselves with `gap-*` and are unaffected. The `whitespace survives around inline elements split across source lines` test in `tests/build.test.ts` guards this.
+
 ### Key directories
 
 - `src/pages/` — File-based routing. Each `.astro` file = one page.

astro.config.mjs

@@ -73,14 +73,6 @@ function sharedMtime() {
 export default defineConfig({
   site: "https://elenkaspanish.com",
 
-  // Astro 7 switched the default to 'jsx', which strips whitespace and line
-  // breaks around elements — that silently closes up the gaps between inline
-  // elements written across separate lines (nav links, footer links, the
-  // inline-block <EsTip> spans). `true` is the pre-v7 lossless mode, which
-  // preserves whitespace where it affects visual rendering. Keep it until the
-  // markup is audited for JSX whitespace rules.
-  compressHTML: true,
-
   vite: {
     plugins: [tailwindcss()],
   },

src/components/Pricing.astro

@@ -165,7 +165,7 @@ const courseJsonLd = {
 
             <div class="mb-4">
               <p class="text-3xl font-bold text-primary">
-                {plan.perLesson} USD
+                {plan.perLesson} USD{" "}
                 <span class="text-sm font-normal text-gray-500">/ {plan.group ? "student / " : ""}lesson</span>
               </p>
               <p class="text-xs text-gray-500 mt-1">

tests/build.test.ts

@@ -1186,6 +1186,39 @@ describe("design system (visual uplift)", () => {
     expect(planCards.length).toBe(3);
     planCards.each((_, el) => expect($(el).attr("class")).toContain("bg-white"));
   });
+  // Astro 7's `compressHTML: 'jsx'` strips whitespace and line breaks around
+  // elements. Where an inline element sits on its own source line inside a
+  // block of text, that silently welds the two runs together ("24 USD/ lesson").
+  // Nothing else in this suite reads rendered spacing, so these assert it
+  // directly for the inline elements embedded in prose. A failure here means a
+  // source line needs an explicit `{" "}`.
+  it("whitespace survives around inline elements split across source lines", () => {
+    const $ = readPage("/");
+    // Price + its inline unit <span> (Pricing.astro).
+    const prices = $("#pricing p.text-3xl")
+      .map((_, el) => $(el).text().replace(/\s+/g, " ").trim())
+      .get();
+    expect(prices).toEqual([
+      "24 USD / lesson",
+      "18 USD / student / lesson",
+      "14 USD / student / lesson",
+    ]);
+    // <EsTip> renders inline-block inside running text, so the words on either
+    // side must stay separated.
+    $(".es-tip").each((_, el) => {
+      const parent = $(el).parent().text().replace(/\s+/g, " ");
+      const es = $(el).find(".es-tip-es").first().text().trim();
+      if (!es || !parent.includes(es)) return;
+      const i = parent.indexOf(es);
+      const before = parent[i - 1];
+      const after = parent[i + es.length];
+      // A neighbouring character must be whitespace or punctuation — never a
+      // letter, which would mean two words ran together.
+      if (before !== undefined) expect(before).not.toMatch(/\p{L}/u);
+      if (after !== undefined) expect(after).not.toMatch(/\p{L}/u);
+    });
+  });
+
   it("the university proper noun is NOT tooltip-wrapped", () => {
     const $ = readPage("/");
     const uni = $("span[lang='es']:contains('Universidad')");