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/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)
  })
 }