Feat/upgrade daisy UI (#12)

* prune: remove daisyui config * upgrade daisyui and implement new themes * Update .env checksum
2025-03-01 21:27:35 +01:00
parent 8a637bf4c1
commit 6c62f6afa0
17 changed files with 478 additions and 636 deletions
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-VITE_LIGHT_MODE=nord
+VITE_LIGHT_MODE=garden
 VITE_DARK_MODE=sunset
--- a/.env.checksum
+++ b/.env.checksum
@@ -1 +1 @@
-f9b344787f9c20d36a27837d32612d87447737831e824760223ebee16db7ad5c
+84d588441b7e30aa991c53d842cd08cdeb5d97510f6026a0d44a7d3f5df133de
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "semi": false
+}
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" data-theme="garden">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -13,8 +13,14 @@
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/masked-icon.svg" color="#FFFFFF" />
    <meta name="theme-color" content="#2C3A47" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"/>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/4.0.0/github-markdown.min.css"
+    />
  </head>
  <body>
    <noscript>
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "@intlify/unplugin-vue-i18n": "^1.6.0",
    "@octokit/core": "^5.2.0",
    "@octokit/rest": "^20.1.1",
+    "@tailwindcss/postcss": "^4.0.9",
    "@toycode/markdown-it-class": "^1.2.4",
    "@vscode/markdown-it-katex": "^1.1.1",
    "@vueuse/core": "^10.11.1",
@@ -35,6 +36,7 @@
    "notyf": "^3.10.0",
    "pastel-color": "^1.0.3",
    "pinia": "^2.2.6",
+    "postcss": "^8.5.3",
    "pouchdb-adapter-indexeddb": "^9.0.0",
    "pouchdb-browser": "^9.0.0",
    "register-service-worker": "^1.7.2",
@@ -60,7 +62,7 @@
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "autoprefixer": "^10.4.20",
-    "daisyui": "^4.12.22",
+    "daisyui": "^5.0.0",
    "dotenv": "^16.4.7",
    "eslint": "^8.57.1",
    "eslint-config-prettier": "^9.1.0",
@@ -71,7 +73,7 @@
    "husky": "^9.1.7",
    "prettier": "^3.4.1",
    "sass": "^1.81.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.9",
    "typescript": "~5.7.2",
    "vite": "^6.0.0",
    "vite-plugin-pwa": "^0.21.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')]
+  plugins: { "@tailwindcss/postcss": {}, autoprefixer: {} },
 }
--- 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;
-}
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,69 +1,59 @@
 /** @type {import('tailwindcss').Config} */
-const dotenv = require('dotenv')
-
-import typography from '@tailwindcss/typography'
-import daisyui from 'daisyui'
+const dotenv = require("dotenv")

 dotenv.config()

-const LIGHT_MODE = process.env.VITE_LIGHT_MODE
-const DARK_MODE = process.env.VITE_DARK_MODE
-
 const defaultTitleStyles = Array.from(
  { length: 6 },
-  (_, k) => `h${k + 1}`
+  (_, k) => `h${k + 1}`,
 ).reduce(
  (acc, heading) => ({
    ...acc,
    [heading]: {
-      'margin-top': '0',
-      'margin-bottom': '0.5em'
-    }
+      "margin-top": "0",
+      "margin-bottom": "0.5em",
+    },
  }),
-  {}
+  {},
 )

 module.exports = {
-  content: ['./src/**/*.{vue,js,ts}'],
+  content: ["./src/**/*.{vue,js,ts}"],
  theme: {
    extend: {
      typography: () => ({
        DEFAULT: {
          css: {
-            'font-size': '13pt',
-            'font-family': '"Courier Prime", monospace',
+            "font-size": "13pt",
+            "font-family": '"Courier Prime", monospace',
            ...defaultTitleStyles,
            p: {
-              'margin-top': '0.8em',
-              'margin-bottom': '0.8em',
-              'text-align': 'justify'
+              "margin-top": "0.8em",
+              "margin-bottom": "0.8em",
+              "text-align": "justify",
            },
            img: {
-              'margin-top': 0,
-              'margin-bottom': 0,
-              'border-radius': '1rem'
+              "margin-top": 0,
+              "margin-bottom": 0,
+              "border-radius": "1rem",
            },
            a: {
-              'text-decoration': 'none',
-              color: 'oklch(var(--s))'
+              "text-decoration": "none",
+              color: "var(--color-primary)",
            },
-            'a:hover': {
-              'text-decoration': 'underline'
+            "a.btn-primary": {
+              color: "var(--color-secondary-content)",
+            },
+            "a:hover": {
+              "text-decoration": "underline",
            },
            li: {
-              'margin-top': 0,
-              'margin-bottom': 0
-            }
-          }
-        }
-      })
-    }
+              "margin-top": 0,
+              "margin-bottom": 0,
+            },
+          },
+        },
+      }),
+    },
  },
-  plugins: [typography, daisyui],
-  daisyui: {
-    themes: [LIGHT_MODE, DARK_MODE],
-    base: true,
-    styled: true,
-    utils: true
-  }
 }