feat: contributors + changelogs in about page

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

package-lock.json

@@ -10051,6 +10051,29 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.1.tgz",
+      "integrity": "sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.6.5"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",
+    "raw-loader": "^4.0.1",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-vuetify": "~2.0.5",

src/components/GithubContributors.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="github-contributor">
+
+        <div v-if="loading" class="text-center pt-3 pb-3">
+            <v-progress-circular indeterminate />
+        </div>
+
+        <v-list v-else class="pa-0">
+            <v-list-item v-for="(contributor, i) in contributors" :key="i" :href="contributor.html_url">
+                <v-list-item-avatar>
+                    <v-img :src="contributor.avatar_url"></v-img>
+                </v-list-item-avatar>
+                <v-list-item-content>
+                    {{contributor.login}}
+                </v-list-item-content>
+            </v-list-item>
+        </v-list>
+    </div>
+</template>
+
+<script>
+    const baseUrl = 'https://api.github.com/repos/$repo$/contributors'
+    import axios from 'axios'
+
+    export default {
+        name: "GithubContributors",
+        props: ['repo'],
+        data: () => ({
+            contributors: [],
+            loading: true,
+            hasError: false
+        }),
+        mounted() {
+            const url = baseUrl.replace('$repo$', this.repo)
+
+            axios
+                .get(url)
+                .then(({data}) => {
+                    this.contributors = data.sort((a, b) => a.contributions - b.contributions)
+                    this.loading = false
+                })
+                .catch(() => this.hasError = true)
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/routes/About.vue

@@ -1,19 +1,73 @@
 <template>
-  <v-card class="single-card">
-    <v-card-title>About</v-card-title>
-    <v-card-text>
-      <Abstract />
-    </v-card-text>
-  </v-card>
+    <div>
+        <v-row justify="center" align="center">
+            <v-col cols="12" xl="12">
+                <v-card class="single-card">
+                    <v-card-title>About</v-card-title>
+                    <v-card-text>
+                        <Abstract/>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+
+        </v-row>
+        <v-row justify="center" >
+            <v-col cols="12" md="5" sm="12">
+                <v-card>
+                    <v-card-title>Contributors</v-card-title>
+                    <github-contributors repo="CorentinTh/it-tools"/>
+                </v-card>
+            </v-col>
+            <v-col cols="12" md="7" sm="12">
+                <v-card>
+                    <v-card-title>Changelog</v-card-title>
+                    <v-card-text>
+                        <div v-for="(section, i) in changelog" :key="i">
+                            <h2>{{section.title}}</h2>
+                            <ul>
+                                <li v-for="(log, i) in section.logs" :key="i"> {{log}}</li>
+                            </ul>
+                            <br>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-col>
+        </v-row>
+    </div>
 </template>
-
 <script>
-  import Abstract from "../components/Abstract";
+    import Abstract from "../components/Abstract";
+    import GithubContributors from "../components/GithubContributors";
+    import changelog from "../../CHANGELOG.md"
 
-  export default {
-    name: "About",
-    components : {
-      Abstract
-    },
-  }
+    export default {
+        name: "About",
+        data: () => ({
+            changelog: []
+        }),
+        mounted() {
+
+            this.changelog = ('##' + changelog.replace(/^(.*?)##/s, ''))
+                .split('\n')
+                .filter(v => v !== '')
+                .reduce((sections, v) => {
+                    v = v.trim();
+                    if(v.startsWith('##')){
+                        sections.push({
+                            title: v.replace(/^##/, '').trim(),
+                            logs: []
+                        })
+                    }else {
+                        sections.slice(-1)[0].logs.push(v.replace(/^-/, '').trim())
+                    }
+
+                    return sections
+                }, []);
+            console.log(this.changelog);
+        },
+        components: {
+            Abstract,
+            GithubContributors
+        },
+    }
 </script>

vue.config.js

@@ -6,6 +6,11 @@ module.exports = {
   ],
   configureWebpack: () => {
     return {
+      module:{
+        rules: [
+          { test: /\.md$/, use: 'raw-loader' }
+        ]
+      },
       plugins: [
         new webpack.DefinePlugin({
           'process.env': {