feat: portal IA per spec (home entry point, /news, /proposals+redirect, /support), live search + suggestions, article TOC, mobile disclosure menu, CMS preview styles, modernization pass 1

2026-07-24 23:00:07 +02:00
parent 11e7eb484f
commit cf35739a64
17 changed files with 627 additions and 231 deletions
@@ -10,8 +10,25 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CTAO — Content Editor</title>
+    <meta name="theme-color" content="#00004A" />
+    <link rel="icon" href="/brand/CTAO_Logo_positive.svg" type="image/svg+xml" />
+    <style>
+      /* Wrapper-page styling only — never injected into the Sveltia app.
+         Galaxy-Blue backdrop makes the load-in feel intentional. */
+      body { margin: 0; background: #00004a; }
+      noscript p {
+        color: #fff; font-family: Inter, Arial, system-ui, sans-serif;
+        text-align: center; margin: 40vh 24px 0; line-height: 1.6;
+      }
+      noscript a { color: #00e4d8; }
+    </style>
  </head>
  <body>
+    <noscript><p>The CTAO content editor requires JavaScript.<br />Please enable it, or return to the <a href="/">Science Portal</a>.</p></noscript>
    <script is:inline src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
+    <script is:inline>
+      // Officially supported API: article previews rendered with portal-like styles.
+      window.CMS?.registerPreviewStyle?.('/admin/preview.css');
+    </script>
  </body>
 </html>
@@ -1,17 +1,71 @@
 ---
 import Base from '../layouts/Base.astro';
+
+// Sample data, clearly labelled as mock in the UI. Per SPEC §3.3.2 the dashboard
+// aggregates: proposal statuses, scheduling info, data products, help-desk tickets.
+const proposals = [
+  { id: 'PROP-2026-0142', title: 'AGN flare monitoring with LST sub-array', status: 'In review', kind: 'review' },
+  { id: 'PROP-2026-0089', title: 'Galactic PeVatron survey follow-up', status: 'Accepted', kind: 'ok' },
+  { id: 'PROP-2025-0231', title: 'GRB afterglow ToO programme', status: 'Draft', kind: 'draft' },
+];
+const products = [
+  { id: 'OBS-88213', desc: 'DL3 event lists — PKS 2155-304 (12 runs)', date: '2026-07-18' },
+  { id: 'OBS-87990', desc: 'DL3 event lists — Crab Nebula calibration', date: '2026-07-02' },
+];
+const fmt = (iso) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium' }).format(new Date(iso));
+const tickets = [
+  { id: '#4821', subject: 'Proposal form: co-I affiliation not saved', status: 'Answered', kind: 'ok' },
+  { id: '#4711', subject: 'Data download quota question', status: 'Open', kind: 'review' },
+];
 ---
-<Base title="CTAO Portal — Dashboard" description="Panel z danymi z innych serwisów">
+<Base title="CTAO Science Portal — Dashboard" description="User dashboard (mock)">
+  <section class="hero-band">
+    <div class="container hero">
+      <div class="eyebrow">User area</div>
+      <h1>Dashboard</h1>
+      <p>Your proposals, data products and support tickets in one place</p>
+    </div>
+  </section>
+
  <section class="container page">
-    <span class="badge-mock">Makieta — dane przykładowe</span>
-    <div class="placeholder">
-      <div>
-        <div class="big">📡</div>
-        <h1>Dashboard użytkownika</h1>
-        <p>Wg specyfikacji SUSS: status wniosków, harmonogramy, produkty danych i zgłoszenia
-        helpdesku użytkownika — zbierane z pozostałych serwisów.<br/>
-        To część <strong>dynamiczna</strong> (nasz zakres, Release 5), utrzymywana osobno od
-        statycznych treści. Wszystko na tej stronie jest makietą.</p>
+    <span class="badge-mock">Mock — sample data, no live services connected</span>
+    <div class="dash-grid">
+      <div class="panel">
+        <h2 class="panel-title">My proposals</h2>
+        <ul class="rows">
+          {proposals.map((p) => (
+            <li>
+              <span class="row-id">{p.id}</span>
+              <span class="row-main">{p.title}</span>
+              <span class={`pill pill--${p.kind}`}>{p.status}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div class="panel">
+        <h2 class="panel-title">Recent data products</h2>
+        <ul class="rows">
+          {products.map((d) => (
+            <li>
+              <span class="row-id">{d.id}</span>
+              <span class="row-main">{d.desc}</span>
+              <time class="row-date" datetime={d.date}>{fmt(d.date)}</time>
+            </li>
+          ))}
+        </ul>
+        <p class="notice">Search and download in the <a href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener" class="external">Data Explorer</a> (external, LUX team).</p>
+      </div>
+      <div class="panel">
+        <h2 class="panel-title">Help-desk tickets</h2>
+        <ul class="rows">
+          {tickets.map((t) => (
+            <li>
+              <span class="row-id">{t.id}</span>
+              <span class="row-main">{t.subject}</span>
+              <span class={`pill pill--${t.kind}`}>{t.status}</span>
+            </li>
+          ))}
+        </ul>
      </div>
    </div>
  </section>
@@ -2,29 +2,70 @@
 import { getCollection } from 'astro:content';
 import Base from '../layouts/Base.astro';

-const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
-  (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
-);
+const posts = (await getCollection('news', ({ data }) => !data.draft))
+  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+  .slice(0, 3);
 const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 const iso = (d) => d.toISOString().slice(0, 10);
+// Services per the Science Portal spec; unbuilt ones are labelled, never faked.
+const services = [
+  { title: 'Proposals', href: '/proposals', desc: 'Submit observation proposals, including ToO / MWL requests.', badge: 'mock' },
+  { title: 'Data Explorer', href: 'https://padc-ctao-data-explorer.obspm.fr/', ext: true, desc: 'Search and download CTAO science data products.', badge: 'ext' },
+  { title: 'Dashboard', href: '/dashboard', desc: 'Your proposals, data products and support tickets in one place.', badge: 'mock' },
+  { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', badge: 'mock' },
+  { title: 'Software', desc: 'Science analysis tools and pipelines.', badge: 'tbd' },
+  { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
+];
 ---
-<Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
+<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory">
  <section class="hero-band">
    <span class="flash" aria-hidden="true"></span>
    <div class="container hero">
      <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
-      <h1>News &amp; Announcements</h1>
+      <h1>CTAO Science Portal</h1>
      <p>Exploring the Universe at the Highest Energies</p>
+      <form class="hero-search" role="search" action="/search" method="get">
+        <label class="sr-only" for="home-q">Search news</label>
+        <input id="home-q" name="q" type="search" placeholder="Search news and announcements…" autocomplete="off" />
+        <button class="btn" type="submit">Search</button>
+        {/* Live suggestions (plain links, Tab-accessible); Enter still submits to /search */}
+        <ul class="suggest" id="home-suggest"></ul>
+        <p class="sr-only" id="home-suggest-status" role="status" aria-live="polite"></p>
+      </form>
    </div>
  </section>

-  <section class="container" aria-label="News list">
+  <script is:inline src="/search-client.js"></script>
+  <script is:inline>
+    newsSearch({ input: 'home-q', list: 'home-suggest', status: 'home-suggest-status', limit: 6, unit: 'suggestion(s)' });
+  </script>
+
+  <section class="container page">
+    <div class="section-head"><h2>Services</h2></div>
    <div class="grid">
-      {posts.map((post, i) => (
-        <article class={i === 0 ? 'card card--featured' : 'card'}>
-          {post.data.cover && (
-            <img class="cover" src={encodeURI(post.data.cover)} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
-          )}
+      {services.map((s) => (
+        <article class="card tile">
+          <h3>{s.href
+            ? (s.ext
+                ? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
+                : <a href={s.href}>{s.title}</a>)
+            : s.title}</h3>
+          <p class="desc">{s.desc}</p>
+          {s.badge === 'mock' && <span class="badge-mock">Mock</span>}
+          {s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
+          {s.badge === 'tbd' && <span class="badge-ext">Planned (TBD)</span>}
+        </article>
+      ))}
+    </div>
+
+    <div class="section-head">
+      <h2>Latest news</h2>
+      <a class="more" href="/news">All news →</a>
+    </div>
+    <div class="grid">
+      {posts.map((post) => (
+        <article class="card">
+          {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" loading="lazy" />}
          <div class="body">
            <span class="cat">{post.data.category}</span>
            <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
@@ -0,0 +1,17 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="CTAO Science Portal — Sign in" description="Sign in via CTAO AAI (mock)">
+  <section class="auth-band">
+    <div class="auth-card">
+      <img class="auth-logo" src="/brand/CTAO_Logo_positive.svg" alt="CTAO" />
+      <span class="badge-mock">Mock — AAI integration pending</span>
+      <h1>Sign in</h1>
+      <p class="muted">One account for all CTAO services. Authentication is handled by the
+      central <strong>CTAO AAI</strong> (single sign-on) — the portal never sees your password.</p>
+      <button class="btn btn-wide" type="button">Continue with your CTAO account</button>
+      <p class="notice">No account yet? <a>Register via CTAO AAI</a> · Access level follows
+      your CTAO role and permissions.</p>
+    </div>
+  </section>
+</Base>
@@ -8,15 +8,26 @@ export async function getStaticPaths() {
 }

 const { post } = Astro.props;
-const { Content } = await render(post);
-const fmt = (d) => new Intl.DateTimeFormat('pl-PL', { dateStyle: 'long' }).format(d);
+const { Content, headings } = await render(post);
+const toc = headings.filter((h) => h.depth === 2 || h.depth === 3);
+const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
 ---
 <Base title={`${post.data.title} — CTAO`} description={post.data.description}>
  <article class="container article">
-    <a class="back" href="/">← Wszystkie newsy</a>
+    <a class="back" href="/news">← All news</a>
    <h1>{post.data.title}</h1>
-    <div class="meta">{post.data.category} · {post.data.author} · {fmt(post.data.date)}</div>
-    {post.data.cover && <img class="cover" src={post.data.cover} alt="" />}
+    <div class="meta">{post.data.category} · {post.data.author} · <time datetime={post.data.date.toISOString().slice(0, 10)}>{fmt(post.data.date)}</time></div>
+    {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" />}
+    {toc.length >= 3 && (
+      <nav class="toc" aria-label="On this page">
+        <strong>On this page</strong>
+        <ol>
+          {toc.map((h) => (
+            <li class={h.depth === 3 ? 'd3' : undefined}><a href={`#${h.slug}`}>{h.text}</a></li>
+          ))}
+        </ol>
+      </nav>
+    )}
    <div class="prose">
      <Content />
    </div>
@@ -0,0 +1,39 @@
+---
+import { getCollection } from 'astro:content';
+import Base from '../../layouts/Base.astro';
+
+const posts = (await getCollection('news', ({ data }) => !data.draft)).sort(
+  (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
+);
+const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
+const iso = (d) => d.toISOString().slice(0, 10);
+---
+<Base title="CTAO Science Portal — News" description="News and announcements of the CTAO">
+  <section class="hero-band">
+    <span class="flash" aria-hidden="true"></span>
+    <div class="container hero">
+      <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
+      <h1>News &amp; Announcements</h1>
+      <p>Exploring the Universe at the Highest Energies</p>
+    </div>
+  </section>
+
+  <section class="container page">
+    <h2 class="sr-only">All news</h2>
+    <div class="grid">
+      {posts.map((post, i) => (
+        <article class={i === 0 ? 'card card--featured' : 'card'}>
+          {post.data.cover && (
+            <img class="cover" src={encodeURI(post.data.cover)} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
+          )}
+          <div class="body">
+            <span class="cat">{post.data.category}</span>
+            <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
+            <p class="desc">{post.data.description}</p>
+            <div class="meta">{post.data.author} · <time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time></div>
+          </div>
+        </article>
+      ))}
+    </div>
+  </section>
+</Base>
@@ -0,0 +1,49 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="CTAO Science Portal — Proposals" description="Observation proposal submission (mock)">
+  <section class="hero-band">
+    <div class="container hero">
+      <div class="eyebrow">Proposal Submission</div>
+      <h1>Observation proposals</h1>
+      <p>Submitting observation proposals, including ToO / MWL requests</p>
+    </div>
+  </section>
+
+  <section class="container page">
+    <span class="badge-mock">Mock — no submission logic</span>
+    <span class="badge-ext">Target: Proposal Handling System (APC team) integrated into the portal</span>
+    <div class="panel panel--narrow">
+      <div class="form-row">
+        <label for="f-title">Proposal title</label>
+        <input id="f-title" type="text" placeholder="e.g. AGN flare observations" />
+      </div>
+      <div class="form-row">
+        <label for="f-scope">Telescope</label>
+        <select id="f-scope">
+          <option>LST-1 (Large-Sized Telescope)</option>
+          <option>MST (Medium-Sized Telescope)</option>
+          <option>SST (Small-Sized Telescope)</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <label for="f-energy">Energy range</label>
+        <select id="f-energy">
+          <option>20 GeV – 3 TeV</option>
+          <option>80 GeV – 50 TeV</option>
+          <option>1 TeV – 300 TeV</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <label for="f-hours">Requested time (hours)</label>
+        <input id="f-hours" type="number" min="1" placeholder="e.g. 25" />
+      </div>
+      <div class="form-row">
+        <label for="f-just">Scientific justification</label>
+        <textarea id="f-just" rows="4" placeholder="Brief description of the observation goal..."></textarea>
+      </div>
+      <button class="btn" type="button">Submit proposal</button>
+      <p class="notice">Demonstration mock — the form does not store any data.</p>
+    </div>
+  </section>
+</Base>
@@ -0,0 +1,33 @@
+---
+import Base from '../layouts/Base.astro';
+---
+<Base title="CTAO Science Portal — Search" description="Search CTAO news and announcements">
+  <section class="hero-band">
+    <div class="container hero">
+      <div class="eyebrow">Science Portal</div>
+      <h1>Search</h1>
+      <p>Find news and announcements</p>
+    </div>
+  </section>
+
+  <section class="container page">
+    <form class="search-form" role="search" action="/search" method="get">
+      <label class="sr-only" for="q">Search news</label>
+      <input id="q" name="q" type="search" placeholder="e.g. LST camera, Council, data…" autocomplete="off" />
+      <button class="btn" type="submit">Search</button>
+    </form>
+    <p class="notice" id="search-status" role="status" aria-live="polite">Type to search the news archive.</p>
+    <ol class="search-results" id="search-results"></ol>
+    <noscript><p class="notice">Search requires JavaScript. Browse all news on the <a href="/news">news page</a>.</p></noscript>
+  </section>
+</Base>
+
+<script is:inline src="/search-client.js"></script>
+<script is:inline>
+  const run = newsSearch({ input: 'q', list: 'search-results', status: 'search-status', limit: 20, hint: 'Type at least 2 characters.' });
+  // Support /search?q=… deep links (hero search form, footer, bookmarks)
+  const q0 = new URLSearchParams(location.search).get('q');
+  const q = document.getElementById('q');
+  if (q0) { q.value = q0; run(); }
+  q.focus();
+</script>
@@ -0,0 +1,19 @@
+// Build-time search index (Astro static endpoint — no server, no dependencies).
+// Kept lean: title/description/category/date/slug only (~60 KB for 200+ articles).
+import { getCollection } from 'astro:content';
+
+export async function GET() {
+  const posts = await getCollection('news', ({ data }) => !data.draft);
+  const index = posts
+    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
+    .map((p) => ({
+      slug: p.id,
+      title: p.data.title,
+      description: p.data.description,
+      category: p.data.category,
+      date: p.data.date.toISOString().slice(0, 10),
+    }));
+  return new Response(JSON.stringify(index), {
+    headers: { 'Content-Type': 'application/json; charset=utf-8' },
+  });
+}
@@ -0,0 +1,32 @@
+---
+import Base from '../layouts/Base.astro';
+// User support channels per the Science Portal spec — all mock for now.
+const channels = [
+  { title: 'Help desk', desc: 'Submit and track support tickets.' },
+  { title: 'FAQ & troubleshooting', desc: 'Common questions and step-by-step guides.' },
+  { title: 'User forum', desc: 'Discuss with the CTAO user community.' },
+  { title: 'Mailing lists', desc: 'Announcements and topical mailing lists.' },
+];
+---
+<Base title="CTAO Science Portal — Support" description="User support: help desk, FAQ, forum, mailing lists (mock)">
+  <section class="hero-band">
+    <div class="container hero">
+      <div class="eyebrow">User services</div>
+      <h1>User Support</h1>
+      <p>Help desk, FAQ / troubleshooting guide, user forum and mailing lists</p>
+    </div>
+  </section>
+
+  <section class="container page">
+    <span class="badge-mock">Mock — support services not yet connected</span>
+    <div class="grid">
+      {channels.map((c) => (
+        <article class="card tile">
+          <h3>{c.title}</h3>
+          <p class="desc">{c.desc}</p>
+          <span class="badge-mock">Mock</span>
+        </article>
+      ))}
+    </div>
+  </section>
+</Base>
@@ -1,49 +0,0 @@
---
-import Base from '../layouts/Base.astro';
---
-<Base title="CTAO Portal — Teleskopy" description="Rejestracja i rezerwacja czasu obserwacyjnego">
-  <section class="hero-band">
-    <div class="container hero">
-      <div class="eyebrow">Proposal Submission</div>
-      <h1>Zgłoszenie obserwacji</h1>
-      <p>Składanie wniosków obserwacyjnych (w tym ToO / MWL)</p>
-    </div>
-  </section>
-
-  <section class="container page">
-    <span class="badge-mock">Makieta — bez logiki wysyłki</span>
-    <span class="badge-ext">Docelowo: Proposal Handling System (team APC) zintegrowany w portalu</span>
-    <div class="panel" style="max-width:640px">
-      <div class="form-row">
-        <label for="f-title">Tytuł propozycji</label>
-        <input id="f-title" type="text" placeholder="np. Obserwacja rozbłysków AGN" />
-      </div>
-      <div class="form-row">
-        <label for="f-scope">Teleskop</label>
-        <select id="f-scope">
-          <option>LST-1 (Large Size Telescope)</option>
-          <option>MST (Medium Size Telescope)</option>
-          <option>SST (Small Size Telescope)</option>
-        </select>
-      </div>
-      <div class="form-row">
-        <label for="f-energy">Zakres energii</label>
-        <select id="f-energy">
-          <option>20 GeV – 3 TeV</option>
-          <option>80 GeV – 50 TeV</option>
-          <option>1 TeV – 300 TeV</option>
-        </select>
-      </div>
-      <div class="form-row">
-        <label for="f-hours">Wymagany czas (godziny)</label>
-        <input id="f-hours" type="number" min="1" placeholder="np. 25" />
-      </div>
-      <div class="form-row">
-        <label for="f-just">Uzasadnienie naukowe</label>
-        <textarea id="f-just" rows="4" placeholder="Krótki opis celu obserwacji..."></textarea>
-      </div>
-      <button class="btn" type="button">Wyślij zgłoszenie</button>
-      <p class="notice">Makieta demonstracyjna — formularz nie zapisuje danych.</p>
-    </div>
-  </section>
-</Base>