✨ (fleeting notes) init fleeting notes

src/components/FluxNote.vue

@@ -1,22 +1,21 @@
 <template>
   <div class="flux-note content note-container">
     <div class="note readme">
-      <header-note class="header" />
+      <header-note class="header" :user="user" :repo="repo" />
-      <slot>
+      <div class="repo-title">
-        <div class="repo-title">
+        <h1 class="title is-1">
-          <h1 class="title is-1">
+          [<router-link
-            [<router-link
+            :to="{ name: 'Home', params: { user, repo } }"
-              :to="{ name: 'Home', params: { user, repo } }"
+            @click="resetStackedNotes"
-              @click="resetStackedNotes"
+            >{{ repo }}</router-link
-              >{{ repo }}</router-link
+          >]
-            >]
+        </h1>
-          </h1>
+        <h4 class="subtitle is-4">
-          <h4 class="subtitle is-4">
+          <em>{{ user }}</em>
-            <em>{{ user }}</em>
+        </h4>
-          </h4>
+      </div>
-        </div>
+      <slot />
-        <p class="note-display" v-html="readme"></p>
+      <p class="note-display" v-html="renderedContent ?? readme"></p>
-      </slot>
     </div>
     <stacked-note
       class="note"
@@ -33,9 +32,18 @@
 
 <script lang="ts">
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { defineComponent, defineAsyncComponent, toRefs } from 'vue'
+import {
+  defineComponent,
+  defineAsyncComponent,
+  toRefs,
+  computed,
+  watch,
+  nextTick
+} from 'vue'
 import HeaderNote from '@/components/HeaderNote.vue'
 import { useNote } from '@/hooks/useNote.hook'
