[gimp-web] content, themes: add a "Share on Mastodon" link.

[Jehan <jehanp src gnome org>]

commit 1f52d2279ee8edd37795e2aeeef28efdfdf824f5
Author: Jehan <jehan girinstud io>
Date:   Fri Oct 14 01:03:34 2022 +0200

    content, themes: add a "Share on Mastodon" link.
    
    Added next to the Twitter and Facebook links. It's actually harder to make than
    with centralized networks because we need to actually redirect to the reader's
    specific Mastodon instance. This is why the "Mastodon" link opens a one-field
    form where one would write down one's instance URL.
    
    On the web, some were advising to use third-party services to do the
    redirection, but it seemed over-engineered (and a bad idea to use a third-party
    service when it's not needed) so I went with our own JS code.
    
    The original inspiration for my code was: https://github.com/Aly-ve/Mastodon-share-button
    Though in the end, I went much simpler, also I got rid of the cookie saving (we
    should avoid cookies, i.e. any personal information storage even though on user
    side; also what if you have several accounts or share a browser? Anyway
    resharing from our website would likely not be something you do that frequently,
    warranting needing to store the instance address, as we don't have that many
    news).
    In any case, this simplified code seems to work quite well.

 content/js/mastodon.js                | 49 +++++++++++++++++++++++++++++++++++
 themes/newgimp/static/css/article.css |  4 +++
 themes/newgimp/templates/article.html | 26 ++++++++++++++++---
 3 files changed, 76 insertions(+), 3 deletions(-)
---
diff --git a/content/js/mastodon.js b/content/js/mastodon.js
new file mode 100644
index 00000000..21aef32d
--- /dev/null
+++ b/content/js/mastodon.js
@@ -0,0 +1,49 @@
+"use strict";
+
+function onMastodonLinkClick(title, link) {
+  var shareForms = document.querySelectorAll('.mastodon-share-form');
+  for (var i = 0, len = shareForms.length | 0; i < len; i = i + 1) {
+    if (shareForms[i].style.display == 'none') {
+      shareForms[i].style.display = 'block';
+
+      shareForms[i].addEventListener('submit', function(e) {
+        e.preventDefault();
+        var instance = e.target['mastodon-instance'].value.trim();
+        if (instance.length > 0) {
+          /* window.open() opens an address without a scheme relatively to the
+           * current page. Prepend with '//' to handle automatic https or http
+           * scheme.
+           */
+          if (! instance.match(/^https?:\/\//i)) {
+            instance = '//' + instance;
+          }
+          window.open(`${instance}/share?text=${title}%0A${link}`, `__blank`)
+          e.stopPropagation();
+        }
+      });
+    }
+    else {
+      shareForms[i].style.display = 'none';
+    }
+  }
+}
+
+/* Mastodon forms are hidden by default. */
+var shareForms = document.querySelectorAll('.mastodon-share-form');
+  for (var i = 0, len = shareForms.length | 0; i < len; i = i + 1) {
+    shareForms[i].style.display = 'none';
+}
+
+/* Clicking mastodon links hide/show the form. */
+var mastodonLinks = document.querySelectorAll('.mastodon-share-button')
+
+for(let i = 0; i < mastodonLinks.length; i++) {
+  var shareLink = mastodonLinks[i].dataset.link
+  var shareTitle = mastodonLinks[i].dataset.title
+
+  /* Replace hashtab by html code */
+  shareTitle = shareTitle.replace(/#/g, '%23')
+
+  /* Set the listener in each button */
+  mastodonLinks[i].addEventListener('click', () => { onMastodonLinkClick(shareTitle, shareLink); }, true)
+}
diff --git a/themes/newgimp/static/css/article.css b/themes/newgimp/static/css/article.css
index 59a160cc..56fa3333 100644
--- a/themes/newgimp/static/css/article.css
+++ b/themes/newgimp/static/css/article.css
@@ -149,3 +149,7 @@ figure figcaption {
 twitter-widget {
     margin: 0 auto;
 }
+
+.mastodon-share-form {
+    display: none;
+}
diff --git a/themes/newgimp/templates/article.html b/themes/newgimp/templates/article.html
index 09bb385f..9dd79317 100644
--- a/themes/newgimp/templates/article.html
+++ b/themes/newgimp/templates/article.html
@@ -108,14 +108,34 @@
             <div class='column full social'>
             <hr/>
                 <p>
-                    Share this on:                 
-                    <a href="https://twitter.com/intent/tweet?url=https://www.gimp.org/{{ 
article.url|urlencode }}&via=GIMP_Official&text={{ article.title|striptags }}" target="_blank" title="Share 
this post on twitter">twitter</a> |
-                <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.gimp.org/{{ 
article.url|urlencode }}" target="_blank" title="Share this post on Facebook">Facebook</a>
+                  Share this on:
+                  <a class="mastodon-share-button"
+                     data-link="https://www.gimp.org/{{ article.url|urlencode }}"
+                     data-title='"{{ article.title|striptags }}" by @GIMP@floss.social'
+                     title="Share this post on Mastodon">Mastodon</a> |
+
+                  <a href="https://twitter.com/intent/tweet?url=https://www.gimp.org/{{ 
article.url|urlencode }}&via=GIMP_Official&text={{ article.title|striptags }}"
+                     target="_blank" title="Share this post on twitter">twitter</a> |
+
+                  <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.gimp.org/{{ 
article.url|urlencode }}"
+                     target="_blank" title="Share this post on Facebook">Facebook</a>
                 </p>
+
+                <form class="mastodon-share-form" id='mastodon-share-{{ article.url|urlencode }}'>
+                  <label for="mastodon-server-address">Your Mastodon instance:</label>
+                  <input type="text" name="mastodon-instance"
+                         id="mastodon-server-address"
+                         placeholder="https://framapiaf.org";>
+                  <input class="mastodon-share-submit" type="submit" form='mastodon-share-{{ 
article.url|urlencode }}'
+                         value="Share on your instance"/>
+                </form>
+
             </div>
 
           </div>
       </div>
 </section>
 
+<script async src='/js/mastodon.js'></script>
+
 {% endblock content %}