Add shareon

package-lock.json

@@ -12,7 +12,8 @@
         "bulma": "^0.9.4",
         "darkreader": "^4.9.51",
         "elevator.js": "^1.0.1",
-        "lite-youtube-embed": "^0.2.0"
+        "lite-youtube-embed": "^0.2.0",
+        "shareon": "^2.0.0"
       },
       "devDependencies": {
         "esbuild": "^0.14.43",
@@ -1374,6 +1375,16 @@
         "semver": "bin/semver"
       }
     },
+    "node_modules/shareon": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shareon/-/shareon-2.0.0.tgz",
+      "integrity": "sha512-vwNQFAruIFjN/TOoDeMm8x7TZ1KC/1hPFnIwQpoX6vu+cYjzAmaP9KCmcZaIu/cvBFp2X24+0OrUcbR3uKk7Bw==",
+      "funding": [
+        "https://github.com/sponsors/kytta/",
+        "https://liberapay.com/kytta",
+        "https://www.paypal.com/paypalme/NickKaramoff"
+      ]
+    },
     "node_modules/shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -2484,6 +2495,11 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true
     },
+    "shareon": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shareon/-/shareon-2.0.0.tgz",
+      "integrity": "sha512-vwNQFAruIFjN/TOoDeMm8x7TZ1KC/1hPFnIwQpoX6vu+cYjzAmaP9KCmcZaIu/cvBFp2X24+0OrUcbR3uKk7Bw=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "bulma": "^0.9.4",
     "darkreader": "^4.9.51",
     "elevator.js": "^1.0.1",
-    "lite-youtube-embed": "^0.2.0"
+    "lite-youtube-embed": "^0.2.0",
+    "shareon": "^2.0.0"
   }
 }

scripts/copy-npm-contrib.sh

@@ -17,3 +17,4 @@ mkcontrib() {
 
 mkcontrib fontawesome node_modules/@fortawesome/fontawesome-free/{css,webfonts}
 mkcontrib elevator-js node_modules/elevator.js/demo/music/*
+mkcontrib shareon node_modules/shareon/dist/{shareon.iife.*,shareon.min.css*}

static/src/scss/_homepage.scss

@@ -9,6 +9,7 @@ body.page-home-homepage {
     align-items: center;
     flex-direction: column;
     color: $white;
+    margin-bottom: 0;
   }
 
   h1 {

static/src/scss/_shareon.scss

@@ -0,0 +1,3 @@
+.shareon-container {
+  margin-top: 1rem;
+}

static/src/scss/base.scss

@@ -10,6 +10,7 @@
 @import "content";
 @import "listing";
 @import "blocks";
+@import "shareon";
 
 html,
 body {
@@ -19,5 +20,5 @@ body {
 }
 
 main {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
 }

website/common/templates/common/content_page.html

@@ -10,13 +10,17 @@
   {{ page.body_html|safe }}
 </section>
 
+{% include "common/shareon.html" %}
+
 {% endblock %}
 
 {% block extra_css %}
   <link rel="stylesheet" type="text/css" href="{% static 'css/lite-youtube-embed.css' %}">
+  <link rel="stylesheet" type="text/css" href="{% static 'contrib/shareon/shareon.min.css' %}">
   <link rel="stylesheet" type="text/css" href="{% url 'static-pygments:styles' 'default' %}">
 {% endblock %}
 
 {% block extra_js %}
   <script async defer type="text/javascript" src="{% static 'js/lite-youtube-embed.js' %}"></script>
+  <script async defer type="text/javascript" src="{% static 'contrib/shareon/shareon.iife.js' %}" init></script>
 {% endblock %}

website/common/templates/common/shareon.html

@@ -0,0 +1,19 @@
+{% load util_tags %}
+
+<section class="container has-text-centered shareon-container">
+  <p>Share this page</p>
+  <div class="shareon" data-title="{{ page.title }}" data-url="{% pagefullurl page %}">
+    <a class="facebook" title="Share on Facebook"></a>
+    <a class="linkedin" title="Share on LinkedIn"></a>
+    <a class="mastodon" title="Share on Mastodon"></a>
+    <a class="odnoklassniki" title="Share on Odnoklassniki"></a>
+    <a class="pinterest" title="Share on Pintrest"></a>
+    <a class="pocket" title="Share on Pocket"></a>
+    <button class="reddit" title="Share on Reddit"></button>
+    <button class="telegram" title="Share on Telegram"></button>
+    <button class="twitter" title="Twitter"></button>
+    <button class="viber" title="Share on Viber"></button>
+    <button class="vkontakte" title="Share on Vkontakte"></button>
+    <button class="whatsapp" title="Share on WhatsApp"></button>
+  </div>
+</section>

website/common/templatetags/util_tags.py

@@ -1,4 +1,5 @@
 from django.template import Library
+from wagtail.models import Page
 
 register = Library()
 
@@ -6,3 +7,8 @@ register = Library()
 @register.filter(name="range")
 def do_range(stop: int) -> range:
     return range(stop)
+
+
+@register.simple_tag(takes_context=True)
+def pagefullurl(context: dict, page: Page) -> str:
+    return page.get_full_url(context["request"])