♻️ (flux note) move in a component flux …

flux note will be used for fleeting notes and
drafts too

src/components/FluxNote.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flux-note content note-container">
+    <div class="note readme">
+      <header-note class="header" />
+      <slot>
+        <div class="repo-title">
+          <h1 class="title is-1">
+            [<router-link
+              :to="{ name: 'Home', params: { user, repo } }"
+              @click="resetStackedNotes"
+              >{{ repo }}</router-link
+            >]
+          </h1>
+          <h4 class="subtitle is-4">
+            <em>{{ user }}</em>
+          </h4>
+        </div>
+        <p class="note-display" v-html="readme"></p>
+      </slot>
+    </div>
+    <stacked-note
+      class="note"
+      v-for="(stackedNote, index) in stackedNotes"
+      :key="stackedNote"
+      :index="index"
+      :user="user"
+      :repo="repo"
+      :sha="stackedNote"
+      :title="titles[stackedNote ?? '']"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { defineComponent, defineAsyncComponent, toRefs } from 'vue'
+import HeaderNote from '@/components/HeaderNote.vue'
+import { useNote } from '@/hooks/useNote.hook'
+
+const StackedNote = defineAsyncComponent(() =>
+  import('@/components/StackedNote.vue')
+)
+
+export default defineComponent({
+  name: 'FluxNote',
+  components: {
+    HeaderNote,
+    StackedNote
+  },
+  props: {
+    user: { type: String, required: false, default: '' },
+    repo: { type: String, required: false, default: '' }
+  },
+  setup(props) {
+    const refProps = toRefs(props)
+    const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
+
+    return {
+      stackedNotes,
+      resetStackedNotes,
+      ...useNote('note-container', refProps.user, refProps.repo)
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+$header-height: 40px;
+
+.flux-note {
+  .header {
+    height: $header-height;
+  }
+
+  .readme {
+    position: sticky;
+    left: 0;
+    top: 0;
+    padding: 0 2rem 1rem;
+
+    .repo-title {
+      margin-top: 1rem;
+      text-align: center;
+    }
+  }
+
+  .note {
+    text-align: left;
+    overflow-y: auto;
+    height: 100vh;
+    position: sticky;
+    background-color: #fff;
+
+    &:not(:first-child) {
+      border-top: 1px solid rgba(18, 19, 58, 0.2);
+    }
+  }
+
+  @media screen and (min-width: 769px) {
+    .note {
+      min-width: 620px;
+      max-width: 620px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .flux-note {
+    flex-wrap: wrap;
+
+    .note {
+      width: 100%;
+    }
+  }
+}
+</style>

src/hooks/useLinks.hook.ts

@@ -28,6 +28,7 @@ export const useLinks = (className: string, sha?: string) => {
 
   const removeListeners = () => {
     const elements = document.querySelectorAll(selector)
+
     elements.forEach((element) => {
       element.removeEventListener('click', linkNote)
     })
@@ -36,6 +37,7 @@ export const useLinks = (className: string, sha?: string) => {
   const listenToClick = () => {
     removeListeners()
     const elements = document.querySelectorAll(selector)
+
     elements.forEach((element) => {
       element.addEventListener('click', linkNote)
     })

src/hooks/useQueryStackedNotes.hook.ts

@@ -8,8 +8,8 @@ let initial = true
 
 export const useQueryStackedNotes = () => {
   const { query } = useRoute()
-  if (initial) {
-    initial = false
+
+  const setStackedNotes = () => {
     stackedNotes.value = (Array.isArray(query.stackedNotes)
       ? query.stackedNotes
       : [query.stackedNotes]
@@ -18,6 +18,11 @@ export const useQueryStackedNotes = () => {
       .filter((n) => !!n) as string[]
   }
 
+  if (initial) {
+    initial = false
+    setStackedNotes()
+  }
+
   return {
     stackedNotes: readonly(stackedNotes),
     updateQueryStackedNotes: (newStackedNotes: string[]) =>

src/hooks/useRepo.hook.ts

@@ -14,7 +14,11 @@ interface Tree {
   url?: string
 }
 
-export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
+export const useRepo = (
+  owner: Ref<string>,
+  repo: Ref<string>,
+  fetchRepo = true
+) => {
   const { getCachedNote, saveCacheNote } = useNoteCache('README')
   const { accessToken } = useGitHubLogin()
 
@@ -83,7 +87,11 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
     }
   }
 
-  onMounted(() => retrieveRepo())
+  onMounted(() => {
+    if (fetchRepo) {
+      retrieveRepo()
+    }
+  })
 
   watch([owner, repo], () => retrieveRepo())
 

src/router/router.ts

@@ -26,6 +26,15 @@ const routes: Array<RouteRecordRaw> = [
     props: true,
     component: Home
   },
+  {
+    path: '/:user/:repo/fleeting-notes',
+    name: 'FleetingNotes',
+    props: true,
+    component: () =>
+      import(
+        /* webpackChunkName: "fleeting-notes" */ '@/views/FleetingNotes.vue'
+      )
+  },
   {
     path: '/about',
     name: 'About',

src/styles/app.scss

@@ -2,7 +2,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
 
 $primary: #2c3a47;
-$link: #58b19f;
+$link: #3b7e70;
 
 @import '~bulma/bulma.sass';
 

src/views/FleetingNotes.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="fleeting-notes"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FleetingNotes',
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.fleeting-notes {
+}
+</style>

src/views/Home.vue

@@ -2,51 +2,20 @@
   <div class="home content" v-if="!user || !repo">
     <welcome-world />
   </div>
-  <div v-else-if="notFound">
-    <div class="notification is-warning">
-      Not found.
-    </div>
-  </div>
-  <div class="home content note-container" v-else>
-    <div class="note readme">
-      <header-note class="header" />
-      <div class="repo-title">
-        <h1 class="title is-1">
-          [<router-link
-            :to="{ name: 'Home', params: { user, repo } }"
-            :key="routeKey"
-            @click="resetStackedNotes"
-            >{{ repo }}</router-link
-          >]
-        </h1>
-        <h4 class="subtitle is-4">
-          <em>{{ user }}</em>
-        </h4>
-      </div>
-      <p class="note-display" v-html="readme"></p>
-    </div>
-    <stacked-note
-      class="note"
-      v-for="(stackedNote, index) in stackedNotes"
-      :key="stackedNote"
-      :index="index"
-      :user="user"
-      :repo="repo"
-      :sha="stackedNote"
-      :title="titles[stackedNote ?? '']"
-    />
-  </div>
+  <flux-note class="home" :user="user" :repo="repo" :key="routeKey" v-else />
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
-import { useNote } from '@/hooks/useNote.hook'
+import {
+  defineComponent,
+  defineAsyncComponent,
+  computed,
+  toRefs,
+  watch
+} from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import HeaderNote from '@/components/HeaderNote.vue'
 
-const StackedNote = defineAsyncComponent(() =>
-  import('@/components/StackedNote.vue')
-)
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
 const WelcomeWorld = defineAsyncComponent(() =>
   import('@/components/WelcomeWorld.vue')
@@ -55,9 +24,8 @@ const WelcomeWorld = defineAsyncComponent(() =>
 export default defineComponent({
   name: 'Home',
   components: {
-    StackedNote,
     WelcomeWorld,
-    HeaderNote
+    FluxNote
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -65,10 +33,14 @@ export default defineComponent({
   },
   setup(props) {
     const refProps = toRefs(props)
+    const { resetStackedNotes } = useQueryStackedNotes()
+
+    watch([refProps.user, refProps.repo], () => {
+      resetStackedNotes()
+    })
 
     return {
-      ...useNote('note-container', refProps.user, refProps.repo),
-      ...useQueryStackedNotes(),
+      resetStackedNotes,
       routeKey: computed(() => `${props.user}-${props.repo}`)
     }
   }
@@ -76,55 +48,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$header-height: 40px;
-
 .home {
   display: flex;
   flex: 1;
-
-  .header {
-    height: $header-height;
-  }
-
-  .readme {
-    position: sticky;
-    left: 0;
-    top: 0;
-    padding: 0 2rem 1rem;
-
-    .repo-title {
-      margin-top: 1rem;
-      text-align: center;
-    }
-  }
-
-  .note {
-    text-align: left;
-    overflow-y: auto;
-    height: 100vh;
-    position: sticky;
-    background-color: #fff;
-
-    &:not(:first-child) {
-      border-top: 1px solid rgba(18, 19, 58, 0.2);
-    }
-  }
-
-  @media screen and (min-width: 769px) {
-    .note {
-      min-width: 620px;
-      max-width: 620px;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .home {
-    flex-wrap: wrap;
-
-    .note {
-      width: 100%;
-    }
-  }
 }
 </style>