feat: new interaction area

7 files changed, 80 insertions, 4 deletions

diff --git a/layouts/_partials/posts/interaction.html b/layouts/_partials/posts/interaction.html
new file mode 100644
index 0000000..610a26d
--- /dev/null
+++ b/layouts/_partials/posts/interaction.html
@@ -0,0 +1,41 @@
+{{ $itemClasses := "font-mono" }}
+{{ $itemLinkClasses := "inline-flex items-center gap-2 hover:no-underline opactiy-50" }}
+
+<hr />
+
+<section id="interaction"
+    class="flex gap-1 justify-between">
+    <div id="interaction-like" class="{{ $itemClasses }}">
+        {{ partial "posts/like" . }}
+    </div>
+    <div class="flex gap-2">
+        <div id="interaction-email" class="{{ $itemClasses }}"> 
+            <a href="mailto:hi@eltr.ac?subject=回复：{{ .Title }}"
+               class="{{ $itemLinkClasses }}">
+                <img src="/icons/mail.svg" width="16" height="16"> Email
+            </a>
+        </div>
+        <div id="interaction-fedi" class="{{ $itemClasses }}">
+            {{ $fedipost := or .Params.toot .Params.fedi }}
+            {{ with $fedipost }}
+            <a href="{{ . }}" target="_blank"
+               class="{{ $itemLinkClasses }}">
+                <span class="xerox font-sans">⁂</span> Fediverse
+            </a>
+            {{ end }}
+        </div>
+    </div>
+</section>
+
+<div id="interaction-note" class="my-4 px-5 py-2 rd-lg relative"
+     style="background-color: oklch(from var(--block-background-color) l c h / calc(alpha - 0.5))">
+    <p>「極客死亡計劃」没有评论区，你可以前往<a href="{{ or .Params.toot .Params.fedi }}">联邦宇宙</a>参与讨论，或者给我<a href="mailto:hi@eltr.ac?subject=回复：{{ .Title }}">发邮件</a>。本站也支持 <a href="/article/webmention">Webmention</a> 规范，如果你写了一篇文章回应此文，可以<a href="https://wm.geedea.pro/?target={{ .Permalink }}">去这里</a>用表单提交。目前只有 Webmention 会显示在网站上。</p>
+    <button onclick="document.getElementById('interaction-note').classList.add('hidden');
+                     localStorage.setItem('geedeapro.closeInteractionNote', true)"
+            class="absolute top-1 right-1 rotate-45 text-lg text-secondary">+</button>
+</div>
+<script>
+if (localStorage.getItem('geedea.closeInteractionNote')) {
+    document.getElementById('interaction-note').classList.add('hidden')
+}
+</script>
diff --git a/layouts/_partials/posts/like.html b/layouts/_partials/posts/like.html
index a1874b3..32b7355 100644
--- a/layouts/_partials/posts/like.html
+++ b/layouts/_partials/posts/like.html
@@ -2,7 +2,7 @@
   <input type="hidden" name="page_slug" value="{{ .RelPermalink }}">
   <button type="submit" 
     class="iine-button bg-transparent font-mono" 
-    aria-hidden="true" data-icon="🫀" 
+    aria-hidden="true" data-icon="organ" 
     data-tooltip="{{ T "webmention.offerHeart" }}">
     <noscript>❤️</noscript>
   </button>
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index b21a88f..145076f 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -9,6 +9,12 @@ document.addEventListener("DOMContentLoaded", () => {
 })
 </script>
 
