---
import '../styles/global.css';
// `ambient` opts a page into the whole-page drifting brand wash (home only — see DESIGN.md)
// `type`/`image` feed the social meta: articles pass type="article" + their cover.
const { title = 'CTAO Science Portal', description = 'CTAO Science Portal — demo', ambient = false, type = 'website', image, lang = 'en' } = Astro.props;
// Absolute URLs for canonical/OG/RSS (head pattern from the official Astro blog
// template). `site` is a placeholder domain until the portal has a real one.
const site = Astro.site ?? new URL('https://portal.ctao.org');
const canonical = new URL(Astro.url.pathname, site);
// SVG covers never reach og:image — link-preview crawlers (Slack/Teams/
// LinkedIn) don't render SVG, so those articles fall back to the brand card.
const ogImage = new URL(image && !image.endsWith('.svg') ? image : '/brand/og-card.jpg', site);
const path = Astro.url.pathname;
const isActive = (href) => (href === '/' ? path === '/' : path.startsWith(href));
// Navigation = services from the Science Portal spec (REQUIREMENTS.md §2/§5).
// Order: serial-position effect (NN/g) — News (universal entry) first, Support
// (help convention) last; Data/Proposals by task frequency; Dashboard is the
// personal area, placed late next to the Sign-in cluster. External systems
// built by other teams are links out, clearly marked.
const links = [
{ href: '/news', label: 'News' },
{ href: 'https://padc-ctao-data-explorer.obspm.fr/', label: 'Data', ext: true },
{ href: '/proposals', label: 'Proposals' },
{ href: '/dashboard', label: 'Dashboard' },
{ href: '/support', label: 'Support' },
];
---
{title}
{/* Social cards (Open Graph + Twitter) — article cover when present, brand card otherwise */}
{/* The home hero photo is a CSS background, which browsers discover late —
preloading it moves the page's LCP element to the front of the queue. */}
{path === '/' && }
{/* Brand typography (BRAND D.3): Inter (body) + Space Grotesk (headlines),
self-hosted latin woff2 (variable) — @font-face lives in global.css. */}
{/* Both brand fonts ship inlined in the render-blocking stylesheet —
no font swap exists anywhere (see global.css @font-face). */}
Skip to content
Science Portal
{/* Site search. Desktop ≥1025px: a VISIBLE quiet field — NN/g's
magnifying-glass-icon research: hiding search behind an icon
measurably reduces discoverability and usage; a visible input is
recommended when search matters (200+ articles, spec-required).
Plain GET form (works without JS); suggestions via search-client.js. */}
{/* ≤1024px: the magnifier reveals a search row under the header (NN/g
mobile-search pattern). name="header-panel" pairs it with the menu as
a native exclusive group — opening one closes the other, no JS. */}
Sign in
{/* Mobile disclosure menu — native /, no JS; desktop hides it via CSS */}
Menu
{/* Search enhancement is deferred — a synchronous script here would stall
the parser mid-body on every navigation (blank below the header until
it arrives). `defer` + the inline `type="module"` init join the same
after-parse in-order queue (HTML spec), so newsSearch is defined first.
The forms are plain GET /search, so nothing user-facing waits on JS. */}
Science Portal
{/* Site search. Desktop ≥1025px: a VISIBLE quiet field — NN/g's
magnifying-glass-icon research: hiding search behind an icon
measurably reduces discoverability and usage; a visible input is
recommended when search matters (200+ articles, spec-required).
Plain GET form (works without JS); suggestions via search-client.js. */}
{/* ≤1024px: the magnifier reveals a search row under the header (NN/g
mobile-search pattern). name="header-panel" pairs it with the menu as
a native exclusive group — opening one closes the other, no JS. */}