feat: add upvote supports to post (#48)

添加文章点赞的支持。

/kind feature

<img width="1106" alt="image" src="https://user-images.githubusercontent.com/21301288/218495333-6363ab53-7511-40fa-8d63-d10d3987cb6b.png">

```release-note
为文章添加点赞的支持
```

src/alpine-data/post-upvote.ts

@@ -0,0 +1,50 @@
+interface PostUpvote {
+  upvotedNames: string[];
+  init(): void;
+  upvoted(id: string): boolean;
+  handleUpvote(name: string): void;
+}
+
+export default (): PostUpvote => ({
+  upvotedNames: [],
+  init() {
+    this.upvotedNames = JSON.parse(localStorage.getItem("halo.upvoted.post.names") || "[]");
+  },
+  upvoted(id: string) {
+    return this.upvotedNames.includes(id);
+  },
+  async handleUpvote(name) {
+    if (this.upvoted(name)) {
+      return;
+    }
+
+    const xhr = new XMLHttpRequest();
+
+    xhr.open("POST", "/apis/api.halo.run/v1alpha1/trackers/upvote");
+    xhr.setRequestHeader("Content-Type", "application/json");
+
+    xhr.onload = () => {
+      this.upvotedNames = [...this.upvotedNames, name];
+      localStorage.setItem("halo.upvoted.post.names", JSON.stringify(this.upvotedNames));
+
+      const upvoteNode = document.querySelector('[data-upvote-post-name="' + name + '"]');
+
+      if (!upvoteNode) {
+        return;
+      }
+
+      const upvoteCount = parseInt(upvoteNode.textContent || "0");
+      upvoteNode.textContent = upvoteCount + 1 + " 点赞";
+    };
+    xhr.onerror = function () {
+      alert("网络请求失败，请稍后再试");
+    };
+    xhr.send(
+      JSON.stringify({
+        group: "content.halo.run",
+        plural: "posts",
+        name: name,
+      })
+    );
+  },
+});

src/main.ts

@@ -4,11 +4,13 @@ import Alpine from "alpinejs";
 import * as tocbot from "tocbot";
 import dropdown from "./alpine-data/dropdown";
 import colorSchemeSwitcher from "./alpine-data/color-scheme-switcher";
+import postUpvote from "./alpine-data/post-upvote";
 
 window.Alpine = Alpine;
 
 Alpine.data("dropdown", dropdown);
 Alpine.data("colorSchemeSwitcher", colorSchemeSwitcher);
+Alpine.data("postUpvote", postUpvote);
 
 Alpine.start();
 

templates/post.html

@@ -28,8 +28,8 @@ <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
     <th:block th:replace="~{modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})}"></th:block>
   </th:block>
   <th:block th:fragment="content">
-    <div class="rounded-xl bg-white p-4 dark:bg-slate-800">
-      <div class="flex items-center justify-between">
+    <div x-data="postUpvote" class="rounded-xl bg-white p-4 dark:bg-slate-800">
+      <div th:attr="x-data=|{name:'${post.metadata.name}'}|" class="flex items-center justify-between">
         <div class="inline-flex items-center justify-start gap-2">
           <a th:href="@{${post.owner.permalink}}" th:title="${post.owner.displayName}">
             <img
@@ -53,13 +53,21 @@ <h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
               <span class="text-gray-300 dark:text-slate-200">/</span>
               <span th:text="|${post.stats?.comment ?:0} 评论|"> </span>
               <span class="text-gray-300 dark:text-slate-200">/</span>
-              <span th:text="|${post.stats?.upvote ?:0} 点赞|"> </span>
+              <span th:attr="data-upvote-post-name=${post.metadata.name}" th:text="|${post.stats?.upvote ?:0} 点赞|">
+              </span>
             </div>
           </div>
         </div>
         <div class="inline-flex flex-row gap-1">
-          <div th:if="${false}" class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600">
-            <div class="i-tabler-heart text-lg text-gray-600 hover:text-red-600 dark:text-slate-100"></div>
+          <div
+            @click="handleUpvote(name)"
+            class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600"
+            :class="{'bg-gray-100 dark:bg-slate-600':upvoted(name)}"
+          >
+            <div
+              class="i-tabler-heart text-lg text-gray-600 hover:text-red-600"
+              :class="{'text-red-600 dark:text-red-400':upvoted(name)}"
+            ></div>
           </div>
           <a
             th:if="${pluginFinder.available('PluginCommentWidget')} and ${post.spec.allowComment} and ${site.comment.enable}"