split home page and flux note page

src/components/FluxNote.vue

@@ -102,7 +102,7 @@ const focus = () => scrollToFocusedNote(undefined, true)
       <div class="repo-title">
         <h1 class="title is-1">
           [<router-link
-            :to="{ name: 'Home', params: { user, repo } }"
+            :to="{ name: 'FluxNoteView', params: { user, repo } }"
             @click="resetStackedNotes"
             >{{ repo }}</router-link
           >]

src/components/WelcomeWorld.vue

@@ -6,7 +6,7 @@
         <div class="buttons is-centered">
           <router-link
             :to="{
-              name: 'Home',
+              name: 'FluxNoteView',
               params: { user: 'lite-note', repo: 'getting-started' }
             }"
             class="button is-primary"
@@ -32,7 +32,7 @@
             >
               <router-link
                 :to="{
-                  name: 'Home',
+                  name: 'FluxNoteView',
                   params: {
                     user: username,
                     repo: favoriteRepo.name
@@ -102,15 +102,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import SignInGithub from '@/components/SignInGithub.vue'
 import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
-import SignInGithub from '@/components/SignInGithub.vue'
 import LastVisited from '@/modules/history/components/LastVisited.vue'
+import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'WelcomeWord',
+  name: 'WelcomeWorld',
   components: { SignInGithub, LastVisited },
   setup() {
     const { isLogged, username } = useGitHubLogin()

src/hooks/useForm.hook.ts

@@ -12,7 +12,7 @@ export const useForm = () => {
     }
 
     push({
-      name: 'Home',
+      name: 'FluxNoteView',
       params: {
         user: userInput.value,
         repo: repoInput.value

src/hooks/useQueryStackedNotes.hook.ts

@@ -1,10 +1,8 @@
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-import { readonly, ref } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { nextTick } from 'vue'
-
+import { nextTick, readonly, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const stackedNotes = ref<string[]>([])
@@ -90,7 +88,7 @@ export const useQueryStackedNotes = () => {
     const newStackedNotes = getStackedNotes()
 
     push({
-      name: currentRoute.value.name ?? 'Home',
+      name: currentRoute.value.name ?? 'FluxNoteView',
       params: {
         user: store.user,
         repo: store.repo

src/modules/history/components/LastVisited.vue

@@ -9,7 +9,7 @@
         <div>
           <router-link
             :to="{
-              name: `Home`,
+              name: `FluxNoteView`,
               params: { user: lastVisitedRepo.user, repo: lastVisitedRepo.repo }
             }"
             >{{ lastVisitedRepo.user }}/{{ lastVisitedRepo.repo }}</router-link

src/router/router.ts

@@ -1,6 +1,5 @@
-import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
-
 import Home from '@/views/HomeApp.vue'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -9,10 +8,10 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/RepoList.vue')
   },
   {
-    path: '/:user?/:repo?',
-    name: 'Home',
+    path: '/:user/:repo',
+    name: 'FluxNoteView',
     props: true,
-    component: Home
+    component: () => import('@/views/FluxNoteView.vue')
   },
   {
     path: '/:user/:repo/share/:note',
@@ -49,6 +48,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'About',
     component: () => import('@/views/AboutApp.vue')
   },
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
   {
     path: '/:catchAll(.*)',
     name: 'SpaceCowboy',

src/views/FluxNoteView.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import FluxNote from '@/components/FluxNote.vue'
+import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
+import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { computed } from 'vue'
+
+useQueryStackedNotes()
+useComputeBacklinks()
+
+const props = defineProps<{ user: string; repo: string }>()
+const routeKey = computed(() => `${props.user}-${props.repo}`)
+</script>
+
+<template>
+  <flux-note :key="routeKey" :user="user" :repo="repo" />
+</template>

src/views/HomeApp.vue

@@ -1,28 +1,13 @@
 <script setup lang="ts">
 import AuthorizeUser from '@/components/AuthorizeUser.vue'
-import { useComputeBacklinks } from '@/hooks/useComputeBacklinks.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
-import { computed, defineAsyncComponent } from 'vue'
-
-const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
-
-const WelcomeWorld = defineAsyncComponent(
-  () => import('@/components/WelcomeWorld.vue')
-)
-
-const props = defineProps<{ user?: string; repo?: string }>()
-
-useQueryStackedNotes()
-useComputeBacklinks()
-const routeKey = computed(() => `${props.user}-${props.repo}`)
+import WelcomeWorld from '@/components/WelcomeWorld.vue'
 </script>
 
 <template>
-  <div v-if="!user || !repo" class="home content">
+  <div class="home content">
     <authorize-user class="authorize" />
     <welcome-world />
   </div>
-  <flux-note v-else :key="routeKey" :user="user" :repo="repo" />
 </template>
 
 <style lang="scss" scoped>

src/views/RepoList.vue

@@ -31,7 +31,7 @@
 
                 <router-link
                   :to="{
-                    name: 'Home',
+                    name: 'FluxNoteView',
                     params: { user: username, repo: repo.name }
                   }"
                   >{{ repo.name }}</router-link
@@ -62,7 +62,7 @@
               <td>
                 <router-link
                   :to="{
-                    name: 'Home',
+                    name: 'FluxNoteView',
                     params: { user: username, repo: repo.name }
                   }"
                   >{{ repo.name }}</router-link
@@ -77,11 +77,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
-import { useRepos } from '@/hooks/useRepos.hook'
 import GoBack from '@/components/GoBack.vue'
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useRepos } from '@/hooks/useRepos.hook'
+import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'RepoList',