+import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useLinks } from '@/hooks/useLinks.hook'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
@@ -48,14 +56,24 @@ export default defineComponent({
     StackedNote
   },
   props: {
-    user: { type: String, required: false, default: '' },
+    user: { type: String, required: true },
-    repo: { type: String, required: false, default: '' }
+    repo: { type: String, required: true },
+    content: { type: String, required: false, default: null }
   },
   setup(props) {
+    const { renderString } = useMarkdown()
     const refProps = toRefs(props)
+    const { listenToClick } = useLinks('note-display')
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
 
+    const renderedContent = computed(() =>
+      props.content !== null ? renderString(props.content) : null
+    )
+
+    watch(renderedContent, () => nextTick(() => listenToClick()))
+
     return {
+      renderedContent,
       stackedNotes,
       resetStackedNotes,
       ...useNote('note-container', refProps.user, refProps.repo)
@@ -68,6 +86,9 @@ export default defineComponent({
 $header-height: 40px;
 
 .flux-note {
+  display: flex;
+  flex: 1;
+
   .header {
     height: $header-height;
   }

src/components/HeaderNote.vue

@@ -3,6 +3,9 @@
     <router-link :to="{ name: 'Home' }">
       <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
     </router-link>
+    <router-link :to="{ name: 'FleetingNotes', params: { user, repo } }">
+      Fleeting notes
+    </router-link>
   </header>
 </template>
 
@@ -10,12 +13,20 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'HeaderNote'
+  name: 'HeaderNote',
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  }
 })
 </script>
 
 <style scoped lang="scss">
 .header-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
   img:hover {
     cursor: pointer;
   }

src/hooks/useMarkdown.hook.ts

@@ -13,6 +13,7 @@ const md = new MarkdownIt().use(markdownItClass, {
 
 export const useMarkdown = () => {
   return {
+    renderString: (content: string) => md.render(content),
     render: (content: string) =>
       md.render(decodeURIComponent(escape(atob(content))))
   }

src/hooks/useNote.hook.ts

@@ -28,11 +28,10 @@ export const useNote = (
   user: Ref<string>,
   repo: Ref<string>
 ) => {
-  const { push } = useRouter()
+  const { push, currentRoute } = useRouter()
   const { isMobile } = useOverlay(false)
   const { scrollToFocusedNote } = useFocus()
   const { stackedNotes, updateQueryStackedNotes } = useQueryStackedNotes()
-
   const { readme, notFound, tree } = useRepo(user, repo)
   const { listenToClick } = useLinks('note-display')
 
@@ -102,7 +101,7 @@ export const useNote = (
       const newStackedNotes = getStackedNotes()
 
       push({
-        name: 'Home',
+        name: currentRoute.value.name ?? 'Home',
         params: {
           user: user.value,
           repo: repo.value

src/hooks/useRepo.hook.ts

@@ -14,19 +14,15 @@ interface Tree {
   url?: string
 }
 
-export const useRepo = (
+export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
-  owner: Ref<string>,
-  repo: Ref<string>,
-  fetchRepo = true
-) => {
   const { getCachedNote, saveCacheNote } = useNoteCache('README')
   const { accessToken } = useGitHubLogin()
+  const { render } = useMarkdown()
 
   const octokit = new Octokit({
     auth: accessToken.value
   })
 
-  const { render } = useMarkdown()
   const readme = ref<string | null>(null)
   const notFound = ref(false)
   const tree = ref<Tree[]>([])
@@ -78,7 +74,6 @@ export const useRepo = (
 
       if (treeResponse) {
         tree.value = treeResponse.data.tree.filter((t) => t.type === 'blob')
-        console.log(tree.value)
       }
     } catch (error) {
       if (!cachedReadme) {
@@ -88,9 +83,7 @@ export const useRepo = (
   }
 
   onMounted(() => {
-    if (fetchRepo) {
+    retrieveRepo()
-      retrieveRepo()
-    }
   })
 
   watch([owner, repo], () => retrieveRepo())

src/modules/note/hooks/useFleetingNotes.ts

@@ -0,0 +1,24 @@
+import { useRepo } from '@/hooks/useRepo.hook'
+import { computed, Ref } from 'vue'
+
+const FLEETING_NOTES_FOLDER = 'fleeting-notes'
+
+export const useFleetingNotes = (owner: Ref<string>, repo: Ref<string>) => {
+  const { tree } = useRepo(owner, repo)
+
+  const fleetingNotes = computed(() =>
+    tree.value.filter((file) => file.path?.startsWith(FLEETING_NOTES_FOLDER))
+  )
+
+  const content = computed(() =>
+    fleetingNotes.value.length
+      ? fleetingNotes.value
+          .map((note) => `- [${note.path}](${note.path})`)
+          .join('\n')
+      : ''
+  )
+
+  return {
+    content
+  }
+}

src/views/About.vue

@@ -9,7 +9,7 @@
         <li>header note for quick actions ⏳</li>
         <li>offline notes</li>
         <li>full path resolver between notes</li>
-        <li>draft & "note on the fly" folders</li>
+        <li>draft & fleeting notes folders</li>
         <li>login with GitHub "Personal Access Token" tutorial</li>
         <li>private & public notes tutorial</li>
         <li>

src/views/FleetingNotes.vue

@@ -1,20 +1,46 @@
 <template>
-  <div class="fleeting-notes"></div>
+  <div class="fleeting-notes">
+    <flux-note :user="user" :repo="repo" :content="content">
+      <h3 class="subtitle is-3">
+        Fleeting notes
+      </h3>
+    </flux-note>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { useFleetingNotes } from '@/modules/note/hooks/useFleetingNotes'
+import { defineAsyncComponent, defineComponent, toRefs } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
 export default defineComponent({
   name: 'FleetingNotes',
+  components: {
+    FluxNote
+  },
   props: {
     user: { type: String, required: true },
     repo: { type: String, required: true }
+  },
+  setup(props) {
+    const refProps = toRefs(props)
+    const { content } = useFleetingNotes(refProps.user, refProps.repo)
+
+    return {
+      content
+    }
   }
 })
 </script>
 
 <style scoped lang="scss">
 .fleeting-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
 }
 </style>

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home content" v-if="!user || !repo">
     <welcome-world />
   </div>
-  <flux-note class="home" :user="user" :repo="repo" :key="routeKey" v-else />
+  <flux-note :user="user" :repo="repo" :key="routeKey" v-else />
 </template>
 
 <script lang="ts">