1.2.1

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

CHANGELOG.md

@@ -1,7 +1,20 @@
 # Changelog
 All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.
+## Next
+- [fix] [UuidGenerator] added quantity validation rules
+- [refactor] better isInt checker
+
+## 1.2.0
+- [feat] [UuidGenerator] can generate multiple uuids 
+
+## 1.1.0
+- [feat] 404 route + page
+- [feat] changelog in the About page 
+- [feat] contributors list in the About page 
+- [fix] [ColorConverter] color picker now updates fields 
 
 ## 1.0.1
 - [chore] added changelog

README.md

@@ -22,7 +22,8 @@ Here is an unordered list of the current functionalities, and some that may come
 - [ ] Crontab friendly generator
 - [ ] Image format converter?
 - [ ] Image cropper 
-- [ ] 404 page
+- [ ] Image resizer 
+- [ ] HTTP client (w/ axios)
 
 You have an idea of a tool? Submit a feature request!
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -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",
@@ -12718,9 +12741,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "which": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "it-tools",
   "description": "",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -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/router.js

@@ -121,6 +121,11 @@ const routes = [
         path: '/about',
         name: 'About',
         component: () => import('./routes/About.vue')
+    },
+    {
+        path: '*',
+        name: '404',
+        component: () => import('./routes/NotFound.vue')
     }
 ]
 

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>

