From 5cf957857ec644ceba58a15ecc7f52349ed560a7 Mon Sep 17 00:00:00 2001 From: Pierre Prinetti Date: Mon, 13 Mar 2023 10:44:43 +0100 Subject: [PATCH] Add support for Fediverse comments How to add Fediverse comments ============================= In a post where to allow Fediverse comments: ```yaml comments: fediverse: url: https://example.com/@handle/123456789012345678 ``` All replies to the Fediverse post will appear as comments. Moderation ========== By default, the moderation system is opt-out. All replies will be published unless they are individually hidden. To hide one specific Fediverse post: ```yaml comments: fediverse: url: https://example.com/@handle/123456789012345678 hidden: - https://example.com/@troll/123456789012345679 ``` To switch to opt-in moderation, where only accepted posts are shown: ```yaml comments: fediverse: url: https://example.com/@handle/123456789012345678 moderation: opt-in shown: - https://example.com/@friend/123456789012345680 ``` The JavaScript for the comments is based on [yidhra's work](https://yidhra.farm/tech/jekyll/2022/01/03/mastodon-comments-for-jekyll.html), combined with [Daniel Pecos Martinez's work](https://danielpecos.com/2022/12/25/mastodon-as-comment-system-for-your-static-blog/) for the Hugo version, as pupularized by [Jan Wildeboer](https://codeberg.org/jwildeboer/cayman-fedi). It also includes changes by me. --- assets/css/common/post-single.css | 70 ++++++++++++ assets/css/core/theme-vars.css | 1 + layouts/partials/comments-fediverse.html | 140 +++++++++++++++++++++++ layouts/partials/comments.html | 1 + 4 files changed, 212 insertions(+) create mode 100644 layouts/partials/comments-fediverse.html diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 9f9f479..33ed0b1 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -405,3 +405,73 @@ img.in-text { display: inline; margin: auto; } + +.comment-reply-link { + box-shadow: 0 1px 0; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} +.fediverse-comment { + background-color: var(--code-bg); + border-radius: var(--radius); + border: 1px var(--border) solid; + padding: 20px; + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; + color: var(--content); +} +.fediverse-comment p { + margin-bottom: 0px; +} +.fediverse-comment .author { + padding-top:0; + display:flex; +} +.fediverse-comment .author a { + text-decoration: none; +} +.fediverse-comment .author .avatar img { + margin-right:1rem; + min-width:60px; + border-radius: 5px; +} +.fediverse-comment .author .details { + display: flex; + flex-direction: column; +} +.fediverse-comment .author .details .name { + font-weight: bold; +} +.fediverse-comment .author .details .user { + color: #5d686f; + font-size: medium; +} +.fediverse-comment .author .date { + margin-left: auto; + font-size: small; +} +.fediverse-comment .content { + margin: 15px 20px; +} +.fediverse-comment .content p:first-child { + margin-top:0; + margin-bottom:0; +} +.fediverse-comment .status > div { + display: inline-block; + margin-right: 15px; +} +.fediverse-comment .status a { + color: #5d686f; + text-decoration: none; +} +.fediverse-comment .status .replies.active a { + color: #003eaa; +} +.fediverse-comment .status .reblogs.active a { + color: #8c8dff; +} +.fediverse-comment .status .favourites.active a { + color: #ca8f04; +} diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css index db1845d..aed5791 100644 --- a/assets/css/core/theme-vars.css +++ b/assets/css/core/theme-vars.css @@ -15,6 +15,7 @@ --code-block-bg: rgb(28, 29, 33); --code-bg: rgb(245, 245, 245); --border: rgb(238, 238, 238); + --fediverse-comment-indent: 10px } .dark { diff --git a/layouts/partials/comments-fediverse.html b/layouts/partials/comments-fediverse.html new file mode 100644 index 0000000..502bcc9 --- /dev/null +++ b/layouts/partials/comments-fediverse.html @@ -0,0 +1,140 @@ +{{- /* Fediverse comments area start */ -}} +

Comments

+ + + +

Use your Fediverse account (e.g. Mastodon) to reply. +

+

+ + + +{{- /* Fediverse comments area end */ -}} diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html index 918451a..61fa263 100644 --- a/layouts/partials/comments.html +++ b/layouts/partials/comments.html @@ -1,3 +1,4 @@ {{- /* Comments area start */ -}} {{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}} +{{- if (.Params.comments.fediverse) }} {{- partial "comments-fediverse.html" . }} {{- end }} {{- /* Comments area end */ -}}