Fixing code duplication

2025-12-08 14:43:23 +00:00 · 2020-05-05 22:38:01 +02:00
parent 08355e7856
commit ce90e59c00
7 changed files with 165 additions and 67 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1827,6 +1827,11 @@
      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
      "dev": true
    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
    "accepts": {
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -3129,8 +3134,7 @@
    "commander": {
      "version": "2.20.3",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
    },
    "commondir": {
      "version": "1.0.1",
@@ -3208,6 +3212,15 @@
        "typedarray": "^0.0.6"
      }
    },
+    "config-chain": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
+      "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
+      "requires": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
    "connect-history-api-fallback": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
@@ -4207,6 +4220,33 @@
        "safer-buffer": "^2.1.0"
      }
    },
+    "editorconfig": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
+      "integrity": "sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==",
+      "requires": {
+        "commander": "^2.19.0",
+        "lru-cache": "^4.1.5",
+        "semver": "^5.6.0",
+        "sigmund": "^1.0.1"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.5",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+          "requires": {
+            "pseudomap": "^1.0.2",
+            "yallist": "^2.1.2"
+          }
+        },
+        "yallist": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+        }
+      }
+    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6382,6 +6422,11 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+    },
    "inquirer": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
@@ -6883,6 +6928,25 @@
        }
      }
    },
+    "js-beautify": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz",
+      "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==",
+      "requires": {
+        "config-chain": "^1.1.12",
+        "editorconfig": "^0.15.3",
+        "glob": "^7.1.3",
+        "mkdirp": "~1.0.3",
+        "nopt": "^4.0.3"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+        }
+      }
+    },
    "js-message": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -7755,6 +7819,15 @@
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
      "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ=="
    },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
    "normalize-package-data": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -8056,6 +8129,11 @@
      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
      "dev": true
    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
    "os-locale": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
@@ -8070,8 +8148,16 @@
    "os-tmpdir": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
    },
    "p-defer": {
      "version": "1.0.0",
@@ -9121,6 +9207,11 @@
      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
      "dev": true
    },
+    "proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk="
+    },
    "proxy-addr": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -9140,8 +9231,7 @@
    "pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
    },
    "psl": {
      "version": "1.8.0",
@@ -9759,8 +9849,7 @@
    "semver": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
    },
    "send": {
      "version": "0.17.1",
@@ -9960,6 +10049,11 @@
      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
      "dev": true
    },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA="
+    },
    "signal-exit": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
    "autoprefixer": "^9.7.6",
    "core-js": "^3.6.4",
    "highlight.js": "^10.0.2",
+    "js-beautify": "^1.11.0",
    "tailwindcss": "^1.4.4",
    "vue": "^2.6.11",
    "vue-clipboard2": "^0.3.1"
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -2,25 +2,25 @@ export default [
    {
        name: 'alert',
        components: [
-            { name: 'notification-Pop' }
+            { name: 'Notification Pop' }

        ],
    },
-    {
-        name: 'cards',
-        components: [
-            { name: 'article' },
-            { name: 'product' },
-            { name: 'product-evaluation' },
-            { name: 'testimonial' },
-            { name: 'user-details' },
-        ],
-    },
-    {
-        name: 'forms',
-        components: [
-            { name: 'login' },
-            { name: 'subscribe' },
-        ],
-    },
+    // {
+    //     name: 'cards',
+    //     components: [
+    //         { name: 'article' },
+    //         { name: 'product' },
+    //         { name: 'product-evaluation' },
+    //         { name: 'testimonial' },
+    //         { name: 'user-details' },
+    //     ],
+    // },
+    // {
+    //     name: 'forms',
+    //     components: [
+    //         { name: 'login' },
+    //         { name: 'subscribe' },
+    //     ],
+    // },
 ];
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -29,8 +29,11 @@
        <div class="w-full max-w-5xl mx-auto">
            <div class="mb-16" v-for="category in list" :key="category.name">
                <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
-                <component v-for="component in category.components" :key="component.name" :is="component.name"
-                           class="mb-10"></component>
+                <view-component v-for="component in category.components" :key="component.name" :name="component.name">
+                    <div slot="component">
+                        <component :is="component.name | toId" class="mb-10"></component>
+                    </div>
+                </view-component>
            </div>
        </div>
    </div>
@@ -46,6 +49,7 @@
    import Login from "./UI/Forms/Login";
    import Subscribe from "./UI/Forms/Subscribe";
    import Component from "../Models/Component";
+    import ViewComponent from "./Utilities/ViewComponent";

    export default {
        components: {
@@ -56,7 +60,8 @@
            Product,
            ProductEvaluation,
            Login,
-            Subscribe
+            Subscribe,
+            ViewComponent
        },
        data() {
            return {
--- a/src/components/UI/Alert/NotificationPop.vue
+++ b/src/components/UI/Alert/NotificationPop.vue
@@ -1,41 +1,26 @@
 <template>
-    <view-component :name="name" :code="code">
-        <div slot="component">
-            <div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
-                <div class="w-2 bg-gray-800"></div>
-                <div class="flex items-center px-2 py-3">
-                    <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
-                    <div class="mx-3">
-                        <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
-                        <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
-                    </div>
+    <div :id="name | toId">
+        <div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+            <div class="w-2 bg-gray-800"></div>
+            <div class="flex items-center px-2 py-3">
+                <img class="w-12 h-12 object-cover rounded-full"
+                     src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
+                <div class="mx-3">
+                    <h2 class="text-xl font-semibold text-gray-800">Jane Doe</h2>
+                    <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
                </div>
            </div>
-        </div>   
-    </view-component>
+        </div>
+    </div>
 </template>

 <script>
-import ViewComponent from "../../Utilities/ViewComponent";

-export default {
-    components: {
-        ViewComponent
-    },
-    data() {
-        return {
-            name: 'Notification Pop',
-            code: `<div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden">
-    <div class="w-2 bg-gray-800"></div>
-    <div class="flex items-center px-2 py-3">
-        <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
-        <div class="mx-3">
-            <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
-            <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
-        </div>
-    </div>
-</div>`
-        }
+    export default {
+        data() {
+            return {
+                name: 'Notification Pop',
+            }
+        },
    }
-}
 </script>
--- a/src/components/Utilities/ViewComponent.vue
+++ b/src/components/Utilities/ViewComponent.vue
@@ -33,10 +33,12 @@
 </template>

 <script>
-import CodeSnippet from "./CodeSnippet";
+
+    import CodeSnippet from "./CodeSnippet";
+    let beautify_html = require('js-beautify').html;

 export default {
-    props: ['name' , 'code'],
+    props: ['name'],

    components: {
        CodeSnippet
@@ -44,8 +46,15 @@ export default {

    data() {
        return {
-            viewCode: false
+            viewCode: false,
+            code: null
        }
-    }
+    },
+    created() {
+        this.$nextTick(() => {
+            let id = this.$options.filters.toId(this.name);
+            this.code = beautify_html(document.getElementById(id).innerHTML);
+        });
+    },
 }
 </script>
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,14 @@ import Vue from 'vue'
 import App from './App.vue'
 import VueClipboard from 'vue-clipboard2';

-Vue.config.productionTip = false
+Vue.config.productionTip = false;

 Vue.use(VueClipboard);

+Vue.filter('toId', (componentName) => {
+  return componentName.toLowerCase().replace(' ', '-')
+});
+
 new Vue({
  render: h => h(App),
-}).$mount('#app')
+}).$mount('#app');