Add Supabase analytics tracking

- page_view on every page load
- project_click when a project is opened (homepage + projects page)
- post_read when a post is opened (homepage + writing listing + post view)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: actions-user

js/analytics.js

@@ -0,0 +1,34 @@
+/* ============================================
+   Analytics — Supabase event tracking
+   Anon key is safe to expose (insert-only RLS)
+   ============================================ */
+
+const URL  = 'https://bfqcfhvpauvvakgmeuhr.supabase.co/rest/v1/events';
+const KEY  = 'sb_publishable_yH1CSzF3YQ8FpU-hF-QEtg_ZWaKDLsR';
+
+const HEADERS = {
+    'Content-Type':  'application/json',
+    'apikey':        KEY,
+    'Authorization': `Bearer ${KEY}`,
+    'Prefer':        'return=minimal'
+};
+
+export async function trackEvent(event_type, label = null) {
+    try {
+        await fetch(URL, {
+            method: 'POST',
+            headers: HEADERS,
+            body: JSON.stringify({
+                event_type,
+                label,
+                page: window.location.pathname
+            })
+        });
+    } catch {
+        // Silent fail — never break UX for analytics
+    }
+}
+
+export function trackPageView() {
+    trackEvent('page_view', document.title.replace('jebin2 — ', '') || 'home');
+}

js/blog.js

@@ -6,6 +6,7 @@
 import { initPage, renderSkeletonRows } from './shared.js';
 import { fetchCached, fetchTextCached } from './cache.js';
 import { formatDate, formatDateShort } from './utils.js';
+import { trackEvent } from './analytics.js';
 
 async function init() {
     const params   = new URLSearchParams(window.location.search);
@@ -35,6 +36,11 @@ async function initListingView() {
     try {
         const manifest = await fetchCached(config.blog_manifest);
         renderListing(manifest.posts || [], document.getElementById('posts-list'));
+        // Track post clicks from listing
+        document.getElementById('posts-list')?.addEventListener('click', e => {
+            const row = e.target.closest('[data-track]');
+            if (row) trackEvent('post_read', row.dataset.track);
+        });
     } catch (err) {
         console.error(err);
         document.getElementById('posts-list').innerHTML =
@@ -66,7 +72,8 @@ function renderListing(posts, container) {
             <div class="group-label">— ${cat} —</div>
             <div class="project-group-items">
                 ${items.map(p => `
-                    <a class="blog-row" href="/writing?post=${encodeURIComponent(p.path)}">
+                    <a class="blog-row" href="/writing?post=${encodeURIComponent(p.path)}"
+                       data-track="${p.title}">
                         <span class="blog-title">${p.title}</span>
                         <span class="blog-meta">
                             <span class="blog-cat">[ ${cat} ]</span>
@@ -101,6 +108,7 @@ async function initPostView(postPath) {
         const nextPost   = idx > 0                ? posts[idx - 1] : null;
 
         document.title = meta ? `jebin2 — ${meta.title}` : 'jebin2 — writing';
+        if (meta?.title) trackEvent('post_read', meta.title);
 
         renderPost(mdText, meta, prevPost, nextPost, main);
     } catch (err) {

js/home.js

@@ -5,6 +5,7 @@
 import { initPage, renderSkeletonRows } from './shared.js';
 import { fetchCached } from './cache.js';
 import { formatDateShort } from './utils.js';
+import { trackEvent } from './analytics.js';
 
 async function init() {
     const config = await initPage('');
@@ -43,13 +44,18 @@ function renderFeatured(projects, container) {
 
     container.innerHTML = featured.map((p, i) => `
         <a class="project-row" href="${p.url}" target="_blank" rel="noopener noreferrer"
-           title="${p.description}">
+           title="${p.description}" data-track="${p.title}">
             <span class="project-num">${String(i + 1).padStart(2, '0')}.</span>
             <span class="project-name">${p.title}</span>
             <span class="project-desc">${p.description}</span>
             <span class="project-tag">[ ${p.category} ]</span>
         </a>
     `).join('');
+
+    container.addEventListener('click', e => {
+        const row = e.target.closest('[data-track]');
+        if (row) trackEvent('project_click', row.dataset.track);
+    });
 }
 
 function renderLatestPosts(manifest, container) {
@@ -68,13 +74,18 @@ function renderLatestPosts(manifest, container) {
     container.innerHTML = posts.map((p, i) => {
         const slug = encodeURIComponent(p.path);
         return `
-            <a class="project-row" href="/writing?post=${slug}">
+            <a class="project-row" href="/writing?post=${slug}" data-track="${p.title}">
                 <span class="project-num">${String(i + 1).padStart(2, '0')}.</span>
                 <span class="project-name">${p.title}</span>
                 <span class="blog-date">${formatDateShort(p.date)}</span>
             </a>
         `;
     }).join('');
+
+    container.addEventListener('click', e => {
+        const row = e.target.closest('[data-track]');
+        if (row) trackEvent('post_read', row.dataset.track);
+    });
 }
 
 init();

js/projects.js

@@ -4,6 +4,7 @@
 
 import { initPage, renderSkeletonRows } from './shared.js';
 import { fetchCached } from './cache.js';
+import { trackEvent } from './analytics.js';
 
 const GROUPS = [
     { key: 'ai',   label: '— ai —' },
@@ -24,6 +25,7 @@ async function init() {
         allProjects = await fetchCached(config.projects);
         render('all');
         initFilter();
+        initTracking();
     } catch (err) {
         console.error(err);
         if (listEl) listEl.innerHTML = '<p class="state-msg">failed to load projects.</p>';
@@ -75,14 +77,23 @@ function projectRow(p) {
            href="${p.url}"
            target="_blank"
            rel="noopener noreferrer"
-           title="${p.description}">
+           title="${p.description}"
+           data-track="${p.title}">
             <span class="project-name">${p.title}</span>
             <span class="project-desc">${p.description}</span>
             <span class="project-tag">[ ${p.category} ]</span>
         </a>
     `;
 }
 
+/* ---- Track project clicks ---- */
+function initTracking() {
+    document.getElementById('project-list')?.addEventListener('click', e => {
+        const row = e.target.closest('[data-track]');
+        if (row) trackEvent('project_click', row.dataset.track);
+    });
+}
+
 /* ---- Filter buttons ---- */
 function initFilter() {
     const buttons = document.querySelectorAll('.filter-btn');

js/shared.js

@@ -3,6 +3,7 @@
    ============================================ */
 
 import { fetchCached } from './cache.js';
+import { trackPageView } from './analytics.js';
 
 let _config = null;
 
@@ -95,5 +96,6 @@ export async function initPage(activePage = '') {
     if (footerEl) footerEl.innerHTML = renderFooter(config);
 
     initNav();
+    trackPageView();
     return config;
 }