Implement search

docs/sliver-docs/components/markdown.tsx

@@ -0,0 +1,125 @@
+import CodeViewer, { CodeSchema } from "@/components/code";
+import { Themes } from "@/util/themes";
+import { useTheme } from "next-themes";
+import Image from "next/image";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export type MarkdownProps = {
+  markdown: string;
+};
+
+const MarkdownViewer = (props: MarkdownProps) => {
+  const { theme } = useTheme();
+
+  return (
+    <div
+      className={
+        theme === Themes.DARK ? "prose dark:prose-invert" : "prose prose-slate"
+      }
+    >
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          a(props) {
+            const { href, children, ...rest } = props;
+            const url = new URL(href || "");
+            if (url.protocol !== "http:" && url.protocol !== "https:") {
+              return <></>;
+            }
+            if (url.host === "sliver.sh") {
+              return (
+                <a
+                  {...rest}
+                  href={url.toString()}
+                  className="text-primary hover:text-primary-dark"
+                >
+                  {children}
+                </a>
+              );
+            }
+            return (
+              <a
+                {...rest}
+                href={url.toString()}
+                rel="noopener noreferrer"
+                target="_blank"
+                className="text-primary hover:text-primary-dark"
+              >
+                {children}
+              </a>
+            );
+          },
+
+          pre(props) {
+            // We need to look at the child nodes to avoid wrapping
+            // a monaco code block in a <pre> tag
+            const { children, className, node, ...rest } = props;
+            const childClass = (children as any)?.props?.className;
+            if (
+              childClass &&
+              childClass.startsWith("language-") &&
+              childClass !== "language-plaintext"
+            ) {
+              // @ts-ignore
+              return <div {...rest}>{children}</div>;
+            }
+
+            return (
+              <pre {...rest} className={className}>
+                {children}
+              </pre>
+            );
+          },
+
+          img(props) {
+            const { src, alt, ...rest } = props;
+            return (
+              // @ts-ignore
+              <Image
+                {...rest}
+                src={src || ""}
+                alt={alt || ""}
+                width={500}
+                height={500}
+                className="w-full rounded-medium"
+              />
+            );
+          },
+
+          code(props) {
+            const { children, className, node, ...rest } = props;
+            const langTag = /language-(\w+)/.exec(className || "");
+            const lang = langTag ? langTag[1] : "plaintext";
+            if (lang === "plaintext") {
+              return (
+                <span className="prose-sm">
+                  <code {...rest} className={className}>
+                    {children}
+                  </code>
+                </span>
+              );
+            }
+            return (
+              <CodeViewer
+                className="min-h-[250px]"
+                key={`${Math.random()}`}
+                fontSize={11}
+                script={
+                  {
+                    script_type: lang,
+                    source_code: (children as string) || "",
+                  } as CodeSchema
+                }
+              />
+            );
+          },
+        }}
+      >
+        {props.markdown}
+      </Markdown>
+    </div>
+  );
+};
+
+export default MarkdownViewer;

docs/sliver-docs/components/navbar.tsx

@@ -1,9 +1,16 @@
 import { SliversIcon } from "@/components/icons/slivers";
+import { useSearchContext } from "@/util/search-context";
 import { Themes } from "@/util/themes";
-import { faHome, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import {
+  faHome,
+  faMoon,
+  faSearch,
+  faSun,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Button,
+  Input,
   Link,
   Navbar,
   NavbarBrand,
@@ -18,12 +25,15 @@ export type TopNavbarProps = {};
 
 export default function TopNavbar(props: TopNavbarProps) {
   const router = useRouter();
+  const search = useSearchContext();
   const { theme, setTheme } = useTheme();
   const lightDarkModeIcon = React.useMemo(
     () => (theme === Themes.DARK ? faSun : faMoon),
     [theme]
   );
 
+  const [query, setQuery] = React.useState("");
+
   return (
     <Navbar
       isBordered
@@ -88,6 +98,21 @@ export default function TopNavbar(props: TopNavbarProps) {
       </NavbarContent>
 
       <NavbarContent as="div" justify="end">
+        <Input
+          size="sm"
+          placeholder="Search..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onClear={() => setQuery("")}
+          startContent={<FontAwesomeIcon icon={faSearch} />}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              router.push(`/search`, { query: { search: query } });
+              setQuery("");
+            }
+          }}
+        />
+
         <Button
           variant="light"
           onPress={() => {

docs/sliver-docs/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@types/lunr": "^2.3.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

docs/sliver-docs/pages/_app.tsx

@@ -1,5 +1,7 @@
 import Navbar from "@/components/navbar";
 import "@/styles/globals.css";
+import { Docs } from "@/util/docs";
+import { SearchContext, SearchCtx } from "@/util/search-context";
 import { Themes } from "@/util/themes";
 import { NextUIProvider } from "@nextui-org/react";
 import {
@@ -12,6 +14,7 @@ import type { AppProps } from "next/app";
 import React from "react";
 
 export default function App({ Component, pageProps }: AppProps) {
+  // Initialize theme
   const { theme, setTheme } = useTheme();
   function getThemeState(): Themes {
     if (typeof window !== "undefined") {
@@ -22,15 +25,30 @@ export default function App({ Component, pageProps }: AppProps) {
     return Themes.DARK;
   }
 
+  // Initialize search
+  const [search, setSearch] = React.useState(new SearchCtx());
+
+  // Initialize query client
   const [queryClient] = React.useState(() => new QueryClient());
+  queryClient.prefetchQuery({
+    queryKey: ["docs"],
+    queryFn: async (): Promise<Docs> => {
+      const res = await fetch("/docs.json");
+      const docs: Docs = await res.json();
+      search.addDocs(docs);
+      return docs;
+    },
+  });
 
   return (
     <NextUIProvider>
       <NextThemesProvider attribute="class" defaultTheme={getThemeState()}>
         <QueryClientProvider client={queryClient}>
           <HydrationBoundary state={pageProps.dehydratedState}>
-            <Navbar />
-            <Component {...pageProps} />
+            <SearchContext.Provider value={search}>
+              <Navbar />
+              <Component {...pageProps} />
+            </SearchContext.Provider>
           </HydrationBoundary>
         </QueryClientProvider>
       </NextThemesProvider>