src/routes/NotFound.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="e404">
+        <div class="e404-image">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 100 511.999 300" xml:space="preserve">
+                <g><path d="M140.61,273.063h-5.956v-22.69c0-11.623-10.593-19.433-26.358-19.433s-26.357,7.81-26.357,19.433v22.69H65.571 l25.677-100.707c1.101-2.746,1.194-5.749,1.186-8.392l-0.001-0.284c0-15.632-22.966-20.737-30.881-20.737 c-10.132,0-18.414,5.148-22.723,14.123c-0.199,0.415-0.359,0.847-0.481,1.29C0,298.98,0,300.981,0,302.305 c0,12.096,8.537,20.876,20.297,20.876H33.97c4.2,0,7.604-3.405,7.604-7.604c0-4.199-3.404-7.604-7.604-7.604H20.297 c-3.184,0-4.887-1.694-5.072-5.04c1.954-8.608,23.256-87.252,37.593-139.831c1.785-3.288,4.721-4.954,8.734-4.954 c5.289,0,14.355,3.338,15.673,5.732l0.001,0.128c0.001,0.584,0.006,2.084-0.132,2.756c-0.178,0.397-0.321,0.809-0.43,1.231 L48.417,278.788c-0.58,2.275-0.076,4.69,1.365,6.544c1.44,1.854,3.656,2.938,6.004,2.938h33.757c4.2,0,7.604-3.405,7.604-7.604 v-30.294c0-2.528,5.766-4.225,11.149-4.225c5.481,0,11.15,1.581,11.15,4.225v30.294c0,4.199,3.404,7.604,7.604,7.604h13.56 c2.252,0,4.226,4.671,4.226,9.996c0,5.013-3.022,9.171-4.382,9.708H127.05c-4.2,0-7.604,3.405-7.604,7.604v34.045 c0,1.954-4.872,4.225-11.15,4.225c-6.467,0-11.149-2.523-11.149-4.225v-34.045c0-4.199-3.404-7.604-7.604-7.604H59.318 c-4.2,0-7.604,3.405-7.604,7.604c0,4.199,3.404,7.604,7.604,7.604h22.621v26.441c0,11.26,11.086,19.433,26.357,19.433 c15.52,0,26.358-7.991,26.358-19.433v-26.441h5.956c9.192,0,19.434-10.232,19.434-24.916 C160.043,283.663,151.87,273.063,140.61,273.063z"/></g>
+                <g><path d="M492.566,273.063h-5.956v-22.69c0-11.623-10.593-19.433-26.358-19.433s-26.357,7.81-26.357,19.433v22.69h-16.368 l25.679-100.708c1.1-2.745,1.193-5.75,1.185-8.393l-0.001-0.281c0-15.632-22.966-20.737-30.881-20.737 c-10.132,0-18.415,5.148-22.724,14.123c-0.199,0.415-0.359,0.847-0.481,1.29c0,0-4.869,17.852-11.125,40.898 c0,0.001,0,0.002-0.001,0.003l-7.879,29.071c-19.345,71.527-19.345,72.449-19.345,73.978c0,12.096,8.537,20.876,20.298,20.876 h61.64v26.441c0,11.26,11.085,19.433,26.357,19.433c15.52,0,26.358-7.991,26.358-19.433v-26.441h5.956 c9.192,0,19.434-10.232,19.434-24.915C512,283.663,503.826,273.063,492.566,273.063z M492.41,307.974h-13.404 c-4.2,0-7.604,3.405-7.604,7.604v34.045c0,1.954-4.872,4.225-11.15,4.225c-6.467,0-11.149-2.523-11.149-4.225v-34.045 c0-4.199-3.404-7.604-7.604-7.604h-69.244c-3.183,0-4.887-1.694-5.073-5.037c0.677-2.966,4.201-16.655,18.801-70.634l7.877-29.064 c5.504-20.276,9.934-36.53,10.916-40.133c1.785-3.288,4.721-4.954,8.735-4.954c5.289,0,14.354,3.338,15.673,5.732l0.001,0.124 c0.001,0.585,0.006,2.09-0.133,2.762c-0.177,0.396-0.32,0.808-0.429,1.23l-28.249,110.79c-0.58,2.275-0.076,4.69,1.365,6.544 c1.44,1.854,3.656,2.938,6.004,2.938H441.5c4.2,0,7.604-3.405,7.604-7.604v-30.294c0-2.528,5.766-4.225,11.149-4.225 c5.481,0,11.15,1.581,11.15,4.225v30.294c0,4.199,3.404,7.604,7.604,7.604h13.56c2.252,0,4.226,4.671,4.226,9.996 C496.792,303.281,493.769,307.437,492.41,307.974z"/></g>
+                <g><path d="M330.892,206.939c-2.512-3.363-7.279-4.051-10.642-1.536c-3.362,2.515-4.05,7.281-1.535,10.643 c10.168,13.597,15.542,29.786,15.542,46.818c0,43.149-35.104,78.252-78.252,78.252c-43.15,0-78.253-35.104-78.253-78.252 c0-43.149,35.104-78.253,78.253-78.253c17.152,0,33.434,5.444,47.083,15.744c3.353,2.53,8.122,1.863,10.651-1.49 c2.529-3.352,1.862-8.12-1.49-10.65c-16.311-12.307-35.76-18.812-56.245-18.812c-51.534,0-93.461,41.927-93.461,93.461 s41.927,93.46,93.461,93.46c51.534,0,93.46-41.926,93.46-93.46C349.464,242.523,343.042,223.185,330.892,206.939z"/></g>
+                <g><path d="M296.624,292.726l-29.863-29.863L296.624,233c2.968-2.969,2.968-7.783-0.002-10.753c-2.971-2.97-7.784-2.97-10.754,0 l-29.863,29.863l-29.863-29.863c-2.971-2.97-7.784-2.97-10.754,0c-2.97,2.97-2.97,7.784,0,10.753l29.863,29.863l-29.863,29.863 c-2.97,2.97-2.97,7.784,0,10.753c1.485,1.484,3.432,2.227,5.378,2.227c1.946,0,3.892-0.742,5.377-2.227l29.863-29.863 l29.863,29.863c1.485,1.484,3.432,2.227,5.377,2.227s3.892-0.742,5.378-2.227C299.593,300.51,299.593,295.695,296.624,292.726z"/></g>
+            </svg>
+        </div>
+        <div class="separator"></div>
+        <div class="e404-description">
+            Page not found, sorry.
+        </div>
+        <v-btn color="primary" @click="$router.go(-1)">Back</v-btn>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "404.vue"
+    }
+</script>
+
+<style scoped lang="less">
+    .e404 {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .e404-image {
+            width: 200px;
+
+            svg {
+                fill: #ffffff;
+                opacity: 0.3;
+            }
+        }
+
+        .separator {
+            width: 60px;
+            height: 3px;
+            border-radius: 5px;
+            background-color: #4CAF50;
+        }
+
+        .e404-description {
+            font-size: 30px;
+            opacity: 0.9;
+            margin: 15px 0;
+        }
+    }
+</style>

