refactor: show contributors in settings

src/renderer/components/ModalSettings.vue

@@ -282,12 +282,18 @@
                   <div class="text-center">
                      <img src="../images/logo.svg" width="128">
                      <h4>{{ appName }}</h4>
-                     <p>
+                     <p class="mb-2">
                         {{ $t('word.version') }} {{ appVersion }}<br>
                         <a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
-                        <small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">Fabio Di Stasio</a></small><br>
-                        <small>{{ $t('message.madeWithJS') }}</small>
+                        <small>{{ $t('word.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
                      </p>
+                     <div class="mb-2">
+                        <small class="d-block text-uppercase">{{ $t('word.contributors') }}:</small>
+                        <div class="d-block py-1">
+                           <small v-for="(contributor, i) in otherContributors" :key="i">{{ i !== 0 ? ', ' : '' }}{{ contributor }}</small>
+                        </div>
+                        <small>{{ $t('message.madeWithJS') }}</small>
+                     </div>
                   </div>
                </div>
             </div>
@@ -313,6 +319,7 @@ export default {
    },
    data () {
       return {
+         appAuthor: 'Fabio Di Stasio',
          localLocale: null,
          localPageSize: null,
          localTimeout: null,
@@ -367,7 +374,8 @@ export default {
                   { code: 'vibrant_ink', name: 'Vibrant Ink' }
                ]
             }
-         ]
+         ],
+         contributors: process.env.APP_CONTRIBUTORS
       };
    },
    computed: {
@@ -417,6 +425,12 @@ GROUP BY
 ORDER BY
     employee.id ASC;
 `;
+      },
+      otherContributors () {
+         return this.contributors
+            .split(',')
+            .filter(c => !c.includes(this.appAuthor))
+            .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
       }
    },
    created () {

src/renderer/i18n/en-US.js

@@ -127,7 +127,8 @@ module.exports = {
       disable: 'Disable',
       commit: 'Commit',
       rollback: 'Rollback',
-      connectionString: 'Connection string'
+      connectionString: 'Connection string',
+      contributors: 'Contributors'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',

webpack.renderer.config.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -6,6 +7,11 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const ProgressPlugin = require('progress-webpack-plugin');
 
 const { dependencies, devDependencies, version } = require('./package.json');
+const { contributors } = JSON.parse(fs.readFileSync('./.all-contributorsrc', 'utf-8'));
+const parsedContributors = contributors.reduce((acc, c) => {
+   acc.push(c.name);
+   return acc;
+}, []).join(',');
 
 const externals = Object.keys(dependencies).concat(Object.keys(devDependencies));
 const isDevMode = process.env.NODE_ENV === 'development';
@@ -64,7 +70,8 @@ const config = {
       new VueLoaderPlugin(),
       new webpack.DefinePlugin({
          'process.env': {
-            PACKAGE_VERSION: `"${version}"`
+            PACKAGE_VERSION: `"${version}"`,
+            APP_CONTRIBUTORS: `"${parsedContributors}"`
          }
       })
    ],