From 0e3d0c97211c1b8494ee4e6f7f9abb54a561077d Mon Sep 17 00:00:00 2001 From: Clayton Date: Wed, 11 Mar 2026 00:15:11 -0500 Subject: [PATCH 1/3] feat: add Mastodon/Fediverse comments via mastodon-comments web component --- archetypes/default.md | 2 + assets/css/_partial/_single/_comment.scss | 116 ++++++++++++++++++++++ exampleSite/hugo.toml | 6 ++ hugo.toml | 8 ++ i18n/en.toml | 6 ++ i18n/zh-CN.toml | 6 ++ layouts/_partials/comment.html | 24 +++++ 7 files changed, 168 insertions(+) diff --git a/archetypes/default.md b/archetypes/default.md index 55df0fa99..3a2269b09 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -43,6 +43,8 @@ share: # ... comment: enable: true + # Set fediverse or mastodonTootId to a Mastodon toot ID to enable Fediverse comments for this post + # fediverse: "" # ... library: css: diff --git a/assets/css/_partial/_single/_comment.scss b/assets/css/_partial/_single/_comment.scss index 2095cc632..dad462de4 100644 --- a/assets/css/_partial/_single/_comment.scss +++ b/assets/css/_partial/_single/_comment.scss @@ -5,4 +5,120 @@ max-width: 1.5em; max-height: 1.5em; } + + /* Mastodon / Fediverse comments (mastodon-comments web component) */ + .mastodon-comments-prompt { + margin-bottom: 1rem; + } + + mastodon-comments { + --font-color: #5d686f; + --font-size: 1rem; + --block-border-width: 1px; + --block-border-radius: 3px; + --block-border-color: #ededf0; + --block-background-color: #f7f8f8; + --comment-indent: 40px; + } + + .mastodon-comment { + background-color: var(--block-background-color, #f7f8f8); + border-radius: var(--block-border-radius, 3px); + border: 1px solid var(--block-border-color, #ededf0); + padding: 20px; + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; + color: var(--font-color, #5d686f); + font-size: var(--font-size, 1rem); + + p { + margin-bottom: 0; + } + + .author { + padding-top: 0; + display: flex; + + a { + text-decoration: none; + } + + .avatar img { + margin-right: 1rem; + min-width: 60px; + border-radius: 5px; + } + + .details { + display: flex; + flex-direction: column; + } + + .details .name { + font-weight: bold; + } + + .details .user { + color: #5d686f; + font-size: medium; + } + + .date { + margin-left: auto; + font-size: small; + } + } + + .content { + margin: 15px 20px; + + p:first-child { + margin-top: 0; + margin-bottom: 0; + } + } + + .attachments { + margin: 0 10px; + + > * { + margin: 0 10px; + } + } + + .status > div { + display: inline-block; + margin-right: 15px; + } + + .status a { + color: #5d686f; + text-decoration: none; + } + + .status .replies.active a { + color: #003eaa; + } + + .status .reblogs.active a { + color: #8c8dff; + } + + .status .favourites.active a { + color: #ca8f04; + } + } + + @media only screen and (max-width: 1024px) { + mastodon-comments { + --comment-indent: 20px; + } + } + + @media only screen and (max-width: 640px) { + mastodon-comments { + --comment-indent: 0; + } + } } diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml index ad6097b76..cfdf76739 100644 --- a/exampleSite/hugo.toml +++ b/exampleSite/hugo.toml @@ -621,6 +621,12 @@ ignoreErrors = ["error-remote-getjson", "error-missing-instagram-accesstoken"] lazyLoading = false lightTheme = "light" darkTheme = "dark" + # Mastodon / Fediverse comment config (https://github.com/dpecos/mastodon-comments) + # Mastodon / Fediverse 评论系统设置 (https://github.com/dpecos/mastodon-comments) + [params.page.comment.mastodon] + enable = false + host = "" + user = "" # Waline comment config (https://waline.js.org/) # Waline 评论系统设置 (https://waline.js.org/) [params.page.comment.waline] diff --git a/hugo.toml b/hugo.toml index 7180a5d8d..08953d21d 100644 --- a/hugo.toml +++ b/hugo.toml @@ -541,6 +541,14 @@ lazyLoading = false lightTheme = "light" darkTheme = "dark" + # Mastodon / Fediverse comment config (https://github.com/dpecos/mastodon-comments) + # Mastodon / Fediverse 评论系统设置 (https://github.com/dpecos/mastodon-comments) + [params.page.comment.mastodon] + enable = false + # Your Mastodon instance host (e.g. mastodon.social, fosstodon.org) + host = "" + # Your Mastodon username (without @). Per-post: set 'fediverse' or 'mastodonTootId' in front matter to the toot ID. + user = "" # Third-party library config # 第三方库配置 [params.page.library] diff --git a/i18n/en.toml b/i18n/en.toml index ea760d1a2..0a761fdde 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -64,6 +64,12 @@ other = "en" [walineLang] other = "en" +[mastodonCommentsNoscript] +other = "Please enable JavaScript to view the comments powered by the Fediverse." +[mastodonCommentsPrompt] +other = "You can use your Fediverse (e.g. Mastodon) account to reply to this" +[mastodonCommentsPost] +other = "post" # === partials/comment.html === # === partials/assets.html === diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml index 460c9f3c3..be9505daf 100644 --- a/i18n/zh-CN.toml +++ b/i18n/zh-CN.toml @@ -65,6 +65,12 @@ other = "zh-CN" [walineLang] other = "zh-CN" +[mastodonCommentsNoscript] +other = "请启用 JavaScript 以查看由 Fediverse 提供的评论。" +[mastodonCommentsPrompt] +other = "您可以使用 Fediverse（如 Mastodon）账号回复本" +[mastodonCommentsPost] +other = "帖子" # === partials/comment.html === # === partials/assets.html === diff --git a/layouts/_partials/comment.html b/layouts/_partials/comment.html index 18cf40e0a..891d95605 100644 --- a/layouts/_partials/comment.html +++ b/layouts/_partials/comment.html @@ -147,6 +147,30 @@ {{- end -}} + {{- /* Mastodon / Fediverse Comment System */ -}} + {{- $mastodon := $comment.mastodon | default dict -}} + {{- $fediverseTootId := .Params.fediverse | default .Params.mastodonTootId -}} + {{- if and $mastodon.enable $mastodon.host $mastodon.user $fediverseTootId -}} +
+ +

