exercise update

config.toml

@@ -68,6 +68,11 @@ icon = "fa fa-envelope-o fa-2x fa-fw"
 title = "e-mail"
 url = "mailto:jon@kelbie.scot"
 
+[[params.socialIcons]]
+icon = "fa fa-matrix-org fa-2x fa-fw"
+title = "matrix"
+url = "https://matrix.to/#/@jon:kelbie.scot"
+
 [languages.en]
 weight = 0
 languageName = "English"

data/workouts/workout-2021-03-03_17-14-Islay_pick_up.yaml

@@ -0,0 +1,11 @@
+---
+type: "walking"
+date: 2021-03-03T17:39:26+00:00
+comment: "Islay pick up"
+distance: "2.279 km"
+duration: "00:20:22"
+pace: "9:540 min/km"
+calories: "126 kcal"
+image: "/images/workouts/workout-2021-03-03_17-14-Islay_pick_up.jpg"
+thumb: "/images/workouts/workout-2021-03-03_17-14-Islay_pick_up_thumb.jpg"
+---

themes/nipponalba/layouts/_default/single.html

@@ -35,8 +35,10 @@
 
 <hr/>
 <section id="interactions"><h4>Interactions</h4>
-<section id="webmention-form">
-  Interactions on this site are possible only via <a href="https://indieweb.org/Webmention" title="Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web." class="u-url" target="_blank">webmentions</a>.  Alternatively, contact me via <a href="xmpp:jk@nipponalba.scot" class="u-url" target="_blank">xmpp</a>, <a href="https://matrix.to/#/@jk:nipponalba.scot" class="u-url" target="_blank">matrix</a> or <a href="mailto:jon@kelbie.scot" class="u-url">email</a>.<br/><br/>
+<section id="interactions_intro">Interactions on this site are possible either via <a href="https://indieweb.org/Webmention" title="Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web." class="u-url" target="_blank">webmentions</a> or matrix courtesy of cactus chat, though guest (not logged in) commenting is not yet available.  Alternatively, contact me via <a href="https://matrix.to/#/@jon:kelbie.scot" class="u-url" target="_blank">matrix</a> or <a href="mailto:jon@kelbie.scot" class="u-url">email</a>.<br/><br/>
+<label for="toggle_webmentions" id="webmentions_label">Webmentions</label> | <label for="toggle_comments" id="comments_label">Comments</label></section>
+<input type="radio" name="interactions" id="toggle_webmentions" checked="checked"><input type="radio" name="interactions" id="toggle_comments">
+<section id="webmentions_frame"><section id="webmention-form">
   <form action="https://webmention.io/jon.kelbie.scot/webmention" method="post">
       <label>Did you mention this {{ .Type }} on your website? Put the URL of your post here:</label><br/>
       <input name="source" type="url"/>
@@ -60,6 +62,8 @@
   {{ end }}</section>
   <h4>Comments & Replies</h4>{{ partial "webmention.html" $mentions }}
 </section>{{ end }}</section>
+<section id="comments_frame">{{ partial "comments.html"}}</section>
+</section>
 </article>
 {{ else if eq .Type "bookmarkof" }}
 <section class="bookmarks">{{ $cats := slice }}

themes/nipponalba/layouts/partials/comments.html

@@ -0,0 +1,14 @@
+<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
+<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
+
+<div id="comment-section"></div>
+
+<script>
+     initComments({
+            node: document.getElementById("comment-section"),
+            defaultHomeserverUrl: "https://kelbie.scot",
+            serverName: "kelbie.scot",
+            siteName: "kelbie.scot",
+            commentSectionId: "{{ .Params.slug }}"
+      })
+</script>

themes/nipponalba/static/css/style.css

@@ -1038,6 +1038,33 @@ hr{
   vertical-align: bottom;
   height: 100%l
 }
+#toggle_comments, #toggle_webmentions{
+  display:none;
+}
+#webmentions_label, #comments_label{
+  display:inline;
+  margin:0;
+  padding:0;
+}
+
+#toggle_webmentions:checked - #webmentions_label, #toggle_comments:checked + #comments_label{
+  font-weight: bold;
+}
+
+#toggle_webmentions:checked ~ #webmentions_frame {
+  visibility:visible;
+}
+#toggle_webmentions:checked ~ #comments_frame {
+  visibility:hidden;
+  display:none;
+}
+#toggle_comments:checked ~ #comments_frame {
+  visibility: visible;
+}
+#toggle_comments:checked ~ #webmentions_frame {
+  visibility: hidden;
+  display:none;
+}
 @media screen and (max-width: 960px) {
   #page-top {
     width: 95%;
@@ -1050,7 +1077,7 @@ hr{
   main {
     width:95%;
   }
-.interactions{
+#interactions{
   padding-bottom: 100px;
 }
   .pagination li{