✨ (note) init image display

src/hooks/useFile.hook.ts

@@ -4,7 +4,12 @@ import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { Octokit } from '@octokit/rest'
 import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
 
-export const useFile = (owner: string, repo: string, sha: string) => {
+export const useFile = (
+  owner: string,
+  repo: string,
+  sha: string,
+  retrieveContent = true
+) => {
   const { getCachedNote, saveCacheNote } = useNoteCache(sha)
   const { accessToken } = useGitHubLogin()
   const fromCache = ref(false)
@@ -15,17 +20,7 @@ export const useFile = (owner: string, repo: string, sha: string) => {
 
   const content = ref('')
 
-  const getContent = async () => {
-    const { render } = useMarkdown()
-    const cachedNote = await getCachedNote()
-
-    fromCache.value = !!cachedNote
-
-    if (cachedNote) {
-      content.value = render(cachedNote.content)
-      return
-    }
-
+  const getFileContent = async () => {
     const file = await octokit.request(
       'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
       {
@@ -35,18 +30,36 @@ export const useFile = (owner: string, repo: string, sha: string) => {
       }
     )
 
-    if (!file) {
+    return file?.data.content
+  }
+
+  const getContent = async () => {
+    const { render } = useMarkdown()
+    const contentFile = await getFileContent()
+
+    const cachedNote = await getCachedNote()
+
+    fromCache.value = !!cachedNote
+
+    if (cachedNote) {
+      content.value = render(cachedNote.content)
       return
     }
 
-    saveCacheNote(file.data.content)
-    content.value = render(file.data.content)
+    if (!contentFile) {
+      return
+    }
+    saveCacheNote(contentFile)
+    content.value = render(contentFile)
   }
 
-  getContent()
+  if (retrieveContent) {
+    getContent()
+  }
 
   return {
     content,
+    getFileContent,
     fromCache
   }
 }

src/hooks/useImages.hook.ts

@@ -0,0 +1,49 @@
+import { useFile } from '@/hooks/useFile.hook'
+import { useRepo } from '@/hooks/useRepo.hook'
+import { resolvePath } from '@/modules/repo/services/resolvePath'
+import { computed, Ref } from 'vue'
+
+const SRC_PREFIX = 'data:image/png;base64,'
+
+export const useImages = (
+  user: Ref<string>,
+  repo: Ref<string>,
+  sha: string
+) => {
+  const { tree } = useRepo(user, repo, false)
+
+  const currentFilePath = computed(
+    () => tree.value.find((file) => file.sha === sha)?.path
+  )
+
+  const images = document.querySelectorAll(`.note-${sha} img`)
+
+  images.forEach(async (image) => {
+    if (currentFilePath.value) {
+      const src = image.getAttribute('src')
+      if (!src || src.startsWith(SRC_PREFIX)) {
+        return
+      }
+
+      const imageFilePath = resolvePath(
+        currentFilePath.value,
+        image.getAttribute('src') ?? ''
+      )
+
+      const imageFile = tree.value.find((file) => file.path === imageFilePath)
+
+      if (!imageFile?.sha) {
+        return
+      }
+      const { getFileContent } = useFile(
+        user.value,
+        repo.value,
+        imageFile.sha,
+        false
+      )
+
+      const fileContent = await getFileContent()
+      image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`)
+    }
+  })
+}

src/hooks/useMarkdown.hook.ts

@@ -1,7 +1,10 @@
 import MarkdownIt from 'markdown-it'
 import markdownItClass from '@toycode/markdown-it-class'
 
-const md = new MarkdownIt().use(markdownItClass, {
+const md = new MarkdownIt({
+  typographer: true,
+  quotes: ['«\xA0', '\xA0»', '‹\xA0', '\xA0›']
+}).use(markdownItClass, {
   h1: ['title', 'is-2'],
   h2: ['title', 'is-3'],
   h3: ['title', 'is-4'],

src/hooks/useQueryStackedNotes.hook.ts

@@ -9,13 +9,16 @@ let initial = true
 export const useQueryStackedNotes = () => {
   const { query } = useRoute()
 
-  const setStackedNotes = () => {
-    stackedNotes.value = (Array.isArray(query.stackedNotes)
+  const initResetStackedNote = () =>
+    (Array.isArray(query.stackedNotes)
       ? query.stackedNotes
       : [query.stackedNotes]
     )
       .map((n) => n?.toString())
       .filter((n) => !!n) as string[]
+
+  const setStackedNotes = () => {
+    stackedNotes.value = initResetStackedNote()
   }
 
   if (initial) {
@@ -27,6 +30,6 @@ export const useQueryStackedNotes = () => {
     stackedNotes: readonly(stackedNotes),
     updateQueryStackedNotes: (newStackedNotes: string[]) =>
       (stackedNotes.value = newStackedNotes),
-    resetStackedNotes: () => (stackedNotes.value = [])
+    resetStackedNotes: () => initResetStackedNote()
   }
 }

src/hooks/useRepo.hook.ts

@@ -1,4 +1,4 @@
-import { Ref, onMounted, ref, watch } from '@vue/runtime-core'
+import { Ref, ref, watch } from '@vue/runtime-core'
 
 import { Octokit } from '@octokit/rest'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
@@ -14,7 +14,13 @@ interface Tree {
   url?: string
 }
 
-export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
+const tree = ref<Tree[]>([])
+
+export const useRepo = (
+  owner: Ref<string>,
+  repo: Ref<string>,
+  retrieve = true
+) => {
   const { getCachedNote, saveCacheNote } = useNoteCache('README')
   const { accessToken } = useGitHubLogin()
   const { render } = useMarkdown()
@@ -25,7 +31,6 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
 
   const readme = ref<string | null>(null)
   const notFound = ref(false)
-  const tree = ref<Tree[]>([])
 
   const retrieveRepo = async () => {
     if (!owner.value || !repo.value) {
@@ -82,9 +87,9 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
     }
   }
 
-  onMounted(() => {
+  if (retrieve) {
     retrieveRepo()
-  })
+  }
 
   watch([owner, repo], () => retrieveRepo())