mirror of
https://github.com/samber/awesome-prometheus-alerts.git
synced 2026-06-21 00:47:18 +08:00
a56d8cf2a4
- Style: brand orange background with white text (visible on any bg) - Trigger: every 5 copies OR after 10 minutes of inactivity on page - Auto-hide: 15s (reset if toast re-triggers before expiry) - Idle timer resets on each copy
78 lines
2.5 KiB
Text
78 lines
2.5 KiB
Text
---
|
|
import { GITHUB_URL } from '../data/site';
|
|
---
|
|
|
|
<!-- Star nudge toast — shown every 5 copies -->
|
|
<div
|
|
id="star-toast"
|
|
role="status"
|
|
aria-live="polite"
|
|
class="fixed bottom-6 right-6 z-50 hidden max-w-sm w-full"
|
|
>
|
|
<div class="flex items-center gap-3 bg-brand rounded-xl shadow-xl px-4 py-3">
|
|
<svg class="w-4 h-4 text-white/80 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
</svg>
|
|
<p class="flex-1 text-sm text-white">
|
|
Useful? <a
|
|
href={GITHUB_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="font-semibold underline underline-offset-2 hover:no-underline transition-all"
|
|
>Star on GitHub</a> — it helps others discover it.
|
|
</p>
|
|
<button
|
|
id="star-toast-close"
|
|
aria-label="Dismiss"
|
|
class="flex-shrink-0 text-white/60 hover:text-white transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const COPY_COUNT_KEY = 'gh_star_copy_count';
|
|
const SHOW_EVERY = 5;
|
|
const IDLE_MS = 10 * 60 * 1000; // 10 minutes
|
|
|
|
const toast = document.getElementById('star-toast');
|
|
const closeBtn = document.getElementById('star-toast-close');
|
|
let autoHideTimer: ReturnType<typeof setTimeout> | null = null;
|
|
let idleTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
function displayToast() {
|
|
if (!toast) return;
|
|
if (autoHideTimer) clearTimeout(autoHideTimer);
|
|
toast.classList.remove('hidden');
|
|
autoHideTimer = setTimeout(hideToast, 15000);
|
|
}
|
|
|
|
function hideToast() {
|
|
toast?.classList.add('hidden');
|
|
if (autoHideTimer) { clearTimeout(autoHideTimer); autoHideTimer = null; }
|
|
}
|
|
|
|
function resetIdleTimer() {
|
|
if (idleTimer) clearTimeout(idleTimer);
|
|
idleTimer = setTimeout(displayToast, IDLE_MS);
|
|
}
|
|
|
|
function onCopy() {
|
|
// Increment counter and show every 5th copy
|
|
const count = (parseInt(sessionStorage.getItem(COPY_COUNT_KEY) ?? '0', 10) || 0) + 1;
|
|
sessionStorage.setItem(COPY_COUNT_KEY, String(count));
|
|
if (count % SHOW_EVERY === 0) displayToast();
|
|
|
|
// Reset the idle timer on each copy
|
|
resetIdleTimer();
|
|
}
|
|
|
|
closeBtn?.addEventListener('click', hideToast);
|
|
window.addEventListener('copy-success', onCopy);
|
|
|
|
// Start idle timer on page load
|
|
resetIdleTimer();
|
|
</script>
|