🔥 (offline) remove offline img

src/components/StackedNote.vue

@@ -12,12 +12,6 @@
         {{ title }}
       </a>
     </div>
-    <img
-      class="offline-ready"
-      v-if="fromCache"
-      src="@/assets/icons/saved.svg"
-      alt="offline ready"
-    />
     <section v-html="content"></section>
   </div>
 </template>

src/hooks/useRepo.hook.ts

@@ -3,6 +3,7 @@ import { Ref, onMounted, ref, watch } from '@vue/runtime-core'
 import { Octokit } from '@octokit/rest'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
+import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
 
 interface Tree {
   path?: string
@@ -14,6 +15,7 @@ interface Tree {
 }
 
 export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
+  const { getCachedNote, saveCacheNote } = useNoteCache('README')
   const { accessToken } = useGitHubLogin()
 
   const octokit = new Octokit({
@@ -29,8 +31,13 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
     if (!owner.value || !repo.value) {
       return
     }
+    const cachedReadme = await getCachedNote()
 
     try {
+      if (cachedReadme) {
+        readme.value = render(cachedReadme.content)
+      }
+
       const README = await octokit.repos.getReadme({
         owner: owner.value,
         repo: repo.value
@@ -38,6 +45,7 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
 
       if (README) {
         readme.value = render(README.data.content)
+        saveCacheNote(README.data.content)
       }
 
       const commits = await octokit.request(
@@ -69,9 +77,11 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
         console.log(tree.value)
       }
     } catch (error) {
+      if (!cachedReadme) {
         notFound.value = true
       }
     }
+  }
 
   onMounted(() => retrieveRepo())
 

src/views/RepoList.vue

@@ -2,7 +2,7 @@
   <div class="repo-list">
     <h1 class="title is-1">Repositories</h1>
     <go-back />
-    <span v-if="!isReady">loading...</span>
+    <div v-if="!isReady">loading...</div>
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
         <table