From cc2474323c2c08cc40b6f8e60c2db7f38c11d783 Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Mon, 28 Jun 2021 10:20:05 +0200
Subject: [PATCH] added a share on fediverse button

---
 README.md                                |  2 +
 assets/scss/style.scss                   | 75 ++++++++++++++++++++++++
 layouts/_default/single.html             |  1 +
 layouts/partials/share_on_fediverse.html | 38 ++++++++++++
 4 files changed, 116 insertions(+)
 create mode 100644 layouts/partials/share_on_fediverse.html

diff --git a/README.md b/README.md
index f72e34c..a055e49 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,8 @@ summaryLength = 70  # number of words for article summaries
     plausibleScriptUrl = "https://something.com/..."
     plausibleDomain = "example.com"
 
+    enableShareOnFediverse = false  # enable a button at the end of an article to share it on the fediverse
+
     # WARNING: deprecated! Use [[menu.icons]] instead, look below
     # links = [
     #     ["GitLab", "https://gitlab.com/gabmus"],
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 35a1500..49d53a5 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -499,6 +499,81 @@ a.discreteTag {
     @include buttonLikeLink;
 }
 
+.shareBtn {
+    {{ if eq (site.Params.navType | default "standard") "circles" }}
+        @include buttonLikeLink;
+    {{ end }}
+    font-size: 1.2em;
+    cursor: pointer;
+}
+
+input {
+    {{ if or (site.Params.discreteCards | default false) (eq (site.Params.navType | default "standard") "circles") }}
+        @include buttonLikeLink;
+        &:hover, &:focus, &:active {
+            background-color: $highlight_bg_color;
+        }
+    {{ end }}
+    background-color: $highlight_bg_color;
+    padding: 12px;
+    color: $fg_color;
+    border: 2px solid transparent;
+    transition: .15s border ease-in-out;
+    &:focus, &:active {
+        border: 2px solid $accent_color;
+        outline: none;
+    }
+}
+
+#fediInstanceDialog {
+    display: none;
+    position: fixed;
+    top: 0; bottom: 0; left: 0; right: 0;
+    
+    .dialog {
+        position: absolute;
+        display: flex; flex-direction: column;
+        top: 24px;
+        left: 50%; transform: translateX(-50%);
+        z-index: 9999;
+        background-color: $bg_color;
+        width: 450px;
+        max-width: 100%;
+        padding: 24px;
+        {{ if site.Params.discreteCards }}
+            border-radius: $border_radius;
+        {{ end }}
+        h1, h2, h3, h4 {
+            margin: 0;
+        }
+        h2 {
+            margin-bottom: 24px;
+        }
+        input {
+            display: block;
+        }
+        .buttons {
+            margin: 12px 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: end;
+            > * {
+                margin-left: 24px;
+            }
+        }
+    }
+    .bg {
+        z-index: 99;
+        position: absolute;
+        top: 0; bottom: 0; left: 0; right: 0;
+        background-color: rgba(0, 0, 0, .4);
+        cursor: pointer;
+    }
+    &.open {
+        display: block;
+    }
+}
+
 {{ if .Site.Params.mobileHamburgerNav | default false }}
 header {
     #hamburger-menu {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8ea3b99..8cb6586 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -26,6 +26,7 @@
         </p>
     {{ end }}
     {{- partial "inject/content-after.html" . -}}
+    {{- partial "share_on_fediverse.html" . -}}
     {{- partial "commento.html" . -}}
     {{- partial "cactus_chat.html" . -}}
     {{- partial "related_articles.html" . -}}
diff --git a/layouts/partials/share_on_fediverse.html b/layouts/partials/share_on_fediverse.html
new file mode 100644
index 0000000..b1c7b59
--- /dev/null
+++ b/layouts/partials/share_on_fediverse.html
@@ -0,0 +1,38 @@
+{{ if site.Params.enableShareOnFediverse | default false }}
+    <a class="shareBtn" onclick="openFediInstanceDialog();">Share on the Fediverse</a>
+    <div id="fediInstanceDialog">
+        <div class="bg" onclick="closeFediInstanceDialog();"></div>
+        <div class="dialog">
+            <h2>Enter your instance's address</h2>
+            <input id="fediInstanceInput" placeholder="Eg. mastodon.social" type="text" />
+            <div class="buttons">
+                <a class="shareBtn" onclick="closeFediInstanceDialog();">Cancel</a>
+                <a class="shareBtn" onclick="shareOnFedi();">Share</a>
+            </div>
+        </div>
+    </div>
+    <script>
+        var articleTitle = '{{ .Title }}';
+        var articleLink = '{{ .Permalink }}';
+        var fediInstanceDialog = document.getElementById('fediInstanceDialog');
+        var fediInstanceInput = document.getElementById('fediInstanceInput');
+        function openFediInstanceDialog() {
+            fediInstanceDialog.classList.add('open');
+        }
+        function closeFediInstanceDialog() {
+            fediInstanceDialog.classList.remove('open');
+        }
+        function fixURL(url) {
+            if (url.substr(0, 8) == 'https://') return url;
+            if (url.substr(0, 7) == 'http://') return url;
+            return 'https://' + url;
+        }
+        function shareOnFedi() {
+            let instance = fixURL(fediInstanceInput.value);
+            window.open(
+                `${instance}/share?text=${articleTitle}%20${articleLink}`,
+                '__blank'
+            );
+        }
+    </script>
+{{ end }}