feat: add fontFamilies array

2025-07-06 11:07:09 +02:00
parent 5341e6dcf0
commit b2250b2b95
8 changed files with 169 additions and 126 deletions
--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { useUserRepoStore } from "../modules/repo/store/userRepo.store"
+
+const store = useUserRepoStore()
+
+const fontFamilies = computed(() => store.userSettings?.fontFamilies ?? [])
+</script>
+
+<template>
+  <select
+    v-if="fontFamilies.length > 0"
+    class="select select-sm"
+    :value="store.userSettings?.chosenFontFamily"
+    @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
+  >
+    <option v-for="font in fontFamilies" :key="font" :value="font">
+      {{ font }}
+    </option>
+  </select>
+</template>
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -1,8 +1,10 @@
-import { DataType } from '@/data/DataType.enum'
-import { Model } from '@/data/models/Model'
+import { DataType } from "@/data/DataType.enum"
+import { Model } from "@/data/models/Model"

 export interface UserSettings extends Model<DataType.UserSettings> {
+  fontFamilies?: string[]
  fontFamily?: string
+  chosenFontFamily?: string
  fontSize?: string
  backlink?: boolean
 }
--- a/src/modules/repo/services/repo.ts
+++ b/src/modules/repo/services/repo.ts
@@ -1,21 +1,21 @@
-import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
-import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
-import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
-import { getOctokit } from '@/modules/repo/services/octo'
+import { useMarkdown } from "@/hooks/useMarkdown.hook"
+import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
+import { RepoFile } from "@/modules/repo/interfaces/RepoFile"
+import { UserSettings } from "@/modules/repo/interfaces/UserSettings"
+import { getOctokit } from "@/modules/repo/services/octo"

 export const getFiles = async (
  owner: string,
-  repo: string
+  repo: string,
 ): Promise<RepoFile[]> => {
  if (!owner || !repo) {
    return []
  }
  const octokit = await getOctokit()

-  const commits = await octokit.request('GET /repos/{owner}/{repo}/commits', {
+  const commits = await octokit.request("GET /repos/{owner}/{repo}/commits", {
    owner,
-    repo
+    repo,
  })

  const lastCommit = commits.data.shift()
@@ -25,16 +25,16 @@ export const getFiles = async (
  }

  const treeResponse = await octokit.request(
-    'GET /repos/{owner}/{repo}/git/trees/{tree_sha}',
+    "GET /repos/{owner}/{repo}/git/trees/{tree_sha}",
    {
      owner,
      repo,
      tree_sha: lastCommit.commit.tree.sha,
-      recursive: 'true'
-    }
+      recursive: "true",
+    },
  )

-  return treeResponse?.data.tree.filter((t) => t.type === 'blob') ?? []
+  return treeResponse?.data.tree.filter((t) => t.type === "blob") ?? []
 }

 export const getCachedMainReadme = async (owner: string, repo: string) => {
@@ -60,7 +60,7 @@ export const getMainReadme = async (owner: string, repo: string) => {

  const { render } = useMarkdown()
  const { getCachedNote, saveCacheNote } = prepareNoteCache(
-    `${owner}-${repo}-README`
+    `${owner}-${repo}-README`,
  )

  try {
@@ -68,7 +68,7 @@ export const getMainReadme = async (owner: string, repo: string) => {

    const README = await octokit.repos.getReadme({
      owner,
-      repo
+      repo,
    })

    if (README) {
@@ -90,9 +90,9 @@ export const getMainReadme = async (owner: string, repo: string) => {
 export const getUserSettingsContent = async (
  user: string,
  repo: string,
-  files: RepoFile[]
-): Promise<UserSettings | null> => {
-  const configFile = files.find((file) => file.path === '.litenote.json')
+  files: RepoFile[],
+): Promise<Omit<UserSettings, "chosenFontFamily"> | null> => {
+  const configFile = files.find((file) => file.path === ".litenote.json")

  if (!configFile?.sha) {
    return null
@@ -110,7 +110,7 @@ export const getUserSettingsContent = async (
 export const queryFileContent = async (
  user: string,
  repo: string,
-  sha: string
+  sha: string,
 ) => {
  const octokit = await getOctokit()

@@ -119,12 +119,12 @@ export const queryFileContent = async (
  }

  const file = await octokit.request(
-    'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
+    "GET /repos/{owner}/{repo}/git/blobs/{file_sha}",
    {
      owner: user,
      repo: repo,
-      file_sha: sha
-    }
+      file_sha: sha,
+    },
  )

  return file?.data.content ?? null
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -1,17 +1,17 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia"

-import { data } from '@/data/data'
-import { DataType } from '@/data/DataType.enum'
-import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
-import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
-import { SavedRepo } from '@/modules/repo/models/SavedRepo'
+import { data } from "@/data/data"
+import { DataType } from "@/data/DataType.enum"
+import { RepoFile } from "@/modules/repo/interfaces/RepoFile"
+import { UserSettings } from "@/modules/repo/interfaces/UserSettings"
+import { SavedRepo } from "@/modules/repo/models/SavedRepo"
 import {
  getCachedMainReadme,
  getFiles,
  getMainReadme,
-  getUserSettingsContent
-} from '@/modules/repo/services/repo'
-import { refreshToken } from '@/modules/user/service/signIn'
+  getUserSettingsContent,
+} from "@/modules/repo/services/repo"
+import { refreshToken } from "@/modules/user/service/signIn"

 interface State {
  user: string
@@ -22,15 +22,14 @@ interface State {
  needToLogin: boolean
 }

-export const useUserRepoStore = defineStore({
-  id: 'USER_REPO_STATE',
+export const useUserRepoStore = defineStore("USER_REPO_STATE", {
  state: (): State => ({
-    user: '',
-    repo: '',
+    user: "",
+    repo: "",
    files: [],
    readme: undefined,
    userSettings: undefined,
-    needToLogin: false
+    needToLogin: false,
  }),
  actions: {
    async setUserRepo(user: string, repo: string) {
@@ -39,7 +38,7 @@ export const useUserRepoStore = defineStore({

      const savedRepoId = data.generateId(DataType.SavedRepo, `${user}-${repo}`)
      const cachedSavedRepo = await data.get<DataType.SavedRepo, SavedRepo>(
-        savedRepoId
+        savedRepoId,
      )

      if (cachedSavedRepo) {
@@ -49,7 +48,7 @@ export const useUserRepoStore = defineStore({
      try {
        await refreshToken()
      } catch (error) {
-        console.warn('impossible to refresh token', error)
+        console.warn("impossible to refresh token", error)
      }

      const userSettingsId = `UserSetting-${user}-${repo}`
@@ -69,20 +68,30 @@ export const useUserRepoStore = defineStore({
            $type: DataType.SavedRepo,
            repo,
            user,
-            files
+            files,
          })
          this.files = files
          return getUserSettingsContent(user, repo, files)
        })
        .then((userSettings) => {
+          const chosenFontFamily = userSettings?.fontFamilies?.find(
+            (font) => font === this.userSettings?.chosenFontFamily,
+          )
+            ? this.userSettings?.chosenFontFamily
+            : userSettings?.fontFamily
          this.userSettings = userSettings

-          if (userSettings) {
-            data.update<DataType.UserSettings, UserSettings>({
-              ...userSettings,
-              _id: userSettingsId
-            })
+          if (!this.userSettings) {
+            return
          }
+
+          this.userSettings.chosenFontFamily =
+            chosenFontFamily ?? this.userSettings.fontFamily
+
+          data.update<DataType.UserSettings, UserSettings>({
+            ...this.userSettings,
+            _id: userSettingsId,
+          })
        })

      getCachedMainReadme(user, repo).then(async (cachedReadme) => {
@@ -101,11 +110,11 @@ export const useUserRepoStore = defineStore({
        return
      }

-      console.log('add file')
+      console.log("add file")

      const savedRepoId = data.generateId(
        DataType.SavedRepo,
-        `${this.user}-${this.repo}`
+        `${this.user}-${this.repo}`,
      )
      const newFiles = [...this.files.filter((f) => f.sha !== file.sha), file]
      data.update<DataType.SavedRepo, SavedRepo>({
@@ -113,19 +122,31 @@ export const useUserRepoStore = defineStore({
        $type: DataType.SavedRepo,
        repo: this.repo,
        user: this.user,
-        files: newFiles
+        files: newFiles,
      })
      this.files = newFiles
    },
    resetUserRepo() {
-      this.user = ''
-      this.repo = ''
+      this.user = ""
+      this.repo = ""
      this.resetFiles()
    },
    resetFiles() {
      this.files = []
      this.readme = null
      this.userSettings = undefined
-    }
-  }
+    },
+    setFontFamily(fontFamily: string) {
+      if (!this.userSettings) {
+        return
+      }
+      this.userSettings.chosenFontFamily = fontFamily
+
+      const userSettingsId = `UserSetting-${this.user}-${this.repo}`
+      data.update<DataType.UserSettings, UserSettings>({
+        ...this.userSettings,
+        _id: userSettingsId,
+      })
+    },
+  },
 })
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -1,10 +1,10 @@
-import { watchEffect } from 'vue'
+import { watchEffect } from "vue"

-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { downloadGoogleFont } from '@/utils/downloadGoogleFont'
+import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
+import { downloadGoogleFont } from "@/utils/downloadGoogleFont"

-const DEFAULT_FONT_POLICY = 'Courier Prime, monospace'
-const DEFAULT_FONT_SIZE = '16px'
+const DEFAULT_FONT_POLICY = "Courier Prime, monospace"
+const DEFAULT_FONT_SIZE = "16px"

 export const useUserSettings = () => {
  const store = useUserRepoStore()
@@ -16,10 +16,10 @@ export const useUserSettings = () => {

    const root = document.documentElement

-    const fontFamily = store.userSettings?.fontFamily
+    const fontFamily = store.userSettings?.chosenFontFamily
    const fontSize = store.userSettings?.fontSize

    downloadGoogleFont(fontFamily || DEFAULT_FONT_POLICY)
-    root.style.setProperty('--font-size', fontSize || DEFAULT_FONT_SIZE)
+    root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
  })
 }
--- a/src/utils/downloadGoogleFont.ts
+++ b/src/utils/downloadGoogleFont.ts
@@ -1,4 +1,11 @@
-import FontFaceObserver from 'fontfaceobserver'
+import FontFaceObserver from "fontfaceobserver"
+
+const assembleFontLink = (font: string) => {
+  return `https://fonts.googleapis.com/css2?display=swap&family=${font.replaceAll(
+    " ",
+    "+",
+  )}`
+}

 export const downloadGoogleFont = async (font: string): Promise<void> => {
  const href = assembleFontLink(font)
@@ -7,21 +14,14 @@ export const downloadGoogleFont = async (font: string): Promise<void> => {
  const existingLink = document.querySelector(`link[href="${href}"]`)

  if (!existingLink) {
-    const link = document.createElement('link')
+    const link = document.createElement("link")
    link.href = href
-    link.rel = 'stylesheet'
+    link.rel = "stylesheet"

    document.head.appendChild(link)
  }

  await new FontFaceObserver(font).load()

-  document.documentElement.style.setProperty('--font-family', font)
-}
-
-const assembleFontLink = (font: string) => {
-  return `https://fonts.googleapis.com/css2?display=swap&family=${font.replaceAll(
-    ' ',
-    '+'
-  )}`
+  document.documentElement.style.setProperty("--font-family", font)
 }
--- a/src/views/FleetingNotes.vue
+++ b/src/views/FleetingNotes.vue
@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import { format } from 'date-fns'
-import { computed, ref, watch } from 'vue'
+import { format } from "date-fns"
+import { computed, ref, watch } from "vue"
+import FluxNote from "@/components/FluxNote.vue"
+import { useEditionMode } from "@/hooks/useEditionMode"
+import { useGitHubContent } from "@/hooks/useGitHubContent.hook"
+import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
+import { prepareNoteCache } from "@/modules/note/cache/prepareNoteCache"
+import EditNote from "@/modules/note/components/EditNote.vue"
+import { useFolderNotes } from "@/modules/note/hooks/useFolderNotes"
+import { encodeUTF8ToBase64 } from "@/utils/decodeBase64ToUTF8"
+import FontChange from "@/components/FontChange.vue"

-import FluxNote from '@/components/FluxNote.vue'
-import { useEditionMode } from '@/hooks/useEditionMode'
-import { useGitHubContent } from '@/hooks/useGitHubContent.hook'
-import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
-import { prepareNoteCache } from '@/modules/note/cache/prepareNoteCache'
-import EditNote from '@/modules/note/components/EditNote.vue'
-import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-import { encodeUTF8ToBase64 } from '@/utils/decodeBase64ToUTF8'
-
-const FLEETING_NOTES_FOLDER = ['inbox', '_inbox']
+const FLEETING_NOTES_FOLDER = ["inbox", "_inbox"]

 const props = defineProps<{ user: string; repo: string }>()
 const user = computed(() => props.user)
@@ -20,7 +20,7 @@ const repo = computed(() => props.repo)
 const { addStackedNote } = useRouteQueryStackedNotes()
 const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)

-const today = format(new Date(), 'yyyy-MM-dd')
+const today = format(new Date(), "yyyy-MM-dd")
 const newContentPath = `_inbox/${today}.md`
 const initialContent = ``
 const newContent = ref(initialContent)
@@ -28,20 +28,20 @@ const { mode, toggleMode } = useEditionMode()

 const { createFile } = useGitHubContent({
  repo: repo.value,
-  user: user.value
+  user: user.value,
 })

 const hasTodayNote = computed(() => content.value.includes(today))

 watch(mode, async (newMode) => {
-  if (newMode === 'read' && newContent.value.trim() !== initialContent) {
+  if (newMode === "read" && newContent.value.trim() !== initialContent) {
    const content = `# ${new Date().toLocaleDateString()}\n\n${
      newContent.value
    }`

    const newSha = await createFile({
      content,
-      path: newContentPath
+      path: newContentPath,
    })

    if (!newSha) {
@@ -52,10 +52,10 @@ watch(mode, async (newMode) => {
    const { saveCacheNote } = prepareNoteCache(newSha, newContentPath)
    await saveCacheNote(encodeUTF8ToBase64(content), {
      editedSha: newSha,
-      path: newContentPath
+      path: newContentPath,
    })

-    addStackedNote('', newSha)
+    addStackedNote("", newSha)
  }
 })
 </script>
@@ -69,11 +69,14 @@ watch(mode, async (newMode) => {
      :content="content"
    >
      <h3 class="subtitle is-3">Inbox</h3>
-      <div v-if="!hasTodayNote" class="columns">
+      <div v-if="!hasTodayNote">
        <div class="column">
-          <button class="btn btn-primary" @click="toggleMode">
+          <button class="btn btn-secondary" @click="toggleMode">
            new fleeting note
          </button>
+          <div class="column">
+            <font-change />
+          </div>
        </div>
      </div>
      <div v-if="mode === 'edit'">