Add page filtering

src/components/CommandMenu/CommandMenu.tsx

@@ -8,6 +8,7 @@ import VideoIcon from '../../icons/video.svg';
 import { httpGet } from '../../lib/http';
 import { useKeydown } from '../../hooks/use-keydown';
 import { isLoggedIn } from '../../lib/jwt';
+import { useOutsideClick } from '../../hooks/use-outside-click';
 
 type PageType = {
   url: string;
@@ -45,6 +46,7 @@ function shouldShowPage(page: PageType) {
 
 export function CommandMenu() {
   const inputRef = useRef<HTMLInputElement>(null);
+  const modalRef = useRef<HTMLInputElement>(null);
   const [isActive, setIsActive] = useState(false);
   const [allPages, setAllPages] = useState<PageType[]>([]);
   const [searchResults, setSearchResults] = useState<PageType[]>(defaultPages);
@@ -55,6 +57,10 @@ export function CommandMenu() {
     setIsActive(true);
   });
 
+  useOutsideClick(modalRef, () => {
+    setIsActive(false);
+  });
+
   useEffect(() => {
     if (!isActive || !inputRef.current) {
       return;
@@ -105,7 +111,7 @@ export function CommandMenu() {
   return (
     <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
       <div className="relative top-0 h-full w-full max-w-lg p-2 sm:top-20 md:h-auto">
-        <div className="relative rounded-lg bg-white shadow">
+        <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
           <input
             ref={inputRef}
             autofocus={true}
@@ -168,10 +174,7 @@ export function CommandMenu() {
                         <span class="mr-2 text-gray-400">{page.group}</span>
                       )}
                       {page.icon && (
-                        <img
-                          src={page.icon}
-                          class="mr-2 h-4 w-4"
-                        />
+                        <img src={page.icon} class="mr-2 h-4 w-4" />
                       )}
                       {page.title}
                     </a>

src/hooks/use-outside-click.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect } from 'preact/hooks';
 
 export function useOutsideClick(ref: any, callback: any) {
   useEffect(() => {

src/pages/pages.json.ts

@@ -22,12 +22,12 @@ export async function get() {
         group: 'Best Practices',
       })),
       ...guides.map((guide) => ({
-        url: `/${guide.id}`,
+        url: `/guides/${guide.id}`,
         title: guide.frontmatter.title,
         group: 'Guides',
       })),
       ...videos.map((guide) => ({
-        url: `/${guide.id}`,
+        url: `/videos/${guide.id}`,
         title: guide.frontmatter.title,
         group: 'Videos',
       })),