Update social buttons

sparna-git · Feb 9, 2025 · 1369687 · 1369687
1 parent d2d8ed8
commit 1369687
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 19 deletions.
diff --git a/src/_data/i18n/index.js b/src/_data/i18n/index.js
@@ -17,8 +17,8 @@ module.exports = {
       "en": "Team"
     },
     Posts: {
-      "fr": "Nos Posts",
-      "en": "Social media Posts"
+      "fr": "Médias Sociaux",
+      "en": "Social Medias"
     },
     Contact: {
       "fr": "Contact",

diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
@@ -35,18 +35,47 @@ bodyClass: single single-post
 
         <p class="post__footer-info">
             Published in [{{ tags | join(', ') }}] &middot; {{ page.date | readableDate('dd LLL yyyy', locale) }} <br/>
-            <a href="{{ metadata.repo }}/tree/master/{{ page.inputPath }}" title="suggest a change to this post by submitting a PR">Edit this Post</a>
+            <a href="{{ metadata.repo }}/tree/master/{{ page.inputPath }}" title="suggest a change to this post by submitting a PR">edit this post</a>
         </p>
 
-        <a
-            href="{{ linkedin }}"
-            target="_blank"
-            rel="noopener noreferrer"
-            title="This post on LinkedIn"
-            class="btn btn--linkedin"
-        >
-            <img src="{{ '/assets/images/linkedin.png' | relative(page) }}" style="width:28px; margin-right:5px;" /> {{ 'Comment this post' | i18n }}
-        </a>
+
+        {% if linkedin %}
+            <a
+                href="{{ linkedin }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Comment on LinkedIn"
+                class="btn btn--linkedin"
+            >
+                <img src="{{ '/assets/images/linkedin.png' | relative(page) }}" style="width:28px; margin-right:5px;" />
+            </a>
+        {% endif %}
+
+        {% if mastodon %}
+            <a
+                href="{{ mastodon }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Comment on Mastodon"
+                class="btn btn--mastodon"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon"><path fill="#ffffff" d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>
+
+            </a>
+        {% endif %}
+
+        {% if bluesky %}
+            <a
+                href="{{ bluesky }}"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Comment on LinkedIn"
+                class="btn btn--bluesky"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon"><path fill="#0085ff" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
+
+            </a>
+        {% endif %}
     </div>
 
 </article>
@@ -58,7 +87,7 @@ bodyClass: single single-post
     <ol class="otherposts">
         {% for post in otherposts | reverse %}
             <li class="otherposts__item">
-                <a href="{{post.page.url | relative(page)}}" class="otherposts__link">
+                <a href="{{post.page.url}}" class="otherposts__link">
                     <time class="otherposts__date" datetime="{{ post.date | dateToISO }}" aria-label=", written {{ post.date | readableDate('dd LLL yyyy', locale) }}">
                         {{ post.date | readableDate('dd LLL yyyy', locale) }}
                     </time>

diff --git a/src/_layouts/posts.njk b/src/_layouts/posts.njk
@@ -3,11 +3,11 @@ layout: sparna.njk
 bodyClass: page page-id-posts
 ---
 {% if locale == "fr" %}
-  <h1>Posts<br>réseaux sociaux</h1>
+  <h1>Posts<br>médias sociaux</h1>
 {% endif %}
 
 {% if locale == "en" %}
-  <h1>Social Network <br>posts</h1>
+  <h1>Social media <br>posts</h1>
 {% endif %}
 
 {% set posts = collections.posts %}

diff --git a/src/en/posts/20250206-nakala-shacl-automated-sparnatural.md b/src/en/posts/20250206-nakala-shacl-automated-sparnatural.md
@@ -3,7 +3,7 @@ layout: post.njk
 title: "Nakala : from an RDF dataset to a query UI in minutes – SHACL automated generation and Sparnatural"
 author: Thomas Francart
 date: 2025-02-06
-description: A usecase of an automated version of Sparnatural submitted as an example for Veronika Heimsbakk’s _SHACL for the Practitioner_ upcoming book
+description: A usecase of an automated version of Sparnatural submitted as an example for Veronika Heimsbakk’s "SHACL for the Practitioner" upcoming book
 tags: Sparnatural, SHACL
 permalink: en/posts/{{ title | slugify }}
 linkedin: https://www.linkedin.com/posts/thomasfrancart_nakala-from-an-rdf-dataset-to-a-query-ui-activity-7293376368736698370-44Ns

diff --git a/static/assets/css/style-newwebsite.css b/static/assets/css/style-newwebsite.css
@@ -52,7 +52,11 @@ body.page-id-posts #contenu {
 }
 /* Item title link */
 .postlist__item h2 a {
-  color: black;
+  color: rgb(78, 78, 78);
+  text-decoration: none;
+}
+.postlist__item h2 a:hover {
+  color: #aa1223;
   text-decoration: none;
 }
 .postlist__meta {
@@ -114,8 +118,10 @@ body.single-post .post__content ul {
 body.single-post .post__content li {
   margin-bottom:12px;
 }
-
-
+/* Make em italic again, and strong bold again */
+body.single-post .post__content em, strong {
+  font: revert;
+}
 
 
 body.single-post .post__meta {
@@ -174,6 +180,25 @@ body.single-post .post__footer-info {
   color: #000;
 }
 
+.btn--mastodon {
+  background-color: rgb(99 100 255) ;
+  text-decoration: none;
+  color: #fff;
+}
+
+.btn--bluesky {
+  background-color: #14191f ;
+  text-decoration: none;
+  color: #fff;
+}
+
+/* This is for Fontawesome SVG, see https://docs.fontawesome.com/web/add-icons/svg-bare */
+.icon {
+  width: 2em;
+  height: 2em;
+  vertical-align: -0.125em;
+}
+
 /* After post */
 
 .postsection {