mirror of https://github.com/sveltejs/svelte
feat: search and backlink compatability (#8286)
* Copy the right files * Finish search * FIx accessibility issues * Add original site compatibility back in * Remove console.log * Reorganize imports * Minor refactor * Fix undefined heading issue * Replace state on redirect * Don't redirect to docs/introduction from navbar * Cleanup search * Cleanup some more(html entities) * Remove console log * Minor style tweaks * Put search in middlepull/8288/head
Puru Vijay
2 years ago
committed by
GitHub
parent
1b12546afe
commit
df2bb23af4
@ -0,0 +1,68 @@
|
|||||||
|
/** @param {HTMLElement} node */
|
||||||
|
export function focusable_children(node) {
|
||||||
|
const nodes = Array.from(
|
||||||
|
node.querySelectorAll(
|
||||||
|
'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const index = nodes.indexOf(document.activeElement);
|
||||||
|
|
||||||
|
const update = (d) => {
|
||||||
|
let i = index + d;
|
||||||
|
i += nodes.length;
|
||||||
|
i %= nodes.length;
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
nodes[i].focus();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
/** @param {string} [selector] */
|
||||||
|
next: (selector) => {
|
||||||
|
const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
|
||||||
|
|
||||||
|
for (let i = 0; i < reordered.length; i += 1) {
|
||||||
|
if (!selector || reordered[i].matches(selector)) {
|
||||||
|
reordered[i].focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** @param {string} [selector] */
|
||||||
|
prev: (selector) => {
|
||||||
|
const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
|
||||||
|
|
||||||
|
for (let i = reordered.length - 2; i >= 0; i -= 1) {
|
||||||
|
if (!selector || reordered[i].matches(selector)) {
|
||||||
|
reordered[i].focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function trap(node) {
|
||||||
|
const handle_keydown = (e) => {
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const group = focusable_children(node);
|
||||||
|
if (e.shiftKey) {
|
||||||
|
group.prev();
|
||||||
|
} else {
|
||||||
|
group.next();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
node.addEventListener('keydown', handle_keydown);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy: () => {
|
||||||
|
node.removeEventListener('keydown', handle_keydown);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,130 @@
|
|||||||
|
<script>
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
import { searching, query } from './stores.js';
|
||||||
|
|
||||||
|
export let q = '';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<form class="search-container" action="/search">
|
||||||
|
<input
|
||||||
|
value={q}
|
||||||
|
on:input={(e) => {
|
||||||
|
$searching = true;
|
||||||
|
$query = e.currentTarget.value;
|
||||||
|
e.currentTarget.value = '';
|
||||||
|
}}
|
||||||
|
on:mousedown|preventDefault={() => ($searching = true)}
|
||||||
|
on:touchend|preventDefault={() => ($searching = true)}
|
||||||
|
type="search"
|
||||||
|
name="q"
|
||||||
|
placeholder="Search"
|
||||||
|
aria-label="Search"
|
||||||
|
spellcheck="false"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if browser}
|
||||||
|
<div class="shortcut">
|
||||||
|
<kbd>{navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl'}</kbd> <kbd>K</kbd>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@keyframes fade-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
padding: 0.5em 0.5em 0.4em 2em;
|
||||||
|
border: 1px solid var(--sk-back-translucent);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
/* text-align: center; */
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 3.2rem;
|
||||||
|
border-radius: var(--sk-border-radius);
|
||||||
|
background: no-repeat 1rem 50% / 1em 1em url(/icons/search.svg);
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .shortcut {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 0.9rem);
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
pointer-events: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
animation: fade-in 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
display: none;
|
||||||
|
background: var(--sk-back-2);
|
||||||
|
border: 1px solid var(--sk-back-translucent);
|
||||||
|
padding: 0.2rem 0.2rem 0rem 0.2rem;
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 800px) {
|
||||||
|
.search-container {
|
||||||
|
width: 11rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shortcut {
|
||||||
|
padding: 0 1.6rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* we're using media query as an imperfect proxy for mobile/desktop */
|
||||||
|
kbd {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
.search-container {
|
||||||
|
width: 19rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,420 @@
|
|||||||
|
<script>
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import Icon from '@sveltejs/site-kit/components/Icon.svelte';
|
||||||
|
import { afterNavigate } from '$app/navigation';
|
||||||
|
import { searching, query, recent } from './stores.js';
|
||||||
|
import { focusable_children, trap } from '../actions/focus.js';
|
||||||
|
import SearchResults from './SearchResults.svelte';
|
||||||
|
import SearchWorker from '$lib/workers/search.js?worker';
|
||||||
|
|
||||||
|
let modal;
|
||||||
|
|
||||||
|
let search = null;
|
||||||
|
let recent_searches = [];
|
||||||
|
|
||||||
|
let worker;
|
||||||
|
let ready = false;
|
||||||
|
|
||||||
|
let uid = 1;
|
||||||
|
const pending = new Set();
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
worker = new SearchWorker();
|
||||||
|
|
||||||
|
worker.addEventListener('message', (event) => {
|
||||||
|
const { type, payload } = event.data;
|
||||||
|
|
||||||
|
if (type === 'ready') {
|
||||||
|
ready = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'results') {
|
||||||
|
search = payload;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'recents') {
|
||||||
|
recent_searches = payload;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
worker.postMessage({
|
||||||
|
type: 'init',
|
||||||
|
payload: {
|
||||||
|
origin: location.origin,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
afterNavigate(() => {
|
||||||
|
// TODO this also needs to apply when only the hash changes
|
||||||
|
// (should before/afterNavigate fire at that time? unclear)
|
||||||
|
close();
|
||||||
|
});
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
if ($searching) {
|
||||||
|
$searching = false;
|
||||||
|
const scroll = -parseInt(document.body.style.top || '0');
|
||||||
|
document.body.style.position = '';
|
||||||
|
document.body.style.top = '';
|
||||||
|
document.body.tabIndex = -1;
|
||||||
|
document.body.focus();
|
||||||
|
document.body.removeAttribute('tabindex');
|
||||||
|
window.scrollTo(0, scroll);
|
||||||
|
}
|
||||||
|
|
||||||
|
search = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {string} href */
|
||||||
|
function navigate(href) {
|
||||||
|
$recent = [href, ...$recent.filter((x) => x !== href)];
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (ready) {
|
||||||
|
const id = uid++;
|
||||||
|
pending.add(id);
|
||||||
|
|
||||||
|
worker.postMessage({ type: 'query', id, payload: $query });
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if (ready) {
|
||||||
|
worker.postMessage({ type: 'recents', payload: $recent });
|
||||||
|
}
|
||||||
|
|
||||||
|
$: if ($searching) {
|
||||||
|
document.body.style.top = `-${window.scrollY}px`;
|
||||||
|
document.body.style.position = 'fixed';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window
|
||||||
|
on:keydown={(e) => {
|
||||||
|
if (e.key === 'k' && (navigator.platform === 'MacIntel' ? e.metaKey : e.ctrlKey)) {
|
||||||
|
e.preventDefault();
|
||||||
|
$query = '';
|
||||||
|
|
||||||
|
if ($searching) {
|
||||||
|
close();
|
||||||
|
} else {
|
||||||
|
$searching = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.code === 'Escape') {
|
||||||
|
close();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{#if $searching && ready}
|
||||||
|
<div class="modal-background" on:click={close} on:keyup={(e) => e.key === ' ' && close()} />
|
||||||
|
|
||||||
|
<div
|
||||||
|
bind:this={modal}
|
||||||
|
class="modal"
|
||||||
|
on:keydown={(e) => {
|
||||||
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
const group = focusable_children(e.currentTarget);
|
||||||
|
|
||||||
|
// when using arrow keys (as opposed to tab), don't focus buttons
|
||||||
|
const selector = 'a, input';
|
||||||
|
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
group.next(selector);
|
||||||
|
} else {
|
||||||
|
group.prev(selector);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
use:trap
|
||||||
|
>
|
||||||
|
<div class="search-box">
|
||||||
|
<!-- svelte-ignore a11y-autofocus -->
|
||||||
|
<input
|
||||||
|
autofocus
|
||||||
|
on:keydown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
modal.querySelector('a[data-has-node]')?.click();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
on:input={(e) => ($query = e.currentTarget.value)}
|
||||||
|
value={$query}
|
||||||
|
placeholder="Search"
|
||||||
|
aria-describedby="search-description"
|
||||||
|
aria-label="Search"
|
||||||
|
spellcheck="false"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button aria-label="Close" on:click={close}>
|
||||||
|
<Icon name="close" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span id="search-description" class="visually-hidden">Results will update as you type</span>
|
||||||
|
|
||||||
|
<div class="results">
|
||||||
|
{#if search?.query}
|
||||||
|
<div
|
||||||
|
class="results-container"
|
||||||
|
on:click={() => ($searching = false)}
|
||||||
|
on:keydown={(e) => e.key === ' ' && ($searching = false)}
|
||||||
|
>
|
||||||
|
<SearchResults
|
||||||
|
results={search.results}
|
||||||
|
query={search.query}
|
||||||
|
on:select={(e) => {
|
||||||
|
navigate(e.detail.href);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<h2 class="info" class:empty={recent_searches.length === 0}>
|
||||||
|
{recent_searches.length ? 'Recent searches' : 'No recent searches'}
|
||||||
|
</h2>
|
||||||
|
{#if recent_searches.length}
|
||||||
|
<div class="results-container">
|
||||||
|
<ul>
|
||||||
|
{#each recent_searches as search, i}
|
||||||
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
|
<li class="recent">
|
||||||
|
<a on:click={() => navigate(search.href)} href={search.href}>
|
||||||
|
<small>{search.breadcrumbs.join('/')}</small>
|
||||||
|
<strong>{search.breadcrumbs.at(-1)}</strong>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<button
|
||||||
|
aria-label="Delete"
|
||||||
|
on:click={(e) => {
|
||||||
|
$recent = $recent.filter((href) => href !== search.href);
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Icon name="delete" />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div aria-live="assertive" class="visually-hidden">
|
||||||
|
{#if $searching && search?.results.length === 0}
|
||||||
|
<p>No results</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
input {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem 6rem 0.5rem 1rem;
|
||||||
|
height: 5rem;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid var(--sk-back-3);
|
||||||
|
font-weight: 600;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--sk-back-2);
|
||||||
|
color: var(--sk-text-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::selection {
|
||||||
|
background-color: var(--sk-back-translucent);
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder {
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus-visible {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: white;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus-visible::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[aria-label='Close'] {
|
||||||
|
--size: 2rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
background: none;
|
||||||
|
color: var(--sk-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[aria-label='Close']:focus-visible {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: var(--sk-back-1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus-visible + button[aria-label='Close'] {
|
||||||
|
color: var(--sk-back-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-background,
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-background {
|
||||||
|
background: var(--sk-back-1);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
position: relative;
|
||||||
|
height: calc(100% - 2rem);
|
||||||
|
width: calc(100vw - 2rem);
|
||||||
|
max-width: 50rem;
|
||||||
|
max-height: 50rem;
|
||||||
|
filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
|
||||||
|
border-radius: var(--sk-border-radius);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box > * {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results {
|
||||||
|
overflow: auto;
|
||||||
|
overscroll-behavior-y: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-container {
|
||||||
|
background: var(--sk-back-2);
|
||||||
|
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-color: var(--sk-back-2);
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info.empty {
|
||||||
|
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: var(--sk-back-1);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a small,
|
||||||
|
a strong {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a small {
|
||||||
|
font-size: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
a strong {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--sk-text-2);
|
||||||
|
margin: 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus small {
|
||||||
|
color: white;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus strong {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a strong :global(mark) {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[aria-label='Delete'] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 5rem;
|
||||||
|
height: 100%;
|
||||||
|
color: var(--sk-text-2);
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus + [aria-label='Delete'] {
|
||||||
|
color: var(--sk-back-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
button[aria-label='Delete']:hover {
|
||||||
|
opacity: 1;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button[aria-label='Delete']:focus-visible {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: var(--sk-text-1);
|
||||||
|
opacity: 1;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,163 @@
|
|||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
/** @type {import('./types').Tree[]} */
|
||||||
|
export let results;
|
||||||
|
|
||||||
|
/** @type {string} */
|
||||||
|
export let query;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
/** @param {string} text */
|
||||||
|
function escape(text) {
|
||||||
|
return text.replace(/</g, '<').replace(/>/g, '>').replaceAll('`', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} content
|
||||||
|
* @param {string} query
|
||||||
|
*/
|
||||||
|
function excerpt(content, query) {
|
||||||
|
if (content === null) return '';
|
||||||
|
|
||||||
|
const index = content.toLowerCase().indexOf(query.toLowerCase());
|
||||||
|
if (index === -1) {
|
||||||
|
return escape(content.slice(0, 100));
|
||||||
|
}
|
||||||
|
|
||||||
|
const prefix = index > 20 ? `…${content.slice(index - 15, index)}` : content.slice(0, index);
|
||||||
|
const suffix = content.slice(
|
||||||
|
index + query.length,
|
||||||
|
index + query.length + (80 - (prefix.length + query.length))
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
escape(prefix) +
|
||||||
|
`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
|
||||||
|
escape(suffix)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{#each results as result (result.href)}
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
data-sveltekit-preload-data
|
||||||
|
href={result.href}
|
||||||
|
on:click={() => dispatch('select', { href: result.href })}
|
||||||
|
data-has-node={result.node ? true : undefined}
|
||||||
|
>
|
||||||
|
<strong>{@html excerpt(result.breadcrumbs[result.breadcrumbs.length - 1], query)}</strong>
|
||||||
|
|
||||||
|
{#if result.node?.content}
|
||||||
|
<span>{@html excerpt(result.node.content, query)}</span>
|
||||||
|
{/if}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{#if result.children.length > 0}
|
||||||
|
<svelte:self results={result.children} {query} on:select />
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul :global(ul) {
|
||||||
|
margin-left: 0.8em !important;
|
||||||
|
padding-left: 0em;
|
||||||
|
border-left: 1px solid var(--sk-back-5);
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul li {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
background: var(--sk-theme-2);
|
||||||
|
color: white;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a strong,
|
||||||
|
a span {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
a strong {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--sk-text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
a span {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #737373;
|
||||||
|
margin: 0.4rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a :global(mark) {
|
||||||
|
--highlight-color: rgba(255, 255, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
a span :global(mark) {
|
||||||
|
background: none;
|
||||||
|
color: var(--sk-text-1);
|
||||||
|
background: var(--highlight-color);
|
||||||
|
outline: 2px solid var(--highlight-color);
|
||||||
|
border-top: 2px solid var(--highlight-color);
|
||||||
|
/* mix-blend-mode: darken; */
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus span {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus strong {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus span :global(mark),
|
||||||
|
a:focus strong :global(mark) {
|
||||||
|
--highlight-color: hsl(240, 8%, 54%);
|
||||||
|
mix-blend-mode: lighten;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a strong :global(mark) {
|
||||||
|
color: var(--sk-text-1);
|
||||||
|
background: var(--highlight-color);
|
||||||
|
outline: 2px solid var(--highlight-color);
|
||||||
|
/* border-top: 2px solid var(--highlight-color); */
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<script>
|
||||||
|
import SearchResultList from './SearchResultList.svelte';
|
||||||
|
|
||||||
|
/** @type {import('./types').Tree[]} */
|
||||||
|
export let results;
|
||||||
|
|
||||||
|
/** @type {string} */
|
||||||
|
export let query;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if results.length > 0}
|
||||||
|
<SearchResultList {results} {query} on:select />
|
||||||
|
{:else if query}
|
||||||
|
<p class="info">No results</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.info {
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-color: var(--sk-back-2);
|
||||||
|
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
|
||||||
|
pointer-events: all;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,133 @@
|
|||||||
|
import { normalizeSlugify, removeMarkdown } from '$lib/server/docs';
|
||||||
|
import { extract_frontmatter, transform } from '$lib/server/markdown';
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import path from 'node:path';
|
||||||
|
import glob from 'tiny-glob/sync.js';
|
||||||
|
|
||||||
|
const base = '../../site/content/';
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
{
|
||||||
|
slug: 'docs',
|
||||||
|
label: null,
|
||||||
|
/** @param {string[]} parts */
|
||||||
|
href: (parts) =>
|
||||||
|
parts.length > 1 ? `/docs/${parts[0]}#${parts.slice(1).join('-')}` : `/docs/${parts[0]}`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
slug: 'faq',
|
||||||
|
label: 'FAQ',
|
||||||
|
/** @param {string[]} parts */
|
||||||
|
href: (parts) => `/faq#${parts.join('-')}`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function content() {
|
||||||
|
/** @type {import('./types').Block[]} */
|
||||||
|
const blocks = [];
|
||||||
|
|
||||||
|
for (const category of categories) {
|
||||||
|
const breadcrumbs = category.label ? [category.label] : [];
|
||||||
|
|
||||||
|
for (const file of glob('**/*.md', { cwd: `${base}/${category.slug}` })) {
|
||||||
|
const basename = path.basename(file);
|
||||||
|
const match = /\d{2}-(.+)\.md/.exec(basename);
|
||||||
|
if (!match) continue;
|
||||||
|
|
||||||
|
const slug = match[1];
|
||||||
|
|
||||||
|
const filepath = `${base}/${category.slug}/${file}`;
|
||||||
|
// const markdown = replace_placeholders(fs.readFileSync(filepath, 'utf-8'));
|
||||||
|
const markdown = fs.readFileSync(filepath, 'utf-8');
|
||||||
|
|
||||||
|
const { body, metadata } = extract_frontmatter(markdown);
|
||||||
|
|
||||||
|
const sections = body.trim().split(/^### /m);
|
||||||
|
const intro = sections.shift().trim();
|
||||||
|
const rank = +metadata.rank || undefined;
|
||||||
|
|
||||||
|
blocks.push({
|
||||||
|
breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title ?? '')],
|
||||||
|
href: category.href([slug]),
|
||||||
|
content: plaintext(intro),
|
||||||
|
rank,
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const section of sections) {
|
||||||
|
const lines = section.split('\n');
|
||||||
|
const h3 = lines.shift();
|
||||||
|
const content = lines.join('\n');
|
||||||
|
|
||||||
|
const subsections = content.trim().split('### ');
|
||||||
|
|
||||||
|
const intro = subsections.shift().trim();
|
||||||
|
|
||||||
|
blocks.push({
|
||||||
|
breadcrumbs: [...breadcrumbs, removeMarkdown(metadata.title), removeMarkdown(h3)],
|
||||||
|
href: category.href([slug, normalizeSlugify(h3)]),
|
||||||
|
content: plaintext(intro),
|
||||||
|
rank,
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const subsection of subsections) {
|
||||||
|
const lines = subsection.split('\n');
|
||||||
|
const h4 = lines.shift();
|
||||||
|
|
||||||
|
blocks.push({
|
||||||
|
breadcrumbs: [
|
||||||
|
...breadcrumbs,
|
||||||
|
removeMarkdown(metadata.title),
|
||||||
|
removeMarkdown(h3),
|
||||||
|
removeMarkdown(h4),
|
||||||
|
],
|
||||||
|
href: category.href([slug, normalizeSlugify(h3), normalizeSlugify(h4)]),
|
||||||
|
content: plaintext(lines.join('\n').trim()),
|
||||||
|
rank,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return blocks;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {string} markdown */
|
||||||
|
function plaintext(markdown) {
|
||||||
|
/** @param {unknown} text */
|
||||||
|
const block = (text) => `${text}\n`;
|
||||||
|
|
||||||
|
/** @param {string} text */
|
||||||
|
const inline = (text) => text;
|
||||||
|
|
||||||
|
return transform(markdown, {
|
||||||
|
code: (source) => source.split('// ---cut---\n').pop(),
|
||||||
|
blockquote: block,
|
||||||
|
html: () => '\n',
|
||||||
|
heading: (text) => `${text}\n`,
|
||||||
|
hr: () => '',
|
||||||
|
list: block,
|
||||||
|
listitem: block,
|
||||||
|
checkbox: block,
|
||||||
|
paragraph: (text) => `${text}\n\n`,
|
||||||
|
table: block,
|
||||||
|
tablerow: block,
|
||||||
|
tablecell: (text, opts) => {
|
||||||
|
return text + ' ';
|
||||||
|
},
|
||||||
|
strong: inline,
|
||||||
|
em: inline,
|
||||||
|
codespan: inline,
|
||||||
|
br: () => '',
|
||||||
|
del: inline,
|
||||||
|
link: (href, title, text) => text,
|
||||||
|
image: (href, title, text) => text,
|
||||||
|
text: inline,
|
||||||
|
})
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/&#(\d+);/g, (match, code) => {
|
||||||
|
return String.fromCharCode(code);
|
||||||
|
})
|
||||||
|
.trim();
|
||||||
|
}
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
import flexsearch from 'flexsearch';
|
||||||
|
|
||||||
|
// @ts-expect-error
|
||||||
|
const Index = /** @type {import('flexsearch').Index} */ (flexsearch.Index ?? flexsearch);
|
||||||
|
|
||||||
|
export let inited = false;
|
||||||
|
|
||||||
|
/** @type {import('flexsearch').Index[]} */
|
||||||
|
let indexes;
|
||||||
|
|
||||||
|
/** @type {Map<string, import('./types').Block>} */
|
||||||
|
const map = new Map();
|
||||||
|
|
||||||
|
/** @type {Map<string, string>} */
|
||||||
|
const hrefs = new Map();
|
||||||
|
|
||||||
|
/** @param {import('./types').Block[]} blocks */
|
||||||
|
export function init(blocks) {
|
||||||
|
if (inited) return;
|
||||||
|
|
||||||
|
// we have multiple indexes, so we can rank sections (migration guide comes last)
|
||||||
|
const max_rank = Math.max(...blocks.map((block) => block.rank ?? 0));
|
||||||
|
|
||||||
|
indexes = Array.from({ length: max_rank + 1 }, () => new Index({ tokenize: 'forward' }));
|
||||||
|
|
||||||
|
for (const block of blocks) {
|
||||||
|
const title = block.breadcrumbs.at(-1);
|
||||||
|
map.set(block.href, block);
|
||||||
|
// NOTE: we're not using a number as the ID here, but it is recommended:
|
||||||
|
// https://github.com/nextapps-de/flexsearch#use-numeric-ids
|
||||||
|
// If we were to switch to a number we would need a second map from ID to block
|
||||||
|
// We need to keep the existing one to allow looking up recent searches by URL even if docs change
|
||||||
|
// It's unclear how much browsers do string interning and how this might affect memory
|
||||||
|
// We'd probably want to test both implementations across browsers if memory usage becomes an issue
|
||||||
|
// TODO: fix the type by updating flexsearch after
|
||||||
|
// https://github.com/nextapps-de/flexsearch/pull/364 is merged and released
|
||||||
|
indexes[block.rank ?? 0].add(block.href, `${title} ${block.content}`);
|
||||||
|
|
||||||
|
hrefs.set(block.breadcrumbs.join('::'), block.href);
|
||||||
|
}
|
||||||
|
|
||||||
|
inited = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string} query
|
||||||
|
* @returns {import('./types').Block[]}
|
||||||
|
*/
|
||||||
|
export function search(query) {
|
||||||
|
const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
|
||||||
|
const regex = new RegExp(`(^|\\b)${escaped}`, 'i');
|
||||||
|
|
||||||
|
const blocks = indexes
|
||||||
|
.map((index) => index.search(query))
|
||||||
|
.flat()
|
||||||
|
.map(lookup)
|
||||||
|
.map((block, rank) => ({ block, rank }))
|
||||||
|
.sort((a, b) => {
|
||||||
|
const a_title_matches = regex.test(a.block.breadcrumbs.at(-1));
|
||||||
|
const b_title_matches = regex.test(b.block.breadcrumbs.at(-1));
|
||||||
|
|
||||||
|
// massage the order a bit, so that title matches
|
||||||
|
// are given higher priority
|
||||||
|
if (a_title_matches !== b_title_matches) {
|
||||||
|
return a_title_matches ? -1 : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return a.block.breadcrumbs.length - b.block.breadcrumbs.length || a.rank - b.rank;
|
||||||
|
})
|
||||||
|
.map(({ block }) => block);
|
||||||
|
|
||||||
|
const results = tree([], blocks).children;
|
||||||
|
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {string} href */
|
||||||
|
export function lookup(href) {
|
||||||
|
return map.get(href);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {string[]} breadcrumbs
|
||||||
|
* @param {import('./types').Block[]} blocks
|
||||||
|
*/
|
||||||
|
function tree(breadcrumbs, blocks) {
|
||||||
|
const depth = breadcrumbs.length;
|
||||||
|
|
||||||
|
const node = blocks.find((block) => {
|
||||||
|
if (block.breadcrumbs.length !== depth) return false;
|
||||||
|
return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
|
||||||
|
});
|
||||||
|
|
||||||
|
const descendants = blocks.filter((block) => {
|
||||||
|
if (block.breadcrumbs.length <= depth) return false;
|
||||||
|
return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
|
||||||
|
});
|
||||||
|
|
||||||
|
const child_parts = Array.from(new Set(descendants.map((block) => block.breadcrumbs[depth])));
|
||||||
|
|
||||||
|
return {
|
||||||
|
breadcrumbs,
|
||||||
|
href: hrefs.get(breadcrumbs.join('::')),
|
||||||
|
node,
|
||||||
|
children: child_parts.map((part) => tree([...breadcrumbs, part], descendants)),
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
import { persisted } from 'svelte-local-storage-store';
|
||||||
|
|
||||||
|
export const searching = writable(false);
|
||||||
|
export const query = writable('');
|
||||||
|
|
||||||
|
/** @type {import('svelte/store').Writable<any[]>} */
|
||||||
|
export const recent = persisted('recent_searches', []);
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
export interface Block {
|
||||||
|
breadcrumbs: string[];
|
||||||
|
href: string;
|
||||||
|
content: string;
|
||||||
|
rank: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Tree {
|
||||||
|
breadcrumbs: string[];
|
||||||
|
href: string;
|
||||||
|
node: Block;
|
||||||
|
children: Tree[];
|
||||||
|
}
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { init, search, lookup } from '../search/search.js';
|
||||||
|
|
||||||
|
addEventListener('message', async (event) => {
|
||||||
|
const { type, payload } = event.data;
|
||||||
|
|
||||||
|
if (type === 'init') {
|
||||||
|
const res = await fetch(`${payload.origin}/content.json`);
|
||||||
|
const { blocks } = await res.json();
|
||||||
|
init(blocks);
|
||||||
|
|
||||||
|
postMessage({ type: 'ready' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'query') {
|
||||||
|
const query = payload;
|
||||||
|
const results = search(query);
|
||||||
|
|
||||||
|
postMessage({ type: 'results', payload: { results, query } });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === 'recents') {
|
||||||
|
const results = payload.map(lookup).filter(Boolean);
|
||||||
|
|
||||||
|
postMessage({ type: 'recents', payload: results });
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import { content } from '$lib/search/content';
|
||||||
|
import { json } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
/** @type {import('./$types').RequestHandler} */
|
||||||
|
export function GET() {
|
||||||
|
return json({
|
||||||
|
blocks: content(),
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -1,7 +1 @@
|
|||||||
import { base } from '$app/paths';
|
export const prerender = true;
|
||||||
import { redirect } from '@sveltejs/kit';
|
|
||||||
|
|
||||||
/** @type {import('./$types').PageLoad} */
|
|
||||||
export async function load() {
|
|
||||||
throw redirect(307, `${base}/docs/introduction`);
|
|
||||||
}
|
|
||||||
|
|||||||
@ -0,0 +1,25 @@
|
|||||||
|
<script>
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageData} */
|
||||||
|
export let data;
|
||||||
|
|
||||||
|
function getURlToRedirectTo() {
|
||||||
|
const section = data.sections.find((val) =>
|
||||||
|
$page.url.hash.replace('#', '').startsWith(val.path.split('/').at(-1))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!section) return '/docs/introduction';
|
||||||
|
|
||||||
|
// Remove the section name from hash, then redirect to that
|
||||||
|
const hash = $page.url.hash.replace(`#${section.path.split('/').at(-1)}-`, '');
|
||||||
|
|
||||||
|
return `${section.path}#${hash}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
goto(getURlToRedirectTo(), { replaceState: true });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export const prerender = false;
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { init, inited, search } from '$lib/search/search.js';
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageServerLoad} */
|
||||||
|
export async function load({ url, fetch }) {
|
||||||
|
if (!inited) {
|
||||||
|
const res = await fetch('/content.json');
|
||||||
|
if (!res.ok) throw new Error("Couldn't fetch content");
|
||||||
|
|
||||||
|
const blocks = (await res.json()).blocks;
|
||||||
|
init(blocks);
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = url.searchParams.get('q');
|
||||||
|
|
||||||
|
const results = query ? search(query) : [];
|
||||||
|
|
||||||
|
return {
|
||||||
|
query,
|
||||||
|
results
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
<script>
|
||||||
|
import SearchResults from '$lib/search/SearchResults.svelte';
|
||||||
|
|
||||||
|
/** @type {import('./$types').PageData} */
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Search • SvelteKit</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Search</h1>
|
||||||
|
<form>
|
||||||
|
<input name="q" value={data.query} placeholder="Search" spellcheck="false" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<SearchResults results={data.results} query={data.query} />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
max-width: 48rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 8rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
--size: 4rem;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: var(--size);
|
||||||
|
margin: 0 0 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
border: 1px solid var(--sk-back-5);
|
||||||
|
border-radius: var(--sk-border-radius);
|
||||||
|
padding-left: var(--size);
|
||||||
|
border-radius: var(--size);
|
||||||
|
background: no-repeat 1rem 50% / 2rem 2rem url(/icons/search.svg);
|
||||||
|
color: var(--sk-text-1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Before Width: | Height: | Size: 215 B After Width: | Height: | Size: 393 B |
|
After Width: | Height: | Size: 356 B |
Loading…
Reference in new issue