+ {{ T "mastodonCommentsPrompt" | default "You can use your Fediverse (e.g. Mastodon) account to reply to this" }} + {{ T "mastodonCommentsPost" | default "post" }}. +

+ +
+ {{- $dompurify := "https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.1/purify.min.js" -}} + {{- dict "Source" $dompurify "Defer" false "Crossorigin" true "Integrity" "sha512-uHOKtSfJWScGmyyFr2O2+efpDx2nhwHU2v7MVeptzZoiC7bdF6Ny/CmZhN2AwIK1oCFiVQQ5DA/L9FSzyPNu6Q==" | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} + {{- dict "Source" "https://cdn.jsdelivr.net/gh/dpecos/mastodon-comments@master/mastodon-comments.js" "Defer" true "Crossorigin" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} + + {{- end -}} + {{- /* Waline Comment System */ -}} {{- $waline := $comment.waline | default dict -}} {{- if $waline.enable -}} From 5df3af4ac566c6d443f0a68e9ba7e72762f42a61 Mon Sep 17 00:00:00 2001 From: Clayton Date: Fri, 13 Mar 2026 06:05:31 -0500 Subject: [PATCH 2/3] feat improve ux --- layouts/_partials/comment.html | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/layouts/_partials/comment.html b/layouts/_partials/comment.html index 891d95605..5992f1aa8 100644 --- a/layouts/_partials/comment.html +++ b/layouts/_partials/comment.html @@ -152,6 +152,10 @@ {{- $fediverseTootId := .Params.fediverse | default .Params.mastodonTootId -}} {{- if and $mastodon.enable $mastodon.host $mastodon.user $fediverseTootId -}}
+

+ + Comments are powered by the Fediverse (Mastodon). +