config.toml

@@ -1,7 +1,7 @@
 baseurl = "https://mehl.mx/"
 languageCode = "en-GB"
 title = "Max Mehl"
-theme = [ "hugo-sustain", "hugo-cloak-email" ]
+theme = [ "hugo-sustain", "hugo-cloak-email", "hugo-mastodon-comments" ]
 
 [blackfriday]
 # preserves linebreaks, and transforms to <br />
@@ -17,8 +17,8 @@ extensions = [ "hardLineBreak" ]
   keywords = "manager, free software, open source, project, campaign, konstanz, berlin, munster, communication, IT service, computer, politics, administration, FSFE, scouts, founder"
 
   # Custom assets can be linked with their paths relative to static/
-  custom_css = ['css/custom.css']
+  custom_css = ['css/custom.css', 'comments/mastodon-comments.css']
-  custom_js  = []
+  custom_js  = ['comments/getcomments.js']
 
 [params.blog]
   headline = "Thoughts about tech, politics, and more"

content/blog/test.md

@@ -0,0 +1,25 @@
++++
+title = "TEST ARTICLE"
+description = ""
+tags = [
+    "test"
+]
+date = "2018-04-02"
+categories = [
+    "Development",
+]
+highlight = "true"
+draft = false
+headerimage = "placeholder.jpg"
+headercredits = "Unsplash, [Dlanor S](https://unsplash.com/photos/2xEQDxB0ss4)"
++++
+
+LOREM IPSUM Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
+its template engine. It is an extremely lightweight engine that provides a very
+small amount of logic. In our experience that it is just the right amount of
+logic to be able to create a good static website. If you have used other
+template systems from different languages or frameworks you will find a lot of
+similarities in go templates.
+
+This document is a brief primer on using go templates. The [go docs][gohtmltemplate]
+provide more details.

themes/hugo-mastodon-comments/.gitignore

@@ -0,0 +1 @@
+static/comments/config.php

themes/hugo-mastodon-comments/layouts/partials/comments.html

@@ -0,0 +1,14 @@
+<div class="comments-container">
+    <h5>Comments</h5>
+    <div id="statistics">
+        <div id="like-count-container"></div><div id="reblog-count-container"></div><div id="reply-count-container"></div>
+    </div>
+    <div class="clear"></div>
+    <div id="comments"></div>
+    <div class="clear"></div>
+    <div id="reference"></div>
+    <!--<p class="reference"><a href="https://mastodon.social/users/bjoern/statuses/{{ .Params.toot }}">Join the discussion on Mastodon!</a></p>-->
+</div>
+
+<script>var MastodonTootId="{{ .Params.toot }}"</script>
+<script>var RelPermalink="{{ .RelPermalink }}"</script>

themes/hugo-mastodon-comments/static/comments/getcomments.js

@@ -1,14 +1,14 @@
 $(document).ready(function() {
 
-    // check if we show a blog post or not
+    // check if we show a blog post or not. You might have to adapt this
-    var isArticle = /\/?articles\/\d\d\d\d\/\d\d\/\d\d\/.+$/.test(RelPermalink);
+    var isArticle = /\/?blog\/\d\d\d\d\/.+$/.test(RelPermalink);
     if (isArticle === false) {
         console.log("Not a blog post, no need to search for comments");
         return;
     }
 
     $.ajax({
-        url: "https://www.schiessle.org/mastodon.comments/getcomments.php",
+        url: "/comments/getcomments.php",
         type: "get",
         data: {
             search : RelPermalink

themes/hugo-sustain/layouts/_default/list.html

@@ -16,7 +16,7 @@
         <p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
       {{ end }}
       <p class="categories">
-        <a class="label label-success" href="/articles">All</a>
+        <a class="label label-success" href="/blog">All</a>
         {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
           <a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
             {{ humanize $name }}

themes/hugo-sustain/layouts/_default/single.html

@@ -52,6 +52,7 @@
             </div>
           </div>
           <hr>
+        {{ partial "comments.html" . }}
         {{ partial "social" . }}
         </div>
       </div>