Show recent snippets from json data

src/components/snippets/SnippetList.vue

@@ -10,13 +10,18 @@
         </div>
         <div class="list">
             <ul class="snippet-items">
-                <snippet-list-element />
+                <snippet-list-element
+                    v-for="(snippet, index) in snippets"
+                    :key="index"
+                    :snippet="snippet"
+                />
             </ul>
         </div>
     </section>
 </template>
 
 <script lang="ts">
+import Snippet from "@/interfaces/Snippet";
 import { Options, Vue } from "vue-class-component";
 
 import SnippetListElement from "./SnippetListElement.vue";
@@ -25,8 +30,13 @@ import SnippetListElement from "./SnippetListElement.vue";
     components: {
         SnippetListElement,
     },
+    props: {
+        snippets: Array,
+    },
 })
-export default class SnippetList extends Vue {}
+export default class SnippetList extends Vue {
+    private snippets!: Snippet[];
+}
 </script>
 
 <style lang="scss">

src/components/snippets/SnippetListElement.vue

@@ -6,10 +6,38 @@
             class="snippet-image"
         />
         <div class="snippet-text">
-            <h4 class="snippet-title">Title</h4>
+            <h4 class="snippet-title">{{ snippet.title }}</h4>
-            <span class="snippet-date" title="pretty date">
+            <span class="snippet-date" :title="prettyDate">
-                relative date
+                {{ relativeDate }}
             </span>
         </div>
     </li>
 </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 SnippetListElement extends Vue {
+    private snippet!: Snippet;
+
+    private get dateAsDateTime() {
+        return DateTime.fromSeconds(this.snippet.timeAdded);
+    }
+
+    private get prettyDate() {
+        return this.dateAsDateTime.toLocaleString(DateTime.DATETIME_FULL);
+    }
+
+    private get relativeDate() {
+        return this.dateAsDateTime.toRelative()?.toString();
+    }
+}
+</script>

src/interfaces/Snippet.ts

@@ -0,0 +1,7 @@
+export default interface Snippet {
+    title: string;
+    slug: string;
+    timeAdded: number;
+    snippet: string;
+    tags: string[];
+}

src/views/HomeView.vue

@@ -1,5 +1,5 @@
 <template>
-    <snippet-list />
+    <snippet-list :snippets="recentSnippets" />
 </template>
 
 <script lang="ts">
@@ -7,10 +7,21 @@ import { Options, Vue } from "vue-class-component";
 
 import SnippetList from "@/components/snippets/SnippetList.vue";
 
+import snippets from "@/data/snippets.json";
+import Snippet from "@/interfaces/Snippet";
+
 @Options({
     components: {
         SnippetList,
     },
 })
-export default class HomeView extends Vue {}
+export default class HomeView extends Vue {
+    private snippets: Snippet[] = snippets;
+
+    get recentSnippets() {
+        return this.snippets
+            .sort((a, b) => a.timeAdded - b.timeAdded)
+            .slice(0, 5);
+    }
+}
 </script>