Blog: Add Like buttons

vdavid · vdavid · commit 5cff7c356790 · 2026-03-31T10:42:44.000+02:00
diff --git a/apps/api-server/src/index.ts b/apps/api-server/src/index.ts
@@ -21,6 +21,8 @@ import { pruneStaleDevices, shouldAlert, type DeviceSet } from './device-trackin
 type Bindings = {
   // KV namespace for license code -> full key mappings
   LICENSE_CODES: KVNamespace
+  // KV namespace for blog post likes
+  BLOG_LIKES: KVNamespace
   // Analytics Engine for device count tracking (fair use monitoring)
   DEVICE_COUNTS: AnalyticsEngineDataset
   // D1 database for telemetry persistence (crash reports, downloads, update checks)
@@ -868,6 +870,80 @@ app.get('/download/:version/:arch', async (c) => {
   return c.redirect(`https://github.com/vdavid/cmdr/releases/download/v${version}/Cmdr_${version}_${arch}.dmg`, 302)
 })
 
+// --- Blog likes ---
+
+type LikesData = { count: number; hashes: string[] }
+
+const likesAllowedOrigins = new Set(['https://getcmdr.com', 'https://www.getcmdr.com'])
+
+function likesCors(c: { req: { header: (name: string) => string | undefined }; header: (name: string, value: string) => void }) {
+  const origin = c.req.header('origin')
+  if (origin && likesAllowedOrigins.has(origin)) {
+    c.header('Access-Control-Allow-Origin', origin)
+    c.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS')
+    c.header('Access-Control-Allow-Headers', 'Content-Type')
+    c.header('Vary', 'Origin')
+  }
+}
+
+async function hashIpForLikes(ip: string): Promise<string> {
+  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode('cmdr-likes:' + ip))
+  return [...new Uint8Array(buffer)].slice(0, 8).map((b) => b.toString(16).padStart(2, '0')).join('')
+}
+
+async function getLikesData(kv: KVNamespace, slug: string): Promise<LikesData> {
+  const raw = await kv.get(`likes:${slug}`)
+  if (!raw) return { count: 0, hashes: [] }
+  return JSON.parse(raw) as LikesData
+}
+
+app.options('/likes/:slug', (c) => {
+  likesCors(c)
+  return c.body(null, 204)
+})
+
+app.get('/likes/:slug', async (c) => {
+  likesCors(c)
+  const slug = c.req.param('slug')
+  const ip = c.req.header('cf-connecting-ip') ?? c.req.header('x-forwarded-for') ?? 'unknown'
+  const ipHash = await hashIpForLikes(ip)
+  const data = await getLikesData(c.env.BLOG_LIKES, slug)
+  return c.json({ count: data.count, liked: data.hashes.includes(ipHash) })
+})
+
+app.post('/likes/:slug', async (c) => {
+  likesCors(c)
+  const slug = c.req.param('slug')
+  const ip = c.req.header('cf-connecting-ip') ?? c.req.header('x-forwarded-for') ?? 'unknown'
+  const ipHash = await hashIpForLikes(ip)
+  const data = await getLikesData(c.env.BLOG_LIKES, slug)
+
+  if (!data.hashes.includes(ipHash)) {
+    data.hashes.push(ipHash)
+    data.count = data.hashes.length
+    await c.env.BLOG_LIKES.put(`likes:${slug}`, JSON.stringify(data))
+  }
+
+  return c.json({ count: data.count, liked: true })
+})
+
+app.delete('/likes/:slug', async (c) => {
+  likesCors(c)
+  const slug = c.req.param('slug')
+  const ip = c.req.header('cf-connecting-ip') ?? c.req.header('x-forwarded-for') ?? 'unknown'
+  const ipHash = await hashIpForLikes(ip)
+  const data = await getLikesData(c.env.BLOG_LIKES, slug)
+
+  const idx = data.hashes.indexOf(ipHash)
+  if (idx !== -1) {
+    data.hashes.splice(idx, 1)
+    data.count = data.hashes.length
+    await c.env.BLOG_LIKES.put(`likes:${slug}`, JSON.stringify(data))
+  }
+
+  return c.json({ count: data.count, liked: false })
+})
+
 export { app }
 
 // --- Scheduled handler (cron) ---
diff --git a/apps/api-server/wrangler.toml b/apps/api-server/wrangler.toml
@@ -22,6 +22,11 @@ zone_name = "getcmdr.com"
 binding = "LICENSE_CODES"
 id = "64418f5cb33e4c629fe0ccf51be76399"
 
+# KV namespace for blog post likes (separate from license data)
+[[kv_namespaces]]
+binding = "BLOG_LIKES"
+id = "4ff902a7cb084fca97e02c7758ba913e"
+
 # Analytics Engine for device count tracking (fair use monitoring)
 [[analytics_engine_datasets]]
 binding = "DEVICE_COUNTS"
