hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add support for CWs in comments

Browse Source
This commit is contained in:
daudix
2024-10-25 22:28:34 +03:00
parent e3ee417e7a
commit 65f0fd5159
14 changed files with 148 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -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.

1
content/blog/the-quill-of-duck/index.md
View File

@ -35,6 +35,7 @@ disclaimer = """
# host = "mastodon.blaede.family"
# user = "cassidy"
# id = "110669429936617026"
#
# Post on GoToSocial
#
# host = "alpha.polymaths.social"

1
i18n/ar.toml
View File

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

1
i18n/en.toml
View File

@ -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"

1
i18n/es.toml
View File

@ -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"

1
i18n/fa.toml
View File

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

1
i18n/ms.toml
View File

@ -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"

1
i18n/ru.toml
View File

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

1
i18n/zh-Hans.toml
View File

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

60
sass/_comments.scss
View File

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

1
sass/_nav.scss
View File

@ -79,6 +79,7 @@
summary {
flex: 1;
transition: var(--transition);
box-shadow: none;
border-radius: 999px;
background-color: transparent;
padding: 0.625rem 0.75rem;

19
sass/_typography.scss
View File

@ -226,13 +226,12 @@ aside {
}
details {
summary {
cursor: pointer;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
summary {
cursor: pointer;
color: var(--fg-muted-5);
font-weight: bold;
line-height: 1;
@ -262,7 +261,18 @@ details {
margin-block-end: 0;
}
&[open] summary {
&[open] {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
summary {
box-shadow: none;
border-radius: 0;
background-color: transparent;
padding: 0;
&::before {
transform: scaleY(-1);
}
@ -278,6 +288,7 @@ details {
}
}
}
}
}

50
static/comments.js
View File

@ -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");
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;

23
templates/partials/comments.html
View File

@ -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="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="blog-post-author-text" class="hidden">{{ macros_translate::translate(key="blog_post_author", default="Blog post author", 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="no-comments-text" class="hidden">{{ macros_translate::translate(key='no_comments', default='No Comments yet :/', language_strings=language_strings) }}</span>
<span id="host" class="hidden">{{ host }}</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 -%}