feat(blog): enable live likes and first-party views

www/src/components/LikeViewCounter.astro

@@ -1,8 +1,8 @@
 ---
 import { articleMessages } from '../utils/article-messages';
 import { counterModeForRuntime, resolveCounterConfig } from '../utils/counter-mode';
-interface Props { slug: string; lang: string }
-const { slug, lang } = Astro.props;
+interface Props { slug: string; lang: string; trackView?: boolean }
+const { slug, lang, trackView = false } = Astro.props;
 const text = articleMessages(lang);
 const counterConfig = resolveCounterConfig(
   import.meta.env.PUBLIC_COUNTERS_MODE,
@@ -15,21 +15,23 @@ const mockResult = import.meta.env.PUBLIC_COUNTERS_MOCK_RESULT === 'failed' || i
   : 'success';
 const statusId = `counter-status-${slug.replace(/[^a-zA-Z0-9_-]/g, '-')}`;
 ---
-<div class="like-view-counter" data-counter data-counter-mode={runtimeMode} data-counter-reason={counterConfig.reason} data-mock-result={mockResult}>
+<div class="like-view-counter" data-counter data-counter-mode={runtimeMode} data-counter-reason={counterConfig.reason} data-api-base={counterConfig.apiBase} data-slug={slug} data-track-view={trackView ? 'true' : 'false'} data-like-label={text.like} data-unlike-label={text.unlike} data-ready-message={text.countersReady} data-error-message={text.counterError} data-mock-result={mockResult}>
   <span aria-label={text.articleViews}><span class="view-count" data-views dir={lang === 'ar' ? 'ltr' : undefined}>—</span> {text.views}</span>
   <span class="like-group" role={lang === 'ar' ? 'group' : undefined} aria-label={lang === 'ar' ? text.likes : undefined}>
     <span class="like-count" data-likes dir={lang === 'ar' ? 'ltr' : undefined}>—</span>
-    <button class="like-button" type="button" data-like data-slug={slug} aria-label={text.like} aria-describedby={statusId} aria-pressed="false" disabled={runtimeMode === 'off'}>
+    <button class="like-button" type="button" data-like aria-label={text.like} aria-describedby={statusId} aria-pressed="false" disabled={runtimeMode !== 'mock'}>
       <svg aria-hidden="true" viewBox="0 0 12 10" width="20" height="20" focusable="false" class="like-icon">
         <path d="m1 4.4c-1-4 2.5-5 4.5-2.5l.5 .6l.5-.6c2-2.5 6-1.5 4.5 2.5q-1 3-5 5q-4-2-5-5z"></path>
       </svg>
     </button>
   </span>
-  <span id={statusId} class="counter-status" aria-live="polite">{runtimeMode === 'mock' ? 'Demo metrics only' : text.counterUnavailable}</span>
+  <span id={statusId} class="counter-status" aria-live="polite">{runtimeMode === 'mock' ? 'Demo metrics only' : runtimeMode === 'off' ? text.counterUnavailable : ''}</span>
 </div>
 <script>
   import { bindMockForms } from '../scripts/mock-form';
+  import { bindLiveCounters } from '../scripts/likes-views';
   bindMockForms();
+  void bindLiveCounters();
 </script>
 
 <style>