diff options
| -rw-r--r-- | layouts/_partials/components/toggle-button.html | 69 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu.html | 34 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/comment-button.html | 7 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/comment-section.html | 6 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/info-links.html | 11 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/webmention-button.html | 13 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/webmention-section.html | 122 | ||||
| -rw-r--r-- | layouts/_partials/posts/comment.html | 43 | ||||
| -rw-r--r-- | layouts/_partials/posts/webmention-likes.html | 20 | ||||
| -rw-r--r-- | layouts/_partials/posts/webmention-mentions.html | 14 | ||||
| -rw-r--r-- | layouts/_partials/posts/webmention-replies.html | 23 |
11 files changed, 98 insertions, 264 deletions
diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html deleted file mode 100644 index edc0e930..00000000 --- a/layouts/_partials/components/toggle-button.html +++ /dev/null @@ -1,69 +0,0 @@ -{{ $id := .id }} -{{ $buttonId := default (printf "%s-toggle" $id) .buttonId }} -{{ $sectionId := default (printf "%s-section" $id) .sectionId }} -{{ $countId := default (printf "%s-count" $id) .countId }} -{{ $count := default "0" .count }} -{{ $group := .group }} - -<button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" - id="{{ $buttonId }}" title="{{ .title }}" data-tooltip> - <img src="{{ .icon }}" width="20" height="20" - alt="{{ .title }}" - class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" /> - <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" - id="{{ $countId }}">{{ $count }}</span> -</button> - -<script> - (function() { - document.addEventListener('DOMContentLoaded', () => { - const button = document.getElementById("{{ $buttonId }}"); - const section = document.getElementById("{{ $sectionId }}"); - const group = "{{ $group }}"; - - if (!button || !section) return; - - const entranceAnimation = 'animate-slide-in-down'; - const exitAnimation = 'animate-slide-out-up'; - - const closeSection = () => { - if (section.classList.contains('hidden')) return; - - section.classList.remove(entranceAnimation); - section.classList.add(exitAnimation); - setTimeout(() => { - section.classList.add('hidden'); - }, 200); - }; - - const openSection = () => { - section.classList.remove('hidden', exitAnimation); - section.classList.add(entranceAnimation); - }; - - if (group) { - document.addEventListener('toggle-group-open', (e) => { - if (e.detail.group === group && e.detail.sourceId !== "{{ $buttonId }}") { - closeSection(); - } - }); - } - - button.addEventListener('click', () => { - const isHidden = section.classList.contains('hidden'); - - if (isHidden) { - if (group) { - const event = new CustomEvent('toggle-group-open', { - detail: { group: group, sourceId: "{{ $buttonId }}" } - }); - document.dispatchEvent(event); - } - openSection(); - } else { - closeSection(); - } - }); - }); - })(); -</script> diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html index ab4c87d5..afab7663 100644 --- a/layouts/_partials/posts/action-menu.html +++ b/layouts/_partials/posts/action-menu.html @@ -1,14 +1,24 @@ +{{ $webmentions := index .Site.Data.webmentions .RelPermalink }} +{{ $likes := slice }} +{{ $replies := slice }} +{{ $mentions := slice }} +{{ with $webmentions }} +{{ range . }} + {{ if eq .type "like-of" }} + {{ $likes = $likes | append . }} + {{ else if eq .type "in-reply-to" }} + {{ $replies = $replies | append . }} + {{ else if eq .type "mention-of" }} + {{ $mentions = $mentions | append . }} + {{ end }} +{{ end }} +{{ end }} + <div id="action-menu" class="my-4 mb-5"> - <!-- Action Buttons --> - <div class="flex justify-between items-center"> - <div class="flex gap-2"> - {{ partial "posts/action-menu/comment-button" . }} - {{ partial "posts/action-menu/webmention-button" . }} - </div> - {{ partial "posts/action-menu/info-links" . }} - </div> - <div> - {{ partial "posts/action-menu/comment-section" . }} - {{ partial "posts/action-menu/webmention-section" . }} - </div> + {{ partial "posts/webmention-likes" $likes }} + {{ partial "posts/webmention-replies" $replies }} + {{ partial "posts/webmention-mentions" $mentions }} + + <!-- kept for legacy pages --> + {{ partial "posts/comment" . }} </div> diff --git a/layouts/_partials/posts/action-menu/comment-button.html b/layouts/_partials/posts/action-menu/comment-button.html deleted file mode 100644 index 8ad02ae0..00000000 --- a/layouts/_partials/posts/action-menu/comment-button.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ partial "components/toggle-button.html" (dict - "id" "comments" - "title" (T "actionMenu.comment") - "icon" "/img/comments.svg" - "countId" "comment-count" - "group" "action-menu-section" -) }} diff --git a/layouts/_partials/posts/action-menu/comment-section.html b/layouts/_partials/posts/action-menu/comment-section.html deleted file mode 100644 index d5909597..00000000 --- a/layouts/_partials/posts/action-menu/comment-section.html +++ /dev/null @@ -1,6 +0,0 @@ -<!-- Comment Section --> -<div class="overflow-hidden"> - <div class="mt-4 hidden animate-duration-200" id="comments-section"> - {{ partial "posts/comment.html" . }} - </div> -</div> diff --git a/layouts/_partials/posts/action-menu/info-links.html b/layouts/_partials/posts/action-menu/info-links.html deleted file mode 100644 index 46042344..00000000 --- a/layouts/_partials/posts/action-menu/info-links.html +++ /dev/null @@ -1,11 +0,0 @@ -{{ if eq .Site.Language.Lang "zh" }} -<div class="flex gap-1"> - <a href="/sponsor" data-tooltip - class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" - title="{{ T "actionMenu.sponsor" }}"> - <img src="/img/coffee.svg" width="16" height="16" - alt="{{ T "actionMenu.sponsor" }}" - class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" /> - </a> -</div> -{{ end }} diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html deleted file mode 100644 index aba5891f..00000000 --- a/layouts/_partials/posts/action-menu/webmention-button.html +++ /dev/null @@ -1,13 +0,0 @@ -{{ $webmentions := index .Site.Data.webmentions .RelPermalink }} -{{ $count := 0 }} -{{ with $webmentions }} - {{ $count = len $webmentions }} -{{ end }} -{{ partial "components/toggle-button.html" (dict - "id" "webmention" - "title" (T "actionMenu.webmention") - "icon" "/img/mention.svg" - "countId" "mention-count" - "count" $count - "group" "action-menu-section" -) }} diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html deleted file mode 100644 index fa952e9c..00000000 --- a/layouts/_partials/posts/action-menu/webmention-section.html +++ /dev/null @@ -1,122 +0,0 @@ -<!-- Comment Section --> -<div class="overflow-hidden"> - <div class="mt-4 hidden animate-duration-200" id="webmention-section"> - <div> - {{ $webmentions := index .Site.Data.webmentions .RelPermalink }} - {{ $webmentionLikes := slice }} - {{ $webmentionReplies := slice }} - {{ $webmentionMentions := slice }} - {{ with $webmentions }} - {{ range . }} - {{ if eq .type "like-of" }} - {{ $webmentionLikes = $webmentionLikes | append . }} - {{ else if eq .type "in-reply-to" }} - {{ $webmentionReplies = $webmentionReplies | append . }} - {{ else if eq .type "mention-of" }} - {{ $webmentionMentions = $webmentionMentions | append . }} - {{ end }} - {{ end }} - {{ end }} - - <!-- likes --> - {{ with $webmentionLikes }} - <section class="mb-6 flex gap-2 items-center"> - <div class="flex gap-1 group"> - {{ range . }} - <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}"> - {{ $value := math.Floor (mul math.Rand 80) }} - {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }} - <img src="{{ .author.photo }}" alt="Profile Picture" - loading="lazy" - class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" /> - </a> - {{ end }} - </div> - <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len $webmentionLikes) }}</p> - </section> - {{ end }} - - <!-- replies --> - {{ with $webmentionReplies }} - <section> - {{ range . }} - <div> - <div class="flex items-center gap-3"> - <img src="{{ .author.photo }}" alt="Profile Picture" - class="h-8 w-8 rd-full" loading="lazy" /> - <div class="text-secondary"> - <h4 class="m-0"> - <a href="{{ or .url .author.url }}"> - {{ .author.name }} - </a> - </h4> - {{ $t := time.AsTime .received }} - <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p> - </div> - </div> - <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div> - </div> - {{ end }} - </section> - <hr /> - {{ end }} - - <!-- Fediverse interaction link --> - <section class="text-secondary text-sm"> - {{ with $.Params.toot }} - <a href="{{ . }}" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline"> - {{ T "webmention.interactOnFediverse" }} → - </a> - {{ else }} - <a href="https://akk.eltr.ac/eltrac" target="_blank" rel="noopener noreferrer" class="text-secondary hover:underline"> - {{ T "webmention.interactOnFediverse" }} → - </a> - {{ end }} - </section> - - <!-- mentions --> - {{ with $webmentionMentions }} - <section class="markdown-body"> - <h3>{{ T "webmention.mentionsHeading" . }}</h3> - {{ range . }} - <ul class=""> - {{ with .content }} - <li class="markdown-body leading-relaxed">{{ .html | safeHTML }}</li> - {{ else }} - <li><a href="{{ .url }}" target="_blank">{{ .url }}</a></li> - {{ end }} - </ul> - {{ end }} - </section> - {{ end }} - - </div> - - <div class="bg-blockBg mt-3 py-3 px-5 rd markdown-body"> - <form - id="webmention-form" - action="https://webmention.io/www.geedea.pro/webmention" - method="POST" - > - <label for="webmention-form">{{ T "webmention.formDesc" }}</label> - - <input - id="webmention-source" - type="url" - autocomplete="url" - required="" - pattern="^https?:\/\/(.*)" - name="source" - placeholder="{{ T "webmention.formPlaceholder" }}" - class="error" - aria-invalid="true" - /> - - <input id="webmention-submit" type="submit" name="submit" value="{{ T "webmention.submit" }}" /> - - <input id="webmention-format" type="hidden" name="format" value="html" /> - <input id="webmention-target" type="hidden" name="target" value="{{ .Permalink }}" /> - </form> - </div> - </div> -</div> diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html index e4ec9b3e..bcd0b17b 100644 --- a/layouts/_partials/posts/comment.html +++ b/layouts/_partials/posts/comment.html @@ -1,8 +1,3 @@ -<!-- email info --> -<p class="text-size-sm text-secondary"> - *{{ T "emailMe" }} <a href="mailto:{{ .Site.Params.email }}">{{ .Site.Params.email }}</a> -</p> - <!-- Giscus has been abandoned since 2026-01-30, old data from GitHub Discussion and some other comment systems @@ -11,32 +6,32 @@ --> {{ $cutoffDate := time.AsTime "2026-01-30" }} {{ if .Params.Date.Before $cutoffDate }} - - <p class="text-size-sm text-secondary">博客的评论区已经被禁用，旧的数据已经导出，如果存在，就会显示在下方。如果你想要讨论此文，可以邮件联系，或者在<a href="{{ with .Params.toot }}{{ . }}{{ else }}https://akk.eltr.ac/eltrac{{ end }}">联邦宇宙上互动</a>。</p> - - <hr /> - {{ $giscusData := .Site.Data.giscus }} {{ $pageTitle := .Title }} {{ range $giscusData }} {{ if eq .title $pageTitle }} + {{ $url := .url }} {{ with .comments.nodes }} - <div class="my-8"> - {{ range . }} - <div class="text-md py-4 px-1"> - <div class="mb-4 flex justify-between"> - <span class="font-bold">{{ .author.login }}</span> - <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span> + <details> + <summary class="text-size-sm text-secondary cursor-pointer">博客的评论区已经被禁用，旧的数据已经导出，可以点击这行字查看。</summary> + <div class="my-4"> + {{ range . }} + <div class="text-md py-4 px-1"> + <div class="mb-4 flex justify-between"> + <span class="font-bold">{{ .author.login }}</span> + <span class="text-secondary">{{ .createdAt | time.Format "2006/01/02" }}</span> + </div> + <div> + {{ .body | markdownify }} + </div> </div> - <div> - {{ .body | markdownify }} - </div> - </div> + {{ end }} + </div> + {{ with $url }} + <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p> {{ end }} - </div> - {{ end }} - {{ with .url }} - <p><a href="{{ . }}" class="small-button" target="_blank">Full GitHub Discussion →</a></p> + <hr /> + </details> {{ end }} {{ end }} {{ end }} diff --git a/layouts/_partials/posts/webmention-likes.html b/layouts/_partials/posts/webmention-likes.html new file mode 100644 index 00000000..7169a655 --- /dev/null +++ b/layouts/_partials/posts/webmention-likes.html @@ -0,0 +1,20 @@ +{{ with . }} +<section class="mb-6 flex gap-2 items-center"> + <div class="flex gap-1 group"> + <a data-tooltip title="互动" class="hover:no-underline cursor-pointer"> + <div class="w-5 h-5 bg-neutral-200 dark:bg-neutral-600 flex justify-center items-center rd-full font-800">+</div> + </a> + {{ range . }} + <a href="{{ .author.url }}" target="_blank" title="{{ .author.name }}"> + {{ $value := math.Floor (mul math.Rand 80) }} + {{ $rotate := cond (lt $value 40) (sub 10 $value) (sub $value 30) }} + <img src="{{ .author.photo }}" alt="Profile Picture" + loading="lazy" + class="h-5 w-5 rd-full transition-transform {{ if lt $rotate 0 }}group-hover:-rotate-{{ mul -1 $rotate }}{{ else }}group-hover:rotate-{{ $rotate }}{{ end }} hover:scale-150" /> + </a> + {{ end }} + </div> + <p class="text-secondary m-0 text-sm">{{ printf (T "webmention.likedBy") (len . ) }}</p> +</section> +{{ end }} + diff --git a/layouts/_partials/posts/webmention-mentions.html b/layouts/_partials/posts/webmention-mentions.html new file mode 100644 index 00000000..2a133d0b --- /dev/null +++ b/layouts/_partials/posts/webmention-mentions.html @@ -0,0 +1,14 @@ +{{ with . }} +<section class="markdown-body"> +<h3>{{ T "webmention.mentionsHeading" . }}</h3> +{{ range . }} +<ul class=""> + {{ with .content }} + <li class="markdown-body leading-relaxed">{{ .html | safeHTML }}</li> + {{ else }} + <li><a href="{{ .url }}" target="_blank">{{ .url }}</a></li> + {{ end }} +</ul> +{{ end }} +</section> +{{ end }} diff --git a/layouts/_partials/posts/webmention-replies.html b/layouts/_partials/posts/webmention-replies.html new file mode 100644 index 00000000..570a0e4d --- /dev/null +++ b/layouts/_partials/posts/webmention-replies.html @@ -0,0 +1,23 @@ +{{ with . }} +<section> +{{ range . }} +<div> + <div class="flex items-center gap-3"> + <img src="{{ .author.photo }}" alt="Profile Picture" + class="h-8 w-8 rd-full" loading="lazy" /> + <div class="text-secondary"> + <h4 class="m-0"> + <a href="{{ or .url .author.url }}"> + {{ .author.name }} + </a> + </h4> + {{ $t := time.AsTime .received }} + <p class="m-0"><time>{{ time.Format "2006-1-2" $t}}</time></p> + </div> + </div> + <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div> +</div> +{{ end }} +</section> +<hr /> +{{ end }} |