From 65f0fd5159e5c771308c9a2f6850be022b13a1f4 Mon Sep 17 00:00:00 2001 From: daudix Date: Fri, 25 Oct 2024 22:28:34 +0300 Subject: [PATCH] Add support for CWs in comments --- CHANGELOG.md | 2 + content/blog/the-quill-of-duck/index.md | 1 + i18n/ar.toml | 1 + i18n/en.toml | 1 + i18n/es.toml | 1 + i18n/fa.toml | 1 + i18n/ms.toml | 1 + i18n/ru.toml | 1 + i18n/zh-Hans.toml | 1 + sass/_comments.scss | 60 ++++++++++++++++++++++++- sass/_nav.scss | 1 + sass/_typography.scss | 41 ++++++++++------- static/comments.js | 52 ++++++++++++++++----- templates/partials/comments.html | 23 +++++----- 14 files changed, 148 insertions(+), 39 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b699dd..e0ff859 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `title` class for use on ``. - Add missing translation strings for author separator and conjunctions. - Add shortcode for Mastodon post embedding. +- Add support for blurred media in comments. +- Add support for content warnings (CWs) in comments. - Add support for Fuse.js search (#101). - Add support for preview cards in comments. - Add the ability to set video attributes via shortcode. diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md index 826c15a..c83ed1f 100644 --- a/content/blog/the-quill-of-duck/index.md +++ b/content/blog/the-quill-of-duck/index.md @@ -35,6 +35,7 @@ disclaimer = """ # host = "mastodon.blaede.family" # user = "cassidy" # id = "110669429936617026" +# # Post on GoToSocial # # host = "alpha.polymaths.social" diff --git a/i18n/ar.toml b/i18n/ar.toml index 7a9d18e..ca87791 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -61,6 +61,7 @@ reload = "إعادة التحميل" repo = "المستودع" search = "بحث" search_for = "ابحث عن" +sensitive = "المحتوى الحساس" share = "شارك" skip_to_content = "تخطي إلى المحتوى الرئيسي" source = "مصدر الموقع الإلكتروني" diff --git a/i18n/en.toml b/i18n/en.toml index d5a365f..cfc8494 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -65,6 +65,7 @@ reload = "Reload" repo = "Repository" search = "Search" search_for = "Search for" +sensitive = "Sensitive Content" share = "Share" skip_to_content = "Skip to Main Content" source = "Website source" diff --git a/i18n/es.toml b/i18n/es.toml index cc12ea0..9033337 100644 --- a/i18n/es.toml +++ b/i18n/es.toml @@ -65,6 +65,7 @@ reload = "Recargar" repo = "Repositorio" search = "Buscar" search_for = "Buscar por" +sensitive = "Contenido sensible" share = "Compartir" skip_to_content = "Saltar al contenido principal" source = "Fuente del sitio web" diff --git a/i18n/fa.toml b/i18n/fa.toml index e499579..199671c 100644 --- a/i18n/fa.toml +++ b/i18n/fa.toml @@ -65,6 +65,7 @@ reload = "بارگیری مجدد" repo = "مخزن کد" search = "جستجو" search_for = "جستجو برای" +sensitive = "محتوای حساس" share = "اشتراک" skip_to_content = "برو به اصل مطلب" source = "سورس" diff --git a/i18n/ms.toml b/i18n/ms.toml index 065900e..a4134d9 100644 --- a/i18n/ms.toml +++ b/i18n/ms.toml @@ -65,6 +65,7 @@ reload = "Muat semula" repo = "Repositori" search = "Cari" search_for = "Cari untuk" +sensitive = "Kandungan Sensitif" share = "Bagikan" skip_to_content = "Melompat ke kandungan utama" source = "Sumber laman web" diff --git a/i18n/ru.toml b/i18n/ru.toml index 0049666..35a4a8f 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -72,6 +72,7 @@ reload = "Перезагрузить" repo = "Репозиторий" search = "Поиск" search_for = "Искать" +sensitive = "Чувствительный контент" share = "Поделиться" skip_to_content = "Перейти к основному содержанию" source = "Исходный код веб-сайта" diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml index 931b967..69bcfaf 100644 --- a/i18n/zh-Hans.toml +++ b/i18n/zh-Hans.toml @@ -66,6 +66,7 @@ reload = "重新加载" repo = "存储库" search = "搜索" search_for = "寻找" +sensitive = "敏感内容" share = "分享" skip_to_content = "跳转到正文" source = "网站源码" diff --git a/sass/_comments.scss b/sass/_comments.scss index c8eb246..946ca69 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -65,7 +65,8 @@ "avatar name " "avatar time " "avatar post " - "avatar media " + "...... media " + "...... card " "...... interactions"; column-gap: 1rem; justify-items: start; @@ -221,9 +222,65 @@ } } + details { + &[open] { + border-radius: var(--rounded-corner-small); + background-image: + linear-gradient(to right, + transparent, + transparent 0.5rem, + var(--fg-muted-1) 0.5rem, + var(--fg-muted-1) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent), + linear-gradient(to right, + transparent, + transparent 0.5rem, + var(--bg-color) 0.5rem, + var(--bg-color) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent), + repeating-linear-gradient(45deg, + var(--contrast-color), + var(--contrast-color) 0.25rem, + var(--accent-color) 0.25rem, + var(--accent-color) 0.5rem); + + summary { + border-radius: 0; + background-image: none; + } + } + + summary { + border-radius: var(--rounded-corner-small); + background-image: + linear-gradient(to right, + transparent, + transparent 0.5rem, + var(--fg-muted-1) 0.5rem, + var(--fg-muted-1) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent), + linear-gradient(to right, + transparent, + transparent 0.5rem, + var(--bg-color) 0.5rem, + var(--bg-color) calc(100% - 0.5rem), + transparent calc(100% - 0.5rem), + transparent), + repeating-linear-gradient(45deg, + var(--contrast-color), + var(--contrast-color) 0.25rem, + var(--accent-color) 0.25rem, + var(--accent-color) 0.5rem); + } + } + main { grid-area: post; margin-block-start: 1rem; + width: 100%; :first-child { margin-block-start: 0; @@ -248,6 +305,7 @@ } .card { + grid-area: card; transition: var(--transition); margin-block-start: 1rem; width: min(calc(var(--container-width) / 2), 100%); diff --git a/sass/_nav.scss b/sass/_nav.scss index 15dbf76..6e241bf 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -79,6 +79,7 @@ summary { flex: 1; transition: var(--transition); + box-shadow: none; border-radius: 999px; background-color: transparent; padding: 0.625rem 0.75rem; diff --git a/sass/_typography.scss b/sass/_typography.scss index f2413b2..47478de 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -226,13 +226,12 @@ aside { } details { - box-shadow: var(--edge-highlight); - border-radius: var(--rounded-corner); - background-color: var(--fg-muted-1); - padding: 1rem; - summary { cursor: pointer; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 1rem; color: var(--fg-muted-5); font-weight: bold; line-height: 1; @@ -262,18 +261,30 @@ details { margin-block-end: 0; } - &[open] summary { - &::before { - transform: scaleY(-1); - } + &[open] { + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + background-color: var(--fg-muted-1); + padding: 1rem; - & ~ * { - animation: details-open var(--transition); + summary { + box-shadow: none; + border-radius: 0; + background-color: transparent; + padding: 0; - @keyframes details-open { - from { - transform: translateY(-1rem); - opacity: 0; + &::before { + transform: scaleY(-1); + } + + & ~ * { + animation: details-open var(--transition); + + @keyframes details-open { + from { + transform: translateY(-1rem); + opacity: 0; + } } } } diff --git a/static/comments.js b/static/comments.js index e0b5ba0..ead46c6 100644 --- a/static/comments.js +++ b/static/comments.js @@ -1,19 +1,20 @@ // Taken from https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/ // Attachment code taken from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html#L251-L296 -let relAttributes = document.getElementById("rel-attributes").textContent; -let host = document.getElementById("host").textContent; -let user = document.getElementById("user").textContent; -let id = document.getElementById("id").textContent; -let dateLocale = document.getElementById("date-locale").textContent; -let loadingText = document.getElementById("loading-text").textContent; -let reloadText = document.getElementById("reload-text").textContent; -let viewProfileText = document.getElementById("view-profile-text").textContent; -let viewCommentText = document.getElementById("view-comment-text").textContent; -let boostsFromText = document.getElementById("boosts-from-text").textContent; -let favesFromText = document.getElementById("faves-from-text").textContent; let blogPostAuthorText = document.getElementById("blog-post-author-text").textContent; +let boostsFromText = document.getElementById("boosts-from-text").textContent; +let dateLocale = document.getElementById("date-locale").textContent; +let favesFromText = document.getElementById("faves-from-text").textContent; +let host = document.getElementById("host").textContent; +let id = document.getElementById("id").textContent; +let loadingText = document.getElementById("loading-text").textContent; let noCommentsText = document.getElementById("no-comments-text").textContent; +let relAttributes = document.getElementById("rel-attributes").textContent; +let reloadText = document.getElementById("reload-text").textContent; +let sensitiveText = document.getElementById("sensitive-text").textContent; +let user = document.getElementById("user").textContent; +let viewCommentText = document.getElementById("view-comment-text").textContent; +let viewProfileText = document.getElementById("view-profile-text").textContent; document.getElementById("load-comments").addEventListener("click", loadComments); @@ -193,7 +194,22 @@ function loadComments() { let main = document.createElement("main"); main.setAttribute("itemprop", "text"); - main.innerHTML = status.content; + + if (status.sensitive == true || status.spoiler_text != "") { + let summary = document.createElement("summary"); + if (status.spoiler_text == "") { + status.spoiler_text == sensitiveText; + } + summary.innerHTML = status.spoiler_text; + + let spoiler = document.createElement("details"); + spoiler.appendChild(summary); + spoiler.innerHTML += status.content; + + main.appendChild(spoiler); + } else { + main.innerHTML = status.content; + } comment.appendChild(main); let attachments = status.media_attachments; @@ -224,6 +240,10 @@ function loadComments() { // mediaElement.setAttribute("loading", "lazy"); // {% - endif -%} + if (status.sensitive == true) { + mediaElement.classList.add("spoiler"); + } + media.appendChild(mediaElement); break; @@ -237,6 +257,10 @@ function loadComments() { mediaElement.setAttribute("title", attachment.description); } + if (status.sensitive == true) { + mediaElement.classList.add("spoiler"); + } + media.appendChild(mediaElement); break; @@ -252,6 +276,10 @@ function loadComments() { mediaElement.setAttribute("title", attachment.description); } + if (status.sensitive == true) { + mediaElement.classList.add("spoiler"); + } + media.appendChild(mediaElement); break; diff --git a/templates/partials/comments.html b/templates/partials/comments.html index 15cb307..f5fe600 100644 --- a/templates/partials/comments.html +++ b/templates/partials/comments.html @@ -14,19 +14,20 @@ {%- set date_locale = macros_translate::translate(key="date_locale", default="en-US", language_strings=language_strings) | replace(from="_", to="-") -%} - - - - - - - - - + + - - + + + + + + + + + + {%- if page.extra.comments.uri -%} {%- set uri = page.extra.comments.uri -%}