Sezione Campus: layout dedicato, route protette e documentazione

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-25 15:40:07 +02:00
parent 7baebebc09
commit c4107b84a5
15 changed files with 565 additions and 52 deletions
@@ -37,6 +37,7 @@ const user = Astro.locals.user;
            <a href="/admin">Articoli</a>
            {(user.role === 'superuser' || user.role === 'admin') && <a href="/admin/content">Contenuti</a>}
            {user.role === 'admin' && <a href="/admin/users">Utenti</a>}
+            {user.role === 'admin' && <a href="/campus">Campus</a>}
            <a href="/admin/new">Nuovo</a>
            <a href="/admin/logout">Esci</a>
            <a href="/blog" target="_blank">Vedi sito ↗</a>
@@ -0,0 +1,137 @@
+---
+// Layout della sezione riservata Campus. Usa i token e i font del sito, ma
+// non ne monta Header e Footer: la navigazione è tutta interna, con un solo
+// richiamo alla home.
+import '@fontsource/montserrat/400.css';
+import '@fontsource/montserrat/500.css';
+import '@fontsource/montserrat/600.css';
+import '@fontsource/open-sans/400.css';
+import '@fontsource/open-sans/600.css';
+import '../styles/global.css';
+import type { CampusNav } from '../lib/campus';
+
+interface Props {
+  title: string;
+  nav: CampusNav;
+  currentArea?: string;
+  currentLesson?: string;
+}
+const { title, nav, currentArea, currentLesson } = Astro.props;
+---
+<!doctype html>
+<html lang="it">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title} — Campus InsanityLab</title>
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  </head>
+  <body class="cp">
+    <input type="checkbox" id="cp-menu" class="cp-menu-toggle" hidden />
+    <label for="cp-menu" class="cp-menu-btn" aria-label="Apri il menu">☰ Indice</label>
+
+    <aside class="cp-side">
+      <a class="cp-brand" href="/campus">
+        <span class="eyebrow">InsanityLab</span>
+        Campus
+      </a>
+      <a class="cp-home" href="/">← Torna alla home</a>
+
+      <nav class="cp-nav">
+        {nav.areas.map((area) => (
+          <div class="cp-area" data-on={area.slug === currentArea ? '' : null}>
+            <a class="cp-area__link" href={`/campus/${area.slug}`} style={`--c:${area.color}`}>{area.title}</a>
+            {area.slug === currentArea && (
+              <ul class="cp-chapters">
+                {area.chapters.map((ch) => (
+                  <li>
+                    <span class="cp-ch" style={`--c:${ch.color}`}>{ch.num}. {ch.title}</span>
+                    <ul>
+                      {ch.lessons.map((l) => (
+                        <li class={l.slug === currentLesson ? 'on' : undefined}>
+                          <a href={`/campus/${area.slug}/${l.slug}`}>
+                            <span class="cp-label">{l.label}</span> {l.titleShort}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        ))}
+      </nav>
+
+      <a class="cp-logout" href="/admin/logout">Esci</a>
+    </aside>
+
+    <main class="cp-main"><slot /></main>
+
+    <style is:global>
+      body.cp { display: flex; align-items: flex-start; background: var(--c-bg); }
+
+      /* --- sidebar --- */
+      .cp-side {
+        width: 300px; flex: 0 0 300px; height: 100vh; position: sticky; top: 0; overflow-y: auto;
+        background: var(--c-dark); color: #cfc6bd; padding: 28px 22px 50px;
+      }
+      .cp-brand { display: block; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600;
+        letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none; line-height: 1.1; }
+      .cp-brand .eyebrow { display: block; color: var(--c-accent); margin-bottom: 4px; }
+      .cp-home { display: inline-block; margin: 18px 0 24px; font-family: var(--font-heading); font-size: .7rem;
+        font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent);
+        text-decoration: none; border-bottom: 1px solid transparent; }
+      .cp-home:hover { border-bottom-color: var(--c-accent); }
+
+      .cp-nav { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
+      .cp-area + .cp-area { margin-top: 14px; }
+      .cp-area__link { display: block; font-family: var(--font-heading); font-size: .82rem; font-weight: 600;
+        letter-spacing: .12em; text-transform: uppercase; color: #fff; text-decoration: none;
+        padding: 8px 10px; border-left: 3px solid var(--c); }
+      .cp-area__link:hover, .cp-area[data-on] .cp-area__link { background: rgba(255,255,255,.07); }
+
+      .cp-chapters { list-style: none; margin: 8px 0 0; padding: 0; }
+      .cp-chapters > li + li { margin-top: 12px; }
+      .cp-ch { display: block; font-family: var(--font-heading); font-size: .72rem; letter-spacing: .08em;
+        text-transform: uppercase; color: var(--c); padding-left: 12px; }
+      .cp-chapters ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; }
+      .cp-chapters ul a { display: block; text-decoration: none; color: #b6ada3; font-size: .85rem;
+        line-height: 1.35; padding: 4px 8px; }
+      .cp-chapters ul a:hover { color: #fff; background: rgba(255,255,255,.06); }
+      .cp-chapters ul li.on a { color: #fff; background: rgba(184,169,140,.22); }
+      .cp-label { font-family: var(--font-heading); font-size: .68rem; letter-spacing: .06em; color: var(--c-accent); }
+
+      .cp-logout { display: inline-block; margin-top: 30px; font-size: .78rem; letter-spacing: .1em;
+        text-transform: uppercase; color: #8d8379; text-decoration: none; }
+      .cp-logout:hover { color: #fff; }
+
+      /* --- contenuto --- */
+      .cp-main { flex: 1; min-width: 0; max-width: 920px; margin: 0 auto; padding: 56px 44px 100px; }
+      .cp-main h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); text-transform: none; letter-spacing: .02em; }
+      .cp-main h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2em; padding-bottom: .25em;
+        border-bottom: 1px solid #e8e4de; text-transform: none; letter-spacing: .02em; }
+      .cp-main h3 { font-size: 1.12rem; margin-top: 1.7em; color: var(--c-accent-dark); }
+      .cp-main img { margin: 22px 0; border: 1px solid #e8e4de; }
+      .cp-main table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .92rem; }
+      .cp-main th, .cp-main td { border: 1px solid #e8e4de; padding: 8px 12px; text-align: left; vertical-align: top; }
+      .cp-main th { background: var(--c-bg-alt); font-family: var(--font-heading); font-weight: 600; }
+      .cp-main blockquote { margin: 20px 0; padding: 4px 20px; border-left: 3px solid var(--c-accent); color: #6a6a6a; }
+      .cp-main code { background: var(--c-bg-alt); padding: 1px 5px; font-size: .9em; }
+      .cp-main li { margin-bottom: .35em; }
+
+      /* --- menu mobile (solo CSS) --- */
+      .cp-menu-btn { display: none; }
+      @media (max-width: 900px) {
+        body.cp { display: block; }
+        .cp-menu-btn { display: block; position: sticky; top: 0; z-index: 20; background: var(--c-dark); color: #fff;
+          font-family: var(--font-heading); font-size: .75rem; font-weight: 600; letter-spacing: .18em;
+          text-transform: uppercase; padding: 14px 20px; cursor: pointer; }
+        .cp-side { display: none; width: auto; flex: none; height: auto; position: static; }
+        .cp-menu-toggle:checked ~ .cp-side { display: block; }
+        .cp-main { padding: 32px 20px 70px; }
+      }
+    </style>
+  </body>
+</html>