💄 (about) better design and a welcom page.

src/components/WelcomeWorld.vue

@@ -1,16 +1,104 @@
 <template>
-  <div class="welcome-world"></div>
+  <div class="welcome-world">
+    <h1 class="title is-1">About "Lite notes"</h1>
+
+    <ol>
+      <li>
+        Take notes on VS code (<a
+          href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#review-details"
+          target="_blank"
+          rel="noopener noreferrer"
+          >this extension</a
+        >
+        may be necessary)
+      </li>
+      <li>
+        Push to GitHub
+      </li>
+      <li>
+        Read it here
+      </li>
+      <li>
+        Share it with an URL
+      </li>
+    </ol>
+
+    <form @submit.prevent>
+      <div class="columns is-mobile is-centered is-vcentered">
+        https://github.com/
+        <div class="column">
+          <div class="field">
+            <div class="control">
+              <input
+                class="input"
+                type="text"
+                v-model="userInput"
+                placeholder="user"
+              />
+            </div>
+          </div>
+        </div>
+        /
+        <div class="column">
+          <div class="field">
+            <div class="control">
+              <input
+                class="input"
+                type="text"
+                v-model="repoInput"
+                placeholder="repo"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          <button type="submit" class="button is-primary" @click="submit">
+            go
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <footer>
+      <p>
+        This web app is clearly inspired by
+        <a
+          href="https://notes.andymatuschak.org/About_these_notes"
+          target="_blank"
+          rel="noopener noreferrer"
+          >Andy Matuschak's website</a
+        >. May this app be useful to everyone.
+      </p>
+
+      <p>
+        Made with love by
+        <a
+          href="http://github.com/jcalixte"
+          target="_blank"
+          rel="noopener noreferrer"
+          >Julien</a
+        >
+      </p>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { useForm } from '@/hooks/useForm.hook'
 
 export default defineComponent({
-  name: 'WelcomeWord'
+  name: 'WelcomeWord',
+  setup() {
+    return { ...useForm() }
+  }
 })
 </script>
 
 <style lang="scss" scoped>
 .welcome-world {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/styles/app.scss

@@ -1,5 +1,9 @@
 @charset "utf-8";
 @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');
+
+$primary: #2C3A47;
+$link: #58B19F;
+
 @import '~bulma/bulma.sass';
 
 html {
@@ -10,7 +14,6 @@ html {
 body {
   font-family: 'Courier Prime', monospace;
   height: 100vh;
-  // width: 5000px;
 }
 
 @media screen and (min-width: 769px) {

src/views/Home.vue

@@ -1,31 +1,6 @@
 <template>
-  <div v-if="!user || !repo" :key="routeKey">
-    Bonjour
-
-    <form @submit.prevent>
-      <div class="columns is-mobile 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 class="home content" v-if="!user || !repo">
+    <welcome-world />
   </div>
   <div v-else-if="notFound">
     <hr />
@@ -64,16 +39,20 @@
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed, toRefs } from 'vue'
 import { useNote } from '@/hooks/useNote.hook'
-import { useForm } from '@/hooks/useForm.hook'
 
 const StackedNote = defineAsyncComponent(() =>
   import('@/components/StackedNote.vue')
 )
 
+const WelcomeWorld = defineAsyncComponent(() =>
+  import('@/components/WelcomeWorld.vue')
+)
+
 export default defineComponent({
   name: 'Home',
   components: {
-    StackedNote
+    StackedNote,
+    WelcomeWorld
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -84,7 +63,6 @@ export default defineComponent({
 
     return {
       ...useNote(refProps.user, refProps.repo),
-      ...useForm(),
       routeKey: computed(() => `${props.user}-${props.repo}`)
     }
   }