Implement permalinks (#45)

* change week numbering * chore: update packages * add week start to timeline sorting * add colors to current week's events and todos * fix dates and times from milestones * add client-only tags to event dates * show resources in past events * add slides to kickoff event * add description to LT01 * adjust styles * implement permalinks Co-authored-by: Daniel da Rocha <[email protected]>
TechLabs-Berlin · Mar 18, 2021 · 6848adf · 6848adf
1 parent 53abfc6
commit 6848adf
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 5 deletions.
diff --git a/components/EventListItem.vue b/components/EventListItem.vue
@@ -4,14 +4,31 @@
       <ClientOnly>
         <Stamp v-if="isCurrentEvent" :date="tlEvent.date" />
       </ClientOnly>
-      <header class="mb-8">
+      <header class="flex flex-col items-center mb-8">
         <p
           class="mb-4 text-4xl font-bold text-center"
           :class="isCurrentEvent ? 'text-pink-600' : 'text-gray-400'"
         >
           <TIcon icon="calendar-day" class="inline-block" />
         </p>
-        <h2 class="mb-1 text-2xl font-bold text-center">{{ tlEvent.name }}</h2>
+        <template v-if="showPermalink">
+          <NuxtLink :to="`/event/${tlEvent.slug}`" class="title-link">
+            <h2
+              class="relative inline-block mb-1 text-2xl font-bold hover:underline"
+            >
+              {{ tlEvent.name }}
+              <div
+                class="absolute top-0 right-0 hidden pl-2 text-base text-blue-600 transform translate-x-full translate-y-1 icon"
+              >
+                <TIcon icon="link" class="inline-block" />
+              </div></h2
+          ></NuxtLink>
+        </template>
+        <template v-else>
+          <h2 class="inline-block mb-1 text-2xl font-bold">
+            {{ tlEvent.name }}
+          </h2>
+        </template>
         <ClientOnly>
           <p class="text-lg text-center">
             {{ isPast(eventDate) ? 'Took' : 'Takes' }} place on
@@ -71,6 +88,9 @@ export default defineComponent({
     showResources: {
       type: Boolean,
     },
+    showPermalink: {
+      type: Boolean,
+    },
   },
   setup(props) {
     const eventDate = new Date(props.tlEvent.date)
@@ -87,3 +107,8 @@ export default defineComponent({
   },
 })
 </script>
+<style lang="scss" scoped>
+.title-link:hover .icon {
+  @apply inline-block;
+}
+</style>
diff --git a/components/Events.vue b/components/Events.vue
@@ -23,7 +23,7 @@
 
     <!-- CURRENT EVENT  -->
     <div class="mb-8">
-      <EventListItem :tl-event="currentEvent" is-current-event />
+      <EventListItem :tl-event="currentEvent" is-current-event show-permalink />
     </div>
     <!-- MILESTONE  -->
     <div class="mb-8">

diff --git a/components/EventsFuture.vue b/components/EventsFuture.vue
@@ -13,7 +13,7 @@
       </div>
       <ul class="mb-8 space-y-4 md:space-y-8">
         <li v-for="e in events" :key="e.slug">
-          <EventListItem :tl-event="e" />
+          <EventListItem :tl-event="e" show-permalink />
         </li>
       </ul>
     </template>

diff --git a/components/EventsPast.vue b/components/EventsPast.vue
@@ -3,7 +3,12 @@
     <template v-if="events.length">
       <ul v-if="show" class="mb-8 space-y-4 md:space-y-8">
         <li v-for="e in events" :key="e.slug">
-          <EventListItem :tl-event="e" is-past-event show-resources />
+          <EventListItem
+            :tl-event="e"
+            is-past-event
+            show-resources
+            show-permalink
+          />
         </li>
       </ul>
     </template>

diff --git a/pages/event/_slug.vue b/pages/event/_slug.vue
@@ -0,0 +1,37 @@
+<template>
+  <main>
+    <div class="space-y-4 lg:mx-auto lg:max-w-2xl">
+      <NuxtLink to="/" class="text-gray-500 hover:text-gray-700"
+        ><TIcon icon="chevron-left" class="inline-block" /> Back to the
+        Timeline</NuxtLink
+      >
+      <EventListItem :tl-event="event[0]" show-resources />
+    </div>
+  </main>
+</template>
+
+<script>
+import {
+  defineComponent,
+  useContext,
+  useAsync,
+  useRoute,
+} from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const { $content } = useContext()
+    const route = useRoute()
+    const event = useAsync(() =>
+      $content('/events')
+        .where({ slug: route.value.params.slug })
+        .limit(1)
+        .fetch()
+    )
+
+    return {
+      event,
+    }
+  },
+})
+</script>