From e4b78d5d03c0a22186b0227ae4a78bd259e5b1f4 Mon Sep 17 00:00:00 2001 From: daudix Date: Sun, 28 Jan 2024 03:16:21 +0300 Subject: [PATCH] feat: Rewrite comments thingy from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ --- config.toml | 8 +- sass/_comments.scss | 217 +++++------------ sass/_qrcode.scss | 3 +- templates/includes/comments.html | 395 ++++++++++--------------------- 4 files changed, 185 insertions(+), 438 deletions(-) diff --git a/config.toml b/config.toml index 55d487c..1ad7127 100644 --- a/config.toml +++ b/config.toml @@ -72,7 +72,7 @@ show_powered_by = true # Link to website source show_source = true -# Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/75cd2a202de7a1026de1ea00a4ef1d5b2675c7ff/_config.yaml#L35-L74 +# Based on https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ # # Mastodon-powered commenting. # Values can be overridden in front-matter, e.g. @@ -86,9 +86,3 @@ host = "mstdn.social" # Used to determine who the original/verified poster is; # role may be expanded in the future (e.g. for moderation). user = "Daudix" -# Optional; required to fetch more than 60 replies to any given blog post. -# Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE -# WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly -# recommended to use a dedicated bot/API account to create an application with -# scope read:statuses. -token = "jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ" diff --git a/sass/_comments.scss b/sass/_comments.scss index e21f430..d19bb85 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -1,45 +1,43 @@ -.instance.op::before, -.reblogs::before, -.favourites::before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - display: inline-block; - font-family: "bootstrap-icons" !important; - font-style: normal; - font-variant: normal; - font-weight: normal !important; - line-height: 1; - text-transform: none; - vertical-align: -0.125em; -} - section#comments { + #comments-wrapper { + display: flex; + flex-direction: column; + gap: 2rem; + margin-top: 2rem; + } + .comment { display: grid; column-gap: 1rem; grid-template-areas: - "avatar name" - "avatar time" - "avatar post" - "...... card" + "avatar name " + "avatar time " + "avatar post " "...... interactions"; grid-template-columns: min-content; justify-items: start; - margin: 2rem 0 2rem 0; + + &.comment-reply { + border-left: 0.25rem solid var(--fg-muted-2); + border-radius: 0.2rem; + padding-left: 1rem; + } .avatar-link { grid-area: avatar; - width: 4rem; height: 4rem; position: relative; + width: 4rem; .avatar { all: unset; background-color: var(--fg-muted-1); + background-position: 50%; + background-size: cover; border-radius: var(--rounded-corner); box-shadow: var(--shadow); - display: block; height: 100%; + overflow: hidden; transition: var(--transition); width: 100%; @@ -57,9 +55,8 @@ section#comments { .author { align-items: center; - cursor: default; display: flex; - font-weight: bold; + font-weight: 600; gap: 0.25rem; grid-area: name; @@ -68,7 +65,6 @@ section#comments { border-radius: 999px; color: var(--fg-color); font-size: 0.8rem; - font-weight: 600; padding: 0.25rem 0.75rem; text-decoration: none; transition: var(--transition); @@ -78,8 +74,12 @@ section#comments { text-decoration: none; } + &:active { + transform: scale(var(--active)); + } + &.op { - background-color: unset; + background-color: transparent; color: var(--primary-color); &:hover { @@ -87,116 +87,52 @@ section#comments { } &::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; content: "\F4B5"; display: inline-block; + font-family: "bootstrap-icons" !important; + font-style: normal; + font-variant: normal; + font-weight: normal !important; + line-height: 1; margin-inline-end: 0.25rem; - margin-inline-start: -0.25rem; + text-transform: none; + vertical-align: -0.125em; } } } } - time { - @extend small; + .emoji { + display: inline; + height: 1.25rem; + vertical-align: middle; + width: 1.25rem; + } + time { + color: var(--fg-muted-5); font-size: 0.8rem; grid-area: time; - - &.edited::after { - content: " *"; - } } main { grid-area: post; - justify-self: stretch; - - p:first-child { - margin-top: 0.25rem; - } p:last-child { margin-bottom: 0; } } - .card { - color: inherit; - grid-area: card; - max-width: 400px; - text-decoration: none; - - &:hover { - text-decoration: none; - } - - figure { - border-radius: var(--rounded-corner); - background-color: var(--fg-muted-1); - box-shadow: var(--shadow); - margin-left: 0; - margin-right: 0; - overflow: hidden; - transition: var(--transition); - - img { - all: unset; - display: block; - max-width: 100%; - } - - &:hover { - transform: translateY(-0.5rem); - } - } - - figcaption { - color: var(--fg-color); - display: grid; - gap: 0.5rem; - margin: 0; - padding: 1rem; - text-align: left; - - h5 { - font-weight: 600; - all: unset; - font-size: 1rem; - } - - p { - font-weight: 400; - color: var(--fg-muted-5); - font-size: 0.8rem; - } - - * { - display: inline-block; - margin: 0; - padding: 0; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - } - } - } - - // Hide the card from the shared post - &:first-of-type .card { - display: none; - } - footer { - display: flex; - gap: 0.5rem; grid-area: interactions; margin-top: 1rem; - .reblogs, - .favourites { + .faves { + background-color: transparent; border-radius: var(--rounded-corner); - font-size: 1rem; + color: var(--red-fg); font-variant-numeric: tabular-nums; font-weight: 400; padding: 0.5rem 1rem; @@ -204,6 +140,7 @@ section#comments { transition: var(--transition); &:hover { + background-color: var(--red-bg); text-decoration: none; } @@ -212,58 +149,20 @@ section#comments { } &::before { - margin-inline-end: 0.25rem; - } - } - - .reblogs { - color: var(--orange-fg); - - &:hover { - background-color: var(--orange-bg); - } - - &::before { - content: "\F813"; - } - } - - .favourites { - color: var(--red-fg); - - &:hover { - background-color: var(--red-bg); - } - - &::before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; content: "\F417"; + display: inline-block; + font-family: "bootstrap-icons" !important; + font-style: normal; + font-variant: normal; + font-weight: normal !important; + line-height: 1; + margin-inline-end: 0.25rem; + text-transform: none; + vertical-align: -0.125em; } } } - - .emoji { - all: unset; - display: inline; - width: 1.25rem; - height: 1.25rem; - vertical-align: middle; - } - - .invisible { - display: none; - } - - .ellipsis::after { - content: "…"; - } - - details { - summary { - color: var(--yellow-fg); - } - - margin-top: 1rem; - background-color: var(--yellow-bg); - } } } diff --git a/sass/_qrcode.scss b/sass/_qrcode.scss index b7dd469..7b4d6ec 100644 --- a/sass/_qrcode.scss +++ b/sass/_qrcode.scss @@ -2,7 +2,8 @@ background-color: white; float: right; height: 155px; - margin: 3rem 0 0 0; + margin-left: 1rem; + margin-top: 3rem; padding: 15px; width: 155px; diff --git a/templates/includes/comments.html b/templates/includes/comments.html index f079e23..f2b0e11 100644 --- a/templates/includes/comments.html +++ b/templates/includes/comments.html @@ -1,134 +1,152 @@ - + {% if page.extra.comments.host %} - {% set host = page.extra.comments.host %} +{% set host = page.extra.comments.host %} {% else %} - {% set host = config.extra.comments.host %} -{% endif %} - -{% if page.extra.comments.domain %} - {% set domain = page.extra.comments.domain %} -{% elif config.extra.comments.domain %} - {% set domain = config.extra.comments.domain %} -{% else %} - {% set domain = host %} +{% set host = config.extra.comments.host %} {% endif %} {% if page.extra.comments.user %} - {% set username = page.extra.comments.user %} +{% set username = page.extra.comments.user %} {% else %} - {% set username = config.extra.comments.user %} -{% endif %} - -{% if page.extra.comments.token %} - {% set token = page.extra.comments.token %} -{% else %} - {% set token = config.extra.comments.token %} +{% set username = config.extra.comments.user %} {% endif %} {% set id = page.extra.comments.id %} -{% if config.extra.comments.verified %} - {% set verified = config.extra.comments.verified | jsonify %} -{% else %} - {% set verified = "[]" %} -{% endif %} - -
- - +
+

Comments

-

Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.

+

+ You can respond to this post with an account on the + Fediverse (e.g Mastodon, Akkoma, Sharkey). +

+

+ + Since Fediverse is decentralized, you can use your existing account hosted by a Mastodon or a compatible server if + you + don't have an account on this one. Known non-private replies are displayed below. + +

+

+ Load comments… +

-

Press the button below to load comments if they exist, if not, be the first!

- - Load comments… +
+ + -
+
\ No newline at end of file