timc1 · timc1 · Sep 11, 2021 · Sep 10, 2021 · Sep 10, 2021 · Sep 10, 2021
diff --git a/example/dist/index.html b/example/dist/index.html
@@ -7,37 +7,6 @@
 </head>
 
 <body>
-  <style>
-    * {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    :root {
-      --background: rgb(252, 252, 252);
-      --a1: rgba(0 0 0 / .05);
-      --a2: rgba(0 0 0 / .1);
-      --foreground: rgb(28, 28, 29);
-      --shadow: 0px 6px 20px rgb(0 0 0 / 20%);
-    }
-
-    html[data-theme-dark]:root {
-      --background: rgb(28, 28, 29);
-      --a1: rgb(53, 53, 54);
-      --a2: rgba(255 255 255 / .1);
-      --foreground: rgb(252, 252, 252);
-      --shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
-    }
-
-    html {
-      background: var(--background);
-      color: var(--foreground);
-    }
-
-    kbd {
-      font-family: monospace;
-    }
-  </style>
   <div id="root"></div>
   <script src="index.js"></script>
 </body>

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,8 +1,13 @@
+import "./index.scss";
 import * as React from "react";
 import { KBarContent } from "../../src/KBarContent";
 import { KBarProvider } from "../../src/KBarContextProvider";
 import KBarResults from "../../src/KBarResults";
 import KBarSearch from "../../src/KBarSearch";
+import { Switch, Route, useHistory } from "react-router-dom";
+import Layout from "./Layout";
+import Blog from "./Blog";
+import Home from "./Home";
 
 const searchStyles = {
   padding: "12px 16px",
@@ -16,20 +21,9 @@ const searchStyles = {
 };
 
 const App = () => {
+  const history = useHistory();
   return (
-    <>
-      <h1>kbar</h1>
-      <ul>
-        <li>cmd+k to toggle menu</li>
-        <li>
-          backspace when in a nested path to navigate back to previous path;
-          e.g. search blog
-        </li>
-        <li>
-          keyboard shortcuts registered; e.g. hit `t` when kbar is hidden to
-          trigger the Twitter action
-        </li>
-      </ul>
+    <Layout>
       <KBarProvider
         actions={{
           searchBlogAction: {
@@ -40,29 +34,37 @@ const App = () => {
             section: "",
             children: ["blogPost1", "blogPost2"],
           },
+          homeAction: {
+            id: "homeAction",
+            name: "Home",
+            shortcut: ["h"],
+            keywords: "back",
+            section: "Navigation",
+            perform: () => history.push("/"),
+          },
           navBlogAction: {
             id: "navBlogAction",
             name: "Blog",
             shortcut: ["b"],
             keywords: "writing work",
             section: "Navigation",
-            perform: () => window.alert("nav -> blog"),
+            perform: () => history.push("/blog"),
           },
           contactAction: {
             id: "contactAction",
             name: "Contact",
             shortcut: ["c"],
             keywords: "email hello",
             section: "Navigation",
-            perform: () => window.alert("nav -> contact"),
+            perform: () => history.push("/contact"),
           },
           workAction: {
             id: "workAction",
             name: "Work",
             shortcut: ["w"],
             keywords: "projects",
             section: "Navigation",
-            perform: () => window.alert("nav -> work"),
+            perform: () => history.push("/work"),
           },
           twitterAction: {
             id: "twitterAction",
@@ -123,7 +125,7 @@ const App = () => {
         options={{
           animations: {
             enterMs: 200,
-            exitMs: 200,
+            exitMs: 100,
             maxContentHeight: 400,
           },
         }}
@@ -153,8 +155,25 @@ const App = () => {
             )}
           />
         </KBarContent>
+        <Switch>
+          <Route path="/about">
+            <div>About</div>
+          </Route>
+          <Route path="/blog">
+            <Blog />
+          </Route>
+          <Route path="/contact">
+            <div>Contact</div>
+          </Route>
+          <Route path="/work">
+            <div>Work</div>
+          </Route>
+          <Route path="/">
+            <Home />
+          </Route>
+        </Switch>
       </KBarProvider>
-    </>
+    </Layout>
   );
 };
 

diff --git a/example/src/Blog.tsx b/example/src/Blog.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+import useRegisterActions from "../../src/useRegisterActions";
+
+export default function Blog() {
+  useRegisterActions([
+    {
+      id: "dynamicAction1",
+      name: "Action only visible in Blog",
+      shortcut: [],
+      keywords: "",
+      perform: () => window.alert("dynamic action"),
+    },
+    {
+      id: "dynamicAction2",
+      name: "Another action only visible in Blog",
+      shortcut: [],
+      keywords: "",
+      perform: () => window.alert("dynamic action"),
+    },
+  ]);
+
+  return <div>Blog</div>;
+}
diff --git a/example/src/Home.tsx b/example/src/Home.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export default function Home() {
+  return (
+    <>
+      <h1>kbar</h1>
+      <ul>
+        <li>cmd+k to toggle menu</li>
+        <li>
+          backspace when in a nested path to navigate back to previous path;
+          e.g. search blog
+        </li>
+        <li>
+          keyboard shortcuts registered; e.g. hit `t` when kbar is hidden to
+          trigger the Twitter action
+        </li>
+      </ul>
+    </>
+  );
+}
diff --git a/example/src/Layout.module.scss b/example/src/Layout.module.scss
@@ -0,0 +1,3 @@
+.wrapper {
+  padding: 48px;
+}
diff --git a/example/src/Layout.tsx b/example/src/Layout.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+import styles from "./Layout.module.scss";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function Layout(props: Props) {
+  return <div className={styles.wrapper}>{props.children}</div>;
+}
diff --git a/example/src/fonts/Inter-Bold.woff2 b/example/src/fonts/Inter-Bold.woff2
diff --git a/example/src/fonts/Inter-Regular.woff2 b/example/src/fonts/Inter-Regular.woff2
diff --git a/example/src/index.scss b/example/src/index.scss
@@ -0,0 +1,119 @@
+@font-face {
+  font-family: "Inter";
+  src: url("./fonts/Inter-Bold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Inter";
+  src: url("./fonts/Inter-Regular.woff2") format("woff2");
+  font-weight: 400;
+}
+
+// https://piccalil.li/blog/a-modern-css-reset/
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+  font-size: 16px;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+* {
+  font-family: "Inter";
+  -webkit-font-smoothing: antialiased;
+}
+
+:root {
+  --background: rgb(252, 252, 252);
+  --a1: rgba(0 0 0 / 0.05);
+  --a2: rgba(0 0 0 / 0.1);
+  --foreground: rgb(28, 28, 29);
+  --shadow: 0px 6px 20px rgb(0 0 0 / 20%);
+}
+
+html[data-theme-dark]:root {
+  --background: rgb(28, 28, 29);
+  --a1: rgb(53, 53, 54);
+  --a2: rgba(255 255 255 / 0.1);
+  --foreground: rgb(252, 252, 252);
+  --shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
+}
+
+html {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+kbd {
+  font-family: monospace;
+}
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,10 +1,13 @@
-import React from "react";
+import * as React from "react";
 import { render } from "react-dom";
 import App from "./App";
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 
 render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/example/webpack.config.cjs b/example/webpack.config.cjs
@@ -9,9 +9,10 @@ module.exports = {
   entry: path.resolve(__dirname, "src/index.tsx"),
   output: {
     filename: "index.js",
-    path: path.resolve(__dirname, "src/dist"),
+    path: path.resolve(__dirname, "dist"),
   },
   devServer: {
+    historyApiFallback: true,
     static: path.resolve(__dirname, "dist"),
     hot: true,
   },
@@ -33,6 +34,14 @@ module.exports = {
           loader: "tsx",
         },
       },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "asset/resource",
+      },
     ],
   },
 };
diff --git a/example/webpack.prod.cjs b/example/webpack.prod.cjs
@@ -29,6 +29,14 @@ module.exports = {
           loader: "tsx",
         },
       },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+        use: ["file-loader"],
+      },
     ],
   },
 };