git.iko.soy/urbit.org
on master help sign in
docs: add hotkeys to search
ab7dbabMatilde Park
pages/docs.js+9−1
compare with master
unifiedsplit
@@ -6,6 +6,7 @@ import { join } from "path";
6import { buildPageTree, getPage } from "../lib/lib";
6import { buildPageTree, getPage } from "../lib/lib";
7import Markdown from "../components/Markdown";
7import Markdown from "../components/Markdown";
8import Search from "../components/Search";
8import Search from "../components/Search";
9+import { configure, GlobalHotKeys } from "react-hotkeys";
9
10
10const breadcrumbs = (posts, paths) => {
11const breadcrumbs = (posts, paths) => {
11 const results = [
12 const results = [
@@ -108,12 +109,19 @@ function ContentArea(props) {
108
109
109export default function DocsLayout({ posts, data, content }) {
110export default function DocsLayout({ posts, data, content }) {
110 const [showSearch, toggleSearch] = useState(false);
111 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+ });
111 return (
118 return (
112 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
119 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
120+ <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
113 <Head>
121 <Head>
114 <title>Documentation / Urbit.org</title>
122 <title>Documentation / Urbit.org</title>
115 </Head>
123 </Head>
116− {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}
124+ {showSearch && <Search toggleSearch={() => toggleSearch(false)} />}
117 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
125 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
118 <ContentArea
126 <ContentArea
119 breadcrumbs={breadcrumbs(posts, [])}
127 breadcrumbs={breadcrumbs(posts, [])}
pages/docs/[...slug].js+8
@@ -7,6 +7,7 @@ import { join } from "path";
7import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
7import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
8import Markdown from "../../components/Markdown";
8import Markdown from "../../components/Markdown";
9import Search from "../../components/Search";
9import Search from "../../components/Search";
10+import { configure, GlobalHotKeys } from "react-hotkeys";
10
11
11const breadcrumbs = (posts, paths) => {
12const breadcrumbs = (posts, paths) => {
12 const results = [
13 const results = [
@@ -120,11 +121,18 @@ function ContentArea(props) {
120
121
121export default function DocsLayout({ posts, data, content, params }) {
122export default function DocsLayout({ posts, data, content, params }) {
122 const [showSearch, toggleSearch] = useState(false);
123 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+ });
123 return (
130 return (
124 <>
131 <>
125 <Head>
132 <Head>
126 <title>{data.title} / Documentation / Urbit.org</title>
133 <title>{data.title} / Documentation / Urbit.org</title>
127 </Head>
134 </Head>
135+ <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
128 {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}
136 {showSearch && <Search toggleSearch={() => toggleSearch(!showSearch)} />}
129 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
137 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
130 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
138 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>