https://www.navidmirnouri.com/assets/likes.js

1(function () {
2  // Set this to your deployed Worker URL — see blog-likes-worker/README.md
3  const API_BASE = 'https://blog-likes.navidmirnourilikes.workers.dev';
4
5  const widget = document.querySelector('.like-widget');
6  if (!widget) return;
7
8  const slug = widget.dataset.slug;
9  const btn = widget.querySelector('.like-btn');
10  const icon = btn.querySelector('i');
11  const countEl = widget.querySelector('.like-count');
12  const storageKey = `liked:${slug}`;
13
14  function render(count, liked) {
15    countEl.textContent = count;
16    btn.classList.toggle('liked', liked);
17    btn.setAttribute('aria-pressed', liked ? 'true' : 'false');
18    icon.className = liked ? 'fas fa-heart' : 'far fa-heart';
19  }
20
21  fetch(`${API_BASE}/api/likes/${encodeURIComponent(slug)}`)
22    .then((r) => r.json())
23    .then((data) => render(data.count, localStorage.getItem(storageKey) === '1'))
24    .catch(() => {
25      countEl.textContent = '—';
26    });
27
28  btn.addEventListener('click', () => {
29    const alreadyLiked = localStorage.getItem(storageKey) === '1';
30    const action = alreadyLiked ? 'unlike' : 'like';
31
32    btn.disabled = true;
33    fetch(`${API_BASE}/api/likes/${encodeURIComponent(slug)}`, {
34      method: 'POST',
35      headers: { 'Content-Type': 'application/json' },
36      body: JSON.stringify({ action }),
37    })
38      .then((r) => r.json())
39      .then((data) => {
40        localStorage.setItem(storageKey, alreadyLiked ? '0' : '1');
41        render(data.count, !alreadyLiked);
42      })
43      .catch(() => {})
44      .finally(() => {
45        btn.disabled = false;
46      });
47  });
48})();