Skip to content

Commit 2b0fa2c

Browse files
Rich-HarrisRich-Harris
authored
fix some search stuff (#237)
1 parent bbb6729 commit 2b0fa2c

File tree

4 files changed

+88
-67
lines changed

4 files changed

+88
-67
lines changed

‎apps/svelte.dev/src/routes/content.json/+server.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,24 @@ async function plaintext(markdown: string) {
9797

9898
return (
9999
await markedTransform(markdown, {
100-
code: ({ text }) => text.split('// ---cut---\n').pop() || 'ERROR: ---cut--- not found',
100+
code: ({ text }) => {
101+
const raw = text.split('// ---cut---\n').pop() ?? '';
102+
103+
return raw
104+
.replace(/^\/\/ @noErrors.*$/gm, ' ')
105+
.replace(/^\/\/ @errors.+$/gm, ' ')
106+
.replace(/^\/\/\/ file:.+$/gm, ' ');
107+
},
101108
blockquote: block,
102109
html: () => '\n',
103110
heading: ({ text }) => `${text}\n`,
104111
hr: () => '',
105112
list: block,
106113
listitem: block,
107114
checkbox: block,
108-
paragraph: ({ text }) => `${text}\n\n`,
115+
paragraph({ tokens }) {
116+
return this.parser!.parseInline(tokens);
117+
},
109118
table: block,
110119
tablerow: block,
111120
tablecell: ({ text }) => {

‎packages/site-kit/src/lib/search/SearchBox.svelte‎

Lines changed: 71 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -160,24 +160,26 @@ It appears when the user clicks on the `Search` component or presses the corresp
160160
use:trap
161161
>
162162
<div class="search-box">
163-
<!-- svelte-ignore a11y_autofocus -->
164-
<input
165-
autofocus
166-
onkeydown={(e) => {
163+
<div style="background: var(--background)">
164+
<!-- svelte-ignore a11y_autofocus -->
165+
<input
166+
autofocus
167+
onkeydown={(e) => {
167168
if (e.key === 'Enter' && !e.isComposing) {
168169
const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
169170
element?.click();
170171
}
171172
}}
172-
oninput={(e) => {
173-
$search_query = e.currentTarget.value;
174-
}}
175-
value={$search_query}
176-
{placeholder}
177-
aria-describedby="search-description"
178-
aria-label={placeholder}
179-
spellcheck="false"
180-
/>
173+
oninput={(e) => {
174+
$search_query = e.currentTarget.value;
175+
}}
176+
value={$search_query}
177+
{placeholder}
178+
aria-describedby="search-description"
179+
aria-label={placeholder}
180+
spellcheck="false"
181+
/>
182+
</div>
181183

182184
<button aria-label="Close" onclick={close}>
183185
<!-- <Icon name="close" /> -->
@@ -204,18 +206,19 @@ It appears when the user clicks on the `Search` component or presses the corresp
204206
/>
205207
</div>
206208
{:else}
207-
<h2 class="info" class:empty={recent_searches.length === 0}>
209+
<span class="info" class:empty={recent_searches.length === 0}>
208210
{#if idle}
209211
{@render idle(recent_searches.length)}
210212
{:else}
211213
{recent_searches.length ? 'Recent searches' : 'No recent searches'}
212214
{/if}
213-
</h2>
215+
</span>
216+
214217
{#if recent_searches.length}
215218
<div class="results-container">
216-
<ul>
219+
<ul class="recent">
217220
{#each recent_searches as search}
218-
<li class="recent">
221+
<li>
219222
<a onclick={() => navigate(search.href)} href={search.href}>
220223
{search.breadcrumbs.at(-1)}
221224
</a>
@@ -279,7 +282,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
279282
.search-box {
280283
--padding: 1rem;
281284
--background: var(--sk-back-2);
282-
background: var(--background);
285+
/* background: var(--background); */
283286
position: relative;
284287
height: calc(100% - 2rem);
285288
width: calc(100vw - 2rem);
@@ -360,59 +363,67 @@ It appears when the user clicks on the `Search` component or presses the corresp
360363
.results-container {
361364
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
362365
pointer-events: all;
366+
background: var(--background);
367+
368+
li {
369+
position: relative;
370+
371+
a {
372+
color: var(--sk-text-2);
373+
display: block;
374+
text-decoration: none;
375+
padding: 0.5rem calc(4rem + var(--padding)) 0.5rem var(--padding);
376+
377+
&:hover {
378+
background: rgba(0, 0, 0, 0.05);
379+
}
380+
381+
&:focus {
382+
outline-offset: -3px;
383+
}
384+
}
385+
386+
button[aria-label='Delete'] {
387+
position: absolute;
388+
top: 0;
389+
right: 0;
390+
width: 5rem;
391+
height: 100%;
392+
color: var(--sk-text-2);
393+
opacity: 0.1;
394+
395+
&:hover {
396+
opacity: 1;
397+
outline: none;
398+
}
399+
400+
&:focus-visible {
401+
opacity: 1;
402+
outline-offset: -3px;
403+
}
404+
}
405+
}
406+
407+
.recent {
408+
a {
409+
font-size: var(--sk-font-size-ui-medium);
410+
}
411+
}
363412
}
364413
365414
.info {
415+
display: block;
416+
background: var(--background);
366417
padding: var(--padding);
367418
font-family: var(--sk-font-ui);
368419
font-size: var(--sk-font-size-ui-medium);
369420
color: var(--sk-text-4);
370421
font-weight: normal;
371422
text-transform: uppercase;
372423
pointer-events: all;
373-
}
374-
375-
.info.empty {
376-
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
377-
}
378-
379-
a {
380-
color: var(--sk-text-2);
381-
display: block;
382-
text-decoration: none;
383-
line-height: 1;
384-
padding: 1rem calc(4rem + var(--padding)) 1rem var(--padding);
385-
386-
&:hover {
387-
background: rgba(0, 0, 0, 0.05);
388-
}
389-
390-
&:focus {
391-
outline-offset: -3px;
392-
}
393-
}
394-
395-
li {
396-
position: relative;
397-
}
398424
399-
button[aria-label='Delete'] {
400-
position: absolute;
401-
top: 0;
402-
right: 0;
403-
width: 5rem;
404-
height: 100%;
405-
color: var(--sk-text-2);
406-
opacity: 0.1;
407-
408-
&:hover {
409-
opacity: 1;
410-
outline: none;
411-
}
412-
413-
&:focus-visible {
414-
opacity: 1;
415-
outline-offset: -3px;
425+
&.empty {
426+
border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
416427
}
417428
}
418429
</style>

‎packages/site-kit/src/lib/search/SearchResultList.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
}
2121
2222
const prefix =
23-
index > 20
24-
? `${escape(content.slice(index - 15, index))}`
23+
index > 40 && content.length > 70
24+
? `${escape(content.slice(index - 35, index))}`
2525
: `<span class="spacer"></span>${escape(content.slice(0, index))}`;
2626
const suffix = escape(
2727
content.slice(
@@ -73,7 +73,7 @@
7373
}
7474
7575
details {
76-
padding: 0.5rem 0;
76+
padding: calc(0.5 * var(--padding)) 0;
7777
7878
summary {
7979
position: sticky;
@@ -82,7 +82,7 @@
8282
display: block;
8383
color: var(--sk-text-4);
8484
text-transform: uppercase;
85-
padding: 0.5rem var(--padding);
85+
padding: calc(0.5 * var(--padding)) var(--padding);
8686
font-size: var(--sk-font-size-ui-medium);
8787
z-index: 2;
8888
user-select: none;

‎packages/site-kit/src/lib/search/SearchResults.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@ Renders a list of search results
3131
<style>
3232
.info {
3333
padding: var(--padding);
34-
font-size: 1.2rem;
34+
font-size: var(--sk-font-size-ui-medium);
35+
color: var(--sk-text-4);
3536
font-weight: normal;
3637
text-transform: uppercase;
3738
background-color: var(--sk-back-2);

0 commit comments

Comments
 (0)