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

2025-03-01 22:36:31 +01:00
parent 6bbf2945c2 6c62f6afa0
commit 6ce9f62870
17 changed files with 478 additions and 636 deletions
--- a/src/components/FluxNote.vue
+++ b/src/components/FluxNote.vue
@@ -6,22 +6,22 @@ import {
  onMounted,
  onUnmounted,
  toRefs,
-  watch
-} from 'vue'
+  watch,
+} from "vue"

-import LiteLoading from '@/components/LiteLoading.vue'
-import StackedNote from '@/components/StackedNote.vue'
-import { useLinks } from '@/hooks/useLinks.hook'
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { useNoteView } from '@/hooks/useNoteView.hook'
-import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
-import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
-import CacheAllNotes from '@/modules/note/components/CacheAllNote.vue'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
+import LiteLoading from "@/components/LiteLoading.vue"
+import StackedNote from "@/components/StackedNote.vue"
+import { useLinks } from "@/hooks/useLinks.hook"
+import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { useNoteView } from "@/hooks/useNoteView.hook"
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
+import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
+import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+import { useUserSettings } from "@/modules/user/hooks/useUserSettings.hook"

 const HeaderNote = defineAsyncComponent(
-  () => import('@/components/HeaderNote.vue')
+  () => import("@/components/HeaderNote.vue"),
 )

 const props = withDefaults(
@@ -37,8 +37,8 @@ const props = withDefaults(
    content: null,
    parseContent: true,
    withContent: true,
-    withHeader: true
-  }
+    withHeader: true,
+  },
 )

 const user = computed(() => props.user)
@@ -49,17 +49,17 @@ const store = useUserRepoStore()
 useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
 const { toHTML } = useMarkdown(repo)
-const { listenToClick } = useLinks('note-display')
+const { listenToClick } = useLinks("note-display")
 const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()

-const { titles } = useNoteView('note-container')
+const { titles } = useNoteView("note-container")

 const renderedContent = computed(() =>
  props.content !== null
    ? props.parseContent
      ? toHTML(props.content)
      : props.content
-    : store.readme
+    : store.readme,
 )

 const hasContent = computed(() => !!renderedContent.value)
@@ -71,7 +71,7 @@ watch(
    await nextTick()
    listenToClick()
  },
-  { immediate: true }
+  { immediate: true },
 )

 watch(
@@ -79,7 +79,7 @@ watch(
  () => {
    store.setUserRepo(props.user, props.repo)
  },
-  { immediate: true }
+  { immediate: true },
 )

 onMounted(() => visitRepo())
@@ -147,23 +147,23 @@ $header-height: 40px;
    h5,
    h6,
    strong {
-      color: var(--fallback-bc, oklch(var(--bc) / 1));
+      color: var(--color-base-content);
    }

    table {
-      color: var(--fallback-bc, oklch(var(--bc) / 1));
-      background-color: var(--fallback-b1, oklch(var(--b1) / 1));
+      color: var(--color-base-content);
+      background-color: var(--color-base-100);

      thead {
        th {
-          color: var(--fallback-bc, oklch(var(--bc) / 1));
+          color: var(--color-base-content);
        }
      }
    }

    blockquote {
-      background-color: var(--fallback-b1, oklch(var(--b1) / 1));
-      color: var(--fallback-bc, oklch(var(--bc) / 1));
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
    }
  }

@@ -233,7 +233,7 @@ $header-height: 40px;
      font-size: 0.8em;

      a {
-        color: var(--fallback-bc, oklch(var(--bc) / 1));
+        color: var(--color-base-content);
        display: block;
        text-align: center;
      }
--- a/src/components/HeaderNote.vue
+++ b/src/components/HeaderNote.vue
@@ -98,7 +98,7 @@
 </template>

 <script lang="ts" setup>
-import ThemeSwap from '@/components/ThemeSwap.vue'
+import ThemeSwap from "@/components/ThemeSwap.vue"

 defineProps<{ user: string; repo: string }>()
 </script>
--- a/src/components/LinkedNotes.vue
+++ b/src/components/LinkedNotes.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from "vue"