src/routes/tools/ColorConverter.vue

@@ -11,6 +11,7 @@
                             hide-inputs
                             mode="rgba"
                             v-model="rgbPicker"
+                            @input="(v) => updateColors(v, 'picker')"
                     />
                 </v-col>
                 <v-col cols="12" sm="6" align="center">
@@ -116,7 +117,7 @@
                 this.keyword = convert.rgb.keyword(r, g, b);
             },
             updateColors(value, fromType) {
-                if (this.$refs[fromType].validate()) {
+                if (fromType === 'picker' || this.$refs[fromType].validate()) {
                     if (fromType === 'rgb') {
                         const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
                         this.rgbPicker = {r, g, b}
@@ -150,6 +151,13 @@
                         } catch (ignored) {
                             // ignored
                         }
+                    } else if (fromType === 'picker') {
+                        const {r, g, b} = value;
+
+                        this.setRGB(r, g, b);
+                        this.setHEX(r, g, b);
+                        this.setHSL(r, g, b);
+                        this.setKeyword(r, g, b);
                     }
                 }
             }

src/routes/tools/UuidGenerator.vue

@@ -3,27 +3,52 @@
         <v-card-title>Uuid v4 generator</v-card-title>
 
         <v-card-text>
-            <v-text-field outlined v-model="token" class="centered-input"/>
+            <v-text-field
+                    outlined
+                    v-model="quantity"
+                    ref="quantity"
+                    type="number"
+                    label="Quantity"
+                    dense
+                    class="quantity"
+                    :rules="rules.quantity"
+            />
+            <v-textarea outlined v-model="token" class="centered-input" :rows="quantity <= 10 ? quantity : 10"
+                        readonly/>
 
             <div class="text-center">
                 <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn>
-                <v-btn @click="copyToken()" depressed>Copy token</v-btn>
+                <v-btn @click="copyToken()" depressed>Copy uuid{{ quantity > 1 ? 's' : ''}}</v-btn>
             </div>
         </v-card-text>
     </v-card>
 </template>
 
 <script>
-    import {copyToClipboard} from "../../utils/helpers";
+    import {copyToClipboard, isInt} from "../../utils/helpers";
 
     const noop = () => {
     };
 
+    const generateUuid = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+
     export default {
         name: "UuidGenerator",
         data: () => ({
-            refreshBool: true
+            refreshBool: true,
+            quantity: 1,
+            rules: {
+                quantity: [
+                    v => !!v || 'Quantity is required',
+                    v => (v > 0 && v <= 50 ) || 'Quantity should be > 0 and <= 50',
+                    v => isInt(v) || 'Quantity should be an integer'
+                ]
+            },
+            isMounted:false
         }),
+        mounted() {
+            this.isMounted = true;
+        },
         methods: {
             copyToken() {
                 copyToClipboard(this.token);
@@ -32,16 +57,32 @@
         },
         computed: {
             token() {
-                if (this.refreshBool) noop(); // To force recomputation
+                if (this.isMounted && this.$refs.quantity.validate()) {
+                    if (this.refreshBool) noop(); // To force recomputation
 
-                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+                    return Array.from({length: this.quantity}, generateUuid).join('\n');
+                } else {
+                    return '';
+                }
             }
         }
     }
 </script>
 
-<style scoped>
-    ::v-deep .centered-input input {
-        text-align: center
+<style scoped lang="less">
+    .quantity {
+        width: 100px;
+        margin: auto;
+        text-align: center;
+
+        ::v-deep input {
+            text-align: center;
+        }
+    }
+
+    ::v-deep .centered-input textarea {
+        text-align: center;
+        margin-top: 13px !important;
+        font-family: Consolas, monospace;
     }
 </style>

src/utils/helpers.js

@@ -25,7 +25,7 @@ const formatBytes = (bytes, decimals = 2) => {
 }
 
 const isInt = (value) => {
-    return !isNaN(value) && ((x) => (x | 0) === x)(parseFloat(value))
+    return Number.isInteger(value);
 }
 
 export {

vue.config.js

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