feat: overlay annotate per utenti loggati

This commit is contained in:
2026-07-05 17:37:02 +02:00
parent 608b1b68d2
commit 56ca6eca14
+35
View File
@@ -8,9 +8,18 @@ import '@fontsource/open-sans/600.css';
import '../styles/global.css'; import '../styles/global.css';
import Header from '../components/Header.astro'; import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import { getDb } from '../lib/db';
import { getSessionUser, SESSION_COOKIE } from '../lib/auth';
interface Props { title: string; description?: string } interface Props { title: string; description?: string }
const { title, description = 'InsanityLab — Performance. Balance. Longevity. Allenamento personalizzato, piccoli gruppi e benessere a Bologna.' } = Astro.props; const { title, description = 'InsanityLab — Performance. Balance. Longevity. Allenamento personalizzato, piccoli gruppi e benessere a Bologna.' } = Astro.props;
// Overlay annotate: badge coi tag contenuto, solo per utenti loggati con ?annotate=1.
let annotate = false;
if (Astro.url.searchParams.get('annotate') === '1') {
const tok = Astro.cookies.get(SESSION_COOKIE)?.value;
annotate = Boolean(tok && getSessionUser(getDb(), tok));
}
--- ---
<!doctype html> <!doctype html>
<html lang="it"> <html lang="it">
@@ -65,5 +74,31 @@ const { title, description = 'InsanityLab — Performance. Balance. Longevity. A
update(); update();
} }
</script> </script>
{annotate && (
<style is:global>
[data-tag] { outline: 1px dashed #b8a98c; outline-offset: 2px; }
.tag-badge { position: absolute; z-index: 9999; background: #3a2929; color: #fff;
font: 600 10px/1.6 monospace; padding: 0 6px; text-decoration: none; opacity: .85; }
.tag-badge:hover { opacity: 1; background: #9c8b70; }
</style>
<script is:inline>
document.querySelectorAll('[data-tag]').forEach((el) => {
const a = document.createElement('a');
a.className = 'tag-badge';
a.textContent = el.dataset.tag;
a.href = '/admin/content#' + encodeURIComponent(el.dataset.tag);
a.target = '_blank';
document.body.appendChild(a);
const place = () => {
const r = el.getBoundingClientRect();
a.style.top = window.scrollY + r.top - 14 + 'px';
a.style.left = window.scrollX + r.left + 'px';
};
place();
addEventListener('scroll', place, { passive: true });
addEventListener('resize', place);
});
</script>
)}
</body> </body>
</html> </html>