From 4d7f297dcfa7ed88fd1fc42d95d0979bbc145551 Mon Sep 17 00:00:00 2001
From: bamboo <nmz89825@gmail.com>
Date: Sat, 11 Jan 2025 23:29:50 +0800
Subject: [PATCH] :sparkles: Feat: add open-heart function.

---
 .../PaperMod/assets/css/common/open-heart.css | 23 +++++++++++++++++++
 themes/PaperMod/layouts/_default/single.html  |  1 +
 .../PaperMod/layouts/partials/reaction.html   | 17 ++++++++++++++
 3 files changed, 41 insertions(+)
 create mode 100644 themes/PaperMod/assets/css/common/open-heart.css
 create mode 100644 themes/PaperMod/layouts/partials/reaction.html

diff --git a/themes/PaperMod/assets/css/common/open-heart.css b/themes/PaperMod/assets/css/common/open-heart.css
new file mode 100644
index 0000000..8e4643a
--- /dev/null
+++ b/themes/PaperMod/assets/css/common/open-heart.css
@@ -0,0 +1,23 @@
+open-heart {
+  border: 1px solid var(--pink);
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+open-heart:not([disabled]):hover,
+open-heart:not([disabled]):focus {
+  border-color: var(--red);
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
+}
+
+open-heart[disabled] {
+  cursor: not-allowed;
+  background: var(--pink);
+  color: var(--entry);
+}
+
+open-heart[count]:not([count="0"])::after {
+  content: attr(count);
+  padding-left: 3px;
+}
diff --git a/themes/PaperMod/layouts/_default/single.html b/themes/PaperMod/layouts/_default/single.html
index bb864f2..26f546d 100644
--- a/themes/PaperMod/layouts/_default/single.html
+++ b/themes/PaperMod/layouts/_default/single.html
@@ -53,6 +53,7 @@ <h1 class="post-title entry-hint-parent">
       <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
       {{- end }}
     </ul>
+    {{- partial "reaction.html" . }}
     {{- if (.Param "ShowPostNavLinks") }}
     {{- partial "post_nav_links.html" . }}
     {{- end }}
diff --git a/themes/PaperMod/layouts/partials/reaction.html b/themes/PaperMod/layouts/partials/reaction.html
new file mode 100644
index 0000000..fd0145e
--- /dev/null
+++ b/themes/PaperMod/layouts/partials/reaction.html
@@ -0,0 +1,17 @@
+{{- /* Reaction area start */ -}}
+<div class="post-reactions">
+  <open-heart href="https://open-heart-worker.zhuzi.workers.dev/?id={{ .Permalink }}" emoji="❤️">❤️</open-heart>
+</div>
+<script src="https://unpkg.com/open-heart-element" type="module"></script>
+<script>
+window.customElements.whenDefined('open-heart').then(() => {
+  for (const oh of document.querySelectorAll('open-heart')) {
+    oh.getCount()
+  }
+})
+// refresh component after click
+window.addEventListener('open-heart', e => {
+	e && e.target && e.target.getCount && e.target.getCount()
+})
+</script>
+{{- /* React area end */ -}}