From 556ddb7f1e44df9f79b68580aa5838509317ac7b Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Wed, 24 Mar 2021 22:33:50 +0100 Subject: [PATCH] :sparkles: (user settings) init user settings with .litenote.json --- src/components/FluxNote.vue | 5 ++ src/hooks/useFile.hook.ts | 29 ++---------- src/hooks/useImages.hook.ts | 4 +- src/modules/repo/interfaces/UserSettings.ts | 9 ++++ src/modules/repo/services/repo.ts | 47 +++++++++++++++++++ src/modules/repo/store/userRepo.store.ts | 12 ++++- .../user/hooks/useUserSettings.hook.ts | 16 +++++++ src/modules/user/hooks/useUserSettings.ts | 1 - src/styles/app.scss | 4 ++ 9 files changed, 96 insertions(+), 31 deletions(-) create mode 100644 src/modules/repo/interfaces/UserSettings.ts create mode 100644 src/modules/user/hooks/useUserSettings.hook.ts delete mode 100644 src/modules/user/hooks/useUserSettings.ts diff --git a/src/components/FluxNote.vue b/src/components/FluxNote.vue index 0f863c7..0c5e69b 100644 --- a/src/components/FluxNote.vue +++ b/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; diff --git a/src/hooks/useFile.hook.ts b/src/hooks/useFile.hook.ts index ff1bcd1..0d87640 100644 --- a/src/hooks/useFile.hook.ts +++ b/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 } } diff --git a/src/hooks/useImages.hook.ts b/src/hooks/useImages.hook.ts index 5561e66..4dc4e1e 100644 --- a/src/hooks/useImages.hook.ts +++ b/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}`) } }) diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts new file mode 100644 index 0000000..843147d --- /dev/null +++ b/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' +} diff --git a/src/modules/repo/services/repo.ts b/src/modules/repo/services/repo.ts index db94f30..bb8605c 100644 --- a/src/modules/repo/services/repo.ts +++ b/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 => { + 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 +} diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts index 8d3fbcd..e74c7c4 100644 --- a/src/modules/repo/store/userRepo.store.ts +++ b/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 diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts new file mode 100644 index 0000000..167c925 --- /dev/null +++ b/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") + } + }) +} diff --git a/src/modules/user/hooks/useUserSettings.ts b/src/modules/user/hooks/useUserSettings.ts deleted file mode 100644 index 8315d64..0000000 --- a/src/modules/user/hooks/useUserSettings.ts +++ /dev/null @@ -1 +0,0 @@ -export const useUserSettings = () => {} diff --git a/src/styles/app.scss b/src/styles/app.scss index 9ac4025..f82eea9 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -13,6 +13,10 @@ $primary: #2c3a47; $link: #3b7e70; +:root { + --font-family: 'Courier Prime', monospace; +} + @import '~bulma/bulma.sass'; html {