✨ Feat: add open-heart function.

bambooom · Jan 11, 2025 · 4d7f297 · 4d7f297
1 parent 8c92cde
commit 4d7f297
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/themes/PaperMod/assets/css/common/open-heart.css 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
@@ -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
@@ -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 */ -}}