Merge branch 'main' of github.com:lite-note/lite-note into main

src/components/FluxNote.vue

@@ -155,6 +155,16 @@ $header-height: 40px;
       color: var(--font-color);
     }
 
+    table {
+      color: var(--font-color);
+      background-color: var(--background-color);
+      thead {
+        th {
+          color: var(--font-color);
+        }
+      }
+    }
+
     blockquote {
       background-color: var(--background-color);
     }

src/components/HeaderNote.vue

@@ -1,53 +1,53 @@
-<template>
-  <header class="header-note">
-    <router-link
-      :to="{ name: 'Home' }"
-      class="button is-small is-white back-button"
-    >
-      <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
-    </router-link>
-    <router-link
-      class="special-folder"
-      :to="{ name: 'DraftNotes', params: { user, repo } }"
-    >
-      draft
-    </router-link>
-    <router-link
-      class="special-folder"
-      :to="{ name: 'FleetingNotes', params: { user, repo } }"
-    >
-      inbox
-    </router-link>
-  </header>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'HeaderNote',
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.header-note {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 10px;
-
-  .special-folder {
-    text-align: center;
-  }
-
-  img {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>
+<template>
+  <header class="header-note">
+    <router-link
+      :to="{ name: 'Home' }"
+      class="button is-small is-white back-button"
+    >
+      <img src="@/assets/icons/dark-left-arrow.svg" alt="go back left arrow" />
+    </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'DraftNotes', params: { user, repo } }"
+    >
+      draft
+    </router-link>
+    <router-link
+      class="special-folder"
+      :to="{ name: 'FleetingNotes', params: { user, repo } }"
+    >
+      inbox
+    </router-link>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'HeaderNote',
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.header-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+
+  .special-folder {
+    text-align: center;
+  }
+
+  img {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/components/NewVersion.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="new-version" v-if="hasNewVersion">
+  <aside v-if="hasNewVersion" class="new-version">
     <button class="button is-primary" @click="reload">
       new version available
     </button>

src/components/StackedNote.vue

@@ -12,7 +12,7 @@
         {{ displayedTitle }}
       </a>
     </div>
-    <div class="share" v-if="false">
+    <div v-if="false" class="share">
       <router-link
         :to="{
           name: 'ShareNotes',

src/components/WelcomeWorld.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="column">
         <p>
-          <router-link :to="{ name: 'RepoList' }" v-if="isLogged"
+          <router-link v-if="isLogged" :to="{ name: 'RepoList' }"
             >Manage your repos</router-link
           >
         </p>
@@ -49,17 +49,15 @@
 
     <form @submit.prevent>
       <div class="columns is-centered is-vcentered to-user-repo">
-        <div class="column">
-          https://github.com/
-        </div>
+        <div class="column">https://github.com/</div>
         <div class="columns column is-mobile is-centered is-vcentered">
           <div class="column">
             <div class="field">
               <div class="control">
                 <input
+                  v-model="userInput"
                   class="input"
                   type="text"
-                  v-model="userInput"
                   placeholder="user"
                 />
               </div>
@@ -70,9 +68,9 @@
             <div class="field">
               <div class="control">
                 <input
+                  v-model="repoInput"
                   class="input"
                   type="text"
-                  v-model="repoInput"
                   placeholder="repo"
                 />
               </div>
@@ -109,8 +107,8 @@ import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
 import SignInGithub from '@/components/SignInGithub.vue'
 
 export default defineComponent({
-  components: { SignInGithub },
   name: 'WelcomeWord',
+  components: { SignInGithub },
   setup() {
     const { isLogged, username } = useGitHubLogin()
     const { savedFavoriteRepos } = useFavoriteRepos()

src/hooks/useGitHubLogin.hook.ts

@@ -1,33 +1,33 @@
 import { computed, ref } from 'vue'
 
 import { confirmMessage } from '@/utils/notif'
-import { GithubToken } from '@/modules/user/interfaces/GithubToken'
 import { getAccessToken, saveAccessToken } from '@/modules/user/service/signIn'
+import { GithubToken } from '@/modules/user/interfaces/GithubToken'
 
 const username = ref<string | null>(null)
 const accessToken = ref<string | null>(null)
 
 let init = true
 
-export const useGitHubLogin = () => {
-  const saveAccessTokenToLocal = async () => {
-    const response = await getAccessToken()
-    username.value = response?.username || ''
-    accessToken.value = response?.token || ''
-  }
+const saveAccessTokenToLocal = async () => {
+  const response = await getAccessToken()
+  username.value = response?.username || ''
+  accessToken.value = response?.token || ''
+}
 
+const saveCredentials = async (token: GithubToken): Promise<void> => {
+  const accessToken = await saveAccessToken(token)
+
+  await saveAccessTokenToLocal()
+  confirmMessage(`${accessToken.username} is logged in!`)
+}
+
+export const useGitHubLogin = () => {
   if (init) {
     init = false
     saveAccessTokenToLocal()
   }
 
-  const saveCredentials = async (githubToken: GithubToken) => {
-    const accessToken = await saveAccessToken(githubToken)
-
-    await saveAccessTokenToLocal()
-    confirmMessage(`${accessToken.username} is logged in!`)
-  }
-
   return {
     isLogged: !!accessToken.value,
     isReady: computed(() => accessToken.value !== null),

src/hooks/useMarkdown.hook.ts

@@ -13,7 +13,7 @@ const md = new MarkdownIt({
     h4: ['title', 'is-5'],
     h5: ['title', 'is-6'],
     h6: ['title', 'is-6'],
-    table: ['table', 'is-striped', 'is-hoverable']
+    table: ['table', 'is-fullwidth']
   })
   .use(blockEmbedPlugin, {
     youtube: {

src/hooks/useNote.hook.ts

@@ -100,8 +100,9 @@ export const useNote = (containerClass: string) => {
     if (isMobile.value) {
       container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
     } else {
-      container.style.width = `${NOTE_WIDTH *
-        (stackedNotes.value.length + 1)}px`
+      container.style.width = `${
+        NOTE_WIDTH * (stackedNotes.value.length + 1)
+      }px`
     }
   }
 

src/hooks/useNoteOverlay.hook.ts

@@ -39,10 +39,9 @@ export const useNoteOverlay = (className: string, index: number) => {
       ) as NodeListOf<HTMLElement>
 
       stackedNoteContainers.forEach((stackedNote, ind) => {
-        stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value
-          .length -
-          ind) *
-          BOOKMARK_WIDTH}rem)`
+        stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${
+          (stackedNotes.value.length - ind) * BOOKMARK_WIDTH
+        }rem)`
       })
     }
   })

src/main.ts

@@ -13,8 +13,4 @@ const i18n = createI18n({
   messages
 })
 
-createApp(App)
-  .use(router)
-  .use(i18n)
-  .use(createPinia())
-  .mount('#app')
+createApp(App).use(router).use(i18n).use(createPinia()).mount('#app')

src/modules/note/hooks/useFolderNotes.ts

@@ -1,32 +1,32 @@
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { computed } from 'vue'
-
-export const useFolderNotes = (folders: string[]) => {
-  const store = useUserRepoStore()
-
-  const fleetingNotes = computed(() =>
-    store.files.filter(
-      (file) =>
-        folders.some((folder) => file.path?.startsWith(folder)) &&
-        file.path?.endsWith('.md')
-    )
-  )
-
-  const content = computed(() =>
-    fleetingNotes.value?.length > 0
-      ? fleetingNotes.value
-          .map((note) => {
-            const firstFolder = note.path?.split('/').shift()
-
-            return `- [${note.path?.replace(`${firstFolder}/`, '')}](${
-              note.path
-            })`
-          })
-          .join('\n')
-      : ''
-  )
-
-  return {
-    content
-  }
-}
+import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { computed } from 'vue'
+
+export const useFolderNotes = (folders: string[]) => {
+  const store = useUserRepoStore()
+
+  const fleetingNotes = computed(() =>
+    store.files.filter(
+      (file) =>
+        folders.some((folder) => file.path?.startsWith(folder)) &&
+        file.path?.endsWith('.md')
+    )
+  )
+
+  const content = computed(() =>
+    fleetingNotes.value?.length > 0
+      ? fleetingNotes.value
+          .map((note) => {
+            const firstFolder = note.path?.split('/').shift()
+
+            return `- [${note.path?.replace(`${firstFolder}/`, '')}](${
+              note.path
+            })`
+          })
+          .join('\n')
+      : ''
+  )
+
+  return {
+    content
+  }
+}

src/modules/note/hooks/useNoteCache.ts

@@ -1,31 +1,31 @@
-import { data } from '@/data/data'
-import { DataType } from '@/data/DataType.enum'
-import { Note } from '@/modules/note/models/Note'
-import { useAsyncState } from '@vueuse/core'
-import { computed } from 'vue'
-
-export const useNoteCache = (sha: string) => {
-  const noteId = computed(() => data.generateId(DataType.Note, sha))
-  const getCachedNote = async () => data.get<DataType.Note, Note>(noteId.value)
-
-  const cachedNote = useAsyncState(getCachedNote, null)
-
-  const saveCacheNote = async (content: string) => {
-    const newNote: Note = {
-      _id: noteId.value,
-      $type: DataType.Note,
-      content
-    }
-
-    await data.update(newNote)
-
-    await cachedNote.execute()
-  }
-
-  return {
-    cachedNote: cachedNote.state,
-    isReady: cachedNote.isReady,
-    getCachedNote,
-    saveCacheNote
-  }
-}
+import { data } from '@/data/data'
+import { DataType } from '@/data/DataType.enum'
+import { Note } from '@/modules/note/models/Note'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
+export const useNoteCache = (sha: string) => {
+  const noteId = computed(() => data.generateId(DataType.Note, sha))
+  const getCachedNote = async () => data.get<DataType.Note, Note>(noteId.value)
+
+  const cachedNote = useAsyncState(getCachedNote, null)
+
+  const saveCacheNote = async (content: string) => {
+    const newNote: Note = {
+      _id: noteId.value,
+      $type: DataType.Note,
+      content
+    }
+
+    await data.update(newNote)
+
+    await cachedNote.execute()
+  }
+
+  return {
+    cachedNote: cachedNote.state,
+    isReady: cachedNote.isReady,
+    getCachedNote,
+    saveCacheNote
+  }
+}

src/modules/note/models/Note.ts

@@ -1,6 +1,6 @@
-import { DataType } from '@/data/DataType.enum'
-import { Model } from '@/data/models/Model'
-
-export interface Note extends Model<DataType.Note> {
-  content: string
-}
+import { DataType } from '@/data/DataType.enum'
+import { Model } from '@/data/models/Model'
+
+export interface Note extends Model<DataType.Note> {
+  content: string
+}

src/modules/repo/services/resolvePath.ts

@@ -1,32 +1,32 @@
-const sanitizePath = (path: string) => {
-  if (path.startsWith('./')) {
-    return decodeURIComponent(path.replace('./', ''))
-  }
-  return decodeURIComponent(path)
-}
-
-const removeNoteFilename = (pathNote: string) => {
-  const path = pathNote.split('/')
-  path.pop()
-
-  return sanitizePath(path.join('/'))
-}
-
-export const resolvePath = (
-  currentAbsolutePathNote: string,
-  pathToResolve: string
-) => {
-  let currentAbsolutePath = removeNoteFilename(currentAbsolutePathNote)
-  pathToResolve = sanitizePath(pathToResolve)
-
-  while (pathToResolve.startsWith('../')) {
-    const adjustedAbsolutePath = currentAbsolutePath.split('/')
-    adjustedAbsolutePath.pop()
-    currentAbsolutePath = adjustedAbsolutePath.join('/')
-    pathToResolve = pathToResolve.replace('../', '')
-  }
-
-  return currentAbsolutePath
-    ? `${currentAbsolutePath}/${pathToResolve}`
-    : pathToResolve
-}
+const sanitizePath = (path: string) => {
+  if (path.startsWith('./')) {
+    return decodeURIComponent(path.replace('./', ''))
+  }
+  return decodeURIComponent(path)
+}
+
+const removeNoteFilename = (pathNote: string) => {
+  const path = pathNote.split('/')
+  path.pop()
+
+  return sanitizePath(path.join('/'))
+}
+
+export const resolvePath = (
+  currentAbsolutePathNote: string,
+  pathToResolve: string
+) => {
+  let currentAbsolutePath = removeNoteFilename(currentAbsolutePathNote)
+  pathToResolve = sanitizePath(pathToResolve)
+
+  while (pathToResolve.startsWith('../')) {
+    const adjustedAbsolutePath = currentAbsolutePath.split('/')
+    adjustedAbsolutePath.pop()
+    currentAbsolutePath = adjustedAbsolutePath.join('/')
+    pathToResolve = pathToResolve.replace('../', '')
+  }
+
+  return currentAbsolutePath
+    ? `${currentAbsolutePath}/${pathToResolve}`
+    : pathToResolve
+}

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

@@ -5,7 +5,6 @@ import {
   getMainReadme,
   getUserSettingsContent
 } from '@/modules/repo/services/repo'
-import { refreshToken } from '@/modules/user/service/signIn'
 import { defineStore } from 'pinia'
 
 interface State {
@@ -29,7 +28,6 @@ export const useUserRepoStore = defineStore({
     async setUserRepo(newUser: string, newRepo: string) {
       this.user = newUser
       this.repo = newRepo
-      await refreshToken()
       const [readme, files] = await Promise.all([
         getMainReadme(newUser, newRepo),
         getFiles(newUser, newRepo)

src/modules/user/service/signIn.ts

@@ -58,8 +58,6 @@ export const refreshToken = async () => {
       | GithubToken
       | GithubTokenError
 
-    console.log(githubToken)
-
     if ('error' in githubToken) {
       return null
     }
@@ -105,8 +103,6 @@ export const saveAccessToken = async (githubToken: GithubToken) => {
     username: ''
   }
 
-  console.log(accessToken)
-
   const octokit = new Octokit({
     auth: accessToken?.token
   })

src/views/DraftNotes.vue

@@ -1,47 +1,45 @@
-<template>
-  <div class="draft-notes">
-    <flux-note :user="user" :repo="repo" :content="content" key="draft-notes">
-      <h3 class="subtitle is-3">
-        Drafts
-      </h3>
-    </flux-note>
-  </div>
-</template>
-
-<script lang="ts">
-import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-import { defineAsyncComponent, defineComponent } from 'vue'
-
-const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
-
-const DRAFT_FOLDER = ['drafts', '_drafts']
-
-export default defineComponent({
-  name: 'DraftNotes',
-  components: {
-    FluxNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup() {
-    const { content } = useFolderNotes(DRAFT_FOLDER)
-
-    return {
-      content
-    }
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.draft-notes {
-  display: flex;
-  flex: 1;
-
-  .subtitle {
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div class="draft-notes">
+    <flux-note key="draft-notes" :user="user" :repo="repo" :content="content">
+      <h3 class="subtitle is-3">Drafts</h3>
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { defineAsyncComponent, defineComponent } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+const DRAFT_FOLDER = ['drafts', '_drafts']
+
+export default defineComponent({
+  name: 'DraftNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup() {
+    const { content } = useFolderNotes(DRAFT_FOLDER)
+
+    return {
+      content
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.draft-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>

src/views/FleetingNotes.vue

@@ -1,52 +1,50 @@
-<template>
-  <div class="fleeting-notes">
-    <flux-note
-      :user="user"
-      :repo="repo"
-      :content="content"
-      key="fleeting-notes"
-    >
-      <h3 class="subtitle is-3">
-        Inbox
-      </h3>
-    </flux-note>
-  </div>
-</template>
-
-<script lang="ts">
-import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
-import { defineAsyncComponent, defineComponent } from 'vue'
-
-const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
-
-const FLEETING_NOTES_FOLDER = ['inbox', '_inbox']
-
-export default defineComponent({
-  name: 'FleetingNotes',
-  components: {
-    FluxNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup() {
-    const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
-
-    return {
-      content
-    }
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.fleeting-notes {
-  display: flex;
-  flex: 1;
-
-  .subtitle {
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div class="fleeting-notes">
+    <flux-note
+      key="fleeting-notes"
+      :user="user"
+      :repo="repo"
+      :content="content"
+    >
+      <h3 class="subtitle is-3">Inbox</h3>
+    </flux-note>
+  </div>
+</template>
+
+<script lang="ts">
+import { useFolderNotes } from '@/modules/note/hooks/useFolderNotes'
+import { defineAsyncComponent, defineComponent } from 'vue'
+
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+const FLEETING_NOTES_FOLDER = ['inbox', '_inbox']
+
+export default defineComponent({
+  name: 'FleetingNotes',
+  components: {
+    FluxNote
+  },
+  props: {
+    user: { type: String, required: true },
+    repo: { type: String, required: true }
+  },
+  setup() {
+    const { content } = useFolderNotes(FLEETING_NOTES_FOLDER)
+
+    return {
+      content
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.fleeting-notes {
+  display: flex;
+  flex: 1;
+
+  .subtitle {
+    text-align: center;
+  }
+}
+</style>

src/views/Home.vue

@@ -34,6 +34,9 @@ export default defineComponent({
   },
   setup(props) {
     const { resetStackedNotes } = useQueryStackedNotes()
+    onMounted(() => {
+      refreshToken()
+    })
 
     onMounted(() => {
       refreshToken()

src/views/Login.vue

@@ -13,10 +13,10 @@
             <div class="field-body">
               <div class="control">
                 <input
+                  v-model="user"
                   class="input"
                   type="text"
                   placeholder="GitHub username"
-                  v-model="user"
                 />
               </div>
             </div>
@@ -28,10 +28,10 @@
             <div class="field-body">
               <div class="control">
                 <input
+                  v-model="token"
                   class="input"
                   type="password"
                   placeholder="Personal Access Token"
-                  v-model="token"
                 />
               </div>
             </div>

src/views/RepoList.vue

@@ -6,8 +6,8 @@
     <div v-else class="columns is-centered">
       <div class="column is-one-third">
         <table
-          class="table is-striped is-hoverable"
           v-if="favoriteRepos.length > 0"
+          class="table is-striped is-hoverable"
         >
           <thead>
             <tr>

src/views/ShareNotes.vue

@@ -6,10 +6,10 @@
       </div>
     </article>
     <flux-note
+      key="share-notes"
       :user="user"
       :repo="repo"
       :content="content"
-      key="share-notes"
       :with-header="false"
     />
   </div>