♻️ (notes) home is now the note initial screen with a fo…

src/components/StackedNote.vue

@@ -35,6 +35,6 @@ export default defineComponent({
 .stacked-note {
   text-align: left;
   border-left: 1px solid rgba(18, 19, 58, 0.2);
-  padding-left: 1rem;
+  padding: 0 1rem;
 }
 </style>

src/components/WelcomeWorld.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="welcome-world"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'WelcomeWord'
+})
+</script>
+
+<style lang="scss" scoped>
+.welcome-world {
+}
+</style>

src/hooks/useForm.hook.ts

@@ -0,0 +1,28 @@
+import { ref } from '@vue/reactivity'
+import { useRouter } from 'vue-router'
+
+export const useForm = () => {
+  const userInput = ref('')
+  const repoInput = ref('')
+  const { push } = useRouter()
+
+  const submit = () => {
+    if (!userInput.value || !repoInput.value) {
+      return
+    }
+
+    push({
+      name: 'Home',
+      params: {
+        user: userInput.value,
+        repo: repoInput.value
+      }
+    })
+  }
+
+  return {
+    userInput,
+    repoInput,
+    submit
+  }
+}

src/hooks/useMarkdown.hook.ts

@@ -1,6 +1,5 @@
 import MarkdownIt from 'markdown-it'
 import markdownItClass from '@toycode/markdown-it-class'
-// import sanitizeHtml from 'sanitize-html'
 
 const md = new MarkdownIt().use(markdownItClass, {
   h1: ['title', 'is-1'],

src/hooks/useNote.hook.ts

@@ -13,12 +13,9 @@ const sanitizePath = (path: string) => {
   return decodeURIComponent(path)
 }
 
-export const useNote = (user: string, repo: string) => {
+export const useNote = (user?: string, repo?: string) => {
   const { push } = useRouter()
-  const { readme, notFound, tree } = useRepo(user, repo)
-  const { listenToClick } = useLinks('note-display')
   const { query } = useRoute()
-
   const stackedNotes = ref(
     query.stackedNotes
       ? Array.isArray(query.stackedNotes)
@@ -27,6 +24,17 @@ export const useNote = (user: string, repo: string) => {
       : []
   )
 
+  if (!user || !repo) {
+    return {
+      readme: ref(null),
+      notFound: ref(true),
+      stackedNotes
+    }
+  }
+
+  const { readme, notFound, tree } = useRepo(user, repo)
+  const { listenToClick } = useLinks('note-display')
+
   const unsubscribe = noteEventBus.addEventBusListener(
     ({ path, currentNoteSHA }) => {
       const currentFile = tree.value.find((file) => file.sha === currentNoteSHA)
@@ -68,7 +76,11 @@ export const useNote = (user: string, repo: string) => {
       const newStackedNotes = getStackedNotes()
 
       push({
-        name: 'Note',
+        name: 'Home',
+        params: {
+          user,
+          repo
+        },
         query: {
           stackedNotes: newStackedNotes
         }

src/router/router.ts

@@ -4,20 +4,15 @@ import Home from '@/views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
+    path: '/:user?/:repo?',
     name: 'Home',
+    props: true,
     component: Home
   },
   {
     path: '/about',
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
-  },
-  {
-    path: '/note/:user/:repo',
-    name: 'Note',
-    props: true,
-    component: () => import(/* webpackChunkName: "note" */ '@/views/Note.vue')
   }
 ]
 

src/views/Home.vue

@@ -1,31 +1,80 @@
 <template>
-  <div class="home">
-    <p class="note" v-html="readme"></p>
+  <div v-if="!user || !repo">
+    Bonjour
+
+    <form @submit.prevent>
+      <div class="columns is-centered is-vcentered">
+        <div class="column">
+          <div class="field">
+            <label class="label">user</label>
+            <div class="control">
+              <input class="input" type="text" v-model="userInput" />
+            </div>
+          </div>
+        </div>
+        <div class="column">/</div>
+        <div class="column">
+          <div class="field">
+            <label class="label">repo</label>
+            <div class="control">
+              <input class="input" type="text" v-model="repoInput" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <button type="submit" class="button is-primary" @click="submit">
+        y aller
+      </button>
+    </form>
+  </div>
+  <div class="home content" v-else>
+    <hr v-if="notFound" />
+    <div v-if="notFound" class="columns is-centered">
+      <div class="column is-one-third notification is-warning" v-if="notFound">
+        Not found.
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <h1 class="title is-1">
+          <router-link :to="{ name: 'Home' }">
+            {{ repo }}
+          </router-link>
+        </h1>
+        <h2 class="subtitle is-2">{{ user }}</h2>
+        <p class="note-display" v-html="readme"></p>
+      </div>
+      <div
+        class="column"
+        v-for="stackedNote in stackedNotes"
+        :key="stackedNote"
+      >
+        <stacked-note :user="user" :repo="repo" :sha="stackedNote" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, watch, nextTick } from 'vue'
-import { useRepo } from '@/hooks/useRepo.hook'
-import { useLinks } from '@/hooks/useLinks.hook'
+import { defineComponent, defineAsyncComponent } from 'vue'
+import { useNote } from '@/hooks/useNote.hook'
+import { useForm } from '@/hooks/useForm.hook'
+
+const StackedNote = defineAsyncComponent(() =>
+  import('@/components/StackedNote.vue')
+)
 
 export default defineComponent({
   name: 'Home',
-  setup() {
-    const { readme } = useRepo('jcalixte', 'notes')
-    const { listenToClick } = useLinks('note')
-
-    watch(readme, () => {
-      if (readme.value) {
-        nextTick(() => {
-          listenToClick()
-        })
-      }
-    })
-
-    return {
-      readme
-    }
+  components: {
+    StackedNote
+  },
+  props: {
+    user: { type: String, required: false },
+    repo: { type: String, required: false }
+  },
+  setup(props) {
+    return { ...useNote(props.user, props.repo), ...useForm() }
   }
 })
 </script>

src/views/Note.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="note content">
-    <hr v-if="notFound" />
-    <div v-if="notFound" class="columns is-centered">
-      <div class="column is-one-third notification is-warning" v-if="notFound">
-        Not found.
-      </div>
-    </div>
-    <div class="columns">
-      <div class="column">
-        <h1 class="title is-1">
-          <router-link :to="{ name: 'Note' }">
-            {{ repo }}
-          </router-link>
-        </h1>
-        <h2 class="subtitle is-2">{{ user }}</h2>
-        <p class="note-display" v-html="readme"></p>
-      </div>
-      <div
-        class="column"
-        v-for="stackedNote in stackedNotes"
-        :key="stackedNote"
-      >
-        <stacked-note :user="user" :repo="repo" :sha="stackedNote" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue'
-import { useNote } from '@/hooks/useNote.hook'
-
-const StackedNote = defineAsyncComponent(() =>
-  import('@/components/StackedNote.vue')
-)
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    StackedNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup(props) {
-    return useNote(props.user, props.repo)
-  }
-})
-</script>