fix(docs): really fix the links in Advent of CALM, and make dev mirror prod behaviour

Author: markscott-ms

advent-of-calm/website/astro.config.mjs

@@ -6,5 +6,6 @@ export default defineConfig({
   outDir: './dist',
   build: {
     format: 'directory'
-  }
+  },
+  trailingSlash: 'always'
 });

advent-of-calm/website/src/components/Calendar.astro

@@ -7,7 +7,7 @@ const days = getAllDays();
 <div class="calendar-grid" id="calendar-grid">
   {days.map(({ day, unlocked, title }) => (
     <a 
-      href={unlocked ? `./day/${day}` : '#'}
+      href={unlocked ? `day/${day}/` : '#'}
       class:list={['calendar-day', { locked: !unlocked, unlocked }]}
       title={unlocked ? title : `Unlocks December ${day}`}
       aria-disabled={!unlocked}
@@ -117,7 +117,7 @@ const days = getAllDays();
         const dayElement = day as HTMLElement;
         dayElement.classList.remove('locked');
         dayElement.classList.add('unlocked');
-        dayElement.setAttribute('href', `./day/${dayNumber}`);
+        dayElement.setAttribute('href', `day/${dayNumber}/`);
         dayElement.removeAttribute('aria-disabled');
         dayElement.style.pointerEvents = 'auto';
         dayElement.style.cursor = 'pointer';

advent-of-calm/website/src/pages/day/[day].astro

@@ -26,7 +26,7 @@ const nextUnlocked = nextDay && isUnlocked(nextDay);
   <nav class="day-nav">
     <div class="nav-left">
       {prevDay && (
-        <a href={`${prevDay}`} class="nav-button prev">
+        <a href={`../${prevDay}/`} class="nav-button prev">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M15 18l-6-6 6-6"/>
           </svg>
@@ -35,11 +35,11 @@ const nextUnlocked = nextDay && isUnlocked(nextDay);
       )}
     </div>
     <div class="nav-center">
-      <a href="../" class="nav-button home">Calendar</a>
+      <a href="../../" class="nav-button home">Calendar</a>
     </div>
     <div class="nav-right">
       {nextDay && nextUnlocked && (
-        <a href={`${nextDay}`} class="nav-button next">
+        <a href={`../${nextDay}/`} class="nav-button next">
           Day {nextDay}
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 18l6-6-6-6"/>
@@ -65,7 +65,7 @@ const nextUnlocked = nextDay && isUnlocked(nextDay);
   <nav class="day-nav bottom">
     <div class="nav-left">
       {prevDay && (
-        <a href={`${prevDay}`} class="nav-button prev">
+        <a href={`../${prevDay}/`} class="nav-button prev">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M15 18l-6-6 6-6"/>
           </svg>
@@ -74,11 +74,11 @@ const nextUnlocked = nextDay && isUnlocked(nextDay);
       )}
     </div>
     <div class="nav-center">
-      <a href="../" class="nav-button home">Back to Calendar</a>
+      <a href="../../" class="nav-button home">Back to Calendar</a>
     </div>
     <div class="nav-right">
       {nextDay && nextUnlocked && (
-        <a href={`${nextDay}`} class="nav-button next">
+        <a href={`../${nextDay}/`} class="nav-button next">
           Day {nextDay}
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 18l6-6-6-6"/>