Add social media sharing

.gitlab-ci.yml

@@ -12,6 +12,9 @@ build-dev:
   script:
     - npm install --progress=false
     - npm run build -- --mode dev_server
+    - npm install --save vue-social-sharing
+    - npm install --save @fortawesome/vue-fontawesome@latest
+    - npm install --save @fortawesome/free-brands-svg-icons
   artifacts:
     expire_in: 1 week
     paths:

src/components/Article.vue

@@ -32,9 +32,31 @@
         </router-link>
       </div>
     </div>
-  </article>
+    <div class="share">
+        <button class="share-button">
+            <ShareNetwork network="facebook"
+                :url="share_link"
+                title="TITLE"
+                description="DESCRIPTION"
+                quote="QUOTE">
+                <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" />
+            </ShareNetwork>
+        </button>
+        <button class="share-button">
+            <ShareNetwork
+                network="twitter"
+                :url="share_link"
+                title="TITLE"
+                description="DESCRIPTION"
+                hashtags="Ordbøkene">
+                <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" />
+            </ShareNetwork>
+        </button>
+    </div>
+</article>
 </template>
 
+<script src="/dist/vue-social-sharing.js"></script>
 <script>
 import DefElement from './DefElement.vue'
 import Definition from './Definition.vue'
@@ -81,6 +103,9 @@ export default {
         article: this.article
       }
     },
+    share_link: function() {
+      return 'https://beta.ordbok.uib.no/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
+    },
     dictionary: function() {
       return this.article.dictionary
     },
@@ -141,6 +166,16 @@ h3 {
   font-variant: small-caps;
 }
 
+div.share {
+  color: #560027;
+  padding-top: 24px;
+}
+
+.share-button {
+  padding-right: 4px;
+  display: inline;
+}
+
 section.etymology > h3, section.pronunciation > h3 {
   display: inline;
   font-size: 14px;

src/main.js

@@ -7,6 +7,17 @@ import VueRouter from 'vue-router'
 import { VuePlausible } from 'vue-plausible'
 import vuetify from './plugins/vuetify'
 
+import VueSocialSharing from 'vue-social-sharing'
+Vue.use(VueSocialSharing);
+
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+library.add(faFacebookSquare, faTwitterSquare)
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+
+
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(VuePlausible, {