💄 (fonts) add fonts

src/components/NewVersion.vue

@@ -44,7 +44,7 @@ const close = async () => {
   bottom: 0;
   margin: 1rem;
   padding: 0.5rem;
-  width: 200px;
+  width: 220px;
   color: var(--primary-color);
   border: var(--primary-color) 2px solid;
   border-radius: 4px;

src/components/SignInGithub.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 const GITHUB_URL = 'https://github.com/login/oauth/authorize'
 
 const CLIENT_ID = 'Iv1.12dc43d013ce3623'

src/hooks/useImages.hook.ts

@@ -12,7 +12,9 @@ export const useImages = (sha: string) => {
     () => store.files.find((file) => file.sha === sha)?.path
   )
 
-  watch(currentFilePath, (filePath) => {
+  watch(
+    currentFilePath,
+    (filePath) => {
       if (!filePath) {
         return
       }
@@ -30,7 +32,9 @@ export const useImages = (sha: string) => {
           image.getAttribute('src') ?? ''
         )
 
-      const imageFile = store.files.find((file) => file.path === imageFilePath)
+        const imageFile = store.files.find(
+          (file) => file.path === imageFilePath
+        )
 
         if (!imageFile?.sha) {
           return
@@ -40,5 +44,7 @@ export const useImages = (sha: string) => {
         const fileContent = await getCachedFileContent()
         image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`)
       })
-  })
+    },
+    { immediate: true }
+  )
 }

src/styles/app.scss

@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&family=Courgette&family=IBM+Plex+Serif&family=Kiwi+Maru&family=Maven+Pro&family=Noto+Sans+KR&family=Tajawal&family=Domine&family=Amiri&display=swap&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=forum');
 
 /**
   font-family: 'Courgette', cursive;