design: pop more color

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">
-      <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>
+    <repo-list />
 
     <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'