mirror of
https://github.com/sern-handler/website
synced 2026-06-17 05:12:21 +00:00
440 lines
15 KiB
Plaintext
440 lines
15 KiB
Plaintext
---
|
|
import '@pagefind/default-ui/css/ui.css';
|
|
import Icon from '../user-components/Icon.astro';
|
|
import project from 'virtual:starlight/project-context';
|
|
import type { Props } from '../props';
|
|
|
|
const { labels } = Astro.props;
|
|
|
|
const pagefindTranslations = {
|
|
placeholder: labels['search.label'],
|
|
...Object.fromEntries(
|
|
Object.entries(labels)
|
|
.filter(([key]) => key.startsWith('pagefind.'))
|
|
.map(([key, value]) => [key.replace('pagefind.', ''), value])
|
|
),
|
|
};
|
|
---
|
|
|
|
<site-search
|
|
data-translations={JSON.stringify(pagefindTranslations)}
|
|
data-strip-trailing-slash={project.trailingSlash === 'never'}
|
|
>
|
|
<button data-open-modal disabled>
|
|
{
|
|
/* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */
|
|
}
|
|
<Icon name="magnifier" label={labels['search.label']} />
|
|
<span class="sl-hidden md:sl-block" aria-hidden="true">{labels['search.label']}</span>
|
|
<Icon
|
|
name="forward-slash"
|
|
class="sl-hidden md:sl-block"
|
|
label={labels['search.shortcutLabel']}
|
|
/>
|
|
</button>
|
|
|
|
<dialog style="padding:0" aria-label={labels['search.label']}>
|
|
<div class="dialog-frame sl-flex">
|
|
{
|
|
/* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
|
|
}
|
|
<button data-close-modal class="sl-flex md:sl-hidden">
|
|
{labels['search.cancelLabel']}
|
|
</button>
|
|
{
|
|
import.meta.env.DEV ? (
|
|
<div style="margin: auto; text-align: center; white-space: pre-line;" dir="ltr">
|
|
<p>{labels['search.devWarning']}</p>
|
|
</div>
|
|
) : (
|
|
<div class="search-container">
|
|
<div id="starlight__search" />
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</dialog>
|
|
</site-search>
|
|
|
|
<script>
|
|
class SiteSearch extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const openBtn = this.querySelector<HTMLButtonElement>('button[data-open-modal]')!;
|
|
const closeBtn = this.querySelector<HTMLButtonElement>('button[data-close-modal]')!;
|
|
const dialog = this.querySelector('dialog')!;
|
|
const dialogFrame = this.querySelector('.dialog-frame')!;
|
|
|
|
/** Close the modal if a user clicks on a link or outside of the modal. */
|
|
const onClick = (event: MouseEvent) => {
|
|
const isLink = 'href' in (event.target || {});
|
|
if (
|
|
isLink ||
|
|
(document.body.contains(event.target as Node) &&
|
|
!dialogFrame.contains(event.target as Node))
|
|
) {
|
|
closeModal();
|
|
}
|
|
};
|
|
|
|
const openModal = (event?: MouseEvent) => {
|
|
dialog.showModal();
|
|
document.body.toggleAttribute('data-search-modal-open', true);
|
|
this.querySelector('input')?.focus();
|
|
event?.stopPropagation();
|
|
window.addEventListener('click', onClick);
|
|
};
|
|
|
|
const closeModal = () => dialog.close();
|
|
|
|
openBtn.addEventListener('click', openModal);
|
|
openBtn.disabled = false;
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
dialog.addEventListener('close', () => {
|
|
document.body.toggleAttribute('data-search-modal-open', false);
|
|
window.removeEventListener('click', onClick);
|
|
});
|
|
|
|
// Listen for `/`, `ctrl + k`, and `cmd + k` keyboard shortcuts.
|
|
window.addEventListener('keydown', (e) => {
|
|
const isInput =
|
|
document.activeElement instanceof HTMLElement &&
|
|
(['input', 'select', 'textarea'].includes(document.activeElement.tagName.toLowerCase()) ||
|
|
document.activeElement.isContentEditable);
|
|
if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
|
|
dialog.open ? closeModal() : openModal();
|
|
e.preventDefault();
|
|
} else if (e.key === '/' && !dialog.open && !isInput) {
|
|
openModal();
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
let translations = {};
|
|
try {
|
|
translations = JSON.parse(this.dataset.translations || '{}');
|
|
} catch {}
|
|
|
|
const shouldStrip = this.dataset.stripTrailingSlash !== undefined;
|
|
const stripTrailingSlash = (path: string) => path.replace(/(.)\/(#.*)?$/, '$1$2');
|
|
const formatURL = shouldStrip ? stripTrailingSlash : (path: string) => path;
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
if (import.meta.env.DEV) return;
|
|
const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
|
|
onIdle(async () => {
|
|
// @ts-expect-error — Missing types for @pagefind/default-ui package.
|
|
const { PagefindUI } = await import('@pagefind/default-ui');
|
|
new PagefindUI({
|
|
element: '#starlight__search',
|
|
baseUrl: import.meta.env.BASE_URL,
|
|
bundlePath: import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
|
|
showImages: false,
|
|
translations,
|
|
showSubResults: true,
|
|
processResult: (result: { url: string; sub_results: Array<{ url: string }> }) => {
|
|
result.url = formatURL(result.url);
|
|
result.sub_results = result.sub_results.map((sub_result) => {
|
|
sub_result.url = formatURL(sub_result.url);
|
|
return sub_result;
|
|
});
|
|
},
|
|
});
|
|
});
|
|
});
|
|
}
|
|
}
|
|
customElements.define('site-search', SiteSearch);
|
|
</script>
|
|
|
|
<style>
|
|
site-search {
|
|
display: contents;
|
|
}
|
|
button[data-open-modal] {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border: 0;
|
|
background-color: transparent;
|
|
color: var(--sl-color-gray-1);
|
|
cursor: pointer;
|
|
height: 2.5rem;
|
|
font-size: var(--sl-text-xl);
|
|
}
|
|
|
|
@media (min-width: 50rem) {
|
|
button[data-open-modal] {
|
|
border: 1px solid var(--sl-color-gray-5);
|
|
border-radius: 0.5rem;
|
|
padding-inline-start: 0.75rem;
|
|
padding-inline-end: 1rem;
|
|
background-color: var(--sl-color-black);
|
|
color: var(--sl-color-gray-2);
|
|
font-size: var(--sl-text-sm);
|
|
width: 100%;
|
|
max-width: 22rem;
|
|
}
|
|
button[data-open-modal]:hover {
|
|
border-color: var(--sl-color-gray-2);
|
|
color: var(--sl-color-white);
|
|
}
|
|
|
|
button[data-open-modal] > :last-child {
|
|
margin-inline-start: auto;
|
|
}
|
|
}
|
|
|
|
dialog {
|
|
margin: 0;
|
|
background-color: var(--sl-color-gray-6);
|
|
border: 1px solid var(--sl-color-gray-5);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
box-shadow: var(--sl-shadow-lg);
|
|
}
|
|
dialog[open] {
|
|
display: grid;
|
|
}
|
|
|
|
dialog::backdrop {
|
|
background-color: var(--sl-color-backdrop-overlay);
|
|
-webkit-backdrop-filter: blur(0.25rem);
|
|
backdrop-filter: blur(0.25rem);
|
|
}
|
|
|
|
.dialog-frame {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
button[data-close-modal] {
|
|
position: absolute;
|
|
z-index: 1;
|
|
align-items: center;
|
|
align-self: flex-end;
|
|
height: calc(64px * var(--pagefind-ui-scale));
|
|
padding: 0.25rem;
|
|
border: 0;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: var(--sl-color-text-accent);
|
|
}
|
|
|
|
#starlight__search {
|
|
--pagefind-ui-primary: var(--sl-color-accent-light);
|
|
--pagefind-ui-text: var(--sl-color-gray-2);
|
|
--pagefind-ui-font: var(--__sl-font);
|
|
--pagefind-ui-background: var(--sl-color-black);
|
|
--pagefind-ui-border: var(--sl-color-gray-5);
|
|
--pagefind-ui-border-width: 1px;
|
|
--sl-search-cancel-space: 5rem;
|
|
}
|
|
|
|
@media (min-width: 50rem) {
|
|
#starlight__search {
|
|
--sl-search-cancel-space: 0px;
|
|
}
|
|
|
|
dialog {
|
|
margin: 4rem auto auto;
|
|
border-radius: 0.5rem;
|
|
width: 90%;
|
|
max-width: 40rem;
|
|
height: max-content;
|
|
min-height: 15rem;
|
|
max-height: calc(100% - 8rem);
|
|
}
|
|
|
|
.dialog-frame {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
[data-search-modal-open] {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#starlight__search {
|
|
--sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
|
|
--sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale));
|
|
--sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale));
|
|
--sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
|
|
--sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale));
|
|
--sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
|
|
--sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
|
|
--sl-search-page-icon-inline-start: calc(
|
|
(var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2
|
|
);
|
|
--sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
|
|
--sl-search-tree-diagram-inline-start: calc(
|
|
(var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2
|
|
);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__form::before {
|
|
--pagefind-ui-text: var(--sl-color-gray-1);
|
|
opacity: 1;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__search-input {
|
|
color: var(--sl-color-white);
|
|
font-weight: 400;
|
|
width: calc(100% - var(--sl-search-cancel-space));
|
|
}
|
|
|
|
#starlight__search input:focus {
|
|
--pagefind-ui-border: var(--sl-color-accent);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__search-clear {
|
|
inset-inline-end: var(--sl-search-cancel-space);
|
|
width: calc(60px * var(--pagefind-ui-scale));
|
|
padding: 0;
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
#starlight__search .pagefind-ui__search-clear:focus {
|
|
outline: 1px solid var(--sl-color-accent);
|
|
}
|
|
#starlight__search .pagefind-ui__search-clear::before {
|
|
content: '';
|
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
|
center / 50% no-repeat;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
|
|
center / 50% no-repeat;
|
|
background-color: var(--sl-color-text-accent);
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__results > * + * {
|
|
margin-top: var(--sl-search-result-spacing);
|
|
}
|
|
#starlight__search .pagefind-ui__result {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-nested {
|
|
position: relative;
|
|
padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end);
|
|
padding-inline-start: var(--sl-search-result-pad-inline-start);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
|
|
#starlight__search .pagefind-ui__result-nested {
|
|
position: relative;
|
|
background-color: var(--sl-color-black);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
|
|
#starlight__search
|
|
.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
|
|
#starlight__search .pagefind-ui__result-nested:hover,
|
|
#starlight__search .pagefind-ui__result-nested:focus-within {
|
|
outline: 1px solid var(--sl-color-accent-high);
|
|
}
|
|
|
|
#starlight__search
|
|
.pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within,
|
|
#starlight__search .pagefind-ui__result-nested:focus-within {
|
|
background-color: var(--sl-color-accent-low);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-thumb,
|
|
#starlight__search .pagefind-ui__result-inner {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-inner > :first-child {
|
|
border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
|
|
}
|
|
#starlight__search .pagefind-ui__result-inner > :last-child {
|
|
border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
|
|
padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end);
|
|
padding-inline-start: var(--sl-search-result-pad-inline-start);
|
|
}
|
|
#starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-start: var(--sl-search-page-icon-inline-start);
|
|
width: var(--sl-search-page-icon-size);
|
|
background: var(--sl-color-gray-3);
|
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
|
|
center no-repeat;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
|
|
center no-repeat;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-inner {
|
|
align-items: stretch;
|
|
gap: 1px;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-link {
|
|
position: unset;
|
|
--pagefind-ui-text: var(--sl-color-white);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-nested .pagefind-ui__result-link::before {
|
|
content: unset;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-nested::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-start: var(--sl-search-tree-diagram-inline-start);
|
|
width: var(--sl-search-tree-diagram-size);
|
|
background: var(--sl-color-gray-4);
|
|
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
|
0% 0% / 100% no-repeat;
|
|
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
|
|
0% 0% / 100% no-repeat;
|
|
}
|
|
#starlight__search .pagefind-ui__result-nested:last-child::before {
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Flip page and tree icons around the vertical axis when in an RTL layout. */
|
|
[dir='rtl'] .pagefind-ui__result-title::before,
|
|
[dir='rtl'] .pagefind-ui__result-nested::before {
|
|
transform: matrix(-1, 0, 0, 1, 0, 0);
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
#starlight__search .pagefind-ui__result-excerpt {
|
|
font-size: calc(1rem * var(--pagefind-ui-scale));
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
#starlight__search mark {
|
|
color: var(--sl-color-gray-2);
|
|
background-color: transparent;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|