CTAO portal demo (Astro + Sveltia)
This commit is contained in:
ctao
@@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.astro/
|
||||
@@ -0,0 +1,18 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// Static output (zero runtime) — the whole point of the git-based approach.
|
||||
export default defineConfig({
|
||||
output: 'static',
|
||||
server: { port: 4321, host: true },
|
||||
vite: {
|
||||
server: {
|
||||
// Same-origin path for the Sveltia/Decap local backend proxy (default port
|
||||
// moved to 8082 to avoid colliding with Metro on 8081). Proxying it here
|
||||
// means the CMS admin talks to one origin, so editing also works through the
|
||||
// cloudflared tunnel from the phone.
|
||||
proxy: {
|
||||
'/api/v1': { target: 'http://localhost:8082', changeOrigin: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Generated
+5683
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "ctao-demo-git-cms",
|
||||
"type": "module",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev --port 4321 --host",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview --port 4321 --host",
|
||||
"cms-proxy": "PORT=8082 decap-server"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"decap-server": "latest"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
# Sveltia/Decap CMS config. In production `backend` would be GitHub (editors log in
|
||||
# with GitHub, content committed to the repo). For this local demo we use the local
|
||||
# backend: edits are written straight to the Markdown files on disk via a local proxy.
|
||||
backend:
|
||||
name: github
|
||||
repo: ctao/portal-ctao # placeholder — unused in local mode
|
||||
branch: main
|
||||
|
||||
# Local editing without GitHub. The proxy runs on 8082 (8081 is taken by Metro) and
|
||||
# is reached same-origin at /api/v1 (proxied by Astro) so editing also works via the tunnel.
|
||||
local_backend:
|
||||
url: /api/v1
|
||||
|
||||
media_folder: "public/uploads" # relative to the proxy CWD (demo-git-cms/)
|
||||
public_folder: "/uploads"
|
||||
|
||||
collections:
|
||||
- name: news
|
||||
label: "Newsy"
|
||||
label_singular: "Artykuł"
|
||||
folder: "src/content/news"
|
||||
create: true
|
||||
slug: "{{slug}}"
|
||||
extension: md
|
||||
format: frontmatter
|
||||
summary: "{{title}} · {{date}}"
|
||||
fields:
|
||||
- { name: title, label: "Tytuł", widget: string }
|
||||
- { name: description, label: "Krótki opis", widget: text }
|
||||
- { name: date, label: "Data", widget: datetime, date_format: "YYYY-MM-DD", time_format: false }
|
||||
- { name: category, label: "Kategoria", widget: string, default: "news" }
|
||||
- { name: author, label: "Autor", widget: string, default: "CTAO" }
|
||||
- { name: cover, label: "Okładka", widget: image, required: false }
|
||||
- { name: draft, label: "Szkic (nieopublikowany)", widget: boolean, default: false }
|
||||
- { name: body, label: "Treść", widget: markdown }
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>CTAO — Edytor treści</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sveltia CMS: statyczny bundle admina. W demo ładowany z CDN; w produkcji
|
||||
wrzuca się go jako jeden statyczny plik obok strony (zero backendu). -->
|
||||
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { defineCollection, z } from 'astro:content';
|
||||
import { glob } from 'astro/loaders';
|
||||
|
||||
// News/articles live as Markdown files in src/content/news/*.md.
|
||||
// This is exactly what Sveltia CMS edits — the CMS writes these files, Astro
|
||||
// renders them to static HTML at build time.
|
||||
const news = defineCollection({
|
||||
loader: glob({ pattern: '**/*.md', base: './src/content/news' }),
|
||||
schema: ({ image }) =>
|
||||
z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
date: z.coerce.date(),
|
||||
category: z.string().default('news'),
|
||||
author: z.string().default('CTAO'),
|
||||
cover: image().optional(),
|
||||
draft: z.boolean().default(false),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = { news };
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "Nabór propozycji obserwacyjnych 2026"
|
||||
description: "Ruszył otwarty nabór wniosków o czas obserwacyjny na teleskopach CTAO."
|
||||
date: 2026-07-10
|
||||
category: "ogłoszenia"
|
||||
author: "Biuro Naukowe CTAO"
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Otwarty nabór
|
||||
|
||||
Zapraszamy zespoły badawcze do składania **propozycji obserwacyjnych** na nadchodzący
|
||||
cykl. Wnioski można składać przez portal rejestracyjny w zakładce *Teleskopy*.
|
||||
|
||||
### Terminy
|
||||
|
||||
- Otwarcie naboru: 10 lipca 2026
|
||||
- Zamknięcie: 30 września 2026
|
||||
- Ogłoszenie wyników: grudzień 2026
|
||||
|
||||
### Wymagania
|
||||
|
||||
Każdy wniosek powinien zawierać uzasadnienie naukowe, wymagany czas obserwacji oraz
|
||||
preferowany zakres energii. Szczegóły w dokumentacji naboru.
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: "Pierwsze światło teleskopu LST-1"
|
||||
description: "Największy teleskop CTAO zarejestrował pierwsze błyski Czerenkowa z kierunku Krab."
|
||||
date: 2026-06-18
|
||||
category: "obserwacje"
|
||||
author: "Zespół LST"
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Kamień milowy dla obserwatorium
|
||||
|
||||
Largest Size Telescope (LST-1) na La Palmie zarejestrował **pierwsze światło** —
|
||||
charakterystyczne błyski promieniowania Czerenkowa powstające, gdy promienie gamma
|
||||
o wysokiej energii wchodzą w atmosferę Ziemi.
|
||||
|
||||
To pierwszy z czterech dużych teleskopów, które utworzą północną część sieci CTAO.
|
||||
|
||||
### Co dalej
|
||||
|
||||
- Kalibracja kamery i luster segmentowych
|
||||
- Wspólne obserwacje z pozostałymi teleskopami sieci
|
||||
- Pierwsze publikacje danych dla społeczności naukowej
|
||||
|
||||
> „To początek nowej ery w astronomii promieniowania gamma."
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: "Nowe centrum danych CTAO uruchomione"
|
||||
description: "Infrastruktura obliczeniowa do przetwarzania danych z sieci teleskopów jest już aktywna."
|
||||
date: 2026-07-01
|
||||
category: "infrastruktura"
|
||||
author: "Zespół IT"
|
||||
draft: false
|
||||
---
|
||||
|
||||
## Przetwarzanie danych na dużą skalę
|
||||
|
||||
Uruchomiliśmy nowe **centrum danych**, które będzie przetwarzać strumienie danych
|
||||
z całej sieci teleskopów CTAO — od surowych zdarzeń po gotowe katalogi naukowe.
|
||||
|
||||
### Możliwości
|
||||
|
||||
- Automatyczny pipeline rekonstrukcji zdarzeń
|
||||
- Archiwum danych z dostępem dla społeczności
|
||||
- Dashboardy monitorujące stan sieci w czasie rzeczywistym
|
||||
|
||||
Panel monitoringu będzie dostępny w zakładce *Dashboard* portalu.
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
import '../styles/global.css';
|
||||
const { title = 'CTAO Portal', description = 'Portal obserwatorium CTAO' } = Astro.props;
|
||||
const path = Astro.url.pathname;
|
||||
const isActive = (href) => (href === '/' ? path === '/' : path.startsWith(href));
|
||||
const links = [
|
||||
{ href: '/', label: 'Newsy' },
|
||||
{ href: '/telescopes', label: 'Teleskopy' },
|
||||
{ href: '/dashboard', label: 'Dashboard' },
|
||||
];
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container nav">
|
||||
<a class="brand" href="/"><span class="dot"></span> CTAO Portal</a>
|
||||
<span class="spacer"></span>
|
||||
{links.map((l) => (
|
||||
<a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
|
||||
))}
|
||||
<a class="navlink" href="/admin" style="color:var(--brand-2)">✎ Edytor</a>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
CTAO Portal — demo (git-based CMS). Treść generowana statycznie z plików Markdown.
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
---
|
||||
<Base title="CTAO Portal — Dashboard" description="Panel z danymi z innych serwisów">
|
||||
<section class="container page">
|
||||
<div class="placeholder">
|
||||
<div>
|
||||
<div class="big">📡</div>
|
||||
<h1>Dashboard</h1>
|
||||
<p>Tu trafią dane z innych serwisów (monitoring sieci teleskopów, statusy, wykresy).<br/>
|
||||
To część <strong>dynamiczna</strong> — utrzymywana osobno od statycznych treści.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
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('pl-PL', { dateStyle: 'long' }).format(d);
|
||||
---
|
||||
<Base title="CTAO Portal — Newsy" description="Aktualności obserwatorium CTAO">
|
||||
<section class="container hero">
|
||||
<div class="eyebrow">Cherenkov Telescope Array Observatory</div>
|
||||
<h1>Aktualności i ogłoszenia</h1>
|
||||
<p>Najnowsze informacje z sieci teleskopów CTAO. Treść zarządzana przez edytorów w graficznym CMS-ie, publikowana jako statyczna strona.</p>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="grid">
|
||||
{posts.map((post) => (
|
||||
<article class="card">
|
||||
<span class="cat">{post.data.category}</span>
|
||||
<h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
|
||||
<p>{post.data.description}</p>
|
||||
<div class="meta">{post.data.author} · {fmt(post.data.date)}</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Base>
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
import { getCollection, render } from 'astro:content';
|
||||
import Base from '../../layouts/Base.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('news', ({ data }) => !data.draft);
|
||||
return posts.map((post) => ({ params: { slug: post.id }, props: { post } }));
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { Content } = await render(post);
|
||||
const fmt = (d) => new Intl.DateTimeFormat('pl-PL', { 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>
|
||||
<h1>{post.data.title}</h1>
|
||||
<div class="meta">{post.data.category} · {post.data.author} · {fmt(post.data.date)}</div>
|
||||
<div class="prose">
|
||||
<Content />
|
||||
</div>
|
||||
</article>
|
||||
</Base>
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
---
|
||||
<Base title="CTAO Portal — Teleskopy" description="Rejestracja i rezerwacja czasu obserwacyjnego">
|
||||
<section class="container hero">
|
||||
<div class="eyebrow">Rejestracja</div>
|
||||
<h1>Zgłoszenie obserwacji</h1>
|
||||
<p>Mockup formularza rejestracji/rezerwacji czasu na teleskopach CTAO. To makieta — bez logiki wysyłki.</p>
|
||||
</section>
|
||||
|
||||
<section class="container page">
|
||||
<div class="panel" style="max-width:640px">
|
||||
<div class="form-row">
|
||||
<label>Tytuł propozycji</label>
|
||||
<input type="text" placeholder="np. Obserwacja rozbłysków AGN" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Teleskop</label>
|
||||
<select>
|
||||
<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>Zakres energii</label>
|
||||
<select>
|
||||
<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>Wymagany czas (godziny)</label>
|
||||
<input type="number" min="1" placeholder="np. 25" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>Uzasadnienie naukowe</label>
|
||||
<textarea 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>
|
||||
@@ -0,0 +1,106 @@
|
||||
:root {
|
||||
--bg: #0b1020;
|
||||
--surface: #131a2e;
|
||||
--surface-2: #1a2340;
|
||||
--text: #e8ecf6;
|
||||
--muted: #9aa6c4;
|
||||
--brand: #5b8cff;
|
||||
--brand-2: #7ce0d3;
|
||||
--border: #263257;
|
||||
--radius: 14px;
|
||||
--maxw: 1080px;
|
||||
--font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
background:
|
||||
radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,0.18), transparent 60%),
|
||||
radial-gradient(900px 500px at 0% 0%, rgba(124,224,211,0.10), transparent 55%),
|
||||
var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
a { color: var(--brand); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
img { max-width: 100%; height: auto; display: block; }
|
||||
|
||||
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
|
||||
|
||||
/* Header / nav */
|
||||
.site-header {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(11,16,32,0.72);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.nav { display: flex; align-items: center; gap: 18px; height: 62px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.3px; }
|
||||
.brand .dot { width: 12px; height: 12px; border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand)); box-shadow: 0 0 16px var(--brand); }
|
||||
.nav .spacer { flex: 1; }
|
||||
.nav a.navlink { color: var(--muted); font-weight: 500; font-size: 0.95rem; padding: 6px 2px; }
|
||||
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--text); text-decoration: none; }
|
||||
|
||||
/* Hero */
|
||||
.hero { padding: 56px 0 28px; }
|
||||
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 10px; line-height: 1.1; }
|
||||
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; }
|
||||
.eyebrow { color: var(--brand-2); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; }
|
||||
|
||||
/* News grid */
|
||||
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 24px 0 64px; }
|
||||
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (min-width: 940px) { .grid { grid-template-columns: repeat(3, 1fr); } }
|
||||
|
||||
.card {
|
||||
background: linear-gradient(180deg, var(--surface), var(--surface-2));
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 22px; display: flex; flex-direction: column; gap: 10px;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.card:hover { transform: translateY(-3px); border-color: var(--brand); }
|
||||
.card .cat { align-self: flex-start; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
|
||||
color: var(--brand-2); background: rgba(124,224,211,0.10); border: 1px solid rgba(124,224,211,0.25);
|
||||
padding: 3px 9px; border-radius: 999px; }
|
||||
.card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.3; }
|
||||
.card h3 a { color: var(--text); }
|
||||
.card p { margin: 0; color: var(--muted); font-size: 0.94rem; }
|
||||
.card .meta { margin-top: auto; color: var(--muted); font-size: 0.8rem; }
|
||||
|
||||
/* Article */
|
||||
.article { padding: 40px 0 72px; max-width: 760px; }
|
||||
.article .back { color: var(--muted); font-size: 0.9rem; }
|
||||
.article h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 14px 0 8px; line-height: 1.15; }
|
||||
.article .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }
|
||||
.prose h2 { margin: 34px 0 10px; font-size: 1.5rem; }
|
||||
.prose h3 { margin: 26px 0 8px; font-size: 1.18rem; }
|
||||
.prose p { margin: 0 0 16px; }
|
||||
.prose ul { margin: 0 0 16px; padding-left: 22px; }
|
||||
.prose li { margin: 6px 0; }
|
||||
.prose blockquote { margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--brand);
|
||||
background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
|
||||
|
||||
/* Generic page / mockup */
|
||||
.page { padding: 40px 0 72px; }
|
||||
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
|
||||
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
|
||||
.form-row label { font-size: 0.85rem; color: var(--muted); }
|
||||
.form-row input, .form-row select, .form-row textarea {
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
|
||||
padding: 11px 12px; font: inherit; }
|
||||
.btn { background: linear-gradient(180deg, var(--brand), #3f6fe0); color: white; border: 0;
|
||||
padding: 11px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; }
|
||||
.notice { color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
|
||||
|
||||
.placeholder { display: grid; place-items: center; min-height: 40vh; text-align: center; color: var(--muted); }
|
||||
.placeholder .big { font-size: 3rem; margin-bottom: 8px; }
|
||||
|
||||
.footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; padding: 26px 0; }
|
||||
.cms-hint { background: rgba(91,140,255,0.10); border: 1px solid rgba(91,140,255,0.3);
|
||||
border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin: 0 0 24px; }
|
||||
Reference in New Issue
Block a user