46 lines
2.8 KiB
Plaintext
46 lines
2.8 KiB
Plaintext
---
|
|
import { articleMessages } from '../utils/article-messages';
|
|
import { counterModeForRuntime, resolveCounterConfig } from '../utils/counter-mode';
|
|
interface Props { slug: string; lang: string }
|
|
const { slug, lang } = Astro.props;
|
|
const text = articleMessages(lang);
|
|
const counterConfig = resolveCounterConfig(
|
|
import.meta.env.PUBLIC_COUNTERS_MODE,
|
|
import.meta.env.PUBLIC_AIA_API_BASE,
|
|
import.meta.env.PUBLIC_COUNTERS_LIVE_APPROVED,
|
|
);
|
|
const runtimeMode = counterModeForRuntime(counterConfig);
|
|
const mockResult = import.meta.env.PUBLIC_COUNTERS_MOCK_RESULT === 'failed' || import.meta.env.PUBLIC_COUNTERS_MOCK_RESULT === 'unavailable'
|
|
? import.meta.env.PUBLIC_COUNTERS_MOCK_RESULT
|
|
: '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}>
|
|
<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'}>
|
|
<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>
|
|
</div>
|
|
<script>
|
|
import { bindMockForms } from '../scripts/mock-form';
|
|
bindMockForms();
|
|
</script>
|
|
|
|
<style>
|
|
.like-view-counter { align-items: center; border-top: 1px solid var(--color-border); display: flex; gap: var(--space-lg); font-size: .75rem; margin-block: var(--space-xl); padding-top: var(--space-md); }
|
|
.like-view-counter { font-size: .8rem; }
|
|
.like-group { align-items: center; display: inline-flex; gap: .35rem; }
|
|
.like-view-counter button { align-items: center; background: white; border: none; color: inherit; display: inline-flex; gap: 0; padding: 0; }
|
|
.like-view-counter .like-count { color: var(--color-text); min-width: 1ch; }
|
|
.like-view-counter .counter-status { color: var(--color-muted); font-size: .75rem; }
|
|
.like-view-counter .like-icon { fill: none; flex: 0 0 auto; stroke: #d92d20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
|
|
.like-view-counter button.liked .like-icon { fill: #d92d20; stroke: #d92d20; }
|
|
.like-view-counter button:disabled { cursor: wait; opacity: .65; }
|
|
</style>
|