design: pop more color

package.json

@@ -20,6 +20,7 @@
     "@vueuse/router": "^10.11.1",
     "bulma": "^0.9.4",
     "date-fns": "^2.30.0",
+    "font-color-contrast": "^11.1.0",
     "fontfaceobserver": "^2.3.0",
     "isomorphic-fetch": "^3.0.0",
     "markdown-it": "^14.1.0",
@@ -32,6 +33,7 @@
     "markdown-it-shikiji": "^0.10.2",
     "nanoid": "^5.0.9",
     "notyf": "^3.10.0",
+    "pastel-color": "^1.0.3",
     "pinia": "^2.2.6",
     "pouchdb-adapter-indexeddb": "^9.0.0",
     "pouchdb-browser": "^9.0.0",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       date-fns:
         specifier: ^2.30.0
         version: 2.30.0
+      font-color-contrast:
+        specifier: ^11.1.0
+        version: 11.1.0
       fontfaceobserver:
         specifier: ^2.3.0
         version: 2.3.0
@@ -68,6 +71,9 @@ importers:
       notyf:
         specifier: ^3.10.0
         version: 3.10.0
+      pastel-color:
+        specifier: ^1.0.3
+        version: 1.0.3
       pinia:
         specifier: ^2.2.6
         version: 2.2.6(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@@ -2325,6 +2331,9 @@ packages:
   flatted@3.2.7:
     resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
 
+  font-color-contrast@11.1.0:
+    resolution: {integrity: sha512-PxpFaesCSsDwaciw7MF6B2thUkH7skqZlz4BzUnvapR6+Es2877q7ru/tqfsITuaraPz+TGfsOfdtU4D0qjqEw==}
+
   fontfaceobserver@2.3.0:
     resolution: {integrity: sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==}
 
@@ -2915,6 +2924,9 @@ packages:
   parse-srcset@1.0.2:
     resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
 
+  pastel-color@1.0.3:
+    resolution: {integrity: sha512-VtKzbIgQUc+U0JBFcuNqcCPYfnPYZaf0VPpdqaRUaHYBwMTh3nT9ncq3gsQccqtmhlNdw1aNqZnefVvPE6dtmg==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3850,7 +3862,7 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-plugin-utils': 7.22.5
-      debug: 4.3.4
+      debug: 4.3.7
       lodash.debounce: 4.0.8
       resolve: 1.22.2
       semver: 6.3.1
@@ -6109,6 +6121,8 @@ snapshots:
 
   flatted@3.2.7: {}
 
+  font-color-contrast@11.1.0: {}
+
   fontfaceobserver@2.3.0: {}
 
   for-each@0.3.3:
@@ -6664,6 +6678,8 @@ snapshots:
 
   parse-srcset@1.0.2: {}
 
+  pastel-color@1.0.3: {}
+
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}

src/components/RepoList.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import fontColorContrast from 'font-color-contrast'
+import { getHex } from 'pastel-color'
+
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+
+const { username } = useGitHubLogin()
+const { savedFavoriteRepos } = useFavoriteRepos()
+
+const getStyle = (repo: string) => {
+  const backgroundColor = getHex(repo)
+  return { backgroundColor, color: fontColorContrast(backgroundColor) }
+}
+</script>
+
+<template>
+  <section v-if="savedFavoriteRepos.length" class="repo-list">
+    <router-link
+      v-for="favoriteRepo in savedFavoriteRepos"
+      :key="favoriteRepo._id"
+      :to="{
+        name: 'FluxNoteView',
+        params: {
+          user: username,
+          repo: favoriteRepo.name
+        }
+      }"
+      class="button"
+      :style="getStyle(`${username}${favoriteRepo.name}`)"
+    >
+      {{ favoriteRepo.name }}
+    </router-link>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.repo-list {
+  a {
+    border: 0;
+    width: 100px;
+    height: 80px;
+  }
+}
+</style>

src/components/WelcomeWorld.vue

@@ -2,22 +2,7 @@
   <div class="welcome-world">
     <h1 class="title is-1">Lite Note</h1>
 
-    <section v-if="savedFavoriteRepos.length">
+    <repo-list />
-      <router-link
-        v-for="favoriteRepo in savedFavoriteRepos"
-        :key="favoriteRepo._id"
-        :to="{
-          name: 'FluxNoteView',
-          params: {
-            user: username,
-            repo: favoriteRepo.name
-          }
-        }"
-        class="button"
-      >
-        {{ favoriteRepo.name }}
-      </router-link>
-    </section>
 
     <last-visited />
 
@@ -91,20 +76,19 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 
+import RepoList from '@/components/RepoList.vue'
 import SignInGithub from '@/components/SignInGithub.vue'
 import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import LastVisited from '@/modules/history/components/LastVisited.vue'
-import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
 
 export default defineComponent({
   name: 'WelcomeWorld',
-  components: { SignInGithub, LastVisited },
+  components: { SignInGithub, LastVisited, RepoList },
   setup() {
     const { isLogged, username } = useGitHubLogin()
-    const { savedFavoriteRepos } = useFavoriteRepos()
 
-    return { ...useForm(), isLogged, username, savedFavoriteRepos }
+    return { ...useForm(), isLogged, username }
   }
 })
 </script>

src/shims-vue.d.ts

@@ -13,3 +13,4 @@ declare module 'markdown-it-latex'
 declare module 'markdown-it-iframe'
 declare module 'markdown-it-shikiji'
 declare module '@rushstack/eslint-patch/modern-module-resolution'
+declare module 'pastel-color'