From ee74b6d469a7215d471d7354b37a3c7d47f63310 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Mon, 18 Oct 2021 13:49:45 +0200
Subject: [PATCH] feat(page): added /about page

---
 components/GithubContributors.vue |  51 ++++++++++++++
 pages/about.vue                   | 106 ++++++++++++++++++++++++------
 2 files changed, 138 insertions(+), 19 deletions(-)
 create mode 100644 components/GithubContributors.vue

diff --git a/components/GithubContributors.vue b/components/GithubContributors.vue
new file mode 100644
index 00000000..c9652fb9
--- /dev/null
+++ b/components/GithubContributors.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="github-contributor">
+    <v-list class="pa-0">
+      <v-list-item v-for="(contributor, i) in contributors" :key="i" :href="contributor.html_url" target="_blank" rel="noopener noreferrer">
+        <v-list-item-avatar>
+          <v-img :src="contributor.avatar_url" />
+        </v-list-item-avatar>
+        <v-list-item-content>
+          {{ contributor.login }}
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'nuxt-property-decorator'
+
+import axios from 'axios'
+const url = 'https://api.github.com/repos/CorentinTh/it-tools/contributors'
+
+interface IGithubContributors {
+    contributions: number;
+    // eslint-disable-next-line camelcase
+    avatar_url: string;
+    login: string;
+    type: 'User' | 'Bot'
+}
+
+@Component
+export default class GithubContributors extends Vue {
+  contributors: IGithubContributors[] = []
+  fetchOnServer = true
+
+  fetch() {
+    axios
+      .get(url)
+      .then(({data}: {data: IGithubContributors[]}) => {
+        this.contributors = data.filter(u => u.type === 'User').sort((a, b) => b.contributions - a.contributions)
+      })
+  }
+}
+</script>
+
+<style scoped lang="less">
+.github-contributor{
+    .v-list {
+        background: transparent !important;
+    }
+}
+</style>
diff --git a/pages/about.vue b/pages/about.vue
index 8c759e55..7f5c1db6 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,38 +1,106 @@
 <template>
-  <v-row justify="center" align="center">
-    <v-col cols="12" sm="12" md="8">
-      <h1>Yolo</h1>
+  <div class="about-page mt-10">
+    <v-row justify="center">
+      <v-col cols="12" sm="6" md="7" xl="5" class="about-section">
+        <v-card>
+          <v-card-title class="justify-center text-h4">
+            <div class="pt-5">
+              About
+            </div>
+          </v-card-title>
+          <v-card-text>
+            Welcome to IT-Tools! This wonderful website, originally created with ❤ by <a href="https://corentin-thomasset.fr" target="_blank" rel="noopener noreferrer">Corentin Thomasset</a>, aggregate a set of useful tools that every developer may need once in a while. And don't forget to add IT-Tools to your shortcut bar (press <code>Ctrl + D</code>).
 
-      <v-card>
-        <v-card-title>Changelog</v-card-title>
-        <v-card-text>
-          <div class="changelog" v-html="changelog" />
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+            <v-row class="mt-10">
+              <v-col cols="12" lg="6" md="12">
+                <h2>A tool is missing?</h2>
+                <p class="text-justify">
+                  If you need a tool that is not currently not present here, and you think can be
+                  relevant, you are welcome to submit a feature request <a
+                    href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >here</a>.
+                </p>
+              </v-col>
+              <v-col cols="12" lg="6" md="12">
+                <h2>Found a bug?</h2>
+                <p class="text-justify">
+                  If you found a bug, or something broken that doesn't work as expected, please fill a bug report here <a
+                    href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >here</a>.
+                </p>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+        <br>
+        <v-card>
+          <v-card-title class="justify-center text-h4">
+            <div class="pt-5">
+              Contributors
+            </div>
+          </v-card-title>
+          <v-card-text>
+            <GithubContributors />
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-card>
+          <v-card-title class="justify-center text-h4">
+            <div class="pt-5">
+              Changelog
+            </div>
+          </v-card-title>
+          <v-card-text>
+            <div class="changelog" v-html="changelog" />
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>
 import {Component, Vue} from 'nuxt-property-decorator'
+import GithubContributors from '@/components/GithubContributors.vue'
 import changelog from '@/CHANGELOG.md'
 
-@Component
+@Component({components: {GithubContributors}})
 export default class About extends Vue {
   changelog = changelog.replace(/<h1>(.*?)<\/p>/is, '') // Remove h1 and first paragraphe
 }
 </script>
 
 <style lang="less">
-.changelog {
-  h2 {
-    margin-top: 25px;
-    color: #ffffff;
+
+.about-page {
+  .about-section{
+    text-align: justify;
   }
 
-  h3 {
-    margin-top: 10px;
-    padding-left: 5px;
+  .changelog {
+    h2 {
+
+      &:not(:first-child) {
+        margin-top: 25px;
+      }
+
+      color: #ffffff;
+    }
+
+    h3 {
+      margin-top: 10px;
+      padding-left: 5px;
+    }
+
+    .v-card-title{
+      text-align: center;
+    }
   }
 }
+
 </style>