Separazione: le aree riservate diventano un'app propria (apps/platforms)
Campus, Stress Index e Longevity escono dal sito e diventano apps.insanitylab.it, con utenti, sessioni, login e database propri. Deciso da Adriano il 03/09/2026: una repo sola, due applicazioni autosufficienti, cosi' che ognuna resti estraibile. Misura che ha guidato il taglio: le tre aree condividevano col sito SOLO l'identita' - ~170 righe fra auth.ts, middleware.ts e safe-next.ts. Layout, librerie e dati erano gia' disgiunti. Lato piattaforme: - ruoli piattaforme/cliente/trainer/admin, senza quelli redazionali - canAccessPath con default CHIUSO (nel sito era aperto: li' le rotte non elencate erano di chiunque fosse loggato, qui ogni sezione e' di qualcuno) - tutta l'app protetta, si elencano le eccezioni invece dei prefissi protetti - /api risponde 401/403, non un redirect verso una pagina di login - tre database distinti: utenti, dati clinici senza nomi, mappatura coi nomi Lato sito: - ROLES tornano i tre redazionali; via le regole e il login pubblico - il login del pannello RESPINGE un account emigrato invece di aprirgli una sessione: senza, landingFor lo mandava su /admin, il middleware glielo negava, e si formava un ciclo di redirect che sembra un guasto del sito - l'header non mostra piu' un menu delle piattaforme: un link che esce Verificato: sito 20 file / 146 test, piattaforme 26 file / 197 test, entrambi i build passano, e l'app girata davvero in locale - il ruolo piattaforme entra in Campus e viene rimbalzato da Longevity, il cliente il contrario. Non ancora in produzione: manca il record DNS di apps.insanitylab.it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EndnceRA5WnA6rvA5iV9WL
This commit is contained in:
AdrianoDev
@@ -0,0 +1,50 @@
|
||||
---
|
||||
// Guscio minimo delle pagine che non hanno un layout proprio: il login e l'indice delle
|
||||
// piattaforme. Font, token e palette del sito, senza Header e Footer pubblici — qui dentro
|
||||
// non c'è niente da indicizzare e non c'è un menu del sito da riprodurre.
|
||||
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';
|
||||
|
||||
interface Props { title: string; user?: { username: string } | null }
|
||||
const { title, user = null } = Astro.props;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>{title} — InsanityLab</title>
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
</head>
|
||||
<body class="app-body">
|
||||
<header class="app-bar">
|
||||
<a class="app-bar__brand" href="/piattaforme">INSANITYLAB</a>
|
||||
{user && (
|
||||
<span class="app-bar__right">
|
||||
<span class="app-bar__user">{user.username}</span>
|
||||
<a class="app-bar__exit" href="/logout">Esci</a>
|
||||
</span>
|
||||
)}
|
||||
</header>
|
||||
<main class="app-main">
|
||||
<slot />
|
||||
</main>
|
||||
<style is:global>
|
||||
.app-body { margin: 0; background: var(--c-bg, #fff); color: var(--c-text, #222); font-family: var(--font-body, system-ui); }
|
||||
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
|
||||
padding: .9rem 1.4rem; border-bottom: 1px solid rgba(0,0,0,.08); }
|
||||
.app-bar__brand { font-family: var(--font-heading, inherit); font-weight: 700; letter-spacing: .18em;
|
||||
font-size: .82rem; text-decoration: none; color: var(--c-heading, #111); }
|
||||
.app-bar__right { display: flex; align-items: center; gap: .9rem; font-size: .78rem; }
|
||||
.app-bar__user { color: var(--c-muted, #777); }
|
||||
.app-bar__exit { text-decoration: none; color: var(--c-heading, #111); text-transform: uppercase;
|
||||
letter-spacing: .12em; font-size: .7rem; font-weight: 600; }
|
||||
.app-main { max-width: 62rem; margin: 0 auto; padding: 2.2rem 1.4rem 4rem; }
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
---
|
||||
// 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} — Biohacking 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>
|
||||
Biohacking
|
||||
</a>
|
||||
<a class="cp-home" href="/piattaforme">Piattaforme</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>
|
||||
</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); }
|
||||
|
||||
/* --- 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>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
// Layout della piattaforma Longevity. Come Stress Index: token, font e palette del sito,
|
||||
// senza Header e Footer pubblici — l'area è riservata e non va mai indicizzata.
|
||||
// A differenza di Stress Index (barra laterale con sette voci, giusta per chi ci lavora
|
||||
// dentro) qui i pubblici sono due, e uno non è staff: il cliente entra tre o quattro
|
||||
// volte l'anno a leggere il proprio referto, non gli serve l'arredamento di uno
|
||||
// strumento di lavoro. Il layout prevede due forme:
|
||||
// - "referto": una colonna che scorre, senza navigazione (questo task)
|
||||
// - "gestionale": barra laterale come Stress Index (arriva col piano del gestionale)
|
||||
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 '../styles/longevity.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
/** Voci di percorso mostrate nell'intestazione, dopo "Longevity". */
|
||||
crumbs?: string[];
|
||||
/** "referto" (colonna centrata, senza navigazione) o "gestionale" (barra laterale, non ancora implementata). */
|
||||
variante?: 'referto' | 'gestionale';
|
||||
}
|
||||
const { title, crumbs = [], variante = 'referto' } = Astro.props;
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title} — Longevity InsanityLab</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
</head>
|
||||
<body class="lg" data-variante={variante}>
|
||||
<div class="lg-shell">
|
||||
<header class="lg-top">
|
||||
<p class="lg-top__crumbs">
|
||||
<strong>Longevity</strong>
|
||||
{crumbs.map((c) => <span> / {c}</span>)}
|
||||
</p>
|
||||
</header>
|
||||
<main class="lg-main"><slot /></main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
// Layout della piattaforma Stress Index. Come il Campus: token, font e palette del sito,
|
||||
// senza Header e Footer pubblici — la navigazione è tutta interna alla piattaforma.
|
||||
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 '../styles/stress-index.css';
|
||||
import { professional } from '../lib/stress-index/data';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
/** Voci di percorso mostrate nella topbar, dopo "Stress Index". */
|
||||
crumbs?: string[];
|
||||
}
|
||||
const { title, crumbs = [] } = Astro.props;
|
||||
const path = Astro.url.pathname;
|
||||
|
||||
const BASE = '/piattaforme/stress-index';
|
||||
const NAV = [
|
||||
{ href: BASE, label: 'Oggi' },
|
||||
{ href: `${BASE}/clienti`, label: 'Clienti' },
|
||||
{ href: `${BASE}/analytics`, label: 'Analytics' },
|
||||
{ href: `${BASE}/sport`, label: 'Sport', badge: 'Pro' },
|
||||
{ href: `${BASE}/sport/team-live`, label: 'Team live' },
|
||||
{ href: `${BASE}/impostazioni`, label: 'Impostazioni' },
|
||||
{ href: `${BASE}/organizzazione`, label: 'Organizzazione' },
|
||||
];
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title} — Stress Index InsanityLab</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
</head>
|
||||
<body class="si">
|
||||
<input type="checkbox" id="si-menu" class="si-menu-toggle" hidden />
|
||||
<label for="si-menu" class="si-menu-btn" aria-label="Apri il menu">☰ Menu</label>
|
||||
|
||||
<aside class="si-side">
|
||||
<a class="si-brand" href={BASE}>
|
||||
<span class="eyebrow">InsanityLab</span>
|
||||
Stress Index
|
||||
</a>
|
||||
<a class="si-home" href="/piattaforme">Piattaforme</a>
|
||||
|
||||
<nav class="si-nav">
|
||||
{NAV.map((item) => (
|
||||
<a
|
||||
href={item.href}
|
||||
class:list={['si-nav__link', { 'is-active': path === item.href }]}
|
||||
>
|
||||
{item.label}
|
||||
{item.badge && <span class="si-nav__badge">{item.badge}</span>}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="si-body">
|
||||
<header class="si-top">
|
||||
<p class="si-top__crumbs">
|
||||
<strong>Stress Index</strong>
|
||||
{crumbs.map((c) => <span> / {c}</span>)}
|
||||
</p>
|
||||
<p class="si-top__studio">{professional.studio}</p>
|
||||
</header>
|
||||
<main class="si-main"><slot /></main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user