UX/UI improvements.

app/components/EventsMiniSidebar.vue

@@ -7,9 +7,11 @@
       <div v-for="event in events" :key="event._id" class="em-item">
         <div class="em-inset em-item-body">
           <span class="em-date">{{ formatDate(event.startDate) }}</span>
-          <NuxtLink :to="`/events/${event._id}`" class="em-title">{{
-            event.title
-          }}</NuxtLink>
+          <NuxtLink
+            :to="`/events/${event.slug || event._id}`"
+            class="em-title"
+            >{{ event.title }}</NuxtLink
+          >
           <span
             v-if="event.circle"
             class="em-circle"

app/components/TopStrip.vue

@@ -6,9 +6,13 @@
           <NuxtLink to="/" class="breadcrumb-link">ghostguild.org</NuxtLink>
           <template v-for="(crumb, i) in breadcrumbs" :key="i">
             <span class="breadcrumb-sep"> / </span>
-            <NuxtLink :to="crumb.path" class="breadcrumb-link">{{
-              crumb.label
-            }}</NuxtLink>
+            <NuxtLink
+              v-if="i < breadcrumbs.length - 1"
+              :to="crumb.path"
+              class="breadcrumb-link"
+              >{{ crumb.label }}</NuxtLink
+            >
+            <span v-else class="breadcrumb-current">{{ crumb.label }}</span>
           </template>
         </span>
       </slot>
@@ -79,7 +83,8 @@ const breadcrumbs = computed(() => {
   let path = "";
   return segments.map((segment) => {
     path += "/" + segment.replace(/\s+/g, "-");
-    return { label: segment, path };
+    const label = segment.charAt(0).toUpperCase() + segment.slice(1);
+    return { label, path };
   });
 });
 </script>
@@ -130,4 +135,7 @@ const breadcrumbs = computed(() => {
 .breadcrumb-sep {
   color: var(--text-faint);
 }
+.breadcrumb-current {
+  color: var(--text-dim);
+}
 </style>