diff --git a/apps/web/public/_headers b/apps/web/public/_headers new file mode 100644 index 000000000..b58d4905f --- /dev/null +++ b/apps/web/public/_headers @@ -0,0 +1,8 @@ +# Cloudflare Pages custom headers +# Serve Pagefind WASM bundles with the correct MIME type so that +# WebAssembly.instantiateStreaming() works on WebKit (iOS Safari/Chrome). +# Without this, WebKit consumes the response body during the failed +# streaming attempt, breaking the ArrayBuffer fallback and making +# all searches return "no results" on iOS. +/pagefind/wasm.* + Content-Type: application/wasm diff --git a/apps/web/src/components/Lander.astro b/apps/web/src/components/Lander.astro index f11c765f3..1781e7fcf 100644 --- a/apps/web/src/components/Lander.astro +++ b/apps/web/src/components/Lander.astro @@ -19,14 +19,6 @@ Search docs... CtrlK - -
- -
-
- @@ -34,6 +26,19 @@ + + +
+ +
+
+ +
@@ -1232,6 +1237,12 @@ td code { } @media (max-width: 480px) { + .av-search-dialog-frame { + margin-top: 1rem; + width: 95%; + max-height: calc(100vh - 2rem); + } + .av-hero-text h1 { font-size: 1.75rem; } @@ -1340,6 +1351,7 @@ td code { document.head.appendChild(link); const darkStyles = document.createElement('style'); darkStyles.textContent = ` + /* Pagefind UI — Starlight-style dark theme */ #av-search-container { --pagefind-ui-scale: 0.8; --pagefind-ui-primary: #e2e8f0; @@ -1349,11 +1361,101 @@ td code { --pagefind-ui-border: #475569; --pagefind-ui-border-width: 1px; --pagefind-ui-tag: #475569; + --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 + ); } #av-search-container .pagefind-ui__form::before { --pagefind-ui-text: #e2e8f0; opacity: 1; } #av-search-container .pagefind-ui__search-input { color: #f8fafc; font-weight: 400; } #av-search-container input:focus { --pagefind-ui-border: #06b6d4; } - #av-search-container .pagefind-ui__search-clear { width: calc(60px * var(--pagefind-ui-scale)); padding: 0; background-color: transparent; overflow: hidden; } + #av-search-container .pagefind-ui__search-clear { + width: calc(60px * var(--pagefind-ui-scale)); + padding: 0; + background-color: transparent; + overflow: hidden; + } + #av-search-container .pagefind-ui__search-clear:focus { outline: 1px solid #06b6d4; } + #av-search-container .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: #cbd5e1; + display: block; width: 100%; height: 100%; + } + #av-search-container .pagefind-ui__results > * + * { margin-top: var(--sl-search-result-spacing); } + #av-search-container .pagefind-ui__result { border: 0; padding: 0; } + #av-search-container .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); + } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)), + #av-search-container .pagefind-ui__result-nested { + position: relative; + background-color: hsl(240,10%,6%); + } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover, + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within, + #av-search-container .pagefind-ui__result-nested:hover, + #av-search-container .pagefind-ui__result-nested:focus-within { outline: 1px solid #06b6d4; } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within, + #av-search-container .pagefind-ui__result-nested:focus-within { background-color: hsl(185,40%,8%); } + #av-search-container .pagefind-ui__result-thumb, + #av-search-container .pagefind-ui__result-inner { margin-top: 0; } + #av-search-container .pagefind-ui__result-inner > :first-child { border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0; } + #av-search-container .pagefind-ui__result-inner > :last-child { border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners); } + #av-search-container .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); + } + #av-search-container .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: #94a3b8; + -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; + } + #av-search-container .pagefind-ui__result-inner { align-items: stretch; gap: 1px; } + #av-search-container .pagefind-ui__result-link { position: unset; --pagefind-ui-text: #f8fafc; font-weight: 600; } + #av-search-container .pagefind-ui__result-link:hover { text-decoration: none; } + #av-search-container .pagefind-ui__result-nested .pagefind-ui__result-link::before { content: unset; } + #av-search-container .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: #475569; + -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; + } + #av-search-container .pagefind-ui__result-nested:last-of-type::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"); + } + #av-search-container .pagefind-ui__result-link::after { content: ''; position: absolute; inset: 0; } + #av-search-container .pagefind-ui__result-excerpt { font-size: calc(1rem * var(--pagefind-ui-scale)); overflow-wrap: anywhere; } + #av-search-container mark { color: #cbd5e1; background-color: transparent; font-weight: 600; } + #av-search-container .pagefind-ui__filter-value::before { border-color: hsl(240,10%,6%); } + #av-search-container .pagefind-ui__result-tags { + background-color: hsl(240,10%,6%); + margin-top: 0; + padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end); + } `; document.head.appendChild(darkStyles); const script = document.createElement('script');