git.iko.soy/urbit.org
on master help sign in
add open and close search functions, clear search on route change
d24dc27Gavin Atkinson
components/ContentArea.js+1−1
compare with master
unifiedsplit
@@ -6,7 +6,7 @@ export default function ContentArea(props) {
6 <button
6 <button
7 onClick={(e) => {
7 onClick={(e) => {
8 e.stopPropagation();
8 e.stopPropagation();
9− props.toggleSearch();
9+ props.search.toggleSearch();
10 }}
10 }}
11 className="button-sm bg-wall text-gray"
11 className="button-sm bg-wall text-gray"
12 >
12 >
components/Header.js+31−4
@@ -67,6 +67,12 @@ function MenuTray(props) {
67// This is the header for the index page
67// This is the header for the index page
68export default function Header(props) {
68export default function Header(props) {
69 const [isOpen, toggleTray] = useState(false);
69 const [isOpen, toggleTray] = useState(false);
70+
71+ const mobileSearchButtonClasses = classnames({
72+ visible: isOpen,
73+ invisible: !isOpen,
74+ });
75+
70 return (
76 return (
71 <header className="layout-wide flex justify-between items-center pt-12">
77 <header className="layout-wide flex justify-between items-center pt-12">
72 <Link href="/">
78 <Link href="/">
@@ -89,7 +95,7 @@ export default function Header(props) {
89 <button
95 <button
90 onClick={(e) => {
96 onClick={(e) => {
91 e.stopPropagation();
97 e.stopPropagation();
92− props.toggleSearch();
98+ props.search.toggleSearch(e);
93 }}
99 }}
94 className="button-sm bg-wall text-gray"
100 className="button-sm bg-wall text-gray"
95 >
101 >
@@ -113,10 +119,31 @@ export default function Header(props) {
113 <ActiveLink className="mr-5 type-h3" href="/events">
119 <ActiveLink className="mr-5 type-h3" href="/events">
114 Events
120 Events
115 </ActiveLink>
121 </ActiveLink>
116− <button className="fixed bottom-4 left-4 right-4 bg-white rounded-xl items-center justify-between flex px-4 h-16 type-ui text-gray">
117− Search...
118− </button>
119 </MenuTray>
122 </MenuTray>
123+ <button
124+ onClick={(e) => {
125+ e.stopPropagation();
126+ props.search.toggleSearch(e);
127+ }}
128+ className={`z-10 fixed bottom-24 right-6 w-12 h-12 bg-ultraDeepWall items-center justify-center rounded-full flex ${mobileSearchButtonClasses}`}
129+ >
130+ <svg
131+ width="16"
132+ height="16"
133+ viewBox="0 0 16 16"
134+ fill="none"
135+ xmlns="http://www.w3.org/2000/svg"
136+ >
137+ <circle cx="7" cy="7" r="5.5" stroke="white" stroke-width="3" />
138+ <path
139+ d="M11 11L14 14"
140+ stroke="white"
141+ stroke-width="3"
142+ stroke-linecap="round"
143+ />
144+ </svg>
145+ </button>
146+
120 <button
147 <button
121 onClick={() => toggleTray(!isOpen)}
148 onClick={() => toggleTray(!isOpen)}
122 className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
149 className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full"
components/NewletterSignup.js+1−1
@@ -7,7 +7,7 @@ export default function NewsletterSignup(props) {
7 name="mc-embedded-subscribe-form"
7 name="mc-embedded-subscribe-form"
8 className="validate form max-w-screen-sm"
8 className="validate form max-w-screen-sm"
9 target="_blank"
9 target="_blank"
10− novalidate
10+ noValidate
11 >
11 >
12 <div className="input-group" id="mc_embed_signup_scroll">
12 <div className="input-group" id="mc_embed_signup_scroll">
13 <div className="mc-field-group w-full relative">
13 <div className="mc-field-group w-full relative">
components/Search.js+90−69
@@ -1,6 +1,7 @@
1−import { useCallback, useRef, useState } from "react";
1+import { useCallback, useRef, useState, useEffect } 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
5
5const glossarySearch = (query) => {
6const glossarySearch = (query) => {
6 return glossary.filter((entry) => {
7 return glossary.filter((entry) => {
@@ -10,15 +11,31 @@ const glossarySearch = (query) => {
10
11
11export default function Search(props) {
12export default function Search(props) {
12 const searchRef = useRef(null);
13 const searchRef = useRef(null);
13− const [query, SetQuery] = useState("");
14+ const [query, setQuery] = useState("");
14 const [active, setActive] = useState(false);
15 const [active, setActive] = useState(false);
15 const [results, setResults] = useState([]);
16 const [results, setResults] = useState([]);
16 const searchEndpoint = (query) => `/api/search?q=${query}`;
17 const searchEndpoint = (query) => `/api/search?q=${query}`;
17
18
19+ const router = useRouter();
20+
21+ useEffect(() => {
22+ router.events.on("routeChangeComplete", handleRouteChange);
23+ return () => {
24+ router.events.off("routeChangeComplete", handleRouteChange);
25+ };
26+ }, [router.events]);
27+
28+ const handleRouteChange = () => {
29+ setQuery("");
30+ setResults([]);
31+ setActive(false);
32+ props.closeSearch();
33+ };
34+
18 const onChange = useCallback((event) => {
35 const onChange = useCallback((event) => {
19 const query = event.target.value;
36 const query = event.target.value;
20
37
21− SetQuery(query);
38+ setQuery(query);
22 if (query.length) {
39 if (query.length) {
23 fetch(searchEndpoint(query))
40 fetch(searchEndpoint(query))
24 .then((res) => res.json())
41 .then((res) => res.json())
@@ -50,7 +67,7 @@ export default function Search(props) {
50
67
51 const clear = useCallback((e) => {
68 const clear = useCallback((e) => {
52 e.stopPropagation();
69 e.stopPropagation();
53− SetQuery("");
70+ setQuery("");
54 }, []);
71 }, []);
55
72
56 // Locks document scrolling when search is open
73 // Locks document scrolling when search is open
@@ -64,9 +81,12 @@ export default function Search(props) {
64
81
65 if (props.showSearch) {
82 if (props.showSearch) {
66 return (
83 return (
84+ <div
85+ onClick={props.closeSearch}
67− <div className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center">
86+ className="fixed w-screen h-screen bg-washedWall z-50 flex flex-col items-center"
87+ >
68 <div
88 <div
69− className="relative my-32 flex flex-col max-w-screen-lg w-10/12 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
89+ className="relative flex flex-col max-w-screen-lg w-12/12 m-4 md:my-32 md:w-10/12 lg:w-8/12 xl:w-6/12 rounded-xl bg-white min-h-0"
70 ref={searchRef}
90 ref={searchRef}
71 >
91 >
72 <div className="">
92 <div className="">
@@ -77,12 +97,13 @@ export default function Search(props) {
77 placeholder="Search..."
97 placeholder="Search..."
78 type="text"
98 type="text"
79 value={query}
99 value={query}
100+ onClick={(e) => e.stopPropagation()}
80 autoFocus={true}
101 autoFocus={true}
81 />
102 />
82
103
83 <span
104 <span
84 onClick={props.toggleSearch}
105 onClick={props.toggleSearch}
85− className="absolute right-2 top-2 cursor-pointer"
106+ className="absolute right-2.5 top-2.5 cursor-pointer"
86 >
107 >
87 <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
108 <p className="px-2 h-8 bg-wall flex items-center justify-center text-sm rounded">
88 ESC
109 ESC
@@ -91,75 +112,75 @@ export default function Search(props) {
91 </div>
112 </div>
92
113
93 <div
114 <div
94− className={
95− "overflow-scroll min-h-0 pb-2" +
96− (query.length > 0 ? "" : "hidden")
115+ className={"overflow-y-scroll" + (query.length > 0 ? "" : "hidden")}
97− }
98 >
116 >
117+ <div>
99− {active &&
118+ {active &&
100− results.length === 0 &&
119+ results.length === 0 &&
101− glossaryResults.length === 0 &&
120+ glossaryResults.length === 0 &&
102− query !== "" ? (
121+ query !== "" ? (
103− <div className="flex font-semibold text-sm p-3 py-8 w-full">
122+ <div className="flex font-semibold text-sm p-3 py-8 w-full">
104− <p className="mr-2 text-gray">No Results found for</p>
123+ <p className="mr-2 text-gray">No Results found for</p>
105− <p className="font-semibold">"{query}"</p>
124+ <p className="font-semibold">"{query}"</p>
106− </div>
107− ) : null}
108− {active && glossaryResults.length > 0 ? (
109− <div>
110− <div className="flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
111− <p className="font-semibold text-sm">Glossary</p>
112 </div>
125 </div>
126+ ) : null}
127+ {active && glossaryResults.length > 0 ? (
128+ <>
129+ <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
130+ <p className="font-semibold text-sm">Glossary</p>
131+ </div>
113
132
114− {glossaryResults.map(({ name, link, desc, symbol }) => {
133+ {glossaryResults.map(({ name, link, desc, symbol }) => {
115− return (
116− <Link href={link} as={link} key={link}>
117− <div className="cursor-pointer hover:bg-wall">
118− <div className="font-semibold p-3">
119− {symbol.length > 0 && (
120− <code className="mr-1 bg-wall rounded px-1 py-0.5">
121− {symbol}
122− </code>
123− )}
124− {name}
125− <p className="font-normal text-base mt-1">{desc}</p>
126− </div>
127− </div>
128− </Link>
129− );
130− })}
131− </div>
132− ) : null}
133− {active && results.length > 0 && (
134− <ul className="">
135− <div>
136− <p className="font-semibold text-sm p-3 py-1 bg-ultraDeepWall text-white">
137− {results.length} results for "{query}"
138− </p>
139− </div>
140− {results
141− .filter((e) => e.parent !== "Glossary")
142− .map(({ title, slug, content, parent }) => {
143 return (
134 return (
144− <li
135+ <Link href={link} as={link} key={link}>
145− key={slug}
146− className="cursor-pointer hover:bg-wall p-3"
136+ <div className="cursor-pointer hover:bg-wall">
147− >
148− <Link href={slug} as={slug}>
149− <div>
150− <p className="font-medium text-base">
137+ <div className="font-semibold p-3">
151− {parent} / {title}
138+ {symbol.length > 0 && (
152− </p>
139+ <code className="mr-1 bg-wall rounded px-1 py-0.5">
140+ {symbol}
141+ </code>
142+ )}
143+ {name}
153− <p className="text-base font-regular text-small text-gray">
144+ <p className="font-normal text-base mt-1">{desc}</p>
154− {content}
155− </p>
156 </div>
145 </div>
157− </Link>
146+ </div>
158− </li>
147+ </Link>
159 );
148 );
160 })}
149 })}
161− </ul>
150+ </>
162− )}
151+ ) : null}
152+ {active && results.length > 0 && (
153+ <>
154+ <div className="sticky top-0 flex font-semibold text-sm p-3 py-1 w-full bg-ultraDeepWall text-white">
155+ <p className="font-semibold text-sm">
156+ {results.length} results for "{query}"
157+ </p>
158+ </div>
159+
160+ {results
161+ .filter((e) => e.parent !== "Glossary")
162+ .map(({ title, slug, content, parent }) => {
163+ return (
164+ <div
165+ key={slug}
166+ className="cursor-pointer hover:bg-wall p-3"
167+ >
168+ <Link href={slug} as={slug}>
169+ <div>
170+ <p className="font-medium text-base">
171+ {parent} / {title}
172+ </p>
173+ <p className="text-base font-regular text-small text-gray">
174+ {content}
175+ </p>
176+ </div>
177+ </Link>
178+ </div>
179+ );
180+ })}
181+ </>
182+ )}
183+ </div>
163 </div>
184 </div>
164 </div>
185 </div>
165 </div>
186 </div>
package.json+1
@@ -5,6 +5,7 @@
5 "scripts": {
5 "scripts": {
6 "dev": "npm run cache-posts && next dev",
6 "dev": "npm run cache-posts && next dev",
7 "build": "npm run cache-posts && next build",
7 "build": "npm run cache-posts && next build",
8+ "export": "npm run cache-posts && next build && next export",
8 "start": "next start",
9 "start": "next start",
9 "prepare": "husky install",
10 "prepare": "husky install",
10 "cache-posts": "node lib/cache.js",
11 "cache-posts": "node lib/cache.js",
pages/404.js+2−2
@@ -3,11 +3,11 @@ import SingleColumn from "../components/SingleColumn";
3import Header from "../components/Header";
3import Header from "../components/Header";
4import Footer from "../components/Footer";
4import Footer from "../components/Footer";
5
5
6−export default function NotFound() {
6+export default function NotFound(props) {
7 return (
7 return (
8 <Container>
8 <Container>
9 <SingleColumn>
9 <SingleColumn>
10− <Header toggleSearch={() => toggleSearch(true)} />
10+ <Header search={props.search} />
11 <section className="layout-wide pt-48">
11 <section className="layout-wide pt-48">
12 <h1>404</h1>
12 <h1>404</h1>
13 <p className="mt-12">It looks like nothing is here.</p>
13 <p className="mt-12">It looks like nothing is here.</p>
pages/_app.js+46−11
@@ -1,24 +1,50 @@
1import "tailwindcss/tailwind.css";
1import "tailwindcss/tailwind.css";
2−import { useState } from "react";
2+import { useState, useEffect } from "react";
3import { configure, GlobalHotKeys } from "react-hotkeys";
3import { configure, GlobalHotKeys } from "react-hotkeys";
4import Search from "../components/Search";
4import Search from "../components/Search";
5import "../styles/globals.css";
5import "../styles/globals.css";
6import "../styles/prism.css";
6import "../styles/prism.css";
7
7
8function MyApp({ Component, pageProps }) {
8function MyApp({ Component, pageProps }) {
9− const [showSearch, toggleSearch] = useState(false);
9+ const [showSearch, setSearch] = useState(false);
10
10
11− const invertToggle = (event) => {
11+ const closeSearch = (event) => {
12− if (event.preventDefault) {
12+ if (event?.preventDefault) {
13 event.preventDefault();
13 event.preventDefault();
14 }
14 }
15− toggleSearch((state) => !state);
15+ setSearch(false);
16 };
16 };
17+
18+ const openSearch = (event) => {
19+ if (event?.preventDefault) {
20+ event.preventDefault();
21+ }
22+ setSearch(true);
23+ };
24+
25+ const toggleSearch = (event) => {
26+ if (event?.preventDefault) {
27+ event.preventDefault();
28+ }
29+ setSearch((state) => !state);
30+ };
31+
17− const keyMap = { search: ["command+k", "ctrl+k", "esc"] };
32+ const keyMap = {
33+ // openSearch: [],
34+ closeSearch: ["esc"],
35+ toggleSearch: ["command+k", "ctrl+k"],
36+ };
37+
18− const handlers = { search: (event) => invertToggle(event) };
38+ const handlers = {
39+ closeSearch: (event) => closeSearch(event),
40+ openSearch: (event) => openSearch(event),
41+ toggleSearch: (event) => toggleSearch(event),
42+ };
43+
19 configure({
44 configure({
20− ignoreTags: [],
45+ // ignoreTags: [],
21− stopEventPropagationAfterHandling: true,
46+ ignoreTags: ["input", "select", "textarea"],
47+ ignoreEventsCondition: function () {},
22 });
48 });
23
49
24 return (
50 return (
@@ -26,9 +52,18 @@ function MyApp({ Component, pageProps }) {
26 <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
52 <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
27 <Search
53 <Search
28 showSearch={showSearch}
54 showSearch={showSearch}
29− toggleSearch={() => toggleSearch(false)}
55+ toggleSearch={toggleSearch}
56+ closeSearch={closeSearch}
57+ openSearch={openSearch}
58+ />
59+ <Component
60+ {...pageProps}
61+ search={{
62+ toggleSearch: toggleSearch,
63+ closeSearch: closeSearch,
64+ openSearch: openSearch,
65+ }}
30 />
66 />
31− <Component {...pageProps} toggleSearch={invertToggle} />
32 </>
67 </>
33 );
68 );
34}
69}
pages/blog.js+2−2
@@ -7,11 +7,11 @@ import SingleColumn from "../components/SingleColumn";
7import BackgroundImage from "../components/BackgroundImage";
7import BackgroundImage from "../components/BackgroundImage";
8import { getAllPosts, formatDate } from "../lib/lib";
8import { getAllPosts, formatDate } from "../lib/lib";
9
9
10−export default function Blog({ posts, toggleSearch }) {
10+export default function Blog({ posts, search }) {
11 return (
11 return (
12 <Container>
12 <Container>
13 <SingleColumn>
13 <SingleColumn>
14− <Header toggleSearch={() => toggleSearch(true)} />
14+ <Header search={search} />
15 <section className="layout-narrow">
15 <section className="layout-narrow">
16 <div className="measure">
16 <div className="measure">
17 <h2 className="pb-16">Urbit Blog</h2>
17 <h2 className="pb-16">Urbit Blog</h2>
pages/blog/[slug].js+4−4
@@ -26,7 +26,7 @@ export default function Post({
26 nextPost,
26 nextPost,
27 previousPost,
27 previousPost,
28 markdown,
28 markdown,
29− toggleSearch,
29+ search,
30}) {
30}) {
31 const router = useRouter();
31 const router = useRouter();
32 if (!router.isFallback && !post?.slug) {
32 if (!router.isFallback && !post?.slug) {
@@ -35,8 +35,8 @@ export default function Post({
35 return (
35 return (
36 <Container>
36 <Container>
37 <SingleColumn>
37 <SingleColumn>
38− <Header toggleSearch={() => toggleSearch(true)} />
38+ <Header search={search} />
39− <section className="flex flex-col layout-wide">
39+ <section className="flex flex-col layout-narrow">
40 <h1>{post.title}</h1>
40 <h1>{post.title}</h1>
41 {post.extra.author ? (
41 {post.extra.author ? (
42 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
42 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
@@ -48,7 +48,7 @@ export default function Post({
48 {formatDate(new Date(post.date))}
48 {formatDate(new Date(post.date))}
49 </div>
49 </div>
50 </section>
50 </section>
51− <div className={"layout-wide " + markdownStyles["markdown"]}>
51+ <div className={"layout-narrow " + markdownStyles["markdown"]}>
52 <article
52 <article
53 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
53 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
54 ></article>
54 ></article>
pages/docs/[[...slug]].js+2−8
@@ -96,13 +96,7 @@ const pageTree = (thisLink, tree, level = 0) => {
96 );
96 );
97};
97};
98
98
99−export default function DocsLayout({
99+export default function DocsLayout({ posts, data, params, search, markdown }) {
100− posts,
101− data,
102− params,
103− toggleSearch,
104− markdown,
105−}) {
106 return (
100 return (
107 <>
101 <>
108 <Head>
102 <Head>
@@ -113,7 +107,7 @@ export default function DocsLayout({
113 <ContentArea
107 <ContentArea
114 breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
108 breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
115 title={data.title}
109 title={data.title}
116− toggleSearch={() => toggleSearch(true)}
110+ search={search}
117 >
111 >
118 <div className={markdownStyles["markdown"]}>
112 <div className={markdownStyles["markdown"]}>
119 <article
113 <article
pages/events.js+2−2
@@ -69,11 +69,11 @@ function EventCard(props) {
69 );
69 );
70}
70}
71
71
72−export default function Events({ pastEvents, currentEvents, toggleSearch }) {
72+export default function Events({ pastEvents, currentEvents, search }) {
73 return (
73 return (
74 <Container>
74 <Container>
75 <SingleColumn>
75 <SingleColumn>
76− <Header toggleSearch={() => toggleSearch(true)} />
76+ <Header search={search} />
77 <section className="layout-narrow">
77 <section className="layout-narrow">
78 <div className="measure">
78 <div className="measure">
79 <h2 className="pb-16">Urbit Events</h2>
79 <h2 className="pb-16">Urbit Events</h2>
pages/events/[slug].js+5−5
@@ -26,7 +26,7 @@ export default function Event({
26 nextPost,
26 nextPost,
27 previousPost,
27 previousPost,
28 markdown,
28 markdown,
29− toggleSearch,
29+ search,
30}) {
30}) {
31 const router = useRouter();
31 const router = useRouter();
32 if (!router.isFallback && !post?.slug) {
32 if (!router.isFallback && !post?.slug) {
@@ -35,8 +35,8 @@ export default function Event({
35 return (
35 return (
36 <Container>
36 <Container>
37 <SingleColumn>
37 <SingleColumn>
38− <Header toggleSearch={() => toggleSearch(true)} />
38+ <Header search={search} />
39− <section className="flex flex-col layout-wide pt-24">
39+ <section className="flex flex-col layout-narrow pt-24">
40 <h1>{post.title}</h1>
40 <h1>{post.title}</h1>
41 {post.extra.author ? (
41 {post.extra.author ? (
42 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
42 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
@@ -48,7 +48,7 @@ export default function Event({
48 {formatDate(new Date(post.date))}
48 {formatDate(new Date(post.date))}
49 </div>
49 </div>
50 </section>
50 </section>
51− <section className="flex layout-wide pt-24">
51+ <section className="flex layout-narrow pt-24">
52 {post.extra.youtube ? (
52 {post.extra.youtube ? (
53 <iframe
53 <iframe
54 className="rounded-xl"
54 className="rounded-xl"
@@ -61,7 +61,7 @@ export default function Event({
61 ></iframe>
61 ></iframe>
62 ) : null}
62 ) : null}
63 </section>
63 </section>
64− <div className={"layout-wide " + markdownStyles["markdown"]}>
64+ <div className={"layout-narrow " + markdownStyles["markdown"]}>
65 <article
65 <article
66 className="flex flex-col items-center pt-12 w-full"
66 className="flex flex-col items-center pt-12 w-full"
67 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
67 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
pages/faq.js+7−7
@@ -8,11 +8,11 @@ import SingleColumn from "../components/SingleColumn";
8import BackgroundImage from "../components/BackgroundImage";
8import BackgroundImage from "../components/BackgroundImage";
9import { getAllPosts, formatDate } from "../lib/lib";
9import { getAllPosts, formatDate } from "../lib/lib";
10
10
11−export default function Blog({ posts, toggleSearch }) {
11+export default function Blog({ posts, search }) {
12 return (
12 return (
13 <Container>
13 <Container>
14 <SingleColumn>
14 <SingleColumn>
15− <Header toggleSearch={() => toggleSearch(true)} />
15+ <Header search={search} />
16 <section className="layout-wide">
16 <section className="layout-wide">
17 <div className="measure">
17 <div className="measure">
18 <h2 className="pb-16">Urbit Blog</h2>
18 <h2 className="pb-16">Urbit Blog</h2>
@@ -75,12 +75,12 @@ export default function Blog({ posts, toggleSearch }) {
75}
75}
76
76
77export async function getStaticProps() {
77export async function getStaticProps() {
78− const posts = getPostBySlug(
78+ // const posts = getPostBySlug(
79− ["title", "slug", "date", "description", "extra"],
79+ // ["title", "slug", "date", "description", "extra"],
80− "blog"
80+ // "blog"
81− );
81+ // );
82
82
83 return {
83 return {
84− props: { posts },
84+ props: { posts: [] },
85 };
85 };
86}
86}
pages/grants.js+2−2
@@ -64,7 +64,7 @@ export default function Grants({
64 categories,
64 categories,
65 types,
65 types,
66 featuredGrants,
66 featuredGrants,
67− toggleSearch,
67+ search,
68}) {
68}) {
69 const [activeTags, setTags] = useState([]);
69 const [activeTags, setTags] = useState([]);
70 const [activeTypes, setTypes] = useState(types);
70 const [activeTypes, setTypes] = useState(types);
@@ -92,7 +92,7 @@ export default function Grants({
92 return (
92 return (
93 <Container>
93 <Container>
94 <SingleColumn>
94 <SingleColumn>
95− <Header toggleSearch={() => toggleSearch(true)} />
95+ <Header search={search} />
96 {
96 {
97 // Heading and introduction
97 // Heading and introduction
98 }
98 }
pages/grants/[slug].js+4−4
@@ -26,7 +26,7 @@ export default function Grant({
26 nextPost,
26 nextPost,
27 markdown,
27 markdown,
28 previousPost,
28 previousPost,
29− toggleSearch,
29+ search,
30}) {
30}) {
31 const router = useRouter();
31 const router = useRouter();
32 if (!router.isFallback && !post?.slug) {
32 if (!router.isFallback && !post?.slug) {
@@ -36,8 +36,8 @@ export default function Grant({
36 return (
36 return (
37 <Container>
37 <Container>
38 <SingleColumn>
38 <SingleColumn>
39− <Header toggleSearch={() => toggleSearch(true)} />
39+ <Header search={search} />
40− <section className="flex flex-col layout-wide">
40+ <section className="flex flex-col layout-narrow">
41 <h1>{post.title}</h1>
41 <h1>{post.title}</h1>
42 {post.extra.author ? (
42 {post.extra.author ? (
43 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
43 <div className="type-ui text-gray mt-4">{post.extra.author}</div>
@@ -49,7 +49,7 @@ export default function Grant({
49 {formatDate(new Date(post.date))}
49 {formatDate(new Date(post.date))}
50 </div>
50 </div>
51 </section>
51 </section>
52− <div className={"layout-wide " + markdownStyles["markdown"]}>
52+ <div className={"layout-narrow " + markdownStyles["markdown"]}>
53 <article
53 <article
54 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
54 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
55 ></article>
55 ></article>
pages/index.js+2−2
@@ -12,7 +12,7 @@ import PostPreview from "../components/PostPreview";
12import { getAllPosts, formatDate, getOpenGrantsCount } from "../lib/lib";
12import { getAllPosts, formatDate, getOpenGrantsCount } from "../lib/lib";
13import { contact } from "../lib/constants";
13import { contact } from "../lib/constants";
14
14
15−export default function Home({ posts, events, openGrantsCount, toggleSearch }) {
15+export default function Home({ posts, events, openGrantsCount, search }) {
16 const [tab, setTab] = useState(0);
16 const [tab, setTab] = useState(0);
17 const [heroButton, setHeroButton] = useState(<div />);
17 const [heroButton, setHeroButton] = useState(<div />);
18
18
@@ -48,7 +48,7 @@ export default function Home({ posts, events, openGrantsCount, toggleSearch }) {
48 return (
48 return (
49 <Container>
49 <Container>
50 <SingleColumn>
50 <SingleColumn>
51− <Header toggleSearch={() => toggleSearch(true)} />
51+ <Header search={search} />
52
52
53 {
53 {
54 // Hero Statement
54 // Hero Statement
styles/globals.css+1−1
@@ -145,7 +145,7 @@ a:hover {
145}
145}
146
146
147:root {
147:root {
148− --tray-time: 50ms;
148+ --tray-time: 0ms;
149}
149}
150
150
151.tray-menu-open {
151.tray-menu-open {