#25 replace dependency on shareon

assets/style.scss

@@ -54,7 +54,7 @@ $container-max-widths: (
 $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
 @import "~@fortawesome/fontawesome-pro/scss/fontawesome";
 @import "~@fortawesome/fontawesome-pro/scss/light";
-//@import "~@fortawesome/fontawesome-pro/scss/brands";
+@import "~@fortawesome/fontawesome-pro/scss/brands";
 
 html {
     scroll-behavior: smooth;

components/Icon.vue

@@ -1,11 +1,12 @@
 <template>
-    <span :class="['fal', 'fa-' + v, 'fa-fw']"></span>
+    <span :class="['fa' + set, 'fa-' + v, 'fa-fw']"></span>
 </template>
 
 <script>
     export default {
         props: {
             v: { required: true },
+            set: { default: 'l' },
         }
     }
 </script>

components/Share.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="shareon">
-        <a v-for="network in networks" :href="link(network)" target="_blank" rel="noopener" :class="network"></a>
+        <a v-for="network in networks" :href="link(network)" target="_blank" rel="noopener" class="btn-square m-1" :style="'background-color: ' + colour(network)">
+            <Icon :v="icon(network)" set="b"/>
+        </a>
     </div>
 </template>
 
@@ -23,6 +25,27 @@
         whatsapp: function (d) { return "whatsapp://send?text=" + d.title + "%0D%0A" + d.url + (d.extra.text ? "%0D%0A%0D%0A" + d.extra.text : ''); },
     };
 
+    const COLOURS = {
+        facebook: '#1877F2',
+        linkedin: '#2867B2',
+        messenger: '#0099FF',
+        odnoklassniki: '#EE8208',
+        pinterest: '#e60023',
+        pocket: '#EF4154',
+        reddit: '#ff4500',
+        telegram: '#179CDE',
+        twitter: '#1da1f2',
+        viber: '#7360f2',
+        vkontakte: '#4680C2',
+        whatsapp: '#25D366',
+    }
+
+    const ICONS = {
+        messenger: 'facebook-messenger',
+        reddit: 'reddit-alien',
+        telegram: 'telegram-plane',
+    }
+
     export default {
         props: {
             title: { default: 'Zaimki.pl' },
@@ -44,11 +67,42 @@
         methods: {
             link(network) {
                 return NETWORKS[network](this.preset);
+            },
+            colour(network) {
+                return COLOURS[network];
+            },
+            icon(network) {
+                return ICONS[network] || network;
             }
         }
     }
 </script>
 
 <style lang="scss" scoped>
-    @import 'shareon/dist/shareon.min.css';
+    @import "assets/style";
+    $size: 2.2rem;
+
+    .btn-square {
+        display: inline-grid;
+        place-items: center;
+
+        height: $size;
+        min-width: $size;
+
+        background-color: #ccc;
+        border-radius: $border-radius;
+        border: none;
+        color: white;
+        line-height: 1.5;
+        font-size: $size * 0.6;
+        transition: opacity 300ms ease;
+
+        &:hover {
+            border: none;
+            cursor: pointer;
+            opacity: .7;
+            color: white;
+            text-decoration: none;
+        }
+    }
 </style>

package.json

@@ -13,7 +13,6 @@
     "@nuxtjs/pwa": "^3.0.0-beta.20",
     "canvas": "^2.6.1",
     "nuxt": "^2.13.0",
-    "shareon": "^1.2.1",
     "vue-matomo": "^3.13.5-0"
   },
   "devDependencies": {

yarn.lock

@@ -7062,11 +7062,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shareon@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shareon/-/shareon-1.2.1.tgz#3094bc912948c9cf6339ba0f73f8318313c7026c"
-  integrity sha512-lVRvjIdgVqE/8SjH3qIrs1FgvDBpWGPkgu1DGuFuoByokf934xR3qSMY017X1+GT6XNBJ4/HnYzX7ndqulPVTA==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"