From ec0ed9f22b1ac1fbb6d0051f788afcf8bb5c26f8 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Fri, 10 Dec 2021 00:55:00 +0100
Subject: [PATCH] feat: social network share dropdown
---
components/app/AppShareModal.vue | 155 ++++++++++++++++++++++++++++++
components/page/PageContainer.vue | 15 ++-
libs/icons.js | 9 ++
nuxt.config.js | 15 +++
package.json | 1 +
pages/faq/_slug.vue | 2 +-
yarn.lock | 5 +
7 files changed, 199 insertions(+), 3 deletions(-)
create mode 100644 components/app/AppShareModal.vue
diff --git a/components/app/AppShareModal.vue b/components/app/AppShareModal.vue
new file mode 100644
index 00000000..134375a5
--- /dev/null
+++ b/components/app/AppShareModal.vue
@@ -0,0 +1,155 @@
+<template>
+ <div class="relative">
+ <t-dropdown
+ :show.sync="show"
+ toggle-on-focus
+ toggle-on-hover
+ :hide-on-leave-timeout="0"
+ :classes="{
+ dropdown:
+ 'absolute rounded-md shadow-lg dark:border-gray-500 border -top-3 -left-3 z-10 overflow-hidden w-40 bg-white dark:bg-gray-600 transition duration-150 ease-in-out',
+ }"
+ >
+ <button
+ slot="button"
+ class="relative flex items-center text-gray-500"
+ :class="show && 'z-20 text-gray-800 dark:text-gray-200'"
+ aria-label="Partager"
+ aria-haspopup="true"
+ >
+ <fa icon="share-alt" class="text-xl mr-2.5" />
+ <div>Partager</div>
+ </button>
+
+ <div class="mt-11 pt-0.5 pb-1">
+ <div class="border-t dark:border-gray-500 pt-1 mx-2"></div>
+
+ <ShareNetwork
+ v-for="network in networks"
+ :key="network.name"
+ :network="network.network"
+ :url="$config.siteUrl + document.path.replace(/^\/pages\//, '/')"
+ :title="document.title"
+ :description="document.description"
+ :quote="document.description"
+ :hashtags="$config.socialNetworksHashtags"
+ :twitter-user="$config.twitterUser"
+ :media="media"
+ class="
+ flex
+ items-center
+ pl-4
+ pr-2
+ py-1
+ text-gray-600
+ hover:text-gray-700 hover:bg-hover-light
+ dark:text-gray-200
+ "
+ >
+ <fa :icon="network.icon" :class="network.class" />
+ <span class="pl-2">
+ {{ network.name }}
+ </span>
+ </ShareNetwork>
+ </div>
+ </t-dropdown>
+ </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+ props: {
+ document: {
+ type: Object,
+ required: true,
+ },
+ media: {
+ type: String,
+ default: null,
+ },
+ },
+ setup() {
+ const show = ref(false)
+
+ return {
+ show,
+ networks: [
+ { network: 'email', name: 'Email', icon: 'envelope', class: 'email' },
+ {
+ network: 'facebook',
+ name: 'Facebook',
+ icon: ['fab', 'facebook'],
+ class: 'facebook',
+ },
+ {
+ network: 'twitter',
+ name: 'Twitter',
+ icon: ['fab', 'twitter'],
+ class: 'twitter',
+ },
+ {
+ network: 'linkedin',
+ name: 'Linkedin',
+ icon: ['fab', 'linkedin'],
+ class: 'linkedin',
+ },
+ {
+ network: 'reddit',
+ name: 'Reddit',
+ icon: ['fab', 'reddit'],
+ class: 'reddit',
+ },
+ {
+ network: 'skype',
+ name: 'Skype',
+ icon: ['fab', 'skype'],
+ class: 'skype',
+ },
+ { network: 'sms', name: 'SMS', icon: 'comment', class: 'sms' },
+ {
+ network: 'telegram',
+ name: 'Telegram',
+ icon: ['fab', 'telegram'],
+ class: 'telegram',
+ },
+ {
+ network: 'whatsapp',
+ name: 'Whatsapp',
+ icon: ['fab', 'whatsapp'],
+ class: 'whatsapp',
+ },
+ ],
+ }
+ },
+})
+</script>
+
+<style scoped>
+.email,
+.sms {
+ color: #444;
+}
+.twitter {
+ color: #1da1f2;
+}
+.facebook {
+ color: #3b5998;
+}
+.linkedin {
+ color: #0077b5;
+}
+.skype {
+ color: #00aff0;
+}
+.reddit {
+ color: #ff4500;
+}
+.telegram {
+ color: #0088cc;
+}
+.whatsapp {
+ color: #43d854;
+}
+</style>
diff --git a/components/page/PageContainer.vue b/components/page/PageContainer.vue
index e3a95d77..5c7a45c5 100644
--- a/components/page/PageContainer.vue
+++ b/components/page/PageContainer.vue
@@ -8,11 +8,22 @@
<nuxt-content :document="document" class="w-full prose dark:prose-dark" />
<div
- class="sticky h-full top-12 lg:w-1/4 lg:ml-12 mt-8 lg:mt-0 border-t pt-8 lg:pt-0 lg:border-none"
+ class="
+ sticky
+ h-full
+ top-12
+ lg:w-1/4 lg:ml-12
+ mt-8
+ lg:mt-0
+ border-t
+ pt-8
+ lg:pt-0 lg:border-none
+ "
>
<slot name="sidebar" />
- <PageEdit :document="document" class="w-full border-t my-10 pt-2" />
+ <AppShareModal :document="document" class="mb-2" />
+ <PageEdit :document="document" class="w-full border-t mb-8 pt-2" />
</div>
</div>
diff --git a/libs/icons.js b/libs/icons.js
index 62b317e9..04d8e30d 100644
--- a/libs/icons.js
+++ b/libs/icons.js
@@ -1,3 +1,7 @@
+/*
+Icons are here https://fontawesome.com/v5.15/icons?d=gallery&p=2
+*/
+
export default {
regular: ['faClock'],
solid: [
@@ -26,6 +30,9 @@ export default {
'faFont',
'faWheelchair',
'faCaretDown',
+ 'faShareAlt',
+ 'faEnvelope',
+ 'faComment',
],
brands: [
'faCreativeCommonsNcEu',
@@ -62,5 +69,7 @@ export default {
'faWhatsapp',
'faWikipediaW',
'faWordpress',
+ 'faLinkedin',
+ 'faSkype',
],
}
diff --git a/nuxt.config.js b/nuxt.config.js
index 3dc519f5..2c499418 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -4,11 +4,24 @@ import hooks from './libs/hooks.js'
import icons from './libs/icons.js'
export default {
+ // Deployment target
target: 'static',
+
+ // Add 404.html page
generate: {
fallback: true,
},
+ // Config
+ publicRuntimeConfig: {
+ siteUrl: process.env.SITE_URL || 'https://monnaie-libre.fr',
+ forumUrl: process.env.FORUM_URL || 'https://forum.monnaie-libre.fr',
+ mapUrl: process.env.MAP_URL || 'https://carte.monnaie-libre.fr',
+ socialNetworksHashtags:
+ process.env.SOCIAL_NETWORKS_HASHTAGS || 'MonnaieLibre,Äž1',
+ twitterUser: process.env.TWITTER_USER || 'monnaie_libre',
+ },
+
/**
* Global page headers (https://go.nuxtjs.dev/config-head)
*/
@@ -92,6 +105,8 @@ export default {
['nuxt-i18n', i18n],
// https://github.com/Chantouch/nuxt-clipboard
'nuxt-clipboard',
+ // https://github.com/nicolasbeauvais/vue-social-sharing
+ 'vue-social-sharing/nuxt',
],
// Axios module configuration (https://go.nuxtjs.dev/config-axios)
diff --git a/package.json b/package.json
index d9469fe1..67297fa9 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"remark-breaks": "^2.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"tailwindcss-dark-mode": "^1.1.7",
+ "vue-social-sharing": "^3.0.8",
"vue-tailwind": "^2.1.1"
},
"devDependencies": {
diff --git a/pages/faq/_slug.vue b/pages/faq/_slug.vue
index 27e18e8f..580d70af 100644
--- a/pages/faq/_slug.vue
+++ b/pages/faq/_slug.vue
@@ -13,7 +13,7 @@
<PageToc v-if="document.toc" :document="document" class="mb-8" />
- <PageRelated :document="document" path="faq" />
+ <PageRelated :document="document" path="faq" class="mb-8" />
</template>
</PageContainer>
</template>
diff --git a/yarn.lock b/yarn.lock
index ca5c4d1f..60d46bd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12508,6 +12508,11 @@ vue-server-renderer@^2.6.12:
serialize-javascript "^3.1.0"
source-map "0.5.6"
+vue-social-sharing@^3.0.8:
+ version "3.0.8"
+ resolved "https://registry.yarnpkg.com/vue-social-sharing/-/vue-social-sharing-3.0.8.tgz#5927c54a91b8cb4965dfa492c2ad4553591ba00c"
+ integrity sha512-56gOES9fq7kyzuW7+lVAKtoG9Wi4MGjIfMqXAFZv1QSwW00EN0X5zJDSQjZn1Y2cIU6DUG+1KfJB7r7nTuiISA==
+
vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"
--
GitLab