-import { useBacklinks } from '@/hooks/useBacklinks.hook'
-import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
+import { useBacklinks } from "@/hooks/useBacklinks.hook"
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"

 const props = defineProps<{
  sha: string
@@ -35,8 +35,8 @@ const emitNote = (sha: string) => {
 <style scoped lang="scss">
 .linked-notes {
  padding: 1rem;
-  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
-  color: var(--fallback-bc, oklch(var(--bc) / 1));
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);

  .subtitle {
    font-style: italic;
--- a/src/components/NewVersion.vue
+++ b/src/components/NewVersion.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useRegisterSW } from 'virtual:pwa-register/vue'
-import { ref } from 'vue'
+import { useRegisterSW } from "virtual:pwa-register/vue"
+import { ref } from "vue"

-import LiteLoading from '@/components/LiteLoading.vue'
+import LiteLoading from "@/components/LiteLoading.vue"

 const devMode = ref(false) // import.meta.env.DEV
 const isLoading = ref(false)
@@ -57,8 +57,8 @@ const reload = () => {
  color: var(--primary-color);
  border: var(--primary-color) 2px solid;
  border-radius: 4px;
-  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
-  color: var(--fallback-bc, oklch(var(--bc) / 1));
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
 }

 .buttons {
--- a/src/components/StackedNote.vue
+++ b/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"
      >
@@ -243,8 +243,8 @@ $border-color: rgba(18, 19, 58, 0.2);

 .stacked-note {
  padding: 0 1.5rem 1rem;
-  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
-  color: var(--fallback-bc, oklch(var(--bc) / 1));
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);

  &.overlay {
    box-shadow: -3px 0 0.4em $border-color;
@@ -262,7 +262,7 @@ $border-color: rgba(18, 19, 58, 0.2);
 }

 a.title-stacked-note-link {
-  color: var(--fallback-bc, oklch(var(--bc) / 1));
+  color: var(--color-base-content);
  display: block;
  text-decoration: none;
  position: sticky;
@@ -274,8 +274,8 @@ a.title-stacked-note-link {
 }

 .title-stacked-note {
-  background-color: var(--fallback-b1, oklch(var(--b1) / 1));
-  color: var(--fallback-bc, oklch(var(--bc) / 1));
+  background-color: var(--color-base-100);
+  color: var(--color-base-content);
  font-size: 0.8em;
  overflow: visible;

--- a/src/components/ThemeSwap.vue
+++ b/src/components/ThemeSwap.vue
@@ -1,9 +1,9 @@
 <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
 </script>
@@ -14,7 +14,7 @@ const darkMode = import.meta.env.VITE_DARK_MODE
      <input
        type="checkbox"
        :value="darkMode"
-        class="toggle theme-controller bg-base-content col-span-2 col-start-1 row-start-1"
+        class="toggle theme-controller col-span-2 col-start-1 row-start-1"
        :checked="isDark"
        @click="
          (e) => {
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,18 +1,18 @@
-import 'notyf/notyf.min.css'
-import './styles/app.css'
+import "notyf/notyf.min.css"
+import "./styles/app.css"

-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
+import { createPinia } from "pinia"
+import { createApp } from "vue"
+import { createI18n } from "vue-i18n"

-import { messages } from '@/locales/message'
-import { router } from '@/router/router'
+import { messages } from "@/locales/message"
+import { router } from "@/router/router"

-import App from './App.vue'
+import App from "./App.vue"

 const i18n = createI18n({
-  locale: 'en',
-  messages
+  locale: "en",
+  messages,
 })

-createApp(App).use(router).use(i18n).use(createPinia()).mount('#app')
+createApp(App).use(router).use(i18n).use(createPinia()).mount("#app")
--- a/src/modules/card/components/FlipCard.vue
+++ b/src/modules/card/components/FlipCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref } from "vue"

-import { Card } from '../models/Card'
+import { Card } from "../models/Card"

 defineProps<{ card: Card }>()
 const emit = defineEmits<{ success: []; fail: []; needsReview: [] }>()
@@ -11,9 +11,9 @@ const flip = () => {
  flipped.value = !flipped.value
 }

-const success = () => emit('success')
-const fail = () => emit('fail')
-const needsReview = () => emit('needsReview')
+const success = () => emit("success")
+const fail = () => emit("fail")
+const needsReview = () => emit("needsReview")
 </script>

 <template>
@@ -79,7 +79,7 @@ $border-radius: 0.5rem;
  .flip-card-content {
    width: 100%;
    background-color: #ede4e0;
-    color: var(--fallback-bc, oklch(var(--bc) / 1));
+    color: var(--color-base-content);
    padding: 1rem;
    border-radius: $border-radius;
  }
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -1,9 +1,7 @@
@charset "utf-8";
-@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");
+@import "tailwindcss";

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url("https://fonts.googleapis.com/css2?display=swap&family=Courier+Prime");

 :root {
  --primary-color: #2c3a47;
@@ -14,8 +12,36 @@
  --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;
+}
+
+@config '../../tailwind.config.js';
+
+/**
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 html {
  overflow-y: auto;
  overflow-x: auto;
@@ -28,7 +54,6 @@ body {
 }

@media screen and (min-width: 769px) {
-
  html,
  body {
    overflow-y: hidden;
@@ -75,10 +100,6 @@ a {
  font-size: var(--font-size);
 }

-.btn {
-  font-size: 1rem;
-}
-
 .table,
 .table :where(thead, tfoot) {
  font-size: 1em;
@@ -89,7 +110,6 @@ a {
 }

@media print {
-
  html,
  body {
    overflow-y: auto;
@@ -117,4 +137,4 @@ pre {
 iframe {
  border-radius: 1rem;
  height: 400px;
-}
+}