From 03e915e30c50ebf32b6b8acf772432a30e9d6792 Mon Sep 17 00:00:00 2001
From: Julien <julien.le.coupanec@gmail.com>
Date: Mon, 10 Sep 2018 11:46:53 +0200
Subject: [PATCH] feat(cheatsheet): handle logic for share buttons

---
 components/BaseCheatsheet.vue   | 25 ++++++++++++++++++++++++-
 components/TheGithubButtons.vue |  3 ++-
 pages/index.vue                 |  1 -
 3 files changed, 26 insertions(+), 3 deletions(-)

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);
+    }
   }
 };
 </script>
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"