ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: astro built-ins — news pagination, prefetch, RSS, OG/SEO meta, TOC scrollspy (Starlight-pattern)

Browse Source
This commit is contained in:
ctao
2026-07-25 06:57:58 +02:00
parent 2de0cf148e
commit 4ace039233
13 changed files with 283 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+28 -1
View File
@@ -236,7 +236,7 @@ img { max-width: 100%; height: auto; display: block; }
}
.suggest:empty { display: none; }
.suggest li { display: flex; align-items: center; gap: var(--space-s); padding: 0 12px; border-radius: calc(var(--radius) - 8px); }
.suggest li:hover { background: var(--moon); }
.suggest li:hover, .suggest li:focus-within { background: var(--moon); }
.suggest a {
flex: 1; display: flex; align-items: center; min-height: 44px;
color: var(--text); font-weight: 500; font-size: 0.94rem; text-decoration: none;
@@ -310,6 +310,25 @@ img { max-width: 100%; height: auto; display: block; }
.card--featured .desc { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* Pagination (news archive) — prev/next + windowed page numbers; ≥44px targets.
Pattern mined from AstroPaper/Astro blog templates, numbers added for 9 pages. */
.pagination {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: 4px var(--space-s); margin-top: var(--space-xl);
}
.pagination ol { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; gap: 4px; }
.page-link {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0 12px;
border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; color: var(--text);
}
a.page-link:hover { background: var(--moon); color: var(--indigo); }
.page-link[aria-current="page"] { background: var(--galaxy); color: #fff; }
.page-step { font-weight: 600; }
a.page-step { color: var(--link); }
span.page-step { color: var(--muted); } /* disabled end stop — non-interactive */
.page-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; color: var(--muted); }
/* Service tiles — card tokens, text-first */
.tile { padding: var(--space-m); gap: 8px; }
.tile h3 { margin: 0; }
@@ -347,6 +366,8 @@ img { max-width: 100%; height: auto; display: block; }
.toc .d3 { padding-left: var(--space-s); }
.toc a { text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.toc a:hover { text-decoration: underline; }
/* Scrollspy state (set by the [slug].astro script) — functional, not motion */
.toc a[aria-current="true"] { color: var(--galaxy); font-weight: 600; }
.toc--inline { margin-bottom: var(--space-l); }
.toc--rail { display: none; }
@media (min-width: 1200px) {
@@ -413,6 +434,9 @@ img { max-width: 100%; height: auto; display: block; }
color: var(--muted); white-space: nowrap; font-size: 0.78rem;
background: var(--moon); border-radius: var(--radius-pill); padding: 2px 10px;
}
/* Matched-term highlight in results/suggestions (Starlight search pattern) —
brand tint only, no new hues */
mark { background: var(--tint-cherenkov); color: inherit; border-radius: calc(var(--radius) - 12px); padding: 0 2px; }
/* Mock/status badges — every mock must be labelled (REQUIREMENTS.md §5) */
.badge-mock, .badge-ext {
@@ -513,6 +537,9 @@ img { max-width: 100%; height: auto; display: block; }
/* Hover feedback */
.card, .search-results li { transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.card:hover { transform: translateY(-2px); }
/* Editorial cover micro-zoom on card hover (AstroWind pattern; card clips it) */
.card .cover { transition: transform 0.3s ease; }
.card:hover .cover, .card:focus-within .cover { transform: scale(1.03); }
.btn, .login-mock, .navlink { transition: background-color 0.15s ease, color 0.15s ease; }
}
@keyframes nebula { /* inert unless applied inside the block above */