quick test of cactus comments

themes/nipponalba/layouts/_default/single.html

@@ -41,7 +41,10 @@
     <a class="u-url" style="display:none;" href="https://fed.brid.gy/">https://fed.brid.gy/</a>
 </article>
 <section id="interactions"><h4>Interactions</h4>
-<section id="webmention-form">
+  <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/#/@jk:nipponalba.scot" class="u-url" target="_blank">matrix</a> or <a href="mailto:jk@nipponalba.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/jk.nipponalba.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"/>
@@ -79,6 +82,7 @@
             commentSectionId: "{{ .Page.Params.slug }}"
       })
 </script></section>
+</section></article>
 {{ else if eq .Type "bookmarkof" }}
 <section class="bookmarks">{{ $cats := slice }}
 {{ range .Site.Data.bookmarks }}

themes/nipponalba/static/css/style.css

@@ -850,6 +850,33 @@ ul.pagination {
   object-position:middle;
 
 }
+#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: 800px) {
   #page-top, main {
     width: 95%;