refactor: separate interaction area

3 files changed, 35 insertions, 39 deletions

diff --git a/layouts/_partials/posts/interaction-buttons.html b/layouts/_partials/posts/interaction-buttons.html
new file mode 100644
index 0000000..524254e
--- /dev/null
+++ b/layouts/_partials/posts/interaction-buttons.html
@@ -0,0 +1,26 @@
+{{ $itemClasses := "font-mono" }}
+{{ $itemLinkClasses := "inline-flex items-center gap-2 hover:no-underline opactiy-50" }}
+
+<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>
diff --git a/layouts/_partials/posts/interaction-note.html b/layouts/_partials/posts/interaction-note.html
new file mode 100644
index 0000000..98593ec
--- /dev/null
+++ b/layouts/_partials/posts/interaction-note.html
@@ -0,0 +1,7 @@
+<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>
diff --git a/layouts/_partials/posts/interaction.html b/layouts/_partials/posts/interaction.html
index 610a26d..b44063c 100644
--- a/layouts/_partials/posts/interaction.html
+++ b/layouts/_partials/posts/interaction.html
@@ -1,41 +1,4 @@
-{{ $itemClasses := "font-mono" }}
-{{ $itemLinkClasses := "inline-flex items-center gap-2 hover:no-underline opactiy-50" }}
-
 <hr />
+{{ partial "posts/interaction-buttons" . }}
+{{ partial "posts/interaction-note" . }}
 
-<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>