c87ee75 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

various: toggle search onclick, autofocus

commitc87ee753a9727eefe6f1e2f923bade43475e6692 authorMatilde Park <matilde@tlon.io> dateFri 25 Jun 2021, 14:14 (5 years ago) parente637f2d

11 files changed+69−32

compare with master

unifiedsplit

components/Header.js+8−2 components/Search.js+5−10 pages/404.js+4−2 pages/blog.js+3−2 pages/blog/[slug].js+4−3 pages/docs.js+14−2 pages/docs/[...slug].js+10−2 pages/events.js+5−2 pages/events/[slug].js+6−3 pages/grants.js+5−2 pages/index.js+5−2

components/Header.js+8−2

@@ -47,7 +47,7 @@ function MenuTray(props) {

4747}

4848

4949// This is the header for the index page

50−export default function Header() {

50+export default function Header(props) {

5151 const [isOpen, toggleTray] = useState(false);

5252 return (

5353 <header className="layout-wide flex justify-between items-center pt-8">

@@ -73,7 +73,13 @@ export default function Header() {

7373 Events

7474 </ActiveLink>

7575 <button className="mr-5 text-green type-ui">Download Port</button>

76− <button className="button-sm bg-wall text-gray">

76+ <button

77+ onClick={(e) => {

78+ e.stopPropagation();

79+ props.toggleSearch();

80+ }}

81+ className="button-sm bg-wall text-gray"

82+ >

7783 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>

7884 </button>

7985 </nav>

components/Search.js+5−10

@@ -8,12 +8,11 @@ const glossarySearch = (query) => {

88 });

99};

1010

11−export default function Search() {

11+export default function Search(props) {

1212 const searchRef = useRef(null);

1313 const [query, SetQuery] = useState("");

1414 const [active, setActive] = useState(false);

1515 const [results, setResults] = useState([]);

16− const [hidden, toggle] = useState(true);

1716 const searchEndpoint = (query) => `/api/search?q=${query}`;

1817

1918 const onChange = useCallback((event) => {

@@ -39,6 +38,7 @@ export default function Search() {

3938 if (searchRef.current && !searchRef.current.contains(event.target)) {

4039 setActive(false);

4140 window.removeEventListener("click", onClick);

41+ props.toggleSearch();

4242 }

4343 }, []);

4444

@@ -52,15 +52,9 @@ export default function Search() {

5252 }, []);

5353

5454 return (

55− <div

56− className={

57− "fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col " +

58− (hidden ? "hidden" : "")

59− }

60− ref={searchRef}

61− >

55+ <div className="fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col">

6256 <div className="p-12 w-100 flex flex-col min-h-0">

63− <div className="relative flex flex-col">

57+ <div className="relative flex flex-col" ref={searchRef}>

6458 <input

6559 className="bg-white type-ui text-green rounded-xl border-transparent p-2 outline-none relative"

6660 onChange={onChange}

@@ -68,6 +62,7 @@ export default function Search() {

6862 placeholder="Search..."

6963 type="text"

7064 value={query}

65+ autoFocus={true}

7166 />

7267 {query.length > 0 && (

7368 <span

pages/404.js+4−2

@@ -1,3 +1,4 @@

1+import { useState } from "react";

12import Container from "../components/Container";

23import SingleColumn from "../components/SingleColumn";

34import Header from "../components/Header";

@@ -5,11 +6,12 @@ import Footer from "../components/Footer";

56import Search from "../components/Search";

78export default function NotFound() {

9+ const [showSearch, toggleSearch] = useState(false);

810 return (

911 <Container>

10− <Search />

12+ {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

1113 <SingleColumn>

12− <Header />

14+ <Header toggleSearch={() => toggleSearch(true)} />

1315 <section className="layout-wide pt-48">

1416 <h1>404</h1>

1517 <p className="mt-12">It looks like nothing is here.</p>

pages/blog.js+3−2

@@ -10,11 +10,12 @@ import BackgroundImage from "../components/BackgroundImage";

1010import { getAllPosts, formatDate } from "../lib/lib";

1111

1212export default function Blog({ posts }) {

13+ const [showSearch, toggleSearch] = useState(false);

1314 return (

1415 <Container>

15− <Search />

16+ {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

1617 <SingleColumn>

17− <Header />

18+ <Header toggleSearch={() => toggleSearch(true)} />

1819 <section className="layout-wide">

1920 <div className="measure">

2021 <h2 className="pb-16">Urbit Blog</h2>

pages/blog/[slug].js+4−3

@@ -1,4 +1,5 @@

11import { useRouter } from "next/router";

2+import { useState } from "react";

23import {

34 getPostBySlug,

45 getAllPosts,

@@ -25,12 +26,12 @@ export default function Post({ post, nextPost, previousPost }) {

2526 if (!router.isFallback && !post?.slug) {

2627 return <ErrorPage />;

2728 }

28−

29+ const [showSearch, toggleSearch] = useState(false);

2930 return (

3031 <Container>

31− <Search />

32+ {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

3233 <SingleColumn>

33− <Header />

34+ <Header toggleSearch={() => toggleSearch(true)} />

3435 <section className="flex flex-col layout-wide">

3536 <h1>{post.title}</h1>

3637 {post.extra.author ? (

pages/docs.js+14−2

@@ -86,7 +86,13 @@ function ContentArea(props) {

8686 <div className="w-full">

8787 <header className="flex justify-between items-center px-24 pt-12 pb-8">

8888 <div className="type-ui">Urbit Documentation</div>

89− <button className="button-sm bg-wall text-gray">

89+ <button

90+ onClick={(e) => {

91+ e.stopPropagation();

92+ props.toggleSearch();

93+ }}

94+ className="button-sm bg-wall text-gray"

95+ >

9096 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>

9197 </button>

9298 </header>

@@ -101,13 +107,19 @@ function ContentArea(props) {

101107}

102108

103109export default function DocsLayout({ posts, data, content }) {

110+ const [showSearch, toggleSearch] = useState(false);

104111 return (

105112 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">

106113 <Head>

107114 <title>Documentation / Urbit.org</title>

108115 </Head>

116+ {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

109117 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>

110− <ContentArea breadcrumbs={breadcrumbs(posts, [])} title={data.title}>

118+ <ContentArea

119+ breadcrumbs={breadcrumbs(posts, [])}

120+ title={data.title}

121+ toggleSearch={() => toggleSearch(true)}

122+ >

111123 <Markdown post={{ content: content }} />

112124 </ContentArea>

113125 </div>

pages/docs/[...slug].js+10−2

@@ -98,7 +98,13 @@ function ContentArea(props) {

9898 <div className="w-full">

9999 <header className="flex justify-between items-center px-24 pt-12 pb-8">

100100 <div className="type-ui">Urbit Documentation</div>

101− <button className="button-sm bg-wall text-gray">

101+ <button

102+ onClick={(e) => {

103+ e.stopPropagation();

104+ props.toggleSearch();

105+ }}

106+ className="button-sm bg-wall text-gray"

107+ >

102108 Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>

103109 </button>

104110 </header>

@@ -113,17 +119,19 @@ function ContentArea(props) {

113119}

114120

115121export default function DocsLayout({ posts, data, content, params }) {

122+ const [showSearch, toggleSearch] = useState(false);

116123 return (

117124 <>

118125 <Head>

119126 <title>{data.title} / Documentation / Urbit.org</title>

120127 </Head>

121− <Search />

128+ {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}

122129 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">

123130 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>

124131 <ContentArea

125132 breadcrumbs={breadcrumbs(posts, params.slug.slice(0, -1))}

126133 title={data.title}

134+ toggleSearch={() => toggleSearch(true)}

127135 >

128136 <Markdown post={{ content: content }} />

129137 </ContentArea>

pages/events.js+5−2

@@ -70,11 +70,14 @@ function EventCard(props) {

7070}

7171

7272export default function Events({ pastEvents, currentEvents }) {

73+ const [showSearch, toggleSearch] = useState(false);

7374 return (

7475 <Container>

75− <Search />

76+ {showSearch && (

77+ <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

78+ )}

7679 <SingleColumn>

77− <Header />

80+ <Header toggleSearch={() => toggleSearch(true)} />

7881 <section className="layout-wide">

7982 <div className="measure">

8083 <h2 className="pb-16">Urbit Events</h2>

pages/events/[slug].js+6−3

@@ -1,4 +1,5 @@

11import { useRouter } from "next/router";

2+import { useState } from "react";

23import {

34 getPostBySlug,

45 getAllPosts,

@@ -25,12 +26,14 @@ export default function Event({ post, nextPost, previousPost }) {

2526 if (!router.isFallback && !post?.slug) {

2627 return <ErrorPage />;

2728 }

28−

29+ const [showSearch, toggleSearch] = useState(false);

2930 return (

3031 <Container>

31− <Search />

32+ {showSearch && (

33+ <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

34+ )}

3235 <SingleColumn>

33− <Header />

36+ <Header toggleSearch={() => toggleSearch(true)} />

3437 <section className="flex flex-col layout-wide pt-24">

3538 <h1>{post.title}</h1>

3639 {post.extra.author ? (

pages/grants.js+5−2

@@ -63,6 +63,7 @@ export default function Grants({ posts, categories, types, featuredGrants }) {

6363 const [activeTags, setTags] = useState([]);

6464 const [activeTypes, setTypes] = useState(types);

6565 const [tab, setTab] = useState(0);

66+ const [showSearch, toggleSearch] = useState(false);

6667

6768 const filteredPosts = posts.reduce((acc, post) => {

6869 // Posts are returned if they match both the selected category and selected tags, or if the user has no category filters set.

@@ -80,8 +81,10 @@ export default function Grants({ posts, categories, types, featuredGrants }) {

8081 return (

8182 <Container>

8283 <SingleColumn>

83− <Search />

84− <Header />

84+ {showSearch && (

85+ <Search toggleSearch={() => toggleSearch(!toggleSearch)} />

86+ )}

87+ <Header toggleSearch={() => toggleSearch(true)} />

8588 {

8689 // Heading and introduction

8790 }

pages/index.js+5−2

@@ -15,11 +15,14 @@ import { contact } from "../lib/constants";

1515

1616export default function Home({ posts, events, openGrantsCount }) {

1717 const [tab, setTab] = useState(0);

18+ const [showSearch, toggleSearch] = useState(false);

1819 return (

1920 <Container>

2021 <SingleColumn>

21− <Search />

22− <Header />

22+ {showSearch && (

23+ <Search toggleSearch={() => toggleSearch(!showSearch)} />

24+ )}

25+ <Header toggleSearch={() => toggleSearch(true)} />

2326

2427 {

2528 // Hero Statement