diff --git a/apps/website/src/components/LikeButton.astro b/apps/website/src/components/LikeButton.astro
@@ -0,0 +1,152 @@
+---
+
+---
+
+<div class="like-section">
+    <button class="like-button" aria-label="Like this article">
+        <svg class="like-heart" viewBox="0 0 24 24" width="20" height="20">
+            <path
+                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+            ></path>
+        </svg>
+        <span class="like-count"></span>
+    </button>
+    <span class="like-error"></span>
+</div>
+
+<script is:inline>
+    ;(function () {
+        const section = document.querySelector('.like-section')
+        const button = section.querySelector('.like-button')
+        const heart = button.querySelector('.like-heart')
+        const countEl = button.querySelector('.like-count')
+        const errorEl = section.querySelector('.like-error')
+        const slug = window.location.pathname.replace(/^\/blog\//, '').replace(/\/$/, '')
+        const apiBase = 'https://api.getcmdr.com'
+        const storageKey = `liked:${slug}`
+        const countKey = `like-count:${slug}`
+        const isDev = location.hostname === 'localhost' || location.hostname === '127.0.0.1'
+
+        // Restore state instantly from localStorage
+        const cachedCount = localStorage.getItem(countKey)
+        if (localStorage.getItem(storageKey)) {
+            heart.classList.add('liked')
+        }
+        if (cachedCount) {
+            countEl.textContent = cachedCount
+        }
+
+        if (isDev) return
+
+        // Fetch current count and server-side liked status
+        fetch(`${apiBase}/likes/${encodeURIComponent(slug)}`)
+            .then(r => r.json())
+            .then(data => {
+                updateCount(data.count)
+                if (data.liked) {
+                    heart.classList.add('liked')
+                    localStorage.setItem(storageKey, '1')
+                } else {
+                    heart.classList.remove('liked')
+                    localStorage.removeItem(storageKey)
+                }
+            })
+            .catch(() => {})
+
+        function updateCount(count) {
+            countEl.textContent = count > 0 ? count : ''
+            if (count > 0) {
+                localStorage.setItem(countKey, String(count))
+            } else {
+                localStorage.removeItem(countKey)
+            }
+        }
+
+        button.addEventListener('click', () => {
+            const isLiked = heart.classList.contains('liked')
+            const prevCount = countEl.textContent
+
+            // Optimistic update
+            heart.classList.toggle('liked')
+            errorEl.textContent = ''
+            if (isLiked) {
+                localStorage.removeItem(storageKey)
+            } else {
+                localStorage.setItem(storageKey, '1')
+            }
+
+            fetch(`${apiBase}/likes/${encodeURIComponent(slug)}`, { method: isLiked ? 'DELETE' : 'POST' })
+                .then(r => {
+                    if (!r.ok) throw new Error()
+                    return r.json()
+                })
+                .then(data => updateCount(data.count))
+                .catch(() => {
+                    // Rollback
+                    heart.classList.toggle('liked')
+                    countEl.textContent = prevCount
+                    if (isLiked) {
+                        localStorage.setItem(storageKey, '1')
+                    } else {
+                        localStorage.removeItem(storageKey)
+                    }
+                    errorEl.textContent = 'Something went wrong — try again later.'
+                })
+        })
+    })()
+</script>
+
+<style>
+    .like-section {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    .like-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.4em;
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        font-family: var(--font-sans);
+        font-size: 0.875rem;
+        color: var(--color-text-tertiary);
+        transition: color var(--duration-normal) var(--ease-out-expo);
+    }
+
+    .like-button:hover {
+        color: var(--color-accent);
+    }
+
+    .like-heart {
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        transition:
+            fill var(--duration-normal) var(--ease-out-expo),
+            color var(--duration-normal) var(--ease-out-expo);
+    }
+
+    .like-heart.liked {
+        fill: var(--color-accent);
+        color: var(--color-accent);
+    }
+
+    .like-count {
+        line-height: 20px;
+    }
+
+    .like-error:empty {
+        display: none;
+    }
+
+    .like-error {
+        display: block;
+        margin-top: 0.3em;
+        font-family: var(--font-sans);
+        font-size: 0.75rem;
+        color: var(--color-text-tertiary);
+    }
+</style>
diff --git a/apps/website/src/pages/blog/[slug].astro b/apps/website/src/pages/blog/[slug].astro
@@ -1,5 +1,6 @@
 ---
 import BlogLayout from '../../layouts/BlogLayout.astro'
+import LikeButton from '../../components/LikeButton.astro'
 import BlogNewsletterCta from '../../components/BlogNewsletterCta.astro'
 import Remark42Comments from '../../components/Remark42Comments.astro'
 import { getCollection, render } from 'astro:content'
@@ -23,6 +24,7 @@ const { Content } = await render(post)
     ogImage={`/og/${post.id}.png`}
 >
     <Content />
+    <LikeButton />
     <BlogNewsletterCta />
     <Remark42Comments />
 </BlogLayout>
