6197c72 · urbit.org · git.iko.soy

components/Container.js+17−7

compare with master

unifiedsplit

@@ -1,8 +1,18 @@

1+import { configure, GlobalHotKeys } from "react-hotkeys";

1// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis

2// Ensures the root container is always 100vw, min 100vh, and centers all children along the y-axis

2−export default function Container({children}) {

3+export default function Container({ toggleSearch, children }) {

4+ const keyMap = { search: ["command+k", "ctrl+k", "esc"] };

5+ const handlers = { search: toggleSearch };

6+ configure({

7+ ignoreTags: [],

8+ });

9+

3− return (

10+ return (

11+ <>

12+ <GlobalHotKeys keyMap={keyMap} handlers={handlers} />

4− <div className='flex flex-col min-h-screen w-screen items-center'>

13+ <div className="flex flex-col min-h-screen w-screen items-center">

5− {children}

14+ {children}

6− </div>

15+ </div>

7− )

16+ </>

17+ );

8− }

18+}

components/Search.js+2−1

@@ -47,7 +47,8 @@ export default function Search(props) {

47 glossaryResults = glossarySearch(query);

48 }

49

50− const clear = useCallback(() => {

50+ const clear = useCallback((e) => {

51+ e.stopPropagation();

51 SetQuery("");

52 SetQuery("");

52 }, []);

53 }, []);

53

54

package-lock.json+8

@@ -4896,6 +4896,14 @@

4896 "scheduler": "^0.20.2"

4897 }

4898 },

4899+ "react-hotkeys": {

4900+ "version": "2.0.0",

4901+ "resolved": "https://registry.npmjs.org/react-hotkeys/-/react-hotkeys-2.0.0.tgz",

4902+ "integrity": "sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==",

4903+ "requires": {

4904+ "prop-types": "^15.6.1"

4905+ }

4906+ },

4899 "react-is": {

4907 "react-is": {

4900 "version": "16.13.1",

4908 "version": "16.13.1",

4901 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

4909 "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json+1

@@ -18,6 +18,7 @@

18 "next": "10.2.3",

19 "react": "17.0.2",

20 "react-dom": "17.0.2",

21+ "react-hotkeys": "^2.0.0",

21 "remark": "^13.0.0",

22 "remark": "^13.0.0",

22 "remark-html": "^13.0.1",

23 "remark-html": "^13.0.1",

23 "remark-parse": "^9.0.0",

24 "remark-parse": "^9.0.0",

pages/404.js+2−2

@@ -8,8 +8,8 @@ import Search from "../components/Search";

8export default function NotFound() {

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

10 return (

11− <Container>

11+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

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

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

13 <SingleColumn>

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

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

pages/blog.js+2−2

@@ -12,8 +12,8 @@ import { getAllPosts, formatDate } from "../lib/lib";

12export default function Blog({ posts }) {

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

14 return (

15− <Container>

15+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

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

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

17 <SingleColumn>

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

19 <section className="layout-wide">

pages/blog/[slug].js+1−1

@@ -28,7 +28,7 @@ export default function Post({ post, nextPost, previousPost }) {

28 }

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

30 return (

31− <Container>

31+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

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

33 <SingleColumn>

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

pages/events.js+1−1

@@ -72,7 +72,7 @@ function EventCard(props) {

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

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

74 return (

75− <Container>

75+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

76 {showSearch && (

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

78 )}

pages/events/[slug].js+2−4

@@ -28,10 +28,8 @@ export default function Event({ post, nextPost, previousPost }) {

28 }

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

30 return (

31− <Container>

31+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

32− {showSearch && (

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

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

34− )}

35 <SingleColumn>

33 <SingleColumn>

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

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

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

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

pages/grants.js+1−1

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

79 }, []);

80

81 return (

82− <Container>

82+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

83 <SingleColumn>

84 {showSearch && (

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

pages/index.js+2−4

@@ -17,11 +17,9 @@ export default function Home({ posts, events, openGrantsCount }) {

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

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

19 return (

20− <Container>

20+ <Container toggleSearch={() => toggleSearch((state) => !state)}>

21 <SingleColumn>

22− {showSearch && (

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

22+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}

24− )}

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

23 <Header toggleSearch={() => toggleSearch(true)} />

26

24

27 {

25 {