Implement bare-bones snippets detail view

src/components/header/HeaderNavigation.vue

@@ -2,7 +2,9 @@
     <nav class="site-nav">
         <ul class="nav-items">
             <li class="nav-item">
-                <router-link :to="{ name: 'snippets' }">Snippets</router-link>
+                <router-link :to="{ name: 'snippet-index' }">
+                    Snippets
+                </router-link>
             </li>
         </ul>
     </nav>

src/components/snippets/SnippetList.vue

@@ -3,7 +3,7 @@
         <div class="header">
             <h3>Latest snippets</h3>
             <div class="all-snippets" v-if="showAllSnippets">
-                <router-link :to="{ name: 'snippets' }">
+                <router-link :to="{ name: 'snippet-index' }">
                     All snippets
                 </router-link>
             </div>

src/components/snippets/SnippetListElement.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="snippet-item">
+    <li class="snippet-item" @click="navigate">
         <img
             src="//via.placeholder.com/128"
             alt="Snippet Topic"
@@ -39,5 +39,15 @@ export default class SnippetListElement extends Vue {
     private get relativeDate() {
         return this.dateAsDateTime.toRelative()?.toString();
     }
+
+    private navigate() {
+        this.$router.push({
+            name: "snippet-show",
+            params: {
+                id: this.snippet.id,
+                slug: this.snippet.slug,
+            },
+        });
+    }
 }
 </script>

src/components/snippets/SnippetShow.vue

@@ -0,0 +1,30 @@
+<template>
+    <h1>{{ snippet.title }}</h1>
+    <h5>Added on {{ prettyDate }}</h5>
+
+    <code>{{ snippet.snippet }}</code>
+</template>
+
+<script lang="ts">
+import Snippet from "@/interfaces/Snippet";
+import { Options, Vue } from "vue-class-component";
+
+import { DateTime } from "luxon";
+
+@Options({
+    props: {
+        snippet: Object,
+    },
+})
+export default class SnippetShow extends Vue {
+    private snippet?: Snippet;
+
+    private get prettyDate() {
+        if (!this.snippet) return undefined;
+
+        return DateTime.fromSeconds(this.snippet.timeAdded).toLocaleString(
+            DateTime.DATE_FULL
+        );
+    }
+}
+</script>

src/interfaces/Snippet.ts

@@ -1,4 +1,5 @@
 export default interface Snippet {
+    id: number;
     title: string;
     slug: string;
     timeAdded: number;

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import SnippetsView from "../views/SnippetsView.vue";
+import SnippetIndexView from "../views/SnippetIndexView.vue";
+import SnippetShowView from "../views/SnippetShowView.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -10,8 +11,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     {
         path: "/snippets",
-        name: "snippets",
+        name: "snippet-index",
-        component: SnippetsView,
+        component: SnippetIndexView,
+    },
+    {
+        path: "/snippets/:id-:slug",
+        name: "snippet-show",
+        component: SnippetShowView,
+        props: true,
     },
 ];
 

src/views/SnippetShowView.vue

@@ -0,0 +1,31 @@
+<template>
+    <snippet-show :snippet="snippet" />
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+import SnippetShow from "@/components/snippets/SnippetShow.vue";
+
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
+@Options({
+    components: {
+        SnippetShow,
+    },
+    props: {
+        id: String,
+        slug: String,
+    },
+})
+export default class HomeView extends Vue {
+    private snippets: Snippet[] = snippets;
+    private id!: string;
+
+    get snippet() {
+        const paramSnippetId = parseInt(this.id);
+        return this.snippets.find((snippet) => snippet.id == paramSnippetId);
+    }
+}
+</script>