🔥 (offline) remove offline img

src/assets/icons/dark-left-arrow.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <line x1="5" y1="12" x2="19" y2="12" />
-  <line x1="5" y1="12" x2="9" y2="16" />
-  <line x1="5" y1="12" x2="9" y2="8" />
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="5" y1="12" x2="19" y2="12" />
+  <line x1="5" y1="12" x2="9" y2="16" />
+  <line x1="5" y1="12" x2="9" y2="8" />
 </svg>

src/assets/icons/download.svg

@@ -1,6 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-download" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
-  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-  <path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
-  <line x1="12" y1="13" x2="12" y2="22" />
-  <polyline points="9 19 12 22 15 19" />
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-download" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
+  <line x1="12" y1="13" x2="12" y2="22" />
+  <polyline points="9 19 12 22 15 19" />
 </svg>

src/components/HeaderNote.vue

@@ -1,23 +1,23 @@
-<template>
-  <header class="header-note">
-    <router-link :to="{ name: 'Home' }">
-      <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
-    </router-link>
-  </header>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'HeaderNote'
-})
-</script>
-
-<style scoped lang="scss">
-.header-note {
-  img:hover {
-    cursor: pointer;
-  }
-}
-</style>
+<template>
+  <header class="header-note">
+    <router-link :to="{ name: 'Home' }">
+      <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
+    </router-link>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'HeaderNote'
+})
+</script>
+
+<style scoped lang="scss">
+.header-note {
+  img:hover {
+    cursor: pointer;
+  }
+}
+</style>

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,7 +77,9 @@ export const useRepo = (owner: Ref<string>, repo: Ref<string>) => {
         console.log(tree.value)
       }
     } catch (error) {
-      notFound.value = true
+      if (!cachedReadme) {
+        notFound.value = true
+      }
     }
   }
 

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