Audit and fix internal links

Author: Bowenislandsong

event-page.js

@@ -539,7 +539,7 @@
       <section class="section not-found">
         <p class="eyebrow dark">Event not found</p>
         <h1>This Blue Moon event link does not exist.</h1>
-        <a class="button primary" href="index.html#events">See upcoming events</a>
+        <a class="button primary" href="/#events">See upcoming events</a>
       </section>
     `;
   }

event.html

@@ -59,7 +59,7 @@
     <script src="/site.js?v=4"></script>
     <script src="/events.js?v=6"></script>
     <script src="/account.js?v=2"></script>
-    <script src="/member-utils.js?v=3"></script>
-    <script src="/event-page.js?v=13"></script>
+    <script src="/member-utils.js?v=4"></script>
+    <script src="/event-page.js?v=14"></script>
   </body>
 </html>

index.html

@@ -477,7 +477,7 @@ <h2>Join early access.</h2>
     <script src="site.js?v=4"></script>
     <script src="events.js?v=6"></script>
     <script src="account.js?v=2"></script>
-    <script src="member-utils.js?v=3"></script>
+    <script src="member-utils.js?v=4"></script>
     <script src="app.js?v=14"></script>
   </body>
 </html>

member-page.js

@@ -20,7 +20,10 @@
 
   function memberIdFromLocation() {
     const params = new URLSearchParams(window.location.search);
-    return params.get("id") || "";
+    const fromQuery = params.get("id");
+    if (fromQuery) return fromQuery;
+    const match = window.location.pathname.match(/\/members\/([^/]+)/);
+    return match ? decodeURIComponent(match[1]) : "";
   }
 
   function activityItem(event, label) {
@@ -145,7 +148,7 @@
       <section class="section not-found">
         <p class="eyebrow dark">Member not found</p>
         <h1>This Blue Moon member page does not exist yet.</h1>
-        <a class="button primary" href="index.html#account">Look up members</a>
+        <a class="button primary" href="/#account">Look up members</a>
       </section>
     `;
   }

member-utils.js

@@ -102,16 +102,21 @@
     ];
   }
 
+  function localPageHref(pageName, id) {
+    const query = `?id=${encodeURIComponent(id)}`;
+    return window.location.protocol === "file:" ? `${pageName}${query}` : `/${pageName}${query}`;
+  }
+
   function eventHref(event) {
     const isLocal = ["localhost", "127.0.0.1", ""].includes(window.location.hostname);
-    if (isLocal) return `event.html?id=${encodeURIComponent(event.id)}`;
+    if (isLocal) return localPageHref("event.html", event.id);
     return `/events/${encodeURIComponent(event.id)}`;
   }
 
   function memberHref(member) {
-    const id = encodeURIComponent(memberId(member.email));
+    const id = memberId(member.email);
     const isLocal = ["localhost", "127.0.0.1", ""].includes(window.location.hostname);
-    return isLocal ? `member.html?id=${id}` : `/member?id=${id}`;
+    return isLocal ? localPageHref("member.html", id) : `/members/${encodeURIComponent(id)}`;
   }
 
   function members() {

member.html

@@ -56,7 +56,7 @@
     <script src="/site.js?v=4"></script>
     <script src="/events.js?v=6"></script>
     <script src="/account.js?v=2"></script>
-    <script src="/member-utils.js?v=3"></script>
-    <script src="/member-page.js?v=3"></script>
+    <script src="/member-utils.js?v=4"></script>
+    <script src="/member-page.js?v=4"></script>
   </body>
 </html>

scripts/browser-smoke.mjs

@@ -80,8 +80,8 @@ function startStaticServer() {
       const url = new URL(request.url, "http://127.0.0.1");
       let pathname = decodeURIComponent(url.pathname);
       if (pathname === "/") pathname = "/index.html";
-      if (/^\/events\/[^/]+$/.test(pathname)) pathname = "/event.html";
-      if (/^\/members\/[^/]+$/.test(pathname)) pathname = "/member.html";
+      if (/^\/events\/[^/]+$/.test(pathname) && !path.extname(pathname)) pathname = "/event.html";
+      if (/^\/members\/[^/]+$/.test(pathname) && !path.extname(pathname)) pathname = "/member.html";
       if (pathname === "/event") pathname = "/event.html";
       if (pathname === "/member") pathname = "/member.html";
 
@@ -380,6 +380,88 @@ async function main() {
     });
   }
 
