gradient instagram icon. fixed inline svg multi

shunwman · Jan 9, 2022 · aeb7423 · aeb7423
1 parent f54ecd3
commit aeb7423
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 16 deletions.
diff --git a/assets/icons/instagram.svg b/assets/icons/instagram.svg
diff --git a/components/Action.vue b/components/Action.vue
@@ -21,7 +21,7 @@
       <div
         class="w-6 h-6"
         :class="name == 'secondaryActions' ? null : 'action'"
-        v-html="require(`~/assets/icons/${item.icon}.svg?include`)"
+        v-html="getSVG(item)"
       ></div>
     </div>
     <div class="w-full">
@@ -50,8 +50,10 @@
 </template>
 
 <script>
+import utils from '@/mixins/utils'
 export default {
   props: ['name', 'item', 'index', 'type', 'buttonBg', 'removeAction'],
+  mixins: [utils],
   mounted() {
     this.$refs.input.focus()
   },

diff --git a/components/Preview.vue b/components/Preview.vue
@@ -19,7 +19,7 @@
             name="author"
             content="EnBizCard - An Open-Source Digital Business Card Generator"
           />
-          <meta name="url" content="https://enbizcard.vercel.app/" />
+          <meta name="url" content="https://enbizcard.vishnuraghav.com/" />
           <meta name="designer" content="Vishnu Raghav" />
           <meta
             property="og:title"
@@ -252,12 +252,7 @@
                     :style="{ backgroundColor: item.color }"
                     :aria-label="item.name"
                   >
-                    <div
-                      class="icon"
-                      v-html="
-                        require(`~/assets/icons/${item.icon}.svg?include`)
-                      "
-                    ></div>
+                    <div class="icon" v-html="getSVG(item)"></div>
                   </a>
                 </div>
               </div>
@@ -341,7 +336,7 @@
             Created with
             <a
               class="textColor"
-              href="https://enbizcard.vercel.app/"
+              href="https://enbizcard.vishnuraghav.com/"
               target="_blank"
               rel="noopener noreferrer"
               >EnBizCard</a
@@ -357,6 +352,7 @@
 import MediaPlayer from './MediaPlayer'
 import DocumentDownloader from './DocumentDownloader'
 import ProductShowcase from './ProductShowcase'
+import utils from '@/mixins/utils'
 import { mapState } from 'vuex'
 
 export default {
@@ -376,6 +372,7 @@ export default {
     'hasLightBG',
     'pubKeyIsValid',
   ],
+  mixins: [utils],
   components: {
     MediaPlayer,
     DocumentDownloader,

diff --git a/mixins/utils.js b/mixins/utils.js
@@ -0,0 +1,22 @@
+export default {
+  methods: {
+    randomStr(len) {
+      let c = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+      let s = ''
+      for (let i = 0; i < len; i++)
+        s += c.charAt(Math.floor(Math.random() * c.length))
+      return s
+    },
+    getSVG(item) {
+      let svg = require(`~/assets/icons/${item.icon}.svg?include`)
+      if (item.gradientIcon) {
+        for (let i = 1; i < 10; i++) {
+          let regex = new RegExp(`gradient${i}`, 'g')
+          if (regex.test(svg)) svg = svg.replace(regex, this.randomStr(7))
+          else break
+        }
+        return svg
+      } else return svg
+    },
+  },
+}
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -207,7 +207,6 @@ export default {
     optipng: {
       optimizationLevel: 7,
     },
-    svgo: {},
   },
   /*
    ** Nuxt.js modules

diff --git a/pages/index.vue b/pages/index.vue
@@ -891,7 +891,9 @@ export default {
             href: 'https://instagram.com/',
             placeholder: 'username',
             value: null,
-            color: '#c32aa3',
+            color: '#ffffff',
+            light: 1,
+            gradientIcon: 1,
             label: 'Instagram username',
           },
           {
@@ -947,11 +949,11 @@ export default {
           {
             name: 'LinkedIn',
             icon: 'linkedin',
-            href: 'https://linkedin.com/in/',
-            placeholder: 'username',
+            href: 'https://linkedin.com/',
+            placeholder: 'in/username or company/companyname',
             value: null,
             color: '#0077b5',
-            label: 'Linkedin username',
+            label: 'Linkedin username or companyname',
           },
           {
             name: 'YouTube',
@@ -1191,6 +1193,15 @@ export default {
             light: 1,
             label: 'Cash App username',
           },
+          {
+            name: 'Siilo',
+            icon: 'siilo',
+            href: 'https://app.siilo.com/qr/',
+            placeholder: 'userid',
+            value: null,
+            color: '#17233b',
+            label: 'Siilo userid',
+          },
         ],
       },
       featured: [
@@ -1527,7 +1538,7 @@ export default {
           })
           let guide = new Blob(
             [
-              '<html><head><meta http-equiv="refresh" content="0; url=https://enbizcard.vercel.app/hosting-guide" /></head></html>',
+              '<html><head><meta http-equiv="refresh" content="0; url=https://enbizcard.vishnuraghav.com/hosting-guide" /></head></html>',
             ],
             {
               type: 'text/html',