✨ (backlinks) implement backlinks in notes

src/components/FluxNote.vue

@@ -58,7 +58,6 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
-import { useFocus } from '@/hooks/useFocus.hook'
 
 const StackedNote = defineAsyncComponent(
   () => import('@/components/StackedNote.vue')
@@ -84,7 +83,7 @@ export default defineComponent({
     const { renderString } = useMarkdown()
     const { listenToClick } = useLinks('note-display')
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
-    const { scrollToFocusedNote } = useFocus()
+    const { scrollToFocusedNote } = useQueryStackedNotes()
 
     const { titles } = useNote('note-container')
 

src/components/LinkedNotes.vue

@@ -4,7 +4,9 @@
     <h4 class="subtitle is-4">🔗 Links to this note</h4>
     <ul>
       <li v-for="link in backlink?.links" :key="link.sha">
+        <a @click.prevent="emitNote(link.sha)">
           {{ link.title }}
+        </a>
       </li>
     </ul>
   </div>
@@ -12,6 +14,7 @@
 
 <script lang="ts">
 import { useBacklinks } from '@/hooks/useBacklinks.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
@@ -21,8 +24,15 @@ export default defineComponent({
   },
   setup(props) {
     const { backlink } = useBacklinks(props.sha)
+    const { addStackedNote } = useQueryStackedNotes()
+
+    const emitNote = (sha: string) => {
+      addStackedNote(props.sha, sha)
+    }
+
     return {
-      backlink: backlink.state
+      backlink: backlink.state,
+      emitNote
     }
   }
 })

src/components/StackedNote.vue

@@ -32,10 +32,10 @@ import { computed, defineComponent, nextTick, watch } from 'vue'
 import { useFile } from '@/hooks/useFile.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
-import { useFocus } from '@/hooks/useFocus.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import LinkedNotes from '@/components/LinkedNotes.vue'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 
 export default defineComponent({
   name: 'StackedNote',
@@ -50,7 +50,7 @@ export default defineComponent({
     sha: { type: String, required: true }
   },
   setup(props) {
-    const { scrollToFocusedNote } = useFocus()
+    const { scrollToFocusedNote } = useQueryStackedNotes()
     const { content, fromCache } = useFile(props.sha)
     const { listenToClick } = useLinks('stacked-note', props.sha)
     const className = computed(() => `stacked-note-${props.index}`)

src/hooks/useComputeBacklinks.hook.ts

@@ -61,6 +61,10 @@ export const useComputeBacklinks = () => {
         }
 
         const previousBacklinks = backlinks.get(backlinkFile.sha) ?? []
+        if (previousBacklinks.find((bl) => bl.sha === file.sha)) {
+          continue
+        }
+
         backlinks.set(backlinkFile.sha, [
           ...previousBacklinks,
           {

src/hooks/useFocus.hook.ts

@@ -1,42 +0,0 @@
-import { NOTE_WIDTH } from '@/constants/note-width'
-import { nextTick } from 'vue'
-import { useOverlay } from '@/hooks/useOverlay.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { useWindowSize } from '@vueuse/core'
-
-export const useFocus = () => {
-  const { height } = useWindowSize()
-  const { scrollToNote, isMobile } = useOverlay(false)
-  const { stackedNotes } = useQueryStackedNotes()
-
-  const scrollToFocusedNote = (sha?: string, backToTop?: boolean) => {
-    if (backToTop) {
-      scrollToNote(0)
-      return
-    }
-
-    if (!sha) {
-      return
-    }
-
-    nextTick(() => {
-      const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)
-
-      const hasOneStackedNote = stackedNotes.value.length === 1
-
-      if (isMobile.value) {
-        const element = document.querySelector(`.note-${sha}`) as HTMLElement
-        const top = (index + 1) * (element?.clientHeight ?? height.value)
-        scrollToNote(top, hasOneStackedNote)
-      } else {
-        const margin = index * 44
-        const left = (index + 1) * NOTE_WIDTH - margin
-        scrollToNote(left, hasOneStackedNote)
-      }
-    })
-  }
-
-  return {
-    scrollToFocusedNote
-  }
-}

src/hooks/useNote.hook.ts

@@ -2,19 +2,15 @@ import { computed, onMounted, onUnmounted, watch } from '@vue/runtime-core'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { noteEventBus } from '@/bus/noteEventBus'
-import { useFocus } from '@/hooks/useFocus.hook'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { useRouter } from 'vue-router'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 
 export const useNote = (containerClass: string) => {
   const store = useUserRepoStore()
-  const { push, currentRoute } = useRouter()
   const { isMobile } = useOverlay(false)
-  const { scrollToFocusedNote } = useFocus()
-  const { stackedNotes, updateQueryStackedNotes } = useQueryStackedNotes()
+  const { stackedNotes, addStackedNote } = useQueryStackedNotes()
 
   const titles = computed(() =>
     stackedNotes.value?.reduce((obj: Record<string, string>, note) => {
@@ -38,7 +34,7 @@ export const useNote = (containerClass: string) => {
   )
 
   const unsubscribeLink = noteEventBus.addEventBusListener(
-    ({ user, repo, path, currentNoteSHA }) => {
+    ({ path, currentNoteSHA }) => {
       const currentFile = store.files.find(
         (file) => file.sha === currentNoteSHA
       )
@@ -46,47 +42,11 @@ export const useNote = (containerClass: string) => {
       const finalPath = resolvePath(currentFile?.path ?? '', path)
 
       const file = store.files.find((file) => file.path === finalPath)
-
-      if (!file?.sha || stackedNotes.value.includes(file.sha)) {
-        scrollToFocusedNote(file?.sha)
+      if (!file?.sha) {
         return
       }
 
-      const getStackedNotes = () => {
-        if (!file?.sha) {
-          return []
-        }
-
-        if (!currentNoteSHA) {
-          return [file.sha]
-        }
-
-        const [splittedStackedNotes] = stackedNotes.value
-          .join(';')
-          .split(currentNoteSHA)
-
-        return [
-          ...splittedStackedNotes.replaceAll(';;', ';').split(';'),
-          currentNoteSHA,
-          file.sha
-        ].filter((sha) => !!sha)
-      }
-
-      const newStackedNotes = getStackedNotes()
-
-      push({
-        name: currentRoute.value.name ?? 'Home',
-        params: {
-          user,
-          repo
-        },
-        query: {
-          stackedNotes: newStackedNotes
-        }
-      })
-
-      updateQueryStackedNotes(newStackedNotes)
-      scrollToFocusedNote(file.sha)
+      addStackedNote(currentNoteSHA ?? '', file.sha)
     }
   )
 

src/hooks/useQueryStackedNotes.hook.ts

@@ -1,6 +1,11 @@
+import { NOTE_WIDTH } from '@/constants/note-width'
+import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { readonly, ref } from '@vue/reactivity'
+import { useWindowSize } from '@vueuse/core'
+import { nextTick } from 'vue'
 
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const stackedNotes = ref<string[]>([])
 
@@ -8,24 +13,102 @@ let initial = true
 
 export const useQueryStackedNotes = () => {
   const { query } = useRoute()
+  const { push, currentRoute } = useRouter()
+  const store = useUserRepoStore()
+  const { height } = useWindowSize()
+  const { scrollToNote, isMobile } = useOverlay(false)
 
-  const initResetStackedNote = () =>
-    (stackedNotes.value = (Array.isArray(query.stackedNotes)
-      ? query.stackedNotes
-      : [query.stackedNotes]
-    )
+  const scrollToFocusedNote = (sha?: string, backToTop?: boolean) => {
+    if (backToTop) {
+      scrollToNote(0)
+      return
+    }
+
+    if (!sha) {
+      return
+    }
+
+    nextTick(() => {
+      const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)
+
+      const hasOneStackedNote = stackedNotes.value.length === 1
+
+      if (isMobile.value) {
+        const element = document.querySelector(`.note-${sha}`) as HTMLElement
+        const top = (index + 1) * (element?.clientHeight ?? height.value)
+        scrollToNote(top, hasOneStackedNote)
+      } else {
+        const margin = index * 44
+        const left = (index + 1) * NOTE_WIDTH - margin
+        scrollToNote(left, hasOneStackedNote)
+      }
+    })
+  }
+
+  const initResetStackedNote = () => {
+    stackedNotes.value = Array.isArray(query.stackedNotes)
+      ? (query.stackedNotes as string[])
+      : ([query.stackedNotes]
           .map((n) => n?.toString())
           .filter((n) => !!n) as string[])
+  }
 
   if (initial) {
     initial = false
     initResetStackedNote()
   }
 
+  const updateQueryStackedNotes = (newStackedNotes: string[]) =>
+    (stackedNotes.value = newStackedNotes)
+
+  const addStackedNote = (currentSHA: string, sha: string) => {
+    if (stackedNotes.value.includes(sha)) {
+      scrollToFocusedNote(sha)
+      return
+    }
+
+    const getStackedNotes = () => {
+      if (!sha) {
+        return []
+      }
+
+      if (!currentSHA) {
+        return [sha]
+      }
+
+      const [splittedStackedNotes] = stackedNotes.value
+        .join(';')
+        .split(currentSHA)
+
+      return [
+        ...splittedStackedNotes.replaceAll(';;', ';').split(';'),
+        currentSHA,
+        sha
+      ].filter((sha) => !!sha)
+    }
+
+    const newStackedNotes = getStackedNotes()
+
+    push({
+      name: currentRoute.value.name ?? 'Home',
+      params: {
+        user: store.user,
+        repo: store.repo
+      },
+      query: {
+        stackedNotes: newStackedNotes
+      }
+    })
+
+    updateQueryStackedNotes(newStackedNotes)
+    scrollToFocusedNote(sha)
+  }
+
   return {
     stackedNotes: readonly(stackedNotes),
-    updateQueryStackedNotes: (newStackedNotes: string[]) =>
-      (stackedNotes.value = newStackedNotes),
-    resetStackedNotes: () => initResetStackedNote()
+    updateQueryStackedNotes,
+    addStackedNote,
+    resetStackedNotes: () => initResetStackedNote(),
+    scrollToFocusedNote
   }
 }