From 6154df2789a08c7bd680b761c2152978934e74e2 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Sat, 16 Apr 2022 10:46:52 +0200
Subject: [PATCH] feat(page) added the /about page

---
 src/layouts/base.layout.vue | 45 ++++++++++++++++-
 src/pages/About.vue         | 98 +++++++++++++++++++++++++++++++++++++
 src/router.ts               |  5 ++
 3 files changed, 147 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/About.vue

diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index dfc2d4f9..4a2883dd 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -2,7 +2,7 @@
 import { NIcon } from 'naive-ui';
 import { h, ref, type Component } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
-import { Heart, BrandGithub, BrandTwitter, Moon, Sun, Menu2, Home2 } from '@vicons/tabler'
+import { Heart, BrandGithub, BrandTwitter, Moon, Sun, Menu2, Home2, InfoCircle } from '@vicons/tabler'
 import { toolsByCategory } from '@/tools';
 import SearchBar from '../components/SearchBar.vue';
 import { useStyleStore } from '@/stores/style.store';
@@ -86,6 +86,26 @@ const m = toolsByCategory.map(category => ({
               :component="BrandTwitter"
             />
           </n-button>
+          <router-link
+            to="/about"
+            #="{ navigate, href }"
+            custom
+          >
+            <n-button
+              tag="a"
+              :href="href"
+              circle
+              quaternary
+              size="large"
+              aria-label="Home"
+              @click="navigate"
+            >
+              <n-icon
+                size="25"
+                :component="InfoCircle"
+              />
+            </n-button>
+          </router-link>
           <n-button
             size="large"
             circle
@@ -202,6 +222,29 @@ const m = toolsByCategory.map(category => ({
             :component="BrandTwitter"
           />
         </n-button>
+
+        <router-link
+          v-if="!styleStore.isSmallScreen"
+          to="/about"
+          #="{ navigate, href }"
+          custom
+        >
+          <n-button
+            tag="a"
+            :href="href"
+            circle
+            quaternary
+            size="large"
+            aria-label="Home"
+            @click="navigate"
+          >
+            <n-icon
+              size="25"
+              :component="InfoCircle"
+            />
+          </n-button>
+        </router-link>
+
         <n-button
           v-if="!styleStore.isSmallScreen"
           size="large"
diff --git a/src/pages/About.vue b/src/pages/About.vue
new file mode 100644
index 00000000..b57befd9
--- /dev/null
+++ b/src/pages/About.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="about-page">
+    <n-h1>About</n-h1>
+    <n-p>
+      This wonderful website, made with ❤ by
+      <n-button
+        text
+        tag="a"
+        href="https://github.com/CorentinTh"
+        target="_blank"
+        rel="noopener"
+        type="primary"
+      >
+        Corentin Thomasset
+      </n-button>,
+      aggregates useful tools for developer and people working in IT. If you find it usefull, please fell free to share
+      it to people you think may find it usefull too and dont forget to pin it in your shortcut bar !
+    </n-p>
+    <n-p>
+      IT Tools is opensource (under the MIT license) and free, and will always be, but it cost me money to host and
+      renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
+      supporting by
+      <n-button
+        type="primary"
+        tag="a"
+        text
+        href="https://github.com/sponsors/CorentinTh"
+        rel="noopener"
+        target="_blank"
+      >
+        sponsoring me
+      </n-button>. 
+    </n-p>
+
+    <n-h2>Technologies</n-h2>
+    <n-p>
+      IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed by Vercel. Third party opensource libraries are used in some tools, you may find the complete list in the 
+      <n-button
+        type="primary"
+        tag="a"
+        text
+        href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
+        rel="noopener"
+        target="_blank"
+      >
+        package.json
+      </n-button> file of the repository.
+    </n-p>
+
+    <n-h2>Found a bug ? A tool is missing ?</n-h2>
+    <n-p>
+      If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a feature request in the 
+      <n-button
+        type="primary"
+        tag="a"
+        text
+        href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
+        rel="noopener"
+        target="_blank"
+      >
+        issues section 
+      </n-button> in the github repository.
+    </n-p>
+    <n-p>
+      And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
+      <n-button
+        type="primary"
+        tag="a"
+        text
+        href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
+        rel="noopener"
+        target="_blank"
+      >
+        issues section 
+      </n-button> in the github repository.
+    </n-p>
+  </div>
+</template>
+
+
+<style scoped lang="less">
+.about-page {
+  max-width: 600px;
+  margin: 50px auto;
+  box-sizing: border-box;
+
+  .n-h2 {
+    margin-bottom: 0px;
+  }
+
+  .n-p {
+    text-align: justify;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router.ts b/src/router.ts
index 1149f8b6..e4a0a932 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -17,6 +17,11 @@ const router = createRouter({
       name: 'home',
       component: HomePage,
     },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('./pages/About.vue'),
+    },
     ...toolsRoutes,
     ...toolsRedirectRoutes,
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },