@netlify/spark-ui 0.0.39 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/SearchHeading.css +1 -1
- package/dist/assets/SearchModal.css +1 -1
- package/dist/components/preact/SearchModal/components/SearchWindow.js +1 -1
- package/dist/components/preact/SearchModal/hooks/useSearch.js +23 -23
- package/package.json +1 -1
- package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css +8 -4
- package/packages/components/preact/SearchModal/components/SearchWindow.tsx +1 -1
- package/packages/components/preact/SearchModal/hooks/useSearch.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-search-heading{
|
|
1
|
+
.n-search-heading{--n-search-heading-weight: var(--font-regular, 400);--n-search-heading-size: var(--step--2, 13px);--n-search-heading-color: var(--color-text-3, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{
|
|
1
|
+
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.n-search-heading{--n-search-heading-weight: var(--font-regular, 400);--n-search-heading-size: var(--step--2, 13px);--n-search-heading-color: var(--color-text-3, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);color:var(--n-search-heading-color);padding-inline:1rem;margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1em;all:unset;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.n-search-link-body{flex:1;width:80%;color:var(--color-text-2)}.n-search-link:is(:hover,:focus-within){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-within) .n-search-link-icon [data-icon=caretRight]{display:block}.n-search-link-title{font-weight:var(--font-semibold, 680);color:var(--color-text-2);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-3);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-icon{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-text-secondary)}.n-search-link-icon [data-icon=caretRight]{display:none;width:.8em;opacity:.3}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--neutral-500));background:var(--n-search-link-badge-color, var(--neutral-100));border:1px solid var(--n-search-link-badge-border, var(--neutral-300));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--blue-000);--n-search-link-badge-text-color: var(--blue-500);--n-search-link-badge-border: var(--blue-100)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--gold-000);--n-search-link-badge-text-color: var(--gold-500);--n-search-link-badge-border: var(--gold-100)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--teal-000);--n-search-link-badge-text-color: var(--teal-500);--n-search-link-badge-border: var(--teal-100)}.n-search-modal{--n-search-padding-inline: .5em;--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-2, currentColor);--n-search-color-bg: var(--color-bg-1);--n-search-color-bg-2: var(--color-bg-2);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 8px;--n-search-max-w: 600px;--n-search-text-highlight: var(--color-text-accent)}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin-inline:auto}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);min-height:470px;background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{all:unset;display:flex;width:100%;border-bottom:1px solid var(--n-search-color-border)}.n-search-input{display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem;color:var(--color-text-1)}.n-search-input::placeholder{color:var(--n-search-color-text)}.n-search-label{display:flex;padding-inline:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--icon-size, 1em);height:var(--icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--n-search-color-bg)}.n-results-list,ul[role=list]{list-style:none;padding:0}.n-results-list-item{border-bottom:1px solid var(--color-bg-3)}.n-results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.n-search-footer{border-top:1px solid var(--n-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.n-search-footer-tip{--n-key-text-color: var(--n-search-color-text-secondary);color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
import { A as
|
|
2
|
-
function L(
|
|
3
|
-
const
|
|
1
|
+
import { A as i, y as S, d as T } from "../../../../chunks/hooks.module.BFfOesdf.js";
|
|
2
|
+
function L(o, n) {
|
|
3
|
+
const e = i(null), s = i("");
|
|
4
4
|
return S(() => () => {
|
|
5
|
-
|
|
5
|
+
e.current && clearTimeout(e.current);
|
|
6
6
|
}, []), { reset: () => {
|
|
7
|
-
|
|
7
|
+
e.current && clearTimeout(e.current);
|
|
8
8
|
}, run: (h) => {
|
|
9
|
-
s.current = h,
|
|
10
|
-
() =>
|
|
9
|
+
s.current = h, e.current = setTimeout(
|
|
10
|
+
() => o(s.current),
|
|
11
11
|
n
|
|
12
12
|
);
|
|
13
13
|
} };
|
|
14
14
|
}
|
|
15
15
|
function x() {
|
|
16
|
-
const [
|
|
16
|
+
const [o, n] = T({
|
|
17
17
|
searchTerm: "",
|
|
18
18
|
results: [],
|
|
19
19
|
isLoading: !1
|
|
20
|
-
}),
|
|
21
|
-
(
|
|
22
|
-
}, 150),
|
|
23
|
-
var
|
|
20
|
+
}), e = i(/* @__PURE__ */ new Map()), { reset: s, run: l } = L((t) => {
|
|
21
|
+
u(t);
|
|
22
|
+
}, 150), u = async (t) => {
|
|
23
|
+
var m;
|
|
24
24
|
if (!(window != null && window.pagefind)) return;
|
|
25
|
-
if (n((r) => ({ ...r, isLoading: !0 })),
|
|
25
|
+
if (n((r) => ({ ...r, isLoading: !0 })), e.current.has(t)) {
|
|
26
26
|
n((r) => ({
|
|
27
27
|
...r,
|
|
28
|
-
results:
|
|
28
|
+
results: e.current.get(t),
|
|
29
29
|
isLoading: !1
|
|
30
30
|
}));
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
const a = await window.pagefind.debouncedSearch(
|
|
34
|
-
(
|
|
35
|
-
var
|
|
33
|
+
const a = await window.pagefind.debouncedSearch(t), g = await Promise.all(
|
|
34
|
+
(m = a == null ? void 0 : a.results) == null ? void 0 : m.slice(0, 15).map(async (r) => {
|
|
35
|
+
var d, f;
|
|
36
36
|
const c = await r.data(), p = (w) => w.replace("#", "");
|
|
37
37
|
return {
|
|
38
38
|
icon: "pageWithLines",
|
|
39
|
-
resource: (
|
|
40
|
-
label: (
|
|
39
|
+
resource: (d = c.meta) == null ? void 0 : d.resource,
|
|
40
|
+
label: (f = c.meta) == null ? void 0 : f.title,
|
|
41
41
|
url: c.url,
|
|
42
42
|
excerpt: p(c.excerpt)
|
|
43
43
|
};
|
|
@@ -50,12 +50,12 @@ function x() {
|
|
|
50
50
|
}));
|
|
51
51
|
};
|
|
52
52
|
return {
|
|
53
|
-
state:
|
|
53
|
+
state: o,
|
|
54
54
|
actions: {
|
|
55
|
-
setSearchTerm: (
|
|
56
|
-
n((a) => ({ ...a, searchTerm:
|
|
55
|
+
setSearchTerm: (t) => {
|
|
56
|
+
n((a) => ({ ...a, searchTerm: t })), s(), l(t);
|
|
57
57
|
},
|
|
58
|
-
submitSearch:
|
|
58
|
+
submitSearch: u
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
61
|
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
.n-search-heading {
|
|
2
|
+
--n-search-heading-weight: var(--font-regular, 400);
|
|
3
|
+
--n-search-heading-size: var(--step--2, 13px);
|
|
4
|
+
--n-search-heading-color: var(--color-text-3, #757575);
|
|
5
|
+
|
|
6
|
+
font-size: var(--n-search-heading-size);
|
|
7
|
+
font-weight: var(--n-search-heading-weight);
|
|
8
|
+
color: var(--n-search-heading-color);
|
|
2
9
|
padding-inline: 1rem;
|
|
3
10
|
margin-block: var(--space-xs);
|
|
4
|
-
|
|
5
|
-
font-weight: var(--font-semibold, 500);
|
|
6
|
-
letter-spacing: .1px;
|
|
7
|
-
color: var(--color-text-3);
|
|
11
|
+
letter-spacing: .2px;
|
|
8
12
|
}
|
|
@@ -58,7 +58,7 @@ export default function SearchWindow({
|
|
|
58
58
|
<div className="n-search-window">
|
|
59
59
|
<div className="search-links">
|
|
60
60
|
<SearchLink {...askNetlify} />
|
|
61
|
-
{searchTerm && searchTerm.length >
|
|
61
|
+
{searchTerm && searchTerm.length > 1 ? (
|
|
62
62
|
<SearchResults
|
|
63
63
|
searchLoading={searchLoading}
|
|
64
64
|
searchTerm={searchTerm}
|
|
@@ -21,9 +21,7 @@ export function useSearch() {
|
|
|
21
21
|
const cacheRef = useRef(new Map());
|
|
22
22
|
|
|
23
23
|
const { reset, run } = useTimeout((query: string) => {
|
|
24
|
-
if (query.length > 2 || query.length === 0) {
|
|
25
24
|
submitSearch(query);
|
|
26
|
-
}
|
|
27
25
|
}, 150);
|
|
28
26
|
|
|
29
27
|
const submitSearch = async (query: string) => {
|