Merge pull request #35 from nagomi-sugarheart/claude/add-comment-count-time-afn6i

main.py

@@ -662,12 +662,17 @@ async def api_comment(request: Request):
     return JSONResponse({"success": ok})
 
 @app.post("/api/like/{article_id}")
-async def api_like(article_id: str):
+async def api_like(article_id: str, request: Request):
+    try:
+        body = await request.json()
+        action = body.get("action", "add")
+    except Exception:
+        action = "add"
     article = get_article(article_id)
     if not article:
         return JSONResponse({"success": False, "likes": 0})
     current = int(article.get("likes", 0) or 0)
-    new_count = current + 1
+    new_count = max(0, current + (1 if action == "add" else -1))
     r = http_requests.patch(cms_url(f"blog/{article_id}"), headers=CMS_HEADERS_POST(),
                             json={"likes": new_count})
     return JSONResponse({"success": r.status_code in [200, 201], "likes": new_count})

templates/blog_detail.html

@@ -84,9 +84,9 @@
     <!-- いいね -->
     <div class="flex justify-center mb-8">
       <button id="like-btn" onclick="likeArticle('{{ article_id }}')"
-              class="flex flex-col items-center gap-1 px-8 py-4 rounded-2xl border-2 border-[#e09099] dark:border-[#c07080] hover:bg-[#fdf0f2] dark:hover:bg-[#3d1a20] transition group">
-        <span id="like-icon" class="text-3xl transition-transform group-hover:scale-110">♡</span>
-        <span id="like-count" class="text-sm font-bold text-[#bf283a] dark:text-[#f08090]">{{ article.get("likes", 0) or 0 }}</span>
+              class="w-20 h-20 rounded-full border-2 border-[#e09099] dark:border-[#c07080] flex flex-col items-center justify-center gap-0.5 hover:bg-[#fdf0f2] dark:hover:bg-[#3d1a20] transition group">
+        <span id="like-icon" class="text-2xl transition-transform group-hover:scale-110 leading-none">♡</span>
+        <span id="like-count" class="text-xs font-bold text-[#bf283a] dark:text-[#f08090] leading-none">{{ article.get("likes", 0) or 0 }}</span>
       </button>
     </div>
 
@@ -166,16 +166,25 @@ function toggleReplyForm(commentId) {
 
 async function likeArticle(articleId) {
   const key = `liked_${articleId}`;
-  if (localStorage.getItem(key)) return;
+  const isLiked = !!localStorage.getItem(key);
   const btn = document.getElementById('like-btn');
   btn.disabled = true;
-  const res = await fetch(`/api/like/${articleId}`, { method: 'POST' });
+  const res = await fetch(`/api/like/${articleId}`, {
+    method: 'POST', headers: {'Content-Type': 'application/json'},
+    body: JSON.stringify({action: isLiked ? 'remove' : 'add'})
+  });
   const data = await res.json();
   if (data.success) {
-    localStorage.setItem(key, '1');
-    document.getElementById('like-icon').textContent = '❤️';
+    if (isLiked) {
+      localStorage.removeItem(key);
+      document.getElementById('like-icon').textContent = '♡';
+      btn.classList.remove('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
+    } else {
+      localStorage.setItem(key, '1');
+      document.getElementById('like-icon').textContent = '❤️';
+      btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
+    }
     document.getElementById('like-count').textContent = data.likes;
-    btn.classList.add('bg-[#fdf0f2]', 'dark:bg-[#3d1a20]');
   }
   btn.disabled = false;
 }