git.iko.soy/urbit.org
on master help sign in
major search ui refactor
d4b8725Gavin Atkinson
components/Search copy.jsnew file+323
compare with master
unifiedsplit
@@ -0,0 +1,323 @@
1+import { Component, createRef } from "react";
2+import { glossary } from "../lib/glossary";
3+import Link from "next/link";
4+import { withRouter } from "next/router";
5+import { configure, HotKeys } from "react-hotkeys";
6+import classnames from "classnames";
7+
8+{
9+ /* const SearchContext = createContext(); */
10+}
11+
12+const glossarySearch = (query) => {
13+ return glossary.filter((entry) => {
14+ return query.toLowerCase() === entry.name || entry.symbol === query;
15+ });
16+};
17+
18+function GlossaryResult(props) {
19+ const selectedClassnames = classnames({
20+ "bg-green": props.selected,
21+ });
22+
23+ const codeBg = classnames({
24+ "bg-wall": !props.selected,
25+ "bg-washedWhite": props.selected,
26+ });
27+
28+ const text = classnames({
29+ "text-black": !props.selected,
30+ "text-white": props.selected,
31+ });
32+
33+ return (
34+ <button
35+ tabIndex={props.index}
36+ id={props.link + "-" + props.index}
37+ className={`cursor-pointer flex text-left w-full ${selectedClassnames}`}
38+ onMouseEnter={() => props.setCursor(props.index)}
39+ onClick={() => props.onSelect()}
40+ >
41+ <div className="font-semibold p-3">
42+ <p className={`text-base ${text}`}>
43+ {props.symbol.length > 0 && (
44+ <code className={`mr-1 rounded px-1 py-0.5 ${codeBg}`}>
45+ {props.symbol}
46+ </code>
47+ )}
48+ {props.name}
49+ </p>
50+ <p className={`font-normal text-base mt-1 ${text}`}>{props.desc}</p>
51+ </div>
52+ </button>
53+ );
54+}
55+
56+function Result(props) {
57+ const selectedClassnames = classnames({
58+ "bg-green": props.selected,
59+ });
60+ const text = classnames({
61+ "text-black": !props.selected,
62+ "text-white": props.selected,
63+ });
64+ const description = classnames({
65+ "text-gray": !props.selected,
66+ "text-midWhite": props.selected,
67+ });
68+ return (
69+ <button
70+ tabIndex={props.index}
71+ id={props.slug + "-" + props.index}
72+ className={`cursor-pointer flex text-left w-full ${selectedClassnames}`}
73+ onMouseEnter={() => props.setCursor(props.index)}
74+ onClick={() => props.onSelect()}
75+ >
76+ <div className="p-3">
77+ <p className={`font-medium text-base ${text}`}>
78+ {props.parent !== "Content" ? `${props.parent} /` : ""} {props.title}
79+ </p>
80+ <p
81+ className={`text-base font-regular text-small text-gray ${description}`}
82+ >
83+ {props.content}
84+ </p>
85+ </div>
86+ </button>
87+ );
88+}
89+
90+function Subheading(props) {
91+ return (
92+ <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
93+ <p className="font-semibold text-sm">{props.title}</p>
94+ </div>
95+ );
96+}
97+
98+class Search extends Component {
99+ constructor(props) {
100+ super(props);
101+ this.state = {
102+ query: "",
103+ active: false,
104+ results: [],
105+ cursor: 0,
106+ };
107+ this.scrollBox = createRef();
108+ this.searchEndpoint = this.searchEndpoint.bind(this);
109+ this.onChange = this.onChange.bind(this);
110+ this.onFocus = this.onFocus.bind(this);
111+ this.onNavUp = this.onNavUp.bind(this);
112+ this.onNavDown = this.onNavDown.bind(this);
113+ this.onSelect = this.onSelect.bind(this);
114+ this.setCursor = this.setCursor.bind(this);
115+ }
116+
117+ searchEndpoint(query) {
118+ return `/api/search?q=${this.state.query}`;
119+ }
120+
121+ onChange(event) {
122+ const query = event.target.value;
123+ this.setState({ query });
124+
125+ if (query.length) {
126+ fetch(this.searchEndpoint(query))
127+ .then((res) => res.json())
128+ .then((res) => {
129+ // Wrap results in an object which will tell React what component to use to render results.
130+ const results = res.results.map((item) => ({
131+ type: "RESULT",
132+ content: item,
133+ }));
134+
135+ const glossaryResults = glossarySearch(query).map((item) => ({
136+ type: "GLOSSARY_RESULT",
137+ content: item,
138+ }));
139+
140+ const list = [...glossaryResults, ...results];
141+
142+ this.setState({ results: list });
143+ });
144+ } else {
145+ this.setState({ results: [] });
146+ }
147+ }
148+
149+ onFocus() {
150+ this.setState({ active: true });
151+ }
152+
153+ onNavUp(event) {
154+ // prevents cursor from moving in search input
155+ event.preventDefault();
156+ this.setState({ cursor: this.state.cursor - 1 });
157+ }
158+
159+ onNavDown(event) {
160+ const offset = this[`result-${this.state.cursor}`].offsetTop;
161+ const height = this[`result-${this.state.cursor}`].clientHeight;
162+
163+ this.scrollBox.current.scrollTop = offset - height;
164+ console.log(offset - height);
165+
166+ {
167+ /* const elem = this[`result-${this.state.cursor}`] */
168+ }
169+
170+ {
171+ /* console.log(elem) */
172+ }
173+ // prevents cursor from moving in search input
174+ {
175+ /* console.log(this[`result-${this.state.cursor}`].offsetTop) */
176+ }
177+ {
178+ /* this.scrollBox.scrollTop = this[`result-${this.state.cursor}`].offsetTop */
179+ }
180+ {
181+ /* this[`result-${this.state.cursor}`].scrollIntoView({behavior: 'smooth'}); */
182+ }
183+ {
184+ /* this[`result-${this.state.cursor}`].offsetTop = 0 */
185+ }
186+
187+ {
188+ /* this[`result-${this.state.cursor}`].scrollIntoView(); */
189+ }
190+ {
191+ /* elem.scrollTop = 0; */
192+ }
193+ event.preventDefault();
194+ this.setState({ cursor: this.state.cursor + 1 });
195+ }
196+
197+ onSelect(event) {
198+ const { state, props } = this;
199+ const cursorItem = state.results[state.cursor].content;
200+
201+ if (cursorItem.link) {
202+ window.location.href = cursorItem.link;
203+ }
204+
205+ if (cursorItem.slug) {
206+ props.router.push(cursorItem.slug);
207+ }
208+
209+ this.setState({
210+ active: false,
211+ query: "",
212+ results: [],
213+ });
214+
215+ props.closeSearch();
216+ }
217+
218+ setCursor(num) {
219+ this.setState({ cursor: num });
220+ }
221+
222+ applyRef(index, ref) {
223+ this[`result-${index}`] = ref;
224+ }
225+
226+ render() {
227+ const { state, props } = this;
228+
229+ const keyMap = {
230+ onNavUp: ["up"],
231+ onNavDown: ["down"],
232+ onSelect: ["enter"],
233+ };
234+
235+ const handlers = {
236+ onNavUp: (event) => this.onNavUp(event),
237+ onNavDown: (event) => this.onNavDown(event),
238+ onSelect: (event) => this.onSelect(event),
239+ };
240+
241+ if (props.showSearch) {
242+ return (
243+ <HotKeys handlers={handlers} keyMap={keyMap}>
244+ <div
245+ onClick={props.closeSearch}
246+ className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4"
247+ >
248+ <div className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0 overflow-hidden">
249+ <div className="relative">
250+ <input
251+ className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
252+ onChange={this.onChange}
253+ onFocus={this.onFocus}
254+ placeholder="Search..."
255+ type="text"
256+ value={state.query}
257+ onClick={(e) => e.stopPropagation()}
258+ autoFocus={true}
259+ />
260+
261+ <span
262+ onClick={props.toggleSearch}
263+ className="absolute cursor-pointer right-1.5 top-1.5 md:right-2 md:top-2 lg:right-2.5 lg:top-2.5"
264+ >
265+ <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
266+ ESC
267+ </p>
268+ </span>
269+ </div>
270+
271+ <div
272+ ref={this.scrollBox}
273+ className={
274+ "overflow-y-scroll border-t-2 border-wall" +
275+ (state.query.length > 0 ? "" : "hidden border-transparent")
276+ }
277+ >
278+ {state.active && state.query !== ""
279+ ? state.results.map((item, index) => {
280+ if (item.type === "GLOSSARY_RESULT") {
281+ return (
282+ <div ref={this.applyRef.bind(this, index)}>
283+ <GlossaryResult
284+ key={item.content.link + "-" + index}
285+ index={index}
286+ setCursor={this.setCursor}
287+ selected={index === state.cursor}
288+ onSelect={this.onSelect}
289+ {...item.content}
290+ />
291+ </div>
292+ );
293+ }
294+
295+ if (item.type === "RESULT") {
296+ return (
297+ <div ref={this.applyRef.bind(this, index)}>
298+ <Result
299+ key={item.content.slug + "-" + index}
300+ index={index}
301+ setCursor={this.setCursor}
302+ selected={index === state.cursor}
303+ onSelect={this.onSelect}
304+ {...item.content}
305+ />
306+ </div>
307+ );
308+ }
309+ return null;
310+ })
311+ : null}
312+ </div>
313+ </div>
314+ </div>
315+ </HotKeys>
316+ );
317+ } else {
318+ return null;
319+ }
320+ }
321+}
322+
323+export default withRouter(Search);
components/Search.js+167−260
@@ -1,142 +1,54 @@
1−import { useCallback, useRef, useState, useEffect, createContext } from "react";
1+import { Component, createRef } from "react";
2import { glossary } from "../lib/glossary";
2import { glossary } from "../lib/glossary";
3import Link from "next/link";
3import Link from "next/link";
4−import { useRouter } from "next/router";
4+import { withRouter } from "next/router";
5import { configure, HotKeys } from "react-hotkeys";
5import { configure, HotKeys } from "react-hotkeys";
6import classnames from "classnames";
6import classnames from "classnames";
7+import Downshift from "downshift";
7
8
8−const SearchContext = createContext();
9+class Search extends Component {
9−
10+ constructor(props) {
10−const glossarySearch = (query) => {
11+ super(props);
11− return glossary.filter((entry) => {
12+ this.state = {
12− return query.toLowerCase() === entry.name || entry.symbol === query;
13+ results: [],
13− });
14−};
15−
16−function GlossaryResult(props) {
17− const selectedClassnames = classnames({
18− "bg-green": props.selected,
19− });
14+ };
20−
15+ this.searchEndpoint = this.searchEndpoint.bind(this);
21− const codeBg = classnames({
16+ this.onInputValueChange = this.onInputValueChange.bind(this);
22− "bg-wall": !props.selected,
17+ this.onChange = this.onChange.bind(this);
23− "bg-washedWhite": props.selected,
18+ this.glossarySearch = this.glossarySearch.bind(this);
24− });
25−
26− const text = classnames({
27− "text-black": !props.selected,
28− "text-white": props.selected,
29− });
30−
31− return (
32− <div
33− className={`cursor-pointer ${selectedClassnames}`}
34− onMouseEnter={() => props.setCursor(props.index)}
35− >
36− <div className="font-semibold p-3">
37− <p className={`text-base ${text}`}>
38− {props.symbol.length > 0 && (
39− <code className={`mr-1 rounded px-1 py-0.5 ${codeBg}`}>
40− {props.symbol}
41− </code>
42− )}
43− {props.name}
44− </p>
45− <p className={`font-normal text-base mt-1 ${text}`}>{props.desc}</p>
46− </div>
47− </div>
48− );
49−}
50−
51−function Result(props) {
52− const selectedClassnames = classnames({
53− "bg-green": props.selected,
54− });
55− const text = classnames({
56− "text-black": !props.selected,
57− "text-white": props.selected,
58− });
59− const description = classnames({
60− "text-gray": !props.selected,
61− "text-midWhite": props.selected,
62− });
63− return (
64− <div
65− className={`cursor-pointer ${selectedClassnames}`}
66− onMouseEnter={() => props.setCursor(props.index)}
67− >
68− <div className="p-3">
69− <p className={`font-medium text-base ${text}`}>
70− {props.parent !== "Content" ? `${props.parent} /` : ""} {props.title}
71− </p>
72− <p
73− className={`text-base font-regular text-small text-gray ${description}`}
74− >
75− {props.content}
76− </p>
77− </div>
78− </div>
79− );
80−}
81−
82−function Subheading(props) {
83− return (
84− <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
85− <p className="font-semibold text-sm">{props.title}</p>
86− </div>
87− );
88−}
19+ }
89
20
90−export default function Search(props) {
91− const searchRef = useRef(null);
92− const [query, setQuery] = useState("");
93− const [active, setActive] = useState(false);
94− const [results, setResults] = useState([]);
95− const [cursor, setCursor] = useState(0);
96− const searchEndpoint = (query) => `/api/search?q=${query}`;
21+ searchEndpoint(query) {
97− const router = useRouter();
22+ return `/api/search?q=${query}`;
23+ }
98
24
99− const keyMap = {
25+ glossarySearch(query) {
100− onNavUp: ["up"],
26+ console.log(query);
101− onNavDown: ["down"],
27+ return glossary.filter((entry) => {
102− onSelect: ["enter"],
28+ return query.toLowerCase() === entry.name || entry.symbol === query;
29+ });
103− };
30+ }
104
31
105− const handlers = {
32+ onChange(item) {
106− onNavUp: (event) => onNavUp(event),
33+ if (item.link) {
107− onNavDown: (event) => onNavDown(event),
34+ window.location.href = item.link;
108− onSelect: (event) => onSelect(event, results[cursor]),
109− };
35+ }
110
36
111− configure({
37+ if (item.slug) {
112− // ignoreTags: [],
38+ this.props.router.push(item.slug);
113− ignoreTags: ["input", "select", "textarea"],
39+ }
114− ignoreEventsCondition: function () {},
115− });
116
40
117− {
41+ this.setState({
118− /* useEffect(() => {
42+ query: "",
119− router.events.on("routeChangeComplete", handleRouteChange);
43+ results: [],
120− return () => {
44+ });
121− router.events.off("routeChangeComplete", handleRouteChange);
122− };
123− }, [router.events]);
124
45
125− const handleRouteChange = () => {
126− setQuery("");
127− setResults([]);
128− setActive(false);
129− props.closeSearch();
46+ this.props.closeSearch();
130− }; */
131 }
47 }
132
48
133− const onChange = useCallback((event) => {
49+ onInputValueChange(query) {
134− const query = event.target.value;
135−
136− setQuery(query);
137−
138 if (query.length) {
50 if (query.length) {
139− fetch(searchEndpoint(query))
51+ fetch(this.searchEndpoint(query))
140 .then((res) => res.json())
52 .then((res) => res.json())
141 .then((res) => {
53 .then((res) => {
142 // Wrap results in an object which will tell React what component to use to render results.
54 // Wrap results in an object which will tell React what component to use to render results.
@@ -145,154 +57,149 @@ export default function Search(props) {
145 content: item,
57 content: item,
146 }));
58 }));
147
59
148− const glossaryResults = glossarySearch(query).map((item) => ({
60+ const glossaryResults = this.glossarySearch(query).map((item) => ({
149 type: "GLOSSARY_RESULT",
61 type: "GLOSSARY_RESULT",
150 content: item,
62 content: item,
151 }));
63 }));
152
64
153 const list = [...glossaryResults, ...results];
65 const list = [...glossaryResults, ...results];
154
66
155− setResults(list);
67+ this.setState({ results: list });
156 });
68 });
157 } else {
69 } else {
158− setResults([]);
70+ this.setState({ results: [] });
159− }
160− }, []);
161−
162− const onFocus = useCallback(() => {
163− setActive(true);
164− // window.addEventListener("click", onClick);
165− }, []);
166−
167− const onClick = useCallback((event) => {
168− if (searchRef.current && !searchRef.current.contains(event.target)) {
169− setActive(false);
170− window.removeEventListener("click", onClick);
171− props.toggleSearch();
172− }
173− }, []);
174−
175− const onSelect = () => {
176− console.log(results, cursor);
177−
178− {
179− /* const cursorItem = results[cursor].content
180−
181−
182−
183− if (cursorItem.link) {
184− window.location.href = cursorItem.link
185− }
186−
187− if (cursorItem.slug) {
188− router.push(cursorItem.slug)
189− }
190−
191− props.toggleSearch();
192− setActive(false);
193− setQuery("");
194− setResults([])
195− props.closeSearch(); */
196− }
197− };
198−
199− const onNavUp = useCallback((event) => {
200− // prevents cursor from moving in search input
201− event.preventDefault();
202− setCursor((state) => state - 1);
203− });
204−
205− const onNavDown = useCallback((event) => {
206− // prevents cursor from moving in search input
207− event.preventDefault();
208− setCursor((state) => state + 1);
209− });
210−
211− const clear = (e) => {
212− e.stopPropagation();
213− setQuery("");
214− };
215−
216− // Locks document scrolling when search is open
217− if (typeof document !== "undefined") {
218− if (props.showSearch) {
219− document.body.style.overflow = "hidden";
220− } else {
221− document.body.style.overflow = "visible";
222 }
71 }
223 }
72 }
224
73
74+ render() {
75+ const { state, props } = this;
76+
225− if (props.showSearch) {
77+ if (props.isOpen) {
226− return (
78+ return (
227− <SearchContext.Provider value={42}>
79+ <Downshift
228− <HotKeys handlers={handlers} keyMap={keyMap}>
80+ onChange={(selection) => this.onChange(selection)}
229− <div
81+ onInputValueChange={(event) => this.onInputValueChange(event)}
230− onClick={props.closeSearch}
82+ itemToString={(item) =>
83+ item ? item.content.slug || item.content.link : ""
84+ }
85+ defaultHighlightedIndex={0}
86+ >
87+ {({
88+ getInputProps,
89+ getItemProps,
90+ getLabelProps,
91+ getMenuProps,
92+ isOpen,
93+ inputValue,
94+ highlightedIndex,
95+ selectedItem,
96+ getRootProps,
97+ }) => (
231− className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4"
98+ <div className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center p-4">
232− >
233− <div className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0">
99+ <div className="relative flex flex-col max-w-screen-lg md:my-32 w-full md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0 overflow-hidden">
234− <div className="relative">
100+ <div
235− <input
101+ style={{ display: "inline-block" }}
236− className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
102+ {...getRootProps({}, { suppressRefError: true })}
237− onChange={onChange}
238− onFocus={onFocus}
239− placeholder="Search..."
240− type="text"
241− value={query}
242− onClick={(e) => e.stopPropagation()}
243− autoFocus={true}
244− />
245−
246− <span
247− onClick={props.toggleSearch}
248− className="absolute cursor-pointer right-1.5 top-1.5 md:right-2 md:top-2 lg:right-2.5 lg:top-2.5"
249 >
103 >
250− <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
104+ <input
251− ESC
105+ autoFocus
252− </p>
106+ className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
253− </span>
107+ {...getInputProps()}
108+ />
254− </div>
109+ </div>
255−
256− <div
257− className={
258− "overflow-y-scroll border-t-2 border-wall" +
110+ <ul {...getMenuProps()} className="overflow-y-scroll">
259− (query.length > 0 ? "" : "hidden border-transparent")
111+ {isOpen
260− }
261− >
262− {active && query !== ""
263− ? results.map((item, index) => {
112+ ? state.results.map((item, index) => {
113+ const selected = highlightedIndex === index;
264− if (item.type === "GLOSSARY_RESULT") {
114+ if (item.type === "GLOSSARY_RESULT") {
265− return (
115+ return (
266− <GlossaryResult
116+ <li
117+ className={`cursor-pointer flex text-left w-full ${
118+ selected ? "bg-green" : ""
119+ }`}
120+ {...getItemProps({
267− key={item.link + "-" + index}
121+ key: item.content.link + "-" + index,
122+ index,
123+ item: item.content,
124+ selected: highlightedIndex === index,
125+ })}
126+ >
127+ <div className="font-semibold p-3">
128+ <p
129+ className={`text-base ${
130+ selected ? "text-white" : "text-black"
131+ }`}
132+ >
133+ {item.content.symbol.length > 0 && (
134+ <code
135+ className={`mr-1 rounded px-1 py-0.5 ${
136+ selected ? "bg-washedWhite" : "bg-wall"
137+ }`}
138+ >
268− {...item.content}
139+ {item.content.symbol}
269− index={index}
140+ </code>
270− setCursor={setCursor}
141+ )}
271− selected={index === cursor}
142+ {item.content.name}
272− />
143+ </p>
144+ <p
145+ className={`font-normal text-base mt-1 ${
146+ selected ? "text-white" : "text-black"
147+ }`}
148+ >
149+ {item.content.desc}
150+ </p>
151+ </div>
152+ </li>
273− );
153+ );
274− }
154+ }
275−
276− if (item.type === "RESULT") {
155+ if (item.type === "RESULT") {
277− return (
156+ return (
278− <Result
157+ <li
158+ className={`cursor-pointer flex text-left w-full ${
159+ selected ? "bg-green" : ""
160+ }`}
161+ {...getItemProps({
279− key={item.link + "-" + index}
162+ key: item.content.link + "-" + index,
163+ index,
164+ item: item.content,
165+ selected,
166+ })}
167+ >
168+ <div className="p-3">
169+ <p
170+ className={`font-medium text-base ${
171+ selected ? "text-white" : "text-black"
172+ }`}
173+ >
174+ {item.content.parent !== "Content"
280− {...item.content}
175+ ? `${item.content.parent} /`
281− index={index}
176+ : ""}{" "}
282− setCursor={setCursor}
177+ {item.content.title}
283− selected={index === cursor}
178+ </p>
284− />
179+ <p
180+ className={`text-base font-regular text-small ${
181+ selected ? "text-midWhite" : "text-gray"
182+ }`}
183+ >
184+ {item.content.content}
185+ </p>
186+ </div>
187+ </li>
285− );
188+ );
286− }
189+ }
287− return null;
190+ return null;
288− })
191+ })
289− : null}
192+ : null}
193+ </ul>
290 </div>
194 </div>
291 </div>
195 </div>
292− </div>
196+ )}
293− </HotKeys>
197+ </Downshift>
294− </SearchContext.Provider>
198+ );
295− );
199+ } else {
200+ return null;
201+ }
296 }
202 }
297− return null;
298}
203}
204+
205+export default withRouter(Search);
package-lock.json+31
@@ -2205,6 +2205,11 @@
2205 "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
2205 "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
2206 "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
2206 "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
2207 },
2207 },
2208+ "compute-scroll-into-view": {
2209+ "version": "1.0.17",
2210+ "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz",
2211+ "integrity": "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
2212+ },
2208 "concat-map": {
2213 "concat-map": {
2209 "version": "0.0.1",
2214 "version": "0.0.1",
2210 "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
2215 "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2609,6 +2614,32 @@
2609 }
2614 }
2610 }
2615 }
2611 },
2616 },
2617+ "downshift": {
2618+ "version": "6.1.5",
2619+ "resolved": "https://registry.npmjs.org/downshift/-/downshift-6.1.5.tgz",
2620+ "integrity": "sha512-9hpSCQLQ0KzlnI9ebpdbLuw5ogm7MXXI1D5N1zGWYSjHph+Xe02enXKyfDDE14akGr0jppAg0S1t/cjXp677ew==",
2621+ "requires": {
2622+ "@babel/runtime": "^7.14.8",
2623+ "compute-scroll-into-view": "^1.0.17",
2624+ "prop-types": "^15.7.2",
2625+ "react-is": "^17.0.2"
2626+ },
2627+ "dependencies": {
2628+ "@babel/runtime": {
2629+ "version": "7.14.8",
2630+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
2631+ "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
2632+ "requires": {
2633+ "regenerator-runtime": "^0.13.4"
2634+ }
2635+ },
2636+ "react-is": {
2637+ "version": "17.0.2",
2638+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
2639+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
2640+ }
2641+ }
2642+ },
2612 "ecdsa-sig-formatter": {
2643 "ecdsa-sig-formatter": {
2613 "version": "1.0.11",
2644 "version": "1.0.11",
2614 "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
2645 "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
package.json+1
@@ -18,6 +18,7 @@
18 "autoprefixer": "^10.2.6",
18 "autoprefixer": "^10.2.6",
19 "classnames": "^2.3.1",
19 "classnames": "^2.3.1",
20 "critters": "0.0.10",
20 "critters": "0.0.10",
21+ "downshift": "^6.1.5",
21 "feed": "^4.2.2",
22 "feed": "^4.2.2",
22 "fuzzy-search": "^3.2.1",
23 "fuzzy-search": "^3.2.1",
23 "gray-matter": "^4.0.3",
24 "gray-matter": "^4.0.3",
styles/globals.css+4−4
@@ -109,11 +109,11 @@ a:hover {
109}
109}
110
110
111.hero-card-height {
111.hero-card-height {
112− height: 750px;
112+ height: 562px;
113}
113}
114
114
115.hero-image-height {
115.hero-image-height {
116− height: 686px;
116+ height: 512px;
117}
117}
118
118
119.hero-image {
119.hero-image {
@@ -158,11 +158,11 @@ a:hover {
158}
158}
159
159
160.tray-menu-width {
160.tray-menu-width {
161− width: calc(100vw - 64px - 16px - 16px);
161+ width: calc(100vw - 4rem - 1rem - 1rem);
162}
162}
163
163
164.mobile-search-button-width {
164.mobile-search-button-width {
165− width: calc(100vw - 64px - 16px - 16px - 16px - 16px);
165+ width: calc(100vw - 4rem - 1rem - 1rem - 1rem - 1rem);
166}
166}
167
167
168.tray-overlay-open {
168.tray-overlay-open {