feat(page): added /about page

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>

pages/about.vue

@@ -1,38 +1,106 @@
 <template>
-  <v-row justify="center" align="center">
+  <div class="about-page mt-10">
-    <v-col cols="12" sm="12" md="8">
+    <v-row justify="center">
-      <h1>Yolo</h1>
+      <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-row class="mt-10">
-        <v-card-title>Changelog</v-card-title>
+              <v-col cols="12" lg="6" md="12">
-        <v-card-text>
+                <h2>A tool is missing?</h2>
-          <div class="changelog" v-html="changelog" />
+                <p class="text-justify">
-        </v-card-text>
+                  If you need a tool that is not currently not present here, and you think can be
-      </v-card>
+                  relevant, you are welcome to submit a feature request <a
-    </v-col>
+                    href="//github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
-  </v-row>
+                    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 {
+.about-page {
-    margin-top: 25px;
+  .about-section{
-    color: #ffffff;
+    text-align: justify;
   }
 
-  h3 {
+  .changelog {
-    margin-top: 10px;
+    h2 {
-    padding-left: 5px;
+
+      &:not(:first-child) {
+        margin-top: 25px;
+      }
+
+      color: #ffffff;
+    }
+
+    h3 {
+      margin-top: 10px;
+      padding-left: 5px;
+    }
+
+    .v-card-title{
+      text-align: center;
+    }
   }
 }
+
 </style>