add about page

src/base/TopMenu.vue

@@ -56,21 +56,40 @@
         </a>
       </RouterLink>
 
-      <!--
+      <RouterLink
-      <RouterLink :to="{name: 'About'}" custom="true" v-slot="{isActive, href, navigate}">
+        v-slot="{isActive, href, navigate}"
+        :to="{name: 'About'}"
+        custom="true"
+      >
         <a
           v-bind="$attrs"
           :href="href"
-          @click="navigate"
           class="rounded ml-8 p-3"
           :class="{'bg-slate-300': isActive}"
+          @click="navigate"
         >
-          <svg class="inline" height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><circle cx="7.5" cy="5.5" r="2"/><path d="m.5 3.5h1v-1c0-1.1045695.8954305-2 2-2h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-1h-1"/><path d="m.5 7.5h1"/><path d="m.5 5.5h1"/><path d="m.5 9.5h1"/><path d="m10.5 10.5v-1c0-1.1045695-.8954305-2-2-2h-2c-1.1045695 0-2 .8954305-2 2v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1z"/></g></svg>
+          <svg
+            class="inline"
+            height="21"
+            viewBox="0 0 21 21"
+            width="21"
+            xmlns="http://www.w3.org/2000/svg"
+          ><g
+            fill="none"
+            fill-rule="evenodd"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            transform="translate(3 3)"
+          ><circle
+            cx="7.5"
+            cy="5.5"
+            r="2"
+          /><path d="m.5 3.5h1v-1c0-1.1045695.8954305-2 2-2h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-1h-1" /><path d="m.5 7.5h1" /><path d="m.5 5.5h1" /><path d="m.5 9.5h1" /><path d="m10.5 10.5v-1c0-1.1045695-.8954305-2-2-2h-2c-1.1045695 0-2 .8954305-2 2v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1z" /></g></svg>
 
           About
         </a>
       </RouterLink>
-      -->
     </div>
   </header>
 </template>

src/page/About.vue

@@ -1,11 +1,36 @@
 <template>
-  <div class="w-full">
+  <div class="grid grid-cols-1 col-span-12 text-center">
-    <p>This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
+    <div class="border p-10 w-1/2 m-auto">
+      <p class="mb-5">
+        This website is an image generator for Open Graph.
+      </p>
+
+      <p class="mb-5">
+        This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+      </p>
+
+      <p>
+        <a
+          class="btn"
+          target="_blank"
+          href="https://gitnet.fr/deblan/og-image"
+        >
+          <DownloadButton
+            class="rounded-l-md rounded-r-md"
+            label="Get more information 📙"
+          />
+        </a>
+      </p>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import DownloadButton from '../ui/DownloadButton'
 
+export default {
+  components: {
+    DownloadButton,
+  },
 }
 </script>

src/router.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import Home from './page/Home.vue'
 import About from './page/About.vue'
 
@@ -13,18 +13,18 @@ const routes = [
       title: 'Generator - OG:IMAGE'
     }
   },
-  // {
+  {
-  //   path: '/about',
+    path: '/about',
-  //   name: 'About',
+    name: 'About',
-  //   component: About,
+    component: About,
-  //   meta: {
+    meta: {
-  //     title: 'About'
+      title: 'About'
-  //   }
+    }
-  // },
+  },
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   base: APP_BASE_URL,
   routes,
 });

src/ui/DownloadButton.vue

@@ -3,7 +3,6 @@
     type="button"
     class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
     :class="class"
-    @click="downloadAsJpeg"
     v-text="label"
   />
 </template>