Add support for CWs in comments

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 `<strong>`.
 - 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.

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"

i18n/ar.toml

@@ -61,6 +61,7 @@ reload = "إعادة التحميل"
 repo = "المستودع"
 search = "بحث"
 search_for = "ابحث عن"
+sensitive = "المحتوى الحساس"
 share = "شارك"
 skip_to_content = "تخطي إلى المحتوى الرئيسي"
 source = "مصدر الموقع الإلكتروني"

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"

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"

i18n/fa.toml

@@ -65,6 +65,7 @@ reload = "بارگیری مجدد"
 repo = "مخزن کد"
 search = "جستجو"
 search_for = "جستجو برای"
+sensitive = "محتوای حساس"
 share = "اشتراک"
 skip_to_content = "برو به اصل مطلب"
 source = "سورس"

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"

i18n/ru.toml

@@ -72,6 +72,7 @@ reload = "Перезагрузить"
 repo = "Репозиторий"
 search = "Поиск"
 search_for = "Искать"
+sensitive = "Чувствительный контент"
 share = "Поделиться"
 skip_to_content = "Перейти к основному содержанию"
 source = "Исходный код веб-сайта"

i18n/zh-Hans.toml

@@ -66,6 +66,7 @@ reload = "重新加载"
 repo = "存储库"
 search = "搜索"
 search_for = "寻找"
+sensitive = "敏感内容"
 share = "分享"
 skip_to_content = "跳转到正文"
 source = "网站源码"

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%);

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;

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 {
+	&[open] {
-		&::before {
+		box-shadow: var(--edge-highlight);
-			transform: scaleY(-1);
+		border-radius: var(--rounded-corner);
-		}
+		background-color: var(--fg-muted-1);
+		padding: 1rem;
 
-		& ~ * {
+		summary {
-			animation: details-open var(--transition);
+			box-shadow: none;
+			border-radius: 0;
+			background-color: transparent;
+			padding: 0;
 
-			@keyframes details-open {
+			&::before {
-				from {
+				transform: scaleY(-1);
-					transform: translateY(-1rem);
+			}
-					opacity: 0;
+	
+			& ~ * {
+				animation: details-open var(--transition);
+	
+				@keyframes details-open {
+					from {
+						transform: translateY(-1rem);
+						opacity: 0;
+					}
 				}
 			}
 		}

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;
 

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="-") -%}
 
-<span id="rel-attributes" class="hidden">{{ rel_attributes }}</span>
+<span id="blog-post-author-text" class="hidden">{{ macros_translate::translate(key="blog_post_author", default="Blog post author", language_strings=language_strings) }}</span>
-<span id="host" class="hidden">{{ host }}</span>
-<span id="user" class="hidden">{{ user }}</span>
-<span id="id" class="hidden">{{ id }}</span>
-<span id="date-locale" class="hidden">{{ date_locale }}</span>
-<span id="loading-text" class="hidden">{{ macros_translate::translate(key='loading', default='Loading', language_strings=language_strings) }}…</span>
-<span id="reload-text" class="hidden">{{ macros_translate::translate(key='reload', default='Reload', language_strings=language_strings) }}</span>
-<span id="view-profile-text" class="hidden">{{ macros_translate::translate(key="view_profile", default="View Profile At", language_strings=language_strings) }}</span>
-<span id="view-comment-text" class="hidden">{{ macros_translate::translate(key="view_comment", default="View Comment At", language_strings=language_strings) }}</span>
 <span id="boosts-from-text" class="hidden">{{ macros_translate::translate(key="boosts_from", default="Boosts from $INSTANCE", language_strings=language_strings) }}</span>
+<span id="date-locale" class="hidden">{{ date_locale }}</span>
 <span id="faves-from-text" class="hidden">{{ macros_translate::translate(key="faves_from", default="Favorites from $INSTANCE", language_strings=language_strings) }}</span>
-<span id="blog-post-author-text" class="hidden">{{ macros_translate::translate(key='blog_post_author', default='Blog post author', language_strings=language_strings) }}</span>
+<span id="host" class="hidden">{{ host }}</span>
-<span id="no-comments-text" class="hidden">{{ macros_translate::translate(key='no_comments', default='No Comments yet :/', language_strings=language_strings) }}</span>
+<span id="id" class="hidden">{{ id }}</span>
+<span id="loading-text" class="hidden">{{ macros_translate::translate(key="loading", default="Loading", language_strings=language_strings) }}…</span>
+<span id="no-comments-text" class="hidden">{{ macros_translate::translate(key="no_comments", default="No Comments yet :/", language_strings=language_strings) }}</span>
+<span id="rel-attributes" class="hidden">{{ rel_attributes }}</span>
+<span id="reload-text" class="hidden">{{ macros_translate::translate(key="reload", default="Reload", language_strings=language_strings) }}</span>
+<span id="sensitive-text" class="hidden">{{ macros_translate::translate(key="sensitive", default="Sensitive Content", language_strings=language_strings) }}</span>
+<span id="user" class="hidden">{{ user }}</span>
+<span id="view-comment-text" class="hidden">{{ macros_translate::translate(key="view_comment", default="View Comment At", language_strings=language_strings) }}</span>
+<span id="view-profile-text" class="hidden">{{ macros_translate::translate(key="view_profile", default="View Profile At", language_strings=language_strings) }}</span>
 
 {%- if page.extra.comments.uri -%}
 	{%- set uri = page.extra.comments.uri -%}