diff --git a/components/BaseCheatsheet.vue b/components/BaseCheatsheet.vue index 43d9282..82ea570 100644 --- a/components/BaseCheatsheet.vue +++ b/components/BaseCheatsheet.vue @@ -24,6 +24,7 @@ .c-base-cheatsheet__share base-share( v-for="network in networks" + @click="onShare" :key="network" :network="network" class="c-base-cheatsheet__network" @@ -57,8 +58,30 @@ export default { baseUrl: process.env.baseUrl, // --> COMPONENTS <-- - networks: ["Slack", "Messenger", "Telegram", "Twitter", "LinkedIn"] + networks: ["Telegram", "Twitter", "LinkedIn"] }; + }, + + methods: { + onShare(network) { + const link = this.link; + const socialNetwork = network.toLowerCase(); + const technology = this.name; + let url = ""; + let message = encodeURIComponent( + `Check this awesome cheatsheet about ${technology}: ${link} #${technology.toLowerCase()} #cheatsheet` + ); + + if (socialNetwork === "telegram") { + url = `https://telegram.me/share/url?url=${link}&text=${message}`; + } else if (socialNetwork === "twitter") { + url = `https://twitter.com/intent/tweet?text=${message}`; + } else if (socialNetwork === "linkedin") { + url = `https://www.linkedin.com/shareArticle?mini=true&url=${link}&source=LinkedIn`; + } + + window.open(url); + } } }; diff --git a/components/TheGithubButtons.vue b/components/TheGithubButtons.vue index da8edbc..6964e4e 100644 --- a/components/TheGithubButtons.vue +++ b/components/TheGithubButtons.vue @@ -70,7 +70,7 @@ $c: ".c-the-github-buttons"; #{$c} { #{$c}__wrapper { display: inline-block; - margin-bottom: 20px; + margin-bottom: 10px; width: 100%; #{$c}__button { @@ -103,6 +103,7 @@ $c: ".c-the-github-buttons"; #{$c} { display: flex; justify-content: center; + margin-bottom: 0; #{$c}__wrapper { width: initial; diff --git a/pages/index.vue b/pages/index.vue index 06115ec..5244b07 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -24,7 +24,6 @@ user="LeCoupa" class="c-index__github-buttons" ) - section( v-for="(category, index) in categories" :key="category.name"