ab7dbab · urbit.org · git.iko.soy

git.iko.soy/urbit.org

docs: add hotkeys to search

commitab7dbabc942f1f6a85ab588de6c4ef891404fec7 authorMatilde Park <matilde@tlon.io> dateFri 25 Jun 2021, 15:05 (5 years ago) parent6197c72

2 files changed+17−1

compare with master

unifiedsplit

pages/docs.js+9−1 pages/docs/[...slug].js+8

pages/docs.js+9−1

@@ -6,6 +6,7 @@ import { join } from "path";

66import { buildPageTree, getPage } from "../lib/lib";

77import Markdown from "../components/Markdown";

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

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

910

1011const breadcrumbs = (posts, paths) => {

1112 const results = [

@@ -108,12 +109,19 @@ function ContentArea(props) {

108109

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

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

112+ const toggle = () => toggleSearch((state) => !state);

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

114+ const handlers = { search: toggle };

115+ configure({

116+ ignoreTags: [],

117+ });

111118 return (

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

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

113121 <Head>

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

115123 </Head>

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

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

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

118126 <ContentArea

119127 breadcrumbs={breadcrumbs(posts, [])}

pages/docs/[...slug].js+8

@@ -7,6 +7,7 @@ import { join } from "path";

77import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";

88import Markdown from "../../components/Markdown";

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

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

1011

1112const breadcrumbs = (posts, paths) => {

1213 const results = [

@@ -120,11 +121,18 @@ function ContentArea(props) {

120121

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

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

124+ const toggle = () => toggleSearch((state) => !state);

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

126+ const handlers = { search: toggle };

127+ configure({

128+ ignoreTags: [],

129+ });

123130 return (

124131 <>

125132 <Head>

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

127134 </Head>

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

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

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

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