✨ (user settings) init user settings with .litenote.json

src/components/FluxNote.vue

@@ -47,6 +47,7 @@ import { useNote } from '@/hooks/useNote.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
@@ -66,6 +67,7 @@ export default defineComponent({
   setup(props) {
     const refProps = toRefs(props)
     const store = useUserRepoStore()
+    useUserSettings()
     const { renderString } = useMarkdown()
     const { listenToClick } = useLinks('note-display')
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
@@ -105,6 +107,7 @@ export default defineComponent({
       renderedContent,
       stackedNotes,
       resetStackedNotes,
+      userSettings: computed(() => store.userSettings),
       ...noteProps
     }
   }
@@ -115,6 +118,8 @@ export default defineComponent({
 $header-height: 40px;
 
 .flux-note {
+  font-family: var(--font-family);
+
   display: flex;
   flex: 1;
 

src/hooks/useFile.hook.ts

@@ -1,42 +1,19 @@
 import { ref } from 'vue'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { Octokit } from '@octokit/rest'
 import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { getFileContent } from '@/modules/repo/services/repo'
 
 export const useFile = (sha: string, retrieveContent = true) => {
   const store = useUserRepoStore()
   const { getCachedNote, saveCacheNote } = useNoteCache(sha)
-  const { accessToken } = useGitHubLogin()
   const fromCache = ref(false)
 
-  const octokit = new Octokit({
-    auth: accessToken.value
-  })
-
   const content = ref('')
 
-  const getFileContent = async () => {
-    if (!store.user || !store.repo) {
-      null
-    }
-
-    const file = await octokit.request(
-      'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
-      {
-        owner: store.user,
-        repo: store.repo,
-        file_sha: sha
-      }
-    )
-
-    return file?.data.content ?? null
-  }
-
   const getContent = async () => {
     const { render } = useMarkdown()
-    const contentFile = await getFileContent()
+    const contentFile = await getFileContent(store.user, store.repo, sha)
 
     const cachedNote = await getCachedNote()
 
@@ -60,7 +37,7 @@ export const useFile = (sha: string, retrieveContent = true) => {
 
   return {
     content,
-    getFileContent,
+    getContent,
     fromCache
   }
 }

src/hooks/useImages.hook.ts

@@ -31,9 +31,9 @@ export const useImages = (sha: string) => {
       if (!imageFile?.sha) {
         return
       }
-      const { getFileContent } = useFile(imageFile.sha, false)
+      const { getContent } = useFile(imageFile.sha, false)
 
-      const fileContent = await getFileContent()
+      const fileContent = await getContent()
       image.setAttribute('src', `${SRC_PREFIX} ${fileContent}`)
     }
   })

src/modules/repo/interfaces/UserSettings.ts

@@ -0,0 +1,9 @@
+export interface UserSettings {
+  fontFamily?:
+    | 'Courgette'
+    | 'IBM Plex Serif'
+    | 'Kiwi Maru'
+    | 'Maven Pro'
+    | 'Noto Sans KR'
+    | 'Tajawal'
+}

src/modules/repo/services/repo.ts

@@ -2,6 +2,7 @@ import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNoteCache } from '@/modules/note/hooks/useNoteCache'
 import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
+import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
 import { Octokit } from '@octokit/rest'
 
 export const getFiles = async (
@@ -75,3 +76,49 @@ export const getMainReadme = async (owner: string, repo: string) => {
 
   return null
 }
+
+export const getUserSettingsContent = async (
+  user: string,
+  repo: string,
+  files: RepoFile[]
+): Promise<UserSettings | null> => {
+  const configFile = files.find((file) => file.path === '.litenote.json')
+
+  if (!configFile?.sha) {
+    return null
+  }
+  const content = await getFileContent(user, repo, configFile.sha)
+
+  if (!content) {
+    return null
+  }
+
+  return JSON.parse(atob(content)) as UserSettings
+}
+
+export const getFileContent = async (
+  user: string,
+  repo: string,
+  sha: string
+) => {
+  const { accessToken } = useGitHubLogin()
+
+  const octokit = new Octokit({
+    auth: accessToken.value
+  })
+
+  if (!user || !repo) {
+    null
+  }
+
+  const file = await octokit.request(
+    'GET /repos/{owner}/{repo}/git/blobs/{file_sha}',
+    {
+      owner: user,
+      repo: repo,
+      file_sha: sha
+    }
+  )
+
+  return file?.data.content ?? null
+}

src/modules/repo/store/userRepo.store.ts

@@ -1,5 +1,10 @@
 import { RepoFile } from '@/modules/repo/interfaces/RepoFile'
-import { getFiles, getMainReadme } from '@/modules/repo/services/repo'
+import { UserSettings } from '@/modules/repo/interfaces/UserSettings'
+import {
+  getFiles,
+  getMainReadme,
+  getUserSettingsContent
+} from '@/modules/repo/services/repo'
 import { defineStore } from 'pinia'
 
 interface State {
@@ -7,6 +12,7 @@ interface State {
   repo: string
   files: RepoFile[]
   readme: string | null
+  userSettings: UserSettings | null
 }
 
 export const useUserRepoStore = defineStore({
@@ -15,7 +21,8 @@ export const useUserRepoStore = defineStore({
     user: '',
     repo: '',
     files: [],
-    readme: null
+    readme: null,
+    userSettings: null
   }),
   actions: {
     async setUserRepo(newUser: string, newRepo: string) {
@@ -25,6 +32,7 @@ export const useUserRepoStore = defineStore({
         getMainReadme(newUser, newRepo),
         getFiles(newUser, newRepo)
       ])
+      this.userSettings = await getUserSettingsContent(newUser, newRepo, files)
 
       this.readme = readme
       this.files = files

src/modules/user/hooks/useUserSettings.hook.ts

@@ -0,0 +1,16 @@
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { watchEffect } from 'vue'
+
+export const useUserSettings = () => {
+  const store = useUserRepoStore()
+
+  watchEffect(() => {
+    const fontFamily = store.userSettings?.fontFamily
+    const root = document.documentElement
+    if (fontFamily) {
+      root.style.setProperty('--font-family', fontFamily)
+    } else {
+      root.style.setProperty('--font-family', "'Courier Prime', monospace")
+    }
+  })
+}

src/modules/user/hooks/useUserSettings.ts

@@ -1 +0,0 @@
-export const useUserSettings = () => {}

src/styles/app.scss

@@ -13,6 +13,10 @@
 $primary: #2c3a47;
 $link: #3b7e70;
 
+:root {
+  --font-family: 'Courier Prime', monospace;
+}
+
 @import '~bulma/bulma.sass';
 
 html {