Merge branch 'main' of github.com:lite-note/lite-note into main

src/components/FluxNote.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
@@ -111,13 +112,7 @@ const focus = () => scrollToFocusedNote(undefined, true)
         </h4>
       </div>
       <slot />
-      <div v-if="isLoading" class="loading">
-        <img
-          class="is-loading"
-          src="@/assets/icons/loading.svg"
-          alt="loading..."
-        />
-      </div>
+      <lite-loading v-if="isLoading" />
       <div v-else-if="!hasContent">No content here 📝</div>
       <p
         v-else-if="withContent"
@@ -184,9 +179,13 @@ $header-height: 40px;
 
     .repo-title {
       margin-top: 1rem;
+
+      .title,
+      .subtitle {
         text-align: center;
       }
     }
+  }
 
   .note-display {
     padding-bottom: 2rem;
@@ -203,6 +202,10 @@ $header-height: 40px;
     &:not(:first-child) {
       border-top: 1px solid rgba(18, 19, 58, 0.2);
     }
+
+    .title {
+      text-align: left;
+    }
   }
 
   @media screen and (min-width: 769px) {
@@ -224,17 +227,6 @@ $header-height: 40px;
       max-width: var(--note-width);
     }
   }
-
-  .loading {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-    align-items: center;
-
-    .is-loading {
-      animation: spinAround 0.8s infinite linear;
-    }
-  }
 }
 
 @media print, screen and (max-width: 768px) {

src/components/LiteLoading.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="lite-loading">
+    <img class="is-loading" src="@/assets/icons/loading.svg" alt="loading..." />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.lite-loading {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  .is-loading {
+    animation: spinAround 0.8s infinite linear;
+  }
+}
+</style>

src/components/NewVersion.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import LiteLoading from '@/components/LiteLoading.vue'
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 import { ref } from 'vue'
 
 const devMode = ref(import.meta.env.DEV)
+const isLoading = ref(false)
 const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
 
 const close = async () => {
@@ -10,6 +12,11 @@ const close = async () => {
   needRefresh.value = false
   devMode.value = false
 }
+
+const reload = () => {
+  isLoading.value = true
+  updateServiceWorker()
+}
 </script>
 
 <template>
@@ -25,12 +32,9 @@ const close = async () => {
       </span>
     </div>
     <div class="buttons">
-      <button
-        class="button is-primary"
-        v-if="needRefresh"
-        @click="updateServiceWorker()"
-      >
-        Reload
+      <button class="button is-primary" v-if="needRefresh" @click="reload">
+        <LiteLoading v-if="isLoading" />
+        <span v-else>Reload</span>
       </button>
       <button class="button" @click="close">Close</button>
     </div>

src/components/StackedNote.vue

@@ -24,8 +24,8 @@ const props = defineProps<{
 
 const { scrollToFocusedNote } = useQueryStackedNotes()
 const { content } = useFile(props.sha)
-const { listenToClick } = useLinks('stacked-note', props.sha)
 const className = computed(() => `stacked-note-${props.index}`)
+const { listenToClick } = useLinks(className.value, props.sha)
 const titleClassName = computed(() => `title-${className.value}`)
 useTitleNotes(props.repo)
 
@@ -81,7 +81,7 @@ const focus = () => scrollToFocusedNote(props.sha)
 $border-color: rgba(18, 19, 58, 0.2);
 
 .stacked-note {
-  padding: 1rem 1.5rem;
+  padding: 0 1.5rem 1rem;
   background-color: var(--background-color);
 
   transition: cubic-bezier(0.39, 0.575, 0.565, 1) 0.3s;
@@ -125,7 +125,7 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 @media screen and (max-width: 768px) {
   .stacked-note {
-    padding: 0 1.5rem;
+    padding: 0 0.5rem 1rem;
 
     .title-stacked-note {
       padding: 0.5rem 0 0;
@@ -137,6 +137,8 @@ $border-color: rgba(18, 19, 58, 0.2);
     }
 
     .note-content {
+      padding: 0 1.5rem;
+
       .table {
         overflow-x: auto;
       }

src/hooks/useLinks.hook.ts

@@ -1,9 +1,12 @@
 import { noteEventBus } from '@/bus/noteEventBus'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { isExternalLink } from '@/utils/link'
-import { onUnmounted } from 'vue'
+import { ComputedRef, onUnmounted, toValue } from 'vue'
 
-export const useLinks = (className: string, sha?: string) => {
+export const useLinks = (
+  className: ComputedRef<string> | string,
+  sha?: string
+) => {
   const store = useUserRepoStore()
 
   const linkNote: EventListener = (event) => {
@@ -34,7 +37,7 @@ export const useLinks = (className: string, sha?: string) => {
     })
   }
 
-  const selector = `.${className} a`
+  const selector = `.${toValue(className)} a`
 
   const removeListeners = () => {
     const elements = document.querySelectorAll(selector)

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&family=Montagu+Slab&family=Gowun+Batang&family=Cormorant+Garamond&family=forum');
+@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;