✨ (notes) add routing between notes

src/views/Home.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, onUnmounted, nextTick } from 'vue'
+import { defineComponent, watch, nextTick } from 'vue'
 import { useRepo } from '@/hooks/useRepo.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 
@@ -13,7 +13,7 @@ export default defineComponent({
   name: 'Home',
   setup() {
     const { readme } = useRepo('jcalixte', 'notes')
-    const { listenToClick, removeListeners } = useLinks('note')
+    const { listenToClick } = useLinks('note')
 
     watch(readme, () => {
       if (readme.value) {
@@ -23,10 +23,6 @@ export default defineComponent({
       }
     })
 
-    onUnmounted(() => {
-      removeListeners()
-    })
-
     return {
       readme
     }

src/views/Note.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="note content">
+    <hr v-if="notFound" />
+    <div v-if="notFound" class="columns is-centered">
+      <div class="column is-one-third notification is-warning" v-if="notFound">
+        Not found.
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h1 class="title is-1">
+          <router-link :to="{ name: 'Note' }">
+            {{ repo }}
+          </router-link>
+        </h1>
+        <h2 class="subtitle is-2">{{ user }}</h2>
+        <p class="note-display" v-html="readme"></p>
+      </div>
+      <div
+        class="column"
+        v-for="stackedNote in stackedNotes"
+        :key="stackedNote"
+      >
+        <stacked-note :user="user" :repo="repo" :sha="stackedNote" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue'
+import { useNote } from '@/hooks/useNote.hook'
+
+const StackedNote = defineAsyncComponent(() =>
+  import('@/components/StackedNote.vue')
+)
+
+export default defineComponent({
+  name: 'Home',
+  components: {
+    StackedNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup(props) {
+    return useNote(props.user, props.repo)
+  }
+})
+</script>