diff options
| -rw-r--r-- | i18n/en.yml | 2 | ||||
| -rw-r--r-- | i18n/zh.yml | 4 | ||||
| -rw-r--r-- | layouts/_partials/components/toggle-button.html | 22 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/webmention-button.html | 17 | ||||
| -rw-r--r-- | layouts/_partials/posts/action-menu/webmention-section.html | 86 | ||||
| -rw-r--r-- | uno.config.js | 2 |
6 files changed, 89 insertions, 44 deletions
diff --git a/i18n/en.yml b/i18n/en.yml index 48de8a6d..766c00fc 100644 --- a/i18n/en.yml +++ b/i18n/en.yml @@ -63,3 +63,5 @@ webmention: formDesc: You can write an article to respond to this post, or post something on social media, then submit the link of the related page here to send me Webmention. formPlaceholder: URL of your post submit: Ping me! + likedBy: %d people liked this page + mentionsHeading: Mentions diff --git a/i18n/zh.yml b/i18n/zh.yml index ee980cc7..0befc7b6 100644 --- a/i18n/zh.yml +++ b/i18n/zh.yml @@ -59,6 +59,8 @@ actionMenu: rss_comment_link: "读完啦？来坐坐吧" webmention: fetching: 正在获取 Webmention... - formDesc: 你可以撰写一篇文章回应此文，或者在社交媒体上发帖，然后在这里提交相关页面的链接，即可向我发送 Webmention。 + formDesc: 你可以撰写一篇文章回应此文，然后在这里提交相关页面的链接，只要提交的页面中包含这个页面的链接，即可向我发送 Webmention。 formPlaceholder: 你的文章的 URL submit: 提交 + likedBy: %d 人喜欢了这篇文章 + mentionsHeading: 提及这篇文章的 diff --git a/layouts/_partials/components/toggle-button.html b/layouts/_partials/components/toggle-button.html index 2b1de2f9..29e3440e 100644 --- a/layouts/_partials/components/toggle-button.html +++ b/layouts/_partials/components/toggle-button.html @@ -1,20 +1,8 @@ -{{/* - Reusable Toggle Button Component - - Parameters: - - id: (string) Unique identifier for the button group (e.g. "comments"). - Used to generate IDs: {id}-toggle, {id}-section, {id}-count. - - title: (string) Tooltip title. - - icon: (string) Path to the icon image. - - countId: (string, optional) Override for count element ID. Defaults to "{id}-count". - - sectionId: (string, optional) Override for section element ID. Defaults to "{id}-section". - - buttonId: (string, optional) Override for button element ID. Defaults to "{id}-toggle". - - group: (string, optional) Mutual exclusion group name. If provided, opening this toggle will close others in the same group. -*/}} {{ $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 "..." .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" @@ -23,7 +11,7 @@ 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 }}">...</span> + id="{{ $countId }}">{{ $count }}</span> </button> <script> @@ -40,7 +28,7 @@ const closeSection = () => { if (section.classList.contains('hidden')) return; - + section.classList.remove(entranceAnimation); section.classList.add(exitAnimation); setTimeout(() => { @@ -66,8 +54,8 @@ if (isHidden) { if (group) { - const event = new CustomEvent('toggle-group-open', { - detail: { group: group, sourceId: "{{ $buttonId }}" } + const event = new CustomEvent('toggle-group-open', { + detail: { group: group, sourceId: "{{ $buttonId }}" } }); document.dispatchEvent(event); } diff --git a/layouts/_partials/posts/action-menu/webmention-button.html b/layouts/_partials/posts/action-menu/webmention-button.html index 190b0f8b..aba5891f 100644 --- a/layouts/_partials/posts/action-menu/webmention-button.html +++ b/layouts/_partials/posts/action-menu/webmention-button.html @@ -1,18 +1,13 @@ +{{ $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" ) }} - -<script> -const target = encodeURIComponent("{{ .Permalink }}") -document.addEventListener('DOMContentLoaded', () => { - fetch("https://webmention.io/api/count?target="+target) - .then(response => response.json()) - .then(responseJson => { - document.getElementById("mention-count").textContent = responseJson.count; - }); -}); -</script> diff --git a/layouts/_partials/posts/action-menu/webmention-section.html b/layouts/_partials/posts/action-menu/webmention-section.html index 55588444..441e2491 100644 --- a/layouts/_partials/posts/action-menu/webmention-section.html +++ b/layouts/_partials/posts/action-menu/webmention-section.html @@ -1,27 +1,85 @@ <!-- Comment Section --> <div class="overflow-hidden"> <div class="mt-4 hidden animate-duration-200" id="webmention-section"> - <div id="webmentions"> - <p class="no-webmention">{{ T "webmention.fetching" }}</p> - </div> <div> - {{ $permalink := printf "https://www.geedea.pro%s" .RelPermalink }} - {{ $webmentions := index .Site.Data.webmentions $permalink }} - {{ $permalink }} + {{ $webmentions := index .Site.Data.webmentions .RelPermalink }} {{ with $webmentions }} + + {{ $webmentionLikes := slice }} + {{ $webmentionReplies := slice }} + {{ $webmentionMentions := slice }} + {{ 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 }} + + <!-- 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" + 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 . }} - {{ if eq .type "in-reply-to" }} - <div class=""> - <div class="flex"> - <img src="{{ .author.photo }}" alt="Profile Picture" - class="h-10 w-10 rd-full" /> + <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> - {{ end }} + <div class="markdown-body leading-relaxed px-2">{{ .content.html | safeHTML }}</div> + </div> + {{ end }} + </section> + <hr /> + {{ end }} + + <!-- 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 }} - {{ end}} + </section> + {{ end }} + + {{ end }} </div> - <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" diff --git a/uno.config.js b/uno.config.js index a2f74617..eed0e5fb 100644 --- a/uno.config.js +++ b/uno.config.js @@ -50,7 +50,7 @@ export default defineConfig({ ...'absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black'.split(' '), ...range(10, i => `opacity-${i * 10}`), - ...rangeWithPrefixes(5, 'rotate', ['', '-']), + ...rangeWithPrefixes(50, 'rotate', ['', '-', 'group-hover:', 'group-hover:-']), ...rangeWithPrefixes(5, 'translate-x', ['', '-']), ...rangeWithPrefixes(5, 'translate-y', ['', '-']), ...rangeWithPrefixes(30, 'w', ['', 'md:', 'lg:']), |