diff --git a/package.json b/package.json index fd59bae771922577be6c91cc7b82c2ee6b57fd9e..fe399a128885660a8449e8397f803eb54b482f08 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,10 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-brands-svg-icons": "^5.15.3", + "@fortawesome/free-solid-svg-icons": "^5.15.3", + "@fortawesome/vue-fontawesome": "^2.0.2", "axios": "^0.19.2", "core-js": "^3.6.5", "debounce": "^1.2.1", @@ -17,6 +21,7 @@ "vue-material-design-icons": "^4.11.0", "vue-plausible": "^1.1.4", "vue-router": "^3.5.1", + "vue-social-sharing": "^3.0.8", "vuetify": "^2.4.8" }, "devDependencies": { diff --git a/src/components/Article.vue b/src/components/Article.vue index 87845e341afa4b89729fdf6f6808b5944b0d9e90..7dafe6410fd911b5d1c42b562453963e5016c577 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -32,9 +32,36 @@ </router-link> </div> </div> - </article> + <div class="share" v-if="webShareApiSupported"> + <button @click="shareViaWebShare"> + Del ordet <font-awesome-icon icon="share-alt-square" size = "lg"/> + </button> + </div> + <div class="share" v-else> + <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' @@ -74,13 +101,20 @@ export default { props: { article: Object }, - computed: { + computed: { + webShareApiSupported() { + return navigator.share + }, link_to_self: function() { return { ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma), article: this.article } }, + share_link: function() { + let host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no' : 'https://' + window.location.host + return host + "/" + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) + }, dictionary: function() { return this.article.dictionary }, @@ -104,6 +138,13 @@ export default { Header }, methods: { + shareViaWebShare() { + navigator.share({ + title: 'Title to be shared', + text: 'Text to be shared', + url: 'URL to be shared' + }) + }, article_link_click: function(item) { this.$emit('article-click', item) }, @@ -141,6 +182,15 @@ h3 { font-variant: small-caps; } +div.share { + color: #560027; + padding-top: 24px; +} + +.share-button { + padding-right: 4px; +} + section.etymology > h3, section.pronunciation > h3 { display: inline; font-size: 14px; diff --git a/src/main.js b/src/main.js index 91b1778abae64f4b4612682364f60e1bdf09187f..fd6606f43131e953981b0d69ca94a3b6b877d429 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,18 @@ 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 { faShareAltSquare } from '@fortawesome/free-solid-svg-icons' +import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare) +Vue.component('font-awesome-icon', FontAwesomeIcon); + + Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VuePlausible, {