fixing issues

site/package.json

@@ -13,7 +13,9 @@
     "@astrojs/svelte": "^7.0.0",
     "@astrojs/tailwind": "^5.1.0",
     "@observablehq/plot": "^0.6.0",
+    "@types/dompurify": "^3.0.5",
     "astro": "^5.0.0",
+    "dompurify": "^3.3.3",
     "maplibre-gl": "^5.0.0",
     "marked": "^17.0.5",
     "svelte": "^5.0.0",

site/src/components/ActivityDetail.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { marked } from 'marked';
+  import DOMPurify from 'dompurify';
   import type { ActivitySummary, ActivityDetail, AthleteZones } from '../lib/types';
   import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, sportIcon, sportLabel, sportColor } from '../lib/format';
   import ActivityMap from './ActivityMap.svelte';
@@ -64,7 +65,7 @@
       const titleAttr = title ? ` title="${title}"` : '';
       return `<img src="${href ?? ''}" alt="${text}"${titleAttr} class="rounded-lg max-w-full my-2">`;
     };
-    return marked(rawDescription, { renderer }) as string;
+    return DOMPurify.sanitize(marked(rawDescription, { renderer }) as string);
   })();
 
   $: imageBase = `${base}data/activities/images/${activity.id}/`;
@@ -88,7 +89,7 @@
 <svelte:window on:keydown={onKeydown} />
 
 {#if editOpen && editUrl}
-  <EditDrawer activityId={activity.id} {editUrl} on:saved={onSaved} />
+  <EditDrawer activityId={activity.id} {editUrl} on:saved={onSaved} on:close={() => editOpen = false} />
 {/if}
 
 <!-- Lightbox -->

site/src/components/EditDrawer.svelte

@@ -5,7 +5,7 @@
   export let activityId: string;
   export let editUrl: string;
 
-  const dispatch = createEventDispatcher<{ saved: { title: string; description: string } }>();
+  const dispatch = createEventDispatcher<{ saved: { title: string; description: string }; close: void }>();
 
   const SPORTS: Sport[] = ['cycling', 'running', 'hiking', 'walking', 'swimming', 'skiing', 'other'];
   const STAT_PANELS = [
@@ -102,8 +102,9 @@
   async function deleteImage(filename: string) {
     await fetch(`${api}/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
     images = images.filter(f => f !== filename);
-    // Remove the markdown reference too
-    description = description.replace(new RegExp(`!\\[[^\\]]*\\]\\(${filename}\\)`, 'g'), '').trim();
+    // Remove the markdown reference — escape filename before using in regex
+    const escaped = filename.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    description = description.replace(new RegExp(`!\\[[^\\]]*\\]\\(${escaped}\\)`, 'g'), '').trim();
   }
 
   function toggleStat(key: string) {
@@ -118,7 +119,7 @@
 <!-- Backdrop -->
 <div
   class="fixed inset-0 bg-black/60 z-40 backdrop-blur-sm"
-  on:click={() => dispatch('saved', { title, description })}
+  on:click={() => dispatch('close')}
   role="presentation"
 ></div>
 
@@ -129,7 +130,7 @@
     <h2 class="font-semibold text-white text-sm">Edit activity</h2>
     <button
       class="text-zinc-500 hover:text-white transition-colors text-xl leading-none"
-      on:click={() => dispatch('saved', { title, description })}
+      on:click={() => dispatch('close')}
       aria-label="Close"
     >×</button>
   </div>