Feat/upgrade daisy UI (#12)

* prune: remove daisyui config

* upgrade daisyui and implement new themes

* Update .env checksum
This commit is contained in:
Julien Calixte
2025-03-01 21:27:35 +01:00
committed by GitHub
parent 8a637bf4c1
commit 6c62f6afa0
17 changed files with 478 additions and 636 deletions

View File

@@ -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;
}

View File

@@ -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>

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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) => {