Add event date to URL slug

src/components/Common/EventCard.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 
 import Link from "@/components/Common/Link";
 import type { EventEnriched } from "@/content";
+import { formatDate } from "@/utils/formatDate";
 
 import EventCardDescription from "./EventCardDescription";
 import EventCardImage from "./EventCardImage";
@@ -22,7 +23,8 @@ function EventCard({
   className?: string;
   style?: React.CSSProperties;
 }) {
-  const eventUrl = `/events/${event.id}`;
+  const date = formatDate(event.data.dateTime, "date");
+  const eventUrl = `/events/${event.id}-${date}`;
 
   const [springs, api] = useSpring(() => ({
     scale: 1,

src/components/Common/MarkdownContent.astro

@@ -10,7 +10,8 @@ const { markdown, class: className = "prose prose-lg max-w-none" } = Astro.props
 const markdownFiles = import.meta.glob("/content/**/*.md");
 
 // Normalize the path to match the glob pattern
-const fullPath = `/content/${markdown}`;
+// check markdown file name without date
+const fullPath = `/content/${markdown}`.replace(/-(\d{4}-\d{2}-\d{2})\//, "/");
 
 if (!markdownFiles[fullPath]) {
   throw new Error(`Markdown file not found: ${fullPath}`);

src/content/events.ts

@@ -13,6 +13,7 @@ import { FALLBACK_COVER, SHOW_DEV_ENTRIES } from "@/constants";
 import { type GalleryImage, getGalleryImages } from "@/content/gallery";
 import { type ProcessedVenue, processVenue } from "@/content/venues";
 import { isEventUpcoming } from "@/utils/eventFilters";
+import { replaceDate } from "@/utils/formatSlug";
 import { memoize } from "@/utils/memoize";
 import { type ResponsiveImageData, getResponsiveImage } from "@/utils/responsiveImage";
 
@@ -120,7 +121,8 @@ export async function eventsLoader() {
 }
 
 export const getEvent = memoize(async (eventSlug: string) => {
-  const event = await getEntry("events", eventSlug);
+  const eventSlugWithoutDate = replaceDate(eventSlug);
+  const event = await getEntry("events", eventSlugWithoutDate);
   if (!event) throw new Error(`No event found for slug ${eventSlug}`);
   let venueSlug: string | undefined;
   let venueData: ProcessedVenue | undefined;

src/pages/events/[eventSlug].astro

@@ -10,13 +10,16 @@ import EventTags from "@/components/Event/EventTags";
 import EventActionAlert from "@/components/Event/EventActionAlert";
 import MarketingRedirect from "@/components/Event/MarketingRedirect";
 import { isEventUpcoming } from "@/utils/eventFilters";
+import { formatDate } from "@/utils/formatDate";
 
 export async function getStaticPaths() {
   const events = await getEvents();
 
-  return events.map(({ id }) => {
+  return events.map((event) => {
+    const eventDate = formatDate(event.data.dateTime, "date");
+
     return {
-      params: { eventSlug: id },
+      params: { eventSlug: `${event.id}-${eventDate}` },
     };
   });
 }

src/utils/formatDate.ts

@@ -1,4 +1,4 @@
-export type DateFormat = "long" | "short" | "short-no-year" | "datetime";
+export type DateFormat = "long" | "short" | "short-no-year" | "datetime" | "date";
 
 export function formatDate(date: Date | string, format: DateFormat = "short"): string {
   const dateObj = typeof date === "string" ? new Date(date) : date;
@@ -21,6 +21,10 @@ export function formatDate(date: Date | string, format: DateFormat = "short"): s
     });
   }
 
+  if (format === "date") {
+    return dateObj.toISOString().split("T")[0];
+  }
+
   if (format === "datetime") {
     const year = dateObj.getUTCFullYear();
     const month = String(dateObj.getUTCMonth() + 1).padStart(2, "0");

src/utils/formatSlug.ts

@@ -0,0 +1,3 @@
+export function replaceDate(slug: string): string {
+  return slug.replace(/-\d{4}-\d{2}-\d{2}$/, "");
+}

test/e2e/latest-event.spec.ts

@@ -81,7 +81,7 @@ test.describe("Latest Event Visibility", () => {
   });
 
   test("latest event detail page exists with correct information", async ({ page }) => {
-    const eventUrl = `/events/${latestEvent!.slug}`;
+    const eventUrl = `/events/${latestEvent!.slug}-${formatDate(latestEvent!.dateTime, "date")}`;
     await page.goto(eventUrl);
 
     // Check the title is on the page

test/helpers/url.ts

@@ -5,9 +5,9 @@
 
 // Test event constants - these are development-only events that should be used in tests
 export const TEST_EVENTS = {
-  PRIMARY: "999999999-example-dev-event",
-  SECONDARY: "999999998-example-dev-event-2",
-  REAL_EVENT: "308580120-agentic-sentiments", // Real event for slug testing
+  PRIMARY: "999999999-example-dev-event-2027-04-15",
+  SECONDARY: "999999998-example-dev-event-2-2027-03-15",
+  REAL_EVENT: "308580120-agentic-sentiments-2025-07-19", // Real event for slug testing
 } as const;
 
 // Test venue constants that are used by test events