feat: overlay annotate per utenti loggati

2026-07-05 17:37:02 +02:00
parent 608b1b68d2
commit 56ca6eca14
1 changed files with 35 additions and 0 deletions
@@ -8,9 +8,18 @@ import '@fontsource/open-sans/600.css';
 import '../styles/global.css';
 import Header from '../components/Header.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 }
 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>
 <html lang="it">
@@ -65,5 +74,31 @@ const { title, description = 'InsanityLab — Performance. Balance. Longevity. A
        update();
      }
    </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>
 </html>