+<script>
+if (localStorage.getItem('geedeapro.closeInteractionNote')) {
+    document.getElementById('interaction-note').classList.add('hidden')
+}
+</script>
+
 <!-- global JS -->
 {{ $commonJS := slice
   (resources.Get "js/tooltip.js")
diff --git a/layouts/_partials/template/post-page.html b/layouts/_partials/template/post-page.html
index 0b55d48..144c64d 100644
--- a/layouts/_partials/template/post-page.html
+++ b/layouts/_partials/template/post-page.html
@@ -36,7 +36,7 @@
     </header>
 
     {{ partial "content" . }}
-    {{ partial "posts/webmention" . }}
+    {{ partial "posts/interaction" . }}
     <!-- kept for legacy pages -->
     {{ partial "posts/comment" . }}
 
diff --git a/layouts/fiction/page.html b/layouts/fiction/page.html
index 37e91c8..490f106 100644
--- a/layouts/fiction/page.html
+++ b/layouts/fiction/page.html
@@ -17,7 +17,7 @@
       </header>
 
         {{ partial "content" . }}
-        {{ partial "posts/webmention" . }}
+        {{ partial "posts/interaction" . }}
         {{ partial "components/back-to-top" . }}
         {{ partial "components/microformats" . }}
     </article>
diff --git a/layouts/library/page.html b/layouts/library/page.html
index dd7c220..00bb94f 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -30,7 +30,7 @@
         </div>
 
         {{ partial "components/backlinks" (dict "filename" .File.BaseFileName "type" "library" "context" .) }}
-        {{ partial "posts/webmention" . }}
+        {{ partial "posts/interaction" . }}
         {{ partial "components/back-to-top.html" . }}
         {{ partial "components/microformats" . }}
 
diff --git a/static/icons/mail.svg b/static/icons/mail.svg
new file mode 100644
index 0000000..c3367a9
--- /dev/null
+++ b/static/icons/mail.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

+	 width="800px" height="800px" viewBox="0 0 191.19 191.19"

+	 xml:space="preserve">

+<g>

+	<path d="M182.753,34.027c0.707-2.406-1.221-4.906-3.796-5.004c-20.829-0.797-42.104,0.636-63.245-0.604

+		c-34.812-2.043-70.733,0.774-104.833,8.02c-3.933,0.836-3.675,5.264-1.188,7.198c0.091,0.567,0.315,1.15,0.752,1.708

+		c11.998,15.319,30.391,28.061,46.01,39.606c13.071,9.662,35.09,26.935,53.084,22.581c16.261-3.936,27.246-18.017,38.719-29.208

+		c7.966-7.77,24.922-19.486,29.486-32.087c1.058-1.438,2.117-2.874,3.209-4.284c0.224-0.235,0.426-0.484,0.651-0.716

+		c0.318-0.325,0.491-0.676,0.665-1.025c0.229-0.297,0.473-0.582,0.68-0.895c0.273-0.413,1.447-2.247,0.683-1.148

+		C184.258,36.556,183.884,34.95,182.753,34.027z"/>

+	<path d="M40.337,80.946c-4.346-2.456-8.811-4.707-13.244-7.006c-3.62-2.414-7.212-4.865-10.687-7.478

+		c-1.092-0.918-2.202-1.816-3.305-2.721c-0.338-1.25-1.289-2.229-2.734-2.251c-0.466-0.371-0.91-0.77-1.38-1.137

+		c-0.839-0.655-1.754-0.872-2.629-0.835c-0.524-0.805-1.101-1.574-1.746-2.294c-0.06-0.067-0.193-0.073-0.252,0

+		c-7.607,9.297-3.24,21.563-1.843,32.833c2.453,19.786,5.723,39.21,5.075,59.218c-0.133,4.105,4.762,5.459,7.509,3.11

+		c15.423-13.194,37.458-35.921,39.122-57.259C54.786,87.897,45.357,83.784,40.337,80.946z"/>

+	<path d="M189.448,57.349c-0.164-1.811-1.415-2.728-2.729-2.825c-0.548-3.508-5.605-3.948-7.554-1.123

+		c-1.52,2.202-2.993,4.432-4.453,6.669c-3.817,3.699-7.025,8.823-9.778,12.185c-7.772,9.495-15.208,19.26-23.005,28.737

+		c-1.695,2.06-1.755,4.463,0,6.518c12.947,15.155,25.604,30.656,42.249,41.919c2.895,1.958,6.812-0.646,6.805-3.905

+		C190.923,116.204,192.094,86.573,189.448,57.349z"/>

+	<path d="M163.881,148.27c-0.001-0.004-0.001-0.007-0.002-0.01c-2.317-6.075-8.396-10.881-12.717-15.548

+		c-8.189-8.843-16.678-17.408-26.313-24.677c-1.547-1.167-3.942-0.55-5.22,0.674c-1.203,1.149-2.461,2.128-3.756,2.986

+		c-2.944-0.253-5.919-0.197-8.749-0.013c-13.335,0.871-20.612,2.948-32.78-5.775c-1.54-1.104-4.371-0.761-5.574,0.719

+		c-11.252,13.828-20.296,29.23-30.968,43.48c-1.545,1.403-3.15,2.745-4.898,3.94c-0.172,0.118-0.261,0.268-0.402,0.4

+		c-5.364,0.169-5.231,8.095,0.124,8.442c42.625,2.778,84.994-6.245,127.569-7.035C163.9,155.787,166.386,151.159,163.881,148.27z"/>

+</g>

+</svg>
\ No newline at end of file