From 3e417ca2718165237ecc760889c6e2fe9022df8b Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Mon, 19 Jan 2026 00:36:29 +0100 Subject: [PATCH] fix: Google Font feat: add a todo view --- src/components/FluxNote.vue | 4 - src/components/HeaderNote.vue | 22 +++++ src/hooks/useFile.hook.ts | 39 +++++---- src/modules/note/hooks/useFolderNotes.ts | 19 +++-- src/modules/note/hooks/useNotes.ts | 9 +-- .../user/hooks/useUserSettings.hook.ts | 2 +- src/router/router.ts | 80 ++++++++++--------- src/utils/downloadGoogleFont.ts | 7 +- src/views/DraftNotes.vue | 42 ++++------ src/views/TodoNotes.vue | 48 +++++++++++ 10 files changed, 162 insertions(+), 110 deletions(-) create mode 100644 src/views/TodoNotes.vue diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index 4c596ae..877abd2 100644 --- a/src/components/FluxNote.vue +++ b/src/components/FluxNote.vue @@ -9,7 +9,6 @@ import { 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" @@ -19,7 +18,6 @@ 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 { useRoute } from "vue-router" import SkeletonLoader from "@/components/SkeletonLoader.vue" const HeaderNote = defineAsyncComponent( @@ -70,8 +68,6 @@ const hasContent = computed(() => !!renderedContent.value) watch( renderedContent, async () => { - console.log(renderedContent.value) - await nextTick() listenToClick() }, diff --git a/src/components/HeaderNote.vue b/src/components/HeaderNote.vue index be3f5ba..82112e8 100644 --- a/src/components/HeaderNote.vue +++ b/src/components/HeaderNote.vue @@ -107,6 +107,28 @@ defineProps<{ user: string; repo: string }>() + + + + + + + + + + + | string, retrieveContent = true) => { const store = useUserRepoStore() + const shaValue = toValue(sha) const path = computed(() => { - const file = store.files.find((file) => file.sha === toValue(sha)) + const file = store.files.find((file) => file.sha === shaValue) return file?.path }) const { render, renderFromUTF8, - getRawContent: getRawContentFromFile - } = useMarkdown(toValue(sha)) + getRawContent: getRawContentFromFile, + } = useMarkdown(shaValue) const { getCachedNote, saveCacheNote } = prepareNoteCache( - toValue(sha), - toValue(path) + shaValue, + toValue(path), ) const fromCache = ref(false) - const rawContent = ref('') + const rawContent = ref("") const content = computed(() => - rawContent.value ? renderFromUTF8(rawContent.value) : '' + rawContent.value ? renderFromUTF8(rawContent.value) : "", ) const getEditedSha = async () => { @@ -46,26 +47,22 @@ export const useFile = (sha: Ref | string, retrieveContent = true) => { fromCache.value = !!cachedNote if (cachedNote) { - if (from === 'path') { - queryFileContent(store.user, store.repo, toValue(sha)).then( + if (from === "path") { + queryFileContent(store.user, store.repo, shaValue).then( (fileContent) => { if (!fileContent) { return } saveCacheNote(fileContent) rawContent.value = getRawContentFromFile(fileContent) - } + }, ) } return cachedNote.content } - const fileContent = await queryFileContent( - store.user, - store.repo, - toValue(sha) - ) + const fileContent = await queryFileContent(store.user, store.repo, shaValue) if (!fileContent) { return null @@ -114,6 +111,6 @@ export const useFile = (sha: Ref | string, retrieveContent = true) => { getCachedFileContent, getEditedSha, fromCache, - saveCacheNote + saveCacheNote, } } diff --git a/src/modules/note/hooks/useFolderNotes.ts b/src/modules/note/hooks/useFolderNotes.ts index 323d580..81b4da5 100644 --- a/src/modules/note/hooks/useFolderNotes.ts +++ b/src/modules/note/hooks/useFolderNotes.ts @@ -1,6 +1,5 @@ -import { computed } from 'vue' - -import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' +import { computed } from "vue" +import { useUserRepoStore } from "@/modules/repo/store/userRepo.store" export const useFolderNotes = (folders: string[]) => { const store = useUserRepoStore() @@ -9,25 +8,25 @@ export const useFolderNotes = (folders: string[]) => { store.files.filter( (file) => folders.some((folder) => file.path?.startsWith(folder)) && - file.path?.endsWith('.md') - ) + file.path?.endsWith(".md"), + ), ) const content = computed(() => filteredNotes.value?.length > 0 ? filteredNotes.value .map((note) => { - const firstFolder = note.path?.split('/').shift() + const firstFolder = note.path?.split("/").shift() - return `- [${note.path?.replace(`${firstFolder}/`, '')}](${ + return `- [${note.path?.replace(`${firstFolder}/`, "")}](${ note.path })` }) - .join('\n') - : '' + .join("\n") + : "", ) return { - content + content, } } diff --git a/src/modules/note/hooks/useNotes.ts b/src/modules/note/hooks/useNotes.ts index 77e1be1..5200a12 100644 --- a/src/modules/note/hooks/useNotes.ts +++ b/src/modules/note/hooks/useNotes.ts @@ -1,15 +1,14 @@ -import { computed } from 'vue' - -import { useUserRepoStore } from '@/modules/repo/store/userRepo.store' +import { computed } from "vue" +import { useUserRepoStore } from "@/modules/repo/store/userRepo.store" export const useNotes = () => { const store = useUserRepoStore() const notes = computed(() => - store.files.filter((file) => file.path?.endsWith('.md')) + store.files.filter((file) => file.path?.endsWith(".md")), ) return { - notes + notes, } } diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts index de1473b..a3a7f50 100644 --- a/src/modules/user/hooks/useUserSettings.hook.ts +++ b/src/modules/user/hooks/useUserSettings.hook.ts @@ -3,7 +3,7 @@ import { watchEffect } from "vue" import { useUserRepoStore } from "@/modules/repo/store/userRepo.store" import { downloadGoogleFont } from "@/utils/downloadGoogleFont" -const DEFAULT_FONT_POLICY = "Courier Prime, monospace" +const DEFAULT_FONT_POLICY = "Courier Prime,monospace" const DEFAULT_FONT_SIZE = "16px" export const useUserSettings = () => { diff --git a/src/router/router.ts b/src/router/router.ts index 3dee67f..a19256e 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -1,73 +1,79 @@ -import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' +import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router" -import Home from '@/views/HomeApp.vue' +import Home from "@/views/HomeApp.vue" const routes: Array = [ { - path: '/repo-list', - name: 'RepoList', - component: () => import('@/views/RepoList.vue') + path: "/repo-list", + name: "RepoList", + component: () => import("@/views/RepoList.vue"), }, { - path: '/:user/:repo', - name: 'FluxNoteView', + path: "/:user/:repo", + name: "FluxNoteView", props: true, - component: () => import('@/views/FluxNoteView.vue') + component: () => import("@/views/FluxNoteView.vue"), }, { - path: '/:user/:repo/share/:note', - name: 'ShareNotes', + path: "/:user/:repo/share/:note", + name: "ShareNotes", props: true, - component: () => import('@/views/ShareNotes.vue') + component: () => import("@/views/ShareNotes.vue"), }, { - path: '/:user/:repo/inbox', - name: 'FleetingNotes', + path: "/:user/:repo/inbox", + name: "FleetingNotes", props: true, - component: () => import('@/views/FleetingNotes.vue') + component: () => import("@/views/FleetingNotes.vue"), }, { - path: '/:user/:repo/draft', - name: 'DraftNotes', + path: "/:user/:repo/draft", + name: "DraftNotes", props: true, - component: () => import('@/views/DraftNotes.vue') + component: () => import("@/views/DraftNotes.vue"), }, { - path: '/:user/:repo/history', - name: 'HistoricNotes', + path: "/:user/:repo/todo", + name: "TodoNotes", props: true, - component: () => import('@/views/HistoricNotes.vue') + component: () => import("@/views/TodoNotes.vue"), }, { - path: '/:user/:repo/spaced-repetition', - name: 'SpacedRepetitionCard', + path: "/:user/:repo/history", + name: "HistoricNotes", props: true, - component: () => import('@/views/SpacedRepetitionCard.vue') + component: () => import("@/views/HistoricNotes.vue"), }, { - path: '/:user/:repo/need-review-cards', - name: 'NeedReviewCards', + path: "/:user/:repo/spaced-repetition", + name: "SpacedRepetitionCard", props: true, - component: () => import('@/views/NeedReviewCards.vue') + component: () => import("@/views/SpacedRepetitionCard.vue"), }, { - path: '/about', - name: 'About', - component: () => import('@/views/AboutApp.vue') + path: "/:user/:repo/need-review-cards", + name: "NeedReviewCards", + props: true, + component: () => import("@/views/NeedReviewCards.vue"), }, { - path: '/', - name: 'Home', - component: Home + path: "/about", + name: "About", + component: () => import("@/views/AboutApp.vue"), }, { - path: '/:catchAll(.*)', - name: 'SpaceCowboy', - component: () => import('@/views/SpaceCowboy.vue') - } + path: "/", + name: "Home", + component: Home, + }, + { + path: "/:catchAll(.*)", + name: "SpaceCowboy", + component: () => import("@/views/SpaceCowboy.vue"), + }, ] export const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes + routes, }) diff --git a/src/utils/downloadGoogleFont.ts b/src/utils/downloadGoogleFont.ts index 2d472dc..519f0ea 100644 --- a/src/utils/downloadGoogleFont.ts +++ b/src/utils/downloadGoogleFont.ts @@ -1,10 +1,9 @@ import FontFaceObserver from "fontfaceobserver" const assembleFontLink = (font: string) => { - return `https://fonts.googleapis.com/css2?display=swap&family=${font.replaceAll( - " ", - "+", - )}` + return `https://fonts.googleapis.com/css2?display=swap&family=${font + .replaceAll(",", "&family=") + .replaceAll(" ", "+")}` } export const downloadGoogleFont = async (font: string): Promise => { diff --git a/src/views/DraftNotes.vue b/src/views/DraftNotes.vue index c9817e1..0d75c55 100644 --- a/src/views/DraftNotes.vue +++ b/src/views/DraftNotes.vue @@ -1,3 +1,17 @@ + +
@@ -6,34 +20,6 @@
- -