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

src/components/StackedNote.vue

@@ -5,28 +5,28 @@ import {
   nextTick,
   onMounted,
   ref,
-  watch,
-} from "vue"
+  watch
+} from 'vue'
 
-import { useEditionMode } from "@/hooks/useEditionMode"
-import { useFile } from "@/hooks/useFile.hook"
-import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
-import { useImages } from "@/hooks/useImages.hook"
-import { useLinks } from "@/hooks/useLinks.hook"
-import { useNoteOverlay } from "@/hooks/useNoteOverlay.hook"
-import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
-import { useTitleNotes } from "@/hooks/useTitleNotes.hook"
-import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
-import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
-import { filenameToNoteTitle } from "@/utils/noteTitle"
-import { generateTweets } from "@/utils/twitter"
+import { useEditionMode } from '@/hooks/useEditionMode'
+import { useFile } from '@/hooks/useFile.hook'
+import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
+import { useImages } from '@/hooks/useImages.hook'
+import { useLinks } from '@/hooks/useLinks.hook'
+import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
+import { filenameToNoteTitle } from '@/utils/noteTitle'
+import { generateTweets } from '@/utils/twitter'
 
 const LinkedNotes = defineAsyncComponent(
-  () => import("@/components/LinkedNotes.vue"),
+  () => import('@/components/LinkedNotes.vue')
 )
 
 const EditNote = defineAsyncComponent(
-  () => import("@/modules/note/components/EditNote.vue"),
+  () => import('@/modules/note/components/EditNote.vue')
 )
 
 const props = defineProps<{
@@ -50,7 +50,7 @@ const {
   rawContent,
   getRawContent,
   saveCacheNote,
-  getEditedSha,
+  getEditedSha
 } = useFile(sha)
 const initialRawContent = ref<string | null>(null)
 const className = computed(() => `stacked-note-${props.index}`)
@@ -62,12 +62,12 @@ const store = useUserRepoStore()
 const hasBacklinks = computed(() => store.userSettings?.backlink)
 
 const { displayNoteOverlay } = useNoteOverlay(className.value, index)
-const displayedTitle = computed(() => filenameToNoteTitle(props.title ?? ""))
-const breadcrumbs = computed(() => displayedTitle.value.split(" / "))
+const displayedTitle = computed(() => filenameToNoteTitle(props.title ?? ''))
+const breadcrumbs = computed(() => displayedTitle.value.split(' / '))
 
 const { updateFile } = useGitHubContent({
   user: user.value,
-  repo: repo.value,
+  repo: repo.value
 })
 
 onMounted(async () => {
@@ -90,13 +90,13 @@ watch([content, mode], () => {
 
 watch(mode, async (newMode) => {
   const hasUserFinishedToEdit =
-    newMode === "read" && rawContent.value !== initialRawContent.value
+    newMode === 'read' && rawContent.value !== initialRawContent.value
 
   if (!hasUserFinishedToEdit) {
     return
   }
   if (!path.value) {
-    console.warn("no path found for this file")
+    console.warn('no path found for this file')
 
     return
   }
@@ -105,17 +105,17 @@ watch(mode, async (newMode) => {
   const newSha = await updateFile({
     content: rawContent.value,
     path: path.value,
-    sha: editedSha,
+    sha: editedSha
   })
 
   if (!newSha) {
-    console.warn("no new SHA found for this file")
+    console.warn('no new SHA found for this file')
 
     return
   }
 
   await saveCacheNote(encodeUTF8ToBase64(rawContent.value), {
-    editedSha: newSha,
+    editedSha: newSha
   })
   initialRawContent.value = rawContent.value
 })
@@ -127,7 +127,7 @@ watch(mode, async (newMode) => {
     :class="{
       [className]: true,
       overlay: displayNoteOverlay,
-      [`note-${sha}`]: true,
+      [`note-${sha}`]: true
     }"
   >
     <a
@@ -177,7 +177,7 @@ watch(mode, async (newMode) => {
         v-if="false"
         :to="{
           name: 'ShareNotes',
-          params: { user: user, repo: repo, note: sha },
+          params: { user: user, repo: repo, note: sha }
         }"
         class="action"
       >

src/components/ThemeSwap.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref } from 'vue'
 
-const isDark = ref(JSON.parse(localStorage.getItem("is-dark") ?? "false"))
+const isDark = ref(JSON.parse(localStorage.getItem('is-dark') ?? 'false'))
 const toggle = (isChecked: boolean) => {
-  localStorage.setItem("is-dark", isChecked ? "true" : "false")
+  localStorage.setItem('is-dark', isChecked ? 'true' : 'false')
 }
-const darkMode = import.meta.env.VITE_DARK_MODE
+
+const darkMode = 'forest'
 </script>
 
 <template>

src/hooks/useNoteOverlay.hook.ts

@@ -13,11 +13,15 @@ export const useNoteOverlay = (
   const { x, y, isMobile } = useOverlay()
   const noteHeight = ref(0)
 
+  // TODO: it seems to have a wrong offset,
+  // visible when there are a lot of notes.
   const displayNoteOverlay = computed(() => {
+    const valueIndex = toValue(index)
+
     if (isMobile.value) {
-      return y.value > toValue(index) * noteHeight.value
+      return y.value > valueIndex * noteHeight.value
     } else {
-      return x.value > toValue(index) * NOTE_WIDTH
+      return x.value > valueIndex * NOTE_WIDTH
     }
   })
 

src/styles/app.css

@@ -12,15 +12,14 @@
   --light-link: lighten(#445fb9, 45%);
   --background-color: #ffffff;
   --note-width: 620px;
-  --light-mode: garden;
-  --dark-mode: sunset;
 }
 
 @plugin "@tailwindcss/typography";
+
 @plugin 'daisyui' {
   themes:
-    garden --default,
-    sunset --prefersdark;
+    caramellatte --default,
+    forest --prefersdark;
 }
 
 @config '../../tailwind.config.js';
@@ -34,6 +33,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
   *,
   ::after,
   ::before,
@@ -42,6 +42,7 @@
     border-color: var(--color-gray-200, currentColor);
   }
 }
+
 html {
   overflow-y: auto;
   overflow-x: auto;
@@ -54,6 +55,7 @@ body {
 }
 
 @media screen and (min-width: 769px) {
+
   html,
   body {
     overflow-y: hidden;
@@ -110,6 +112,7 @@ a {
 }
 
 @media print {
+
   html,
   body {
     overflow-y: auto;
@@ -132,9 +135,17 @@ pre {
   background-color: #ecf0f1;
   border-radius: 1rem;
   margin: 1rem 0;
+  color: var(--color-info-content);
+  background-color: var(--color-info);
+}
+
+.markdown-alert-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 iframe {
   border-radius: 1rem;
   height: 400px;
-}
+}