Feat/GitHub auth (#6)

* ✨ (sign in) create sign in to github button

* ✨ (github login) login via github button

* 💄 (homepage)

* ➕ (date fns)

* ✨ (github login) refresh token when token expired

src/views/About.vue

@@ -1,24 +1,22 @@
 <template>
   <div class="about content">
-    <h1 class="title is-1">Lite Note</h1>
     <go-back />
-    <hr />
     <main>
       Work in progress:
       <ol>
-        <li>header note for quick actions ⏳</li>
-        <li>offline notes</li>
-        <li>full path resolver between notes</li>
-        <li>draft & fleeting notes folders</li>
-        <li>login with GitHub "Personal Access Token" tutorial</li>
-        <li>private & public notes tutorial</li>
+        <li>header note for quick actions ✅</li>
+        <li>offline notes ✅</li>
+        <li>full path resolver between notes ✅</li>
+        <li>draft & fleeting notes folders ✅</li>
+        <li>private & public notes tutorial ✅</li>
         <li>
           custom settings:
           <ul>
-            <li>light & dark modes</li>
-            <li>font families</li>
+            <li>light & dark modes ✅</li>
+            <li>font families ✅</li>
           </ul>
         </li>
+        <li>Share PDF section of a note (and its subnotes) ⏳</li>
       </ol>
     </main>
   </div>

src/views/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home content" v-if="!user || !repo">
+    <authorize class="authorize" />
     <new-version class="new-version" />
     <welcome-world />
   </div>
@@ -10,6 +11,7 @@
 import { defineComponent, defineAsyncComponent, computed } from 'vue'
 import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 import NewVersion from '@/components/NewVersion.vue'
+import Authorize from '@/components/Authorize.vue'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
@@ -22,7 +24,8 @@ export default defineComponent({
   components: {
     WelcomeWorld,
     FluxNote,
-    NewVersion
+    NewVersion,
+    Authorize
   },
   props: {
     user: { type: String, required: false, default: '' },
@@ -47,7 +50,13 @@ export default defineComponent({
   align-items: center;
 
   .new-version {
+    position: absolute;
     margin-top: 1rem;
   }
 }
+
+.authorize {
+  position: absolute;
+  margin: auto;
+}
 </style>