#3 przyciski do szerowania

components/Footer.vue

@@ -13,5 +13,8 @@
             na licencji
             <a href="https://mit.avris.it" target="_blank" rel="noopener">MIT</a>.
         </section>
+        <section class="text-center small">
+            <Share/>
+        </section>
     </footer>
 </template>

components/Share.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="shareon">
+        <a v-for="network in networks" :href="link(network)" target="_blank" rel="noopener" :class="network"></a>
+    </div>
+</template>
+
+<script>
+    // adapted from https://shareon.js.org (MIT)
+    // can't use from yarn, because window.onload conflicts with SSR
+
+    const NETWORKS = {
+        facebook: function (d) { return "https://www.facebook.com/sharer/sharer.php?u=" + d.url; },
+        linkedin: function (d) { return "https://www.linkedin.com/shareArticle?mini=true&url=" + d.url + "&title=" + d.title; },
+        messenger: function (d) { return "https://www.facebook.com/dialog/send?app_id=3619024578167617&link=" + d.url + "&redirect_uri=" + d.url; },
+        odnoklassniki: function (d) { return "https://connect.ok.ru/offer?url=" + d.url + "&title=" + d.title + (d.extra.media ? "&imageUrl=" + d.extra.media : ''); },
+        pinterest: function (d) { return "https://pinterest.com/pin/create/button/?url=" + d.url + "&description=" + d.title + (d.extra.media ? "&media=" + d.extra.media : ''); },
+        pocket: function (d) { return "https://getpocket.com/edit.php?url=" + d.url; },
+        reddit: function (d) { return "https://www.reddit.com/submit?title=" + d.title + "&url=" + d.url; },
+        telegram: function (d) { return "https://telegram.me/share/url?url=" + d.url + (d.extra.text ? "&text=" + d.extra.text : ''); },
+        twitter: function (d) { return "https://twitter.com/intent/tweet?url=" + d.url + "&text=" + d.title + (d.extra.via ? "&via=" + d.extra.via : ''); },
+        viber: function (d) { return "viber://forward?text=" + d.title + "%0D%0A" + d.url + (d.extra.text ? "%0D%0A%0D%0A" + d.extra.text : ''); },
+        vkontakte: function (d) { return "https://vk.com/share.php?url=" + d.url + "&title=" + d.title + (d.extra.media ? "&image=" + d.extra.media : ''); },
+        whatsapp: function (d) { return "whatsapp://send?text=" + d.title + "%0D%0A" + d.url + (d.extra.text ? "%0D%0A%0D%0A" + d.extra.text : ''); },
+    };
+
+    export default {
+        props: {
+            title: { default: 'Zaimki.pl' },
+            networks: { default: ['twitter', 'reddit', 'facebook', 'telegram', 'whatsapp', 'messenger'] },
+        },
+        data() {
+            return {
+                preset: {
+                    url: process.env.baseUrl + this.$route.path,
+                    title: this.title,
+                    extra: {
+                        media: '',
+                        text: '',
+                        via: '',
+                    },
+                }
+            };
+        },
+        methods: {
+            link(network) {
+                return NETWORKS[network](this.preset);
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import 'shareon/dist/shareon.min.css';
+</style>

package.json

@@ -13,6 +13,7 @@
     "@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": {

pages/_.vue

@@ -36,6 +36,10 @@
             </ul>
         </section>
 
+        <section>
+            <Share :title="'Moje zaimki to: ' + selectedTemplate.name()"/>
+        </section>
+
         <section v-if="templates[selectedTemplate.pronoun()] && templates[selectedTemplate.pronoun()].sources.length">
             <Literature :sources="templates[selectedTemplate.pronoun()].sources"/>
         </section>

pages/literatura.vue

@@ -8,6 +8,10 @@
 
         <LiteratureMenu all/>
 
+        <section>
+            <Share title="Niebinarna polszczyzna w literaturze, prasie, filmach i serialach"/>
+        </section>
+
         <div v-for="template in templates">
             <template v-if="template.sources.length">
                 <h2 v-if="template.name" class="h4">

yarn.lock

@@ -7049,6 +7049,11 @@ 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"