+  async function auditCurrentPageInternalTargets(label) {
+    const broken = await evaluateFunction(async () => {
+      const blockedProtocols = /^(blob|data|javascript|mailto|sms|tel):/i;
+      const seen = new Set();
+      const targets = [];
+      const currentWithoutHash = new URL(window.location.href);
+      currentWithoutHash.hash = "";
+
+      function addTarget(node, attribute, type) {
+        const raw = node.getAttribute(attribute);
+        if (!raw || blockedProtocols.test(raw.trim())) return;
+
+        let url;
+        try {
+          url = new URL(raw, document.baseURI);
+        } catch (error) {
+          targets.push({ error: error.message, raw, type });
+          return;
+        }
+
+        if (url.origin !== window.location.origin) return;
+
+        const hash = url.hash;
+        url.hash = "";
+        const href = url.toString();
+        const key = `${type}:${href}:${hash}`;
+        if (seen.has(key)) return;
+        seen.add(key);
+        targets.push({ href, hash, raw, type });
+      }
+
+      [
+        ["a[href]", "href", "anchor"],
+        ["area[href]", "href", "area"],
+        ["form[action]", "action", "form"],
+        ["iframe[src]", "src", "iframe"],
+        ["img[src]", "src", "image"],
+        ["link[href]", "href", "link"],
+        ["script[src]", "src", "script"],
+        ["source[src]", "src", "source"],
+        ["audio[src]", "src", "audio"],
+        ["video[src]", "src", "video"]
+      ].forEach(([selector, attribute, type]) => {
+        document.querySelectorAll(selector).forEach((node) => addTarget(node, attribute, type));
+      });
+
+      const failures = [];
+      for (const target of targets) {
+        if (target.error) {
+          failures.push(target);
+          continue;
+        }
+
+        if (target.hash && target.href === currentWithoutHash.toString()) {
+          const id = decodeURIComponent(target.hash.slice(1));
+          if (id && !document.getElementById(id) && document.getElementsByName(id).length === 0) {
+            failures.push({ ...target, error: `Missing fragment target ${target.hash}` });
+          }
+        }
+
+        let response;
+        try {
+          response = await fetch(target.href, { cache: "no-store", method: "HEAD" });
+          if (response.status === 405) {
+            response = await fetch(target.href, { cache: "no-store", method: "GET" });
+          }
+        } catch (error) {
+          failures.push({ ...target, error: error.message });
+          continue;
+        }
+
+        if (!response.ok) {
+          failures.push({ ...target, status: response.status });
+        }
+      }
+
+      return failures;
+    });
+
+    assert.deepEqual(broken, [], `${label} should not expose broken internal links or assets.`);
+  }
+
   try {
     await cdp.ready;
     const { targetId } = await cdp.send("Target.createTarget", { url: "about:blank" });
@@ -469,6 +551,7 @@ async function main() {
 
       return true;
     });
+    await auditCurrentPageInternalTargets("home page");
 
     await navigate("/events/santa-monica-beach-cleanup", "#event-page");
     await evaluateFlow(async (helpers) => {
@@ -478,6 +561,7 @@ async function main() {
       assertBrowser(text("#event-page").includes("Example event"), "Seed event pages should be marked as examples.");
       return true;
     });
+    await auditCurrentPageInternalTargets("clean event page");
 
     await navigate("/event.html?id=santa-monica-beach-cleanup", "#event-page");
     await evaluateFlow(async (helpers) => {
@@ -516,6 +600,7 @@ async function main() {
 
       return true;
     });
+    await auditCurrentPageInternalTargets("event join page");
 
     await navigate("/index.html#account", "#account-dashboard");
     await evaluateFlow(async (helpers) => {
@@ -534,6 +619,34 @@ async function main() {
       assertBrowser(text("#member-page").includes("Santa Monica Beach Cleanup"), "Member profile should list joined event activity.");
       return true;
     });
+    await auditCurrentPageInternalTargets("member query page");
+
+    await navigate(`/members/${memberId("riley@example.com")}`, "#member-page");
+    await evaluateFlow(async (helpers) => {
+      const { assertBrowser, text, waitUntil } = helpers;
+      await waitUntil(() => text("#member-page").includes("Riley Stone"), "clean member profile");
+      assertBrowser(text("#member-page").includes("Santa Monica Beach Cleanup"), "Clean member URL should list joined event activity.");
+      return true;
+    });
+    await auditCurrentPageInternalTargets("clean member page");
+
+    await navigate("/events/not-a-real-event", "#event-page");
+    await evaluateFlow(async (helpers) => {
+      const { assertBrowser, text } = helpers;
+      assertBrowser(text("#event-page").includes("Event not found"), "Missing clean event URLs should render the not-found state.");
+      assertBrowser(Boolean(document.querySelector('a[href="/#events"]')), "Missing event links should return to the root events section.");
+      return true;
+    });
+    await auditCurrentPageInternalTargets("event not-found page");
+
+    await navigate(`/members/${memberId("missing@example.com")}`, "#member-page");
+    await evaluateFlow(async (helpers) => {
+      const { assertBrowser, text } = helpers;
+      assertBrowser(text("#member-page").includes("Member not found"), "Missing clean member URLs should render the not-found state.");
+      assertBrowser(Boolean(document.querySelector('a[href="/#account"]')), "Missing member links should return to the root account section.");
+      return true;
+    });
+    await auditCurrentPageInternalTargets("member not-found page");
 
     await navigate("/event.html?id=santa-monica-beach-cleanup", "#event-page");
     await evaluateFlow(async (helpers) => {

scripts/check.mjs

@@ -172,6 +172,9 @@ function checkSeoMetadata() {
   const index = readFileSync(path.join(root, "index.html"), "utf8");
   const event = readFileSync(path.join(root, "event.html"), "utf8");
   const member = readFileSync(path.join(root, "member.html"), "utf8");
+  const eventPage = readFileSync(path.join(root, "event-page.js"), "utf8");
+  const memberPage = readFileSync(path.join(root, "member-page.js"), "utf8");
+  const memberUtils = readFileSync(path.join(root, "member-utils.js"), "utf8");
   const robots = readFileSync(path.join(root, "robots.txt"), "utf8");
   const sitemap = readFileSync(path.join(root, "sitemap.xml"), "utf8");
   const vercelConfig = JSON.parse(readFileSync(path.join(root, "vercel.json"), "utf8"));
@@ -186,6 +189,10 @@ function checkSeoMetadata() {
   assert.match(index, /href="\/event\?id=santa-monica-beach-cleanup"/);
   assert.match(event, /<title>Blue Moon Beige Event<\/title>/);
   assert.match(member, /<title>Blue Moon Beige Member<\/title>/);
+  assert.ok(eventPage.includes('href="/#events"'), "event not-found pages should link back to the root events section");
+  assert.ok(memberPage.includes('href="/#account"'), "member not-found pages should link back to the root account section");
+  assert.ok(memberPage.includes("window.location.pathname.match(/\\/members\\/([^/]+)/)"), "clean member URLs should be readable in the browser");
+  assert.ok(memberUtils.includes("return isLocal ? localPageHref(\"member.html\", id) : `/members/${encodeURIComponent(id)}`;"), "production member links should use the clean member route");
   assert.match(index, /<link rel="canonical" href="https:\/\/bluemoonbeige\.vercel\.app\/">/);
   assert.match(index, /<link rel="alternate" hreflang="x-default" href="https:\/\/bluemoonbeige\.vercel\.app\/">/);
   const structuredDataMatch = index.match(/<script id="blue-moon-structured-data" type="application\/ld\+json">\s*([\s\S]*?)\s*<\/script>/);