Files
portal/src/pages/search.astro
T

38 lines
1.6 KiB
Plaintext

---
import Base from '../layouts/Base.astro';
---
<Base title="CTAO Science Portal — Search" description="Search CTAO news and announcements">
<section class="hero-band">
<div class="band-bg" aria-hidden="true"></div>
<div class="container hero">
<div class="eyebrow">Science Portal</div>
<h1>Search</h1>
<p>Find news and announcements</p>
</div>
</section>
<section class="band--moon">
<div class="container page">
<form class="search-form" role="search" action="/search" method="get">
<label class="sr-only" for="q">Search news</label>
<svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
<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>
</div>
</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>