From 50cdeb3b6e769e3522278a8fbe3fd1bc33d55c2b Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Thu, 9 Apr 2026 12:32:22 +0200
Subject: [PATCH] =?UTF-8?q?=20ActivityFeed=20=E2=80=94=20replaced=20the=20?=
 =?UTF-8?q?<button>=20inside=20<a>=20(invalid=20HTML,=20unreliable)=20with?=
 =?UTF-8?q?=20the=20stretched-link=20pattern:=20the=20card=20is=20now=20a?=
 =?UTF-8?q?=20<div>,=20the=20title=20<a>=20carries=20a=20::before=20pseudo?=
 =?UTF-8?q?-element=20=20=20that=20covers=20the=20whole=20card=20making=20?=
 =?UTF-8?q?it=20clickable,=20and=20@handle=20is=20a=20proper=20<a>=20with?=
 =?UTF-8?q?=20z-index:=2010=20sitting=20above=20the=20stretched=20link.=20?=
 =?UTF-8?q?Clicking=20the=20handle=20navigates=20to=20/u/{handle}/;=20clic?=
 =?UTF-8?q?king=20=20=20anywhere=20else=20navigates=20to=20the=20activity.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  ActivityDetail — @handle link added in the date/time row of the header, linking to /u/{handle}/. Only shown when activity.handle is set (i.e. multi-user mode).
---
 site/src/components/ActivityDetail.svelte |  6 ++++--
 site/src/components/ActivityFeed.svelte   | 19 +++++++++++-------
 site/src/lib/dataloader.ts                | 24 +++++++++++++++++------
 site/src/pages/activity/[id].astro        | 19 +++++++++++++++---
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/site/src/components/ActivityDetail.svelte b/site/src/components/ActivityDetail.svelte
index 5632622..e5cfd1f 100644
--- a/site/src/components/ActivityDetail.svelte
+++ b/site/src/components/ActivityDetail.svelte
@@ -41,7 +41,9 @@
     localDescription = e.detail.description;
   }
 
-  $: trackUrl = activity.track_url ? `${base}data/${activity.track_url}` : null;
+  $: trackUrl = activity.track_url
+    ? (activity.track_url.startsWith('http') ? activity.track_url : `${base}data/${activity.track_url}`)
+    : null;
   $: color = sportColor(activity.sport);
 
   function lightboxPrev() { if (lightboxIndex !== null) lightboxIndex = (lightboxIndex - 1 + galleryImages.length) % galleryImages.length; }
@@ -169,7 +171,7 @@
         </span>
       {/if}
       <span class="text-xs text-zinc-500">
-        {formatDate(activity.started_at)} · {formatTime(activity.started_at)}
+        {formatDate(activity.started_at)} · {formatTime(activity.started_at)}{#if activity.handle} · <a href="{base}u/{activity.handle}/" class="hover:text-zinc-300 transition-colors">@{activity.handle}</a>{/if}
       </span>
     </div>
     <div class="flex items-center gap-3">
diff --git a/site/src/components/ActivityFeed.svelte b/site/src/components/ActivityFeed.svelte
index e941b8a..ffc330e 100644
--- a/site/src/components/ActivityFeed.svelte
+++ b/site/src/components/ActivityFeed.svelte
@@ -128,18 +128,23 @@
 {:else}
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
     {#each visible as a (a.id)}
-      <a
-        href={a.detail_url ? `${import.meta.env.BASE_URL}activity/${a.id}/` : `${import.meta.env.BASE_URL}activity/local/?id=${a.id}`}
-        class="block rounded-xl bg-zinc-900 border border-zinc-800 p-4 hover:border-zinc-600 hover:bg-zinc-800/80 transition-all group"
-      >
+      <!-- relative + isolate so the stretched activity link stays below the handle link -->
+      <div class="relative rounded-xl bg-zinc-900 border border-zinc-800 p-4 hover:border-zinc-600 hover:bg-zinc-800/80 transition-all group">
         <!-- header -->
         <div class="flex items-start justify-between gap-2 mb-3">
           <div class="flex-1 min-w-0">
             <p class="text-xs text-zinc-500 mb-0.5">
-              {formatDate(a.started_at)}{#if a.handle} · <button class="hover:text-zinc-300 transition-colors" on:click|stopPropagation={() => window.location.href = `${import.meta.env.BASE_URL}u/${a.handle}/`}>@{a.handle}</button>{/if}
+              {formatDate(a.started_at)}{#if a.handle} · <a
+                href="{import.meta.env.BASE_URL}u/{a.handle}/"
+                class="relative z-10 hover:text-zinc-300 transition-colors"
+              >@{a.handle}</a>{/if}
             </p>
+            <!-- stretched link covers the whole card; sits below the handle link -->
             <h3 class="font-semibold text-white truncate group-hover:text-[--accent] transition-colors">
-              {a.title}
+              <a
+                href={a.detail_url ? `${import.meta.env.BASE_URL}activity/${a.id}/` : `${import.meta.env.BASE_URL}activity/local/?id=${a.id}`}
+                class="before:absolute before:inset-0 before:content-['']"
+              >{a.title}</a>
             </h3>
           </div>
           <span
@@ -195,7 +200,7 @@
             {/if}
           </div>
         {/if}
-      </a>
+      </div>
     {/each}
   </div>
 
diff --git a/site/src/lib/dataloader.ts b/site/src/lib/dataloader.ts
index 53a3a0a..3933a59 100644
--- a/site/src/lib/dataloader.ts
+++ b/site/src/lib/dataloader.ts
@@ -79,14 +79,23 @@ async function resolveShards(
   const shardResults = await Promise.allSettled(
     index.shards.map(async shard => {
       const url = shard.url.startsWith('http') ? shard.url : `${base}${shard.url}`;
+      // Base URL of this shard's directory (e.g. "http://…/data/dave/_merged/")
+      const shardBase = url.substring(0, url.lastIndexOf('/') + 1);
       const sub = await fetchJSON<BASIndex>(url);
       // Recursively resolve nested shards (e.g. user shard that itself paginates)
       const activities = await resolveShards(sub, url);
-      // Tag each activity with the handle declared in the shard entry
-      if (shard.handle) {
-        return activities.map(a => ({ ...a, handle: shard.handle }));
-      }
-      return activities;
+      // Rewrite relative detail_url / track_url to be absolute so they can be
+      // fetched correctly regardless of where the root index lives.
+      return activities.map(a => ({
+        ...a,
+        ...(shard.handle ? { handle: shard.handle } : {}),
+        detail_url: a.detail_url && !a.detail_url.startsWith('http')
+          ? `${shardBase}${a.detail_url}`
+          : a.detail_url,
+        track_url: a.track_url && !a.track_url.startsWith('http')
+          ? `${shardBase}${a.track_url}`
+          : a.track_url,
+      }));
     }),
   );
 
@@ -152,7 +161,10 @@ export async function loadActivity(
   if (cached) return cached;
 
   try {
-    return await fetchJSON<ActivityDetail>(`${baseUrl}data/${detailUrl}`);
+    const url = detailUrl.startsWith('http')
+      ? detailUrl
+      : `${baseUrl}data/${detailUrl}`;
+    return await fetchJSON<ActivityDetail>(url);
   } catch {
     return null;
   }
diff --git a/site/src/pages/activity/[id].astro b/site/src/pages/activity/[id].astro
index d152a1e..36cb8d5 100644
--- a/site/src/pages/activity/[id].astro
+++ b/site/src/pages/activity/[id].astro
@@ -19,13 +19,26 @@ export async function getStaticPaths() {
     const root: BASIndex = JSON.parse(readFileSync(join(dataDir, 'index.json'), 'utf-8'));
 
     // Collect activities from root (single-user) or walk shards (multi-user)
-    function readActivities(indexPath: string): ActivitySummary[] {
+    function readActivities(indexPath: string, urlPrefix: string = ''): ActivitySummary[] {
       try {
         const idx: BASIndex = JSON.parse(readFileSync(indexPath, 'utf-8'));
-        const own = idx.activities ?? [];
+        const own = (idx.activities ?? []).map(a =>
+          urlPrefix
+            ? {
+                ...a,
+                detail_url: a.detail_url && !a.detail_url.startsWith('http') ? `${urlPrefix}${a.detail_url}` : a.detail_url,
+                track_url:  a.track_url  && !a.track_url.startsWith('http')  ? `${urlPrefix}${a.track_url}`  : a.track_url,
+              }
+            : a
+        );
         const fromShards = (idx.shards ?? []).flatMap(s => {
           const shardPath = join(dataDir, s.url);
-          return readActivities(shardPath);
+          // Prefix for activities read from this shard: path of the shard dir relative to dataDir
+          const shardDir = s.url.substring(0, s.url.lastIndexOf('/') + 1);
+          return readActivities(shardPath, shardDir).map(a => ({
+            ...a,
+            ...(s.handle && !a.handle ? { handle: s.handle } : {}),
+          }));
         });
         return [...own, ...fromShards];
       } catch {