@netlify/spark-ui 1.5.0-alpha.6 → 1.5.0-alpha.8
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/AskNetlify.css +1 -1
- package/dist/assets/SearchModal.css +1 -1
- package/dist/components/preact/AskNetlify/AskNetlify.d.ts +6 -1
- package/dist/components/preact/AskNetlify/AskNetlify.js +4 -3
- package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js +28 -35
- package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts +3 -1
- package/dist/components/preact/SearchModal/hooks/useSearchToggles.js +13 -10
- package/package.json +1 -1
- package/packages/components/preact/AskNetlify/AskNetlify.css +4 -1
- package/packages/components/preact/AskNetlify/AskNetlify.tsx +13 -5
- package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +0 -17
- package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx +3 -10
- package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts +11 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem)}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}
|
|
1
|
+
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{height:calc(var(--n-search-container-height) + var(--n-search-footer-height));padding:var(--n-search-padding-inline);scroll-behavior:smooth;overflow-y:auto;display:grid;align-items:flex-end;gap:var(--space-s)}.question{border:none;color:var(--color-text-1);font-weight:var(--font-weight-regular);font-size:var(--step--1);border-radius:var(--radius-pill);transform:translate(-.75rem);text-wrap:pretty;text-align:left}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s);margin-block-start:var(--space-2xl)}.message-bubble{padding:var(--space-xs) var(--space-s);background:var(--search-answer-message-color);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-s))}.prose :where(ol,ul,li)>*+*{margin-top:var(--flow-space, var(--space-3xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box;padding:var(--space-s);color:var(--neutral-100);overflow-x:auto}.prose code{overflow-x:auto}.prose code[class*=language-],.prose pre[class*=language-]{display:block;font-size:var(--font-size-text-xs)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;width:100%;height:1px;background:var(--color-bg-3);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}
|
|
@@ -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{--n-search-heading-weight: var(--font-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weaker, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;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(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{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]{width:1em;opacity:0}.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(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-weaker, currentColor);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-3);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: 400px}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg)}.n-search-modal
|
|
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-weight-semibold, 400);--n-search-heading-size: var(--font-size-text-xs, 13px);--n-search-heading-color: var(--color-text-weaker, #757575);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;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(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{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]{width:1em;opacity:0}.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(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.n-search-modal{--n-search-padding-inline: var(--space-s);--n-search-color-text: var(--color-text-1, currentColor);--n-search-color-text-secondary: var(--color-text-weaker, currentColor);--n-search-color-bg: var(--search-bg-color);--n-search-color-bg-2: var(--color-bg-3);--n-search-color-border: var(--color-bg-3);--n-search-border-radius: 1.3rem;--n-search-max-w: 600px;--n-search-text-highlight: var(--search-highlight-color);--n-search-input-height: 50px;--n-search-footer-height: 40px;--n-search-container-height: 400px}.n-search-modal{padding:0;border:none;border-radius:var(--n-search-border-radius);width:min(var(--n-search-max-w),100%);margin:auto;background:var(--n-search-color-bg)}.n-search-modal-ask{--n-search-max-w: 800px}.n-search-container{--mark-bg: var(--n-search-text-highlight);display:grid;width:min(var(--n-search-max-w),100%);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{position:relative;display:flex;width:100%;height:var(--n-search-input-height)}.n-search-input{position:relative;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-wrapper:after,.n-search-footer:after{content:"";display:block;width:200%;height:1px;background:var(--n-search-color-border);position:absolute;bottom:0;left:0}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs)}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-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:var(--n-search-container-height);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:var(--space-s);margin-block:0;background:var(--n-search-color-bg)}.n-search-footer{position:relative;display:flex;gap:var(--space-m);padding:var(--space-2xs) var(--space-s);height:var(--n-search-footer-height)}.n-search-footer:after{top:0}.n-search-footer-tip{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform: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,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
interface AskNetlifyProps {
|
|
2
|
+
setModalState?: (state?: {
|
|
3
|
+
current: string;
|
|
4
|
+
}) => void;
|
|
5
|
+
}
|
|
6
|
+
declare function AskNetlify(props: AskNetlifyProps): import("preact").JSX.Element;
|
|
2
7
|
export default AskNetlify;
|
|
@@ -5688,9 +5688,10 @@ function Sl(e) {
|
|
|
5688
5688
|
}
|
|
5689
5689
|
function fl({ setModalState: e }) {
|
|
5690
5690
|
const [t, a] = ct(""), { conversation: i, submitQuery: n, isGeneratingAnswer: r, isPreparingAnswer: l, stopGeneration: o } = gl(), u = Se(null), s = {
|
|
5691
|
-
"
|
|
5692
|
-
"
|
|
5693
|
-
"
|
|
5691
|
+
"e477f4dd-7159-4c31-8a18-4dfc7e84d927": "How does Netlify simplify my CI/CD pipeline?",
|
|
5692
|
+
"5c41b3c2-4c90-4cf7-9f24-f0d0b8f0f759": "What are the benefits of using Netlify with a headless CMS?",
|
|
5693
|
+
"0270de6c-387e-401f-b24c-6ae1166db477": "What are the performance benefits of hosting on Netlify’s edge network?",
|
|
5694
|
+
"39229ddb-9000-4e83-bbf8-54f1c1e55ed4": "How can I use Netlify to improve my site’s Core Web Vitals?"
|
|
5694
5695
|
}, c = (h) => {
|
|
5695
5696
|
h.preventDefault();
|
|
5696
5697
|
const d = h.target.getAttribute("data-id");
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
2
|
import { A as N, y as u, d as m } from "../../../../../chunks/hooks.module.DGkdD5n9.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { useSearch as
|
|
8
|
-
import { useSearchLogger as
|
|
9
|
-
import { useKeyboardNav as
|
|
10
|
-
import { useSearchHotkeys as
|
|
11
|
-
import { useSearchParams as
|
|
12
|
-
import { useSearchToggles as
|
|
13
|
-
import
|
|
14
|
-
import { Fragment as
|
|
15
|
-
import '../../../../../assets/SearchModal.css';function
|
|
3
|
+
import w from "../../../Modal/Modal.js";
|
|
4
|
+
import p from "../../../KeyboardKey/KeyboardKey.js";
|
|
5
|
+
import I from "../SearchWindow.js";
|
|
6
|
+
import b from "../SearchInput.js";
|
|
7
|
+
import { useSearch as M } from "../../hooks/useSearch.js";
|
|
8
|
+
import { useSearchLogger as O } from "../../hooks/useSearchLogger.js";
|
|
9
|
+
import { useKeyboardNav as P } from "../../hooks/useKeyboardNav.js";
|
|
10
|
+
import { useSearchHotkeys as A } from "../../hooks/useSearchHotkeys.js";
|
|
11
|
+
import { useSearchParams as E } from "../../hooks/useSearchParams.js";
|
|
12
|
+
import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
|
|
13
|
+
import C from "../../../AskNetlify/AskNetlify.js";
|
|
14
|
+
import { Fragment as F } from "preact";
|
|
15
|
+
import '../../../../../assets/SearchModal.css';function Q(c) {
|
|
16
16
|
const r = N(null);
|
|
17
17
|
return u(() => {
|
|
18
18
|
function i(t) {
|
|
@@ -24,7 +24,7 @@ import '../../../../../assets/SearchModal.css';function R(c) {
|
|
|
24
24
|
}, [c]), r;
|
|
25
25
|
}
|
|
26
26
|
function Z(c = { className: "", children: null, debug: !1 }) {
|
|
27
|
-
const [r, i] = m(!1), [t,
|
|
27
|
+
const [r, i] = m(!1), [t, d] = m({ current: "search" }), [R, q] = m("");
|
|
28
28
|
u(() => {
|
|
29
29
|
let a;
|
|
30
30
|
const o = () => {
|
|
@@ -32,8 +32,8 @@ function Z(c = { className: "", children: null, debug: !1 }) {
|
|
|
32
32
|
};
|
|
33
33
|
return o(), a = setInterval(o, 100), () => clearInterval(a);
|
|
34
34
|
}, []);
|
|
35
|
-
const { children:
|
|
36
|
-
return
|
|
35
|
+
const { children: k, className: S, debug: v, ...T } = c, { state: n, actions: g } = M(), [l, y] = m(!1), f = () => y(!0), h = () => y(!1), s = N(null), L = Q(h);
|
|
36
|
+
return O(n, v), K(r, f, d), E(r, g.setSearchTerm, f), A(r, l, f, h), P(r, s, l, h), u(() => {
|
|
37
37
|
s.current && (l ? s.current.showModal() : s.current.close());
|
|
38
38
|
}, [l]), u(() => {
|
|
39
39
|
var o;
|
|
@@ -44,42 +44,35 @@ function Z(c = { className: "", children: null, debug: !1 }) {
|
|
|
44
44
|
s.current.classList.remove("n-search-modal-ask");
|
|
45
45
|
}, 150);
|
|
46
46
|
}, [t.current]), /* @__PURE__ */ e(
|
|
47
|
-
|
|
47
|
+
w,
|
|
48
48
|
{
|
|
49
49
|
ref: s,
|
|
50
50
|
className: `n-search-modal ${S || ""}`,
|
|
51
51
|
"data-state": t.current,
|
|
52
|
-
...
|
|
53
|
-
children: /* @__PURE__ */ e("div", { ref:
|
|
54
|
-
t.current === "ask" && /* @__PURE__ */ e(
|
|
55
|
-
t.current === "search" && /* @__PURE__ */ e(
|
|
52
|
+
...T,
|
|
53
|
+
children: /* @__PURE__ */ e("div", { ref: L, className: "n-search-container", children: [
|
|
54
|
+
t.current === "ask" && /* @__PURE__ */ e(C, { setModalState: d }),
|
|
55
|
+
t.current === "search" && /* @__PURE__ */ e(F, { children: [
|
|
56
|
+
/* @__PURE__ */ e(b, { setSearchTerm: g.setSearchTerm, initialValue: n.searchTerm }),
|
|
56
57
|
/* @__PURE__ */ e(
|
|
57
|
-
|
|
58
|
+
I,
|
|
58
59
|
{
|
|
59
|
-
|
|
60
|
-
setAskNetlifyQuery: v,
|
|
61
|
-
initialValue: n.searchTerm
|
|
62
|
-
}
|
|
63
|
-
),
|
|
64
|
-
/* @__PURE__ */ e(
|
|
65
|
-
M,
|
|
66
|
-
{
|
|
67
|
-
setModalState: p,
|
|
60
|
+
setModalState: d,
|
|
68
61
|
searchLoading: n.isLoading,
|
|
69
62
|
searchTerm: n.searchTerm,
|
|
70
63
|
results: n.results,
|
|
71
|
-
children:
|
|
64
|
+
children: k
|
|
72
65
|
}
|
|
73
66
|
),
|
|
74
67
|
/* @__PURE__ */ e("div", { className: "n-search-footer", children: [
|
|
75
68
|
/* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
|
|
76
|
-
/* @__PURE__ */ e(
|
|
69
|
+
/* @__PURE__ */ e(p, { keyNames: ["Esc"] }),
|
|
77
70
|
"to close"
|
|
78
71
|
] }),
|
|
79
72
|
/* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
|
|
80
|
-
/* @__PURE__ */ e(
|
|
73
|
+
/* @__PURE__ */ e(p, { keyNames: ["Tab"] }),
|
|
81
74
|
/* @__PURE__ */ e("span", { children: "or" }),
|
|
82
|
-
/* @__PURE__ */ e(
|
|
75
|
+
/* @__PURE__ */ e(p, { keyNames: ["↑", "↓"] }),
|
|
83
76
|
"to navigate"
|
|
84
77
|
] })
|
|
85
78
|
] })
|
|
@@ -9,4 +9,6 @@
|
|
|
9
9
|
*
|
|
10
10
|
* @param onOpen - A function to be called when a toggle element is clicked.
|
|
11
11
|
*/
|
|
12
|
-
export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void
|
|
12
|
+
export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void, setState: (state: {
|
|
13
|
+
current: string;
|
|
14
|
+
}) => void): void;
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import { y as
|
|
2
|
-
function
|
|
3
|
-
|
|
1
|
+
import { y as a } from "../../../../chunks/hooks.module.DGkdD5n9.js";
|
|
2
|
+
function s(c, t, l) {
|
|
3
|
+
a(() => {
|
|
4
4
|
if (!c) return;
|
|
5
|
-
const
|
|
6
|
-
if (
|
|
7
|
-
return
|
|
8
|
-
e.
|
|
5
|
+
const r = document.querySelectorAll("[data-ntl-search-toggle]");
|
|
6
|
+
if (r.length)
|
|
7
|
+
return r.forEach((e) => {
|
|
8
|
+
const o = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
|
|
9
|
+
e.removeAttribute("disabled"), e.addEventListener("click", () => {
|
|
10
|
+
t(), l({ current: o });
|
|
11
|
+
});
|
|
9
12
|
}), () => {
|
|
10
|
-
|
|
13
|
+
r.forEach((e) => e.removeEventListener("click", t));
|
|
11
14
|
};
|
|
12
|
-
}, [c,
|
|
15
|
+
}, [c, t]);
|
|
13
16
|
}
|
|
14
17
|
export {
|
|
15
|
-
|
|
18
|
+
s as useSearchToggles
|
|
16
19
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@netlify/spark-ui",
|
|
3
3
|
"description": "Assets, design tokens, components, and utilities",
|
|
4
|
-
"version": "1.5.0-alpha.
|
|
4
|
+
"version": "1.5.0-alpha.8",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/preact/index.js",
|
|
7
7
|
"types": "dist/components/preact/index.d.ts",
|
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
font-size: var(--step--1);
|
|
31
31
|
border-radius: var(--radius-pill);
|
|
32
32
|
transform: translateX(-0.75rem);
|
|
33
|
+
text-wrap: pretty;
|
|
34
|
+
text-align: left;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
.question-list li {
|
|
@@ -60,6 +62,7 @@
|
|
|
60
62
|
.message {
|
|
61
63
|
display: grid;
|
|
62
64
|
gap: var(--space-s);
|
|
65
|
+
margin-block-start: var(--space-2xl);
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
.message-bubble {
|
|
@@ -150,7 +153,7 @@
|
|
|
150
153
|
border-radius: var(--radius-pill);
|
|
151
154
|
margin-inline-end: var(--space-2xs);
|
|
152
155
|
border: none;
|
|
153
|
-
background: var(--color-link);
|
|
156
|
+
background: var(--color-link-1);
|
|
154
157
|
color: var(--neutral-000);
|
|
155
158
|
transition: background-color 150ms ease-out;
|
|
156
159
|
}
|
|
@@ -5,7 +5,11 @@ import Icon from '../Icon';
|
|
|
5
5
|
|
|
6
6
|
import './AskNetlify.css';
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
interface AskNetlifyProps {
|
|
9
|
+
setModalState?: (state?: { current: string }) => void;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function AskNetlify(props: AskNetlifyProps) {
|
|
9
13
|
return (
|
|
10
14
|
<KapaProvider
|
|
11
15
|
integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
|
|
@@ -20,7 +24,7 @@ function AskNetlify(props) {
|
|
|
20
24
|
);
|
|
21
25
|
}
|
|
22
26
|
|
|
23
|
-
function ChatInterface({ setModalState }) {
|
|
27
|
+
function ChatInterface({ setModalState }: AskNetlifyProps) {
|
|
24
28
|
const [message, setMessage] = useState('');
|
|
25
29
|
const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
|
|
26
30
|
useChat();
|
|
@@ -28,9 +32,13 @@ function ChatInterface({ setModalState }) {
|
|
|
28
32
|
const chatRef = useRef(null);
|
|
29
33
|
|
|
30
34
|
const QandAMap = {
|
|
31
|
-
'
|
|
32
|
-
'
|
|
33
|
-
|
|
35
|
+
'e477f4dd-7159-4c31-8a18-4dfc7e84d927': 'How does Netlify simplify my CI/CD pipeline?',
|
|
36
|
+
'5c41b3c2-4c90-4cf7-9f24-f0d0b8f0f759':
|
|
37
|
+
'What are the benefits of using Netlify with a headless CMS?',
|
|
38
|
+
'0270de6c-387e-401f-b24c-6ae1166db477':
|
|
39
|
+
'What are the performance benefits of hosting on Netlify’s edge network?',
|
|
40
|
+
'39229ddb-9000-4e83-bbf8-54f1c1e55ed4':
|
|
41
|
+
'How can I use Netlify to improve my site’s Core Web Vitals?',
|
|
34
42
|
};
|
|
35
43
|
|
|
36
44
|
const handleSubmit = e => {
|
|
@@ -27,21 +27,6 @@
|
|
|
27
27
|
background: var(--n-search-color-bg);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.n-search-modal::after {
|
|
31
|
-
content: '';
|
|
32
|
-
display: block;
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
background: blue;
|
|
36
|
-
position: absolute;
|
|
37
|
-
z-index: 0;
|
|
38
|
-
inset: 0;
|
|
39
|
-
transform-origin: center;
|
|
40
|
-
transform: scale(0);
|
|
41
|
-
border-radius: var(--radius-m);
|
|
42
|
-
transition: transform 300ms ease-in-out;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
30
|
.n-search-modal-ask {
|
|
46
31
|
--n-search-max-w: 800px;
|
|
47
32
|
}
|
|
@@ -50,7 +35,6 @@
|
|
|
50
35
|
--mark-bg: var(--n-search-text-highlight);
|
|
51
36
|
display: grid;
|
|
52
37
|
width: min(var(--n-search-max-w), 100%);
|
|
53
|
-
/* min-height: 530px; */
|
|
54
38
|
background-color: var(--n-search-color-bg);
|
|
55
39
|
border-radius: var(--n-search-border-radius);
|
|
56
40
|
overflow: hidden;
|
|
@@ -66,7 +50,6 @@
|
|
|
66
50
|
}
|
|
67
51
|
|
|
68
52
|
.n-search-input-wrapper {
|
|
69
|
-
/* all: unset; */
|
|
70
53
|
position: relative;
|
|
71
54
|
display: flex;
|
|
72
55
|
width: 100%;
|
|
@@ -14,7 +14,6 @@ import {
|
|
|
14
14
|
useSearchToggles,
|
|
15
15
|
useSearchLogger,
|
|
16
16
|
} from '../../hooks';
|
|
17
|
-
import { useTimeout } from '@utils/useTimeout';
|
|
18
17
|
|
|
19
18
|
import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
|
|
20
19
|
|
|
@@ -61,7 +60,7 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
|
|
|
61
60
|
const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
|
|
62
61
|
|
|
63
62
|
useSearchLogger(state, debug);
|
|
64
|
-
useSearchToggles(isPagefindLoaded, openSearch);
|
|
63
|
+
useSearchToggles(isPagefindLoaded, openSearch, setModalState);
|
|
65
64
|
useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
|
|
66
65
|
useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
|
|
67
66
|
useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
|
|
@@ -95,16 +94,10 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
|
|
|
95
94
|
{...rest}
|
|
96
95
|
>
|
|
97
96
|
<div ref={containerRef} className="n-search-container">
|
|
98
|
-
{modalState.current === 'ask' &&
|
|
99
|
-
<AskNetlify query={askNetlifyQuery} setModalState={setModalState} />
|
|
100
|
-
)}
|
|
97
|
+
{modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
|
|
101
98
|
{modalState.current === 'search' && (
|
|
102
99
|
<>
|
|
103
|
-
<SearchInput
|
|
104
|
-
setSearchTerm={actions.setSearchTerm}
|
|
105
|
-
setAskNetlifyQuery={setAskNetlifyQuery}
|
|
106
|
-
initialValue={state.searchTerm}
|
|
107
|
-
/>
|
|
100
|
+
<SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
|
|
108
101
|
|
|
109
102
|
<SearchWindow
|
|
110
103
|
setModalState={setModalState}
|
|
@@ -12,16 +12,24 @@ import { useEffect } from 'preact/hooks';
|
|
|
12
12
|
* @param onOpen - A function to be called when a toggle element is clicked.
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
-
export function useSearchToggles(
|
|
15
|
+
export function useSearchToggles(
|
|
16
|
+
isPagefindLoaded: boolean,
|
|
17
|
+
onOpen: () => void,
|
|
18
|
+
setState: (state: { current: string }) => void
|
|
19
|
+
) {
|
|
16
20
|
useEffect(() => {
|
|
17
|
-
if (!isPagefindLoaded) return
|
|
21
|
+
if (!isPagefindLoaded) return;
|
|
18
22
|
const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
|
|
19
23
|
|
|
20
24
|
if (!toggles.length) return;
|
|
21
25
|
|
|
22
26
|
toggles.forEach(t => {
|
|
27
|
+
const current = t.dataset.ntlSearchToggle ? t.dataset.ntlSearchToggle : 'search';
|
|
23
28
|
t.removeAttribute('disabled');
|
|
24
|
-
t.addEventListener('click',
|
|
29
|
+
t.addEventListener('click', () => {
|
|
30
|
+
onOpen();
|
|
31
|
+
setState({ current });
|
|
32
|
+
});
|
|
25
33
|
});
|
|
26
34
|
|
|
27
35
|
return () => {
|