[WIP] Global Docs Search

This PR seeks to serve as a base for our work in replacing the search on the docs site with a custom component that's capable of doing contextual search using multiple Algolia indices. It also adds Tailwind to the docs site.

This PR is not meant to be reviewed or merged at this time.

docusaurus.config.js

@@ -30,6 +30,20 @@ const buildVersion = cfg.has("app.buildVersion")
 
 const plugins = ["plugin-image-zoom"]
 
+// Set up Tailwind
+// @ts-ignore
+plugins.push(async (_context, _options) => {
+  return {
+    name: "docusaurus-tailwindcss",
+    configurePostCss(postcssOptions) {
+      // Appends TailwindCSS and AutoPrefixer.
+      postcssOptions.plugins.push(require("tailwindcss"))
+      postcssOptions.plugins.push(require("autoprefixer"))
+      return postcssOptions
+    },
+  }
+})
+
 if (enablePosthog) {
   plugins.push("posthog-docusaurus")
 }
@@ -76,7 +90,7 @@ const config = {
   plugins: plugins,
 
   themeConfig:
-    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    /** @type {import('@docusaurus/theme-classic').Options} */
     ({
       navbar: {
         title: "",

package.json

@@ -28,17 +28,22 @@
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "@types/jest": "^27.4.0",
+    "algoliasearch": "^4.17.0",
+    "autoprefixer": "^10.4.14",
     "clsx": "^1.1.1",
     "config": "^3.3.6",
     "env-cmd": "^10.1.0",
     "file-loader": "^6.2.0",
     "plugin-image-zoom": "ataft/plugin-image-zoom",
+    "postcss": "^8.4.23",
     "posthog-docusaurus": "^1.0.3",
     "prism-react-renderer": "^1.2.1",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-instantsearch-hooks-web": "^6.43.0",
     "react-modal": "^3.14.4",
+    "tailwindcss": "^3.3.2",
     "ts-jest": "^27.1.3",
     "url-loader": "^4.1.1"
   },

src/components/Card.tsx

@@ -13,6 +13,8 @@ export type CardProps = {
   appearance?: "float" | "flush" | "invisible"
   padding?: number | string
   className?: string
+  titleClassName?: string,
+  descriptionClassName?: string,
 }
 
 export const Card: React.FunctionComponent<CardProps> = ({
@@ -26,6 +28,8 @@ export const Card: React.FunctionComponent<CardProps> = ({
   appearance = "float",
   padding,
   className,
+  titleClassName,
+  descriptionClassName,
   children,
 }) => {
   const body = (
@@ -50,9 +54,9 @@ export const Card: React.FunctionComponent<CardProps> = ({
         )}
       </div>
       <div>
-        <h3 className={styles.title}>{title}</h3>
+        <h3 className={clsx(styles.title, titleClassName)}>{title}</h3>
         {(children || description) && (
-          <div className={styles.description}>{children || description}</div>
+          <div className={clsx(styles.description, descriptionClassName)}>{children || description}</div>
         )}
         {tags && (
           <ul className={styles.tags}>

src/components/CardGroup.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import clsx from "clsx"
 import { Card, CardProps } from "./Card"
 import { Grid, GridProps } from "./Grid"
 

src/components/Modal.module.css

@@ -1,5 +1,4 @@
 .mainContainer {
-  max-width: 420px;
   margin: auto;
   background: #f9fbfc;
   padding: 2em;
@@ -11,6 +10,21 @@
   align-self: center;
 }
 
+.mainContainerDefaultWidth {
+  max-width: 420px;
+}
+
+.mainContainerLargeWidth {
+  @apply w-1/2;
+}
+
+.mainContainerDefaultHeight {
+}
+
+.mainContainerLargeHeight {
+  height: 400px;
+}
+
 html[data-theme="dark"] .mainContainer {
   background-color: var(--ifm-background-surface-color);
 }

src/components/Modal.tsx

@@ -1,6 +1,17 @@
 import React, { useEffect } from "react"
 import ModalCmp from "react-modal"
 import styles from "./Modal.module.css"
+import clsx from "clsx"
+
+export enum ModalWidth {
+  DEFAULT = "default",
+  LARGE = "large",
+}
+
+export enum ModalHeight {
+  DEFAULT = "default",
+  LARGE = "large",
+}
 
 interface ModalProps {
   showModal: boolean
@@ -10,6 +21,9 @@ interface ModalProps {
   shouldCloseOnOverlayClick?: boolean
   handleCancelRequest: () => void
   handleAcceptRequest?: () => void
+  width?: ModalWidth,
+  height?: ModalHeight,
+
 }
 
 export const idOfNoticeLink = "notice"
@@ -25,6 +39,8 @@ export const Modal: React.FC<ModalProps> = ({
   shouldCloseOnOverlayClick = true,
   handleCancelRequest,
   handleAcceptRequest,
+  width = ModalWidth.DEFAULT,
+  height = ModalHeight.DEFAULT,
   children,
 }) => {
   const onRequestClose = (e) => {
@@ -82,7 +98,13 @@ export const Modal: React.FC<ModalProps> = ({
       shouldCloseOnEsc={shouldCloseOnEsc}
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       closeTimeoutMS={0}
-      className={styles.mainContainer}
+      className={clsx(
+        styles.mainContainer,
+        width === ModalWidth.LARGE && styles.mainContainerLargeWidth,
+        width === ModalWidth.DEFAULT && styles.mainContainerDefaultWidth,
+        height === ModalHeight.LARGE && styles.mainContainerLargeHeight,
+        height === ModalHeight.DEFAULT && styles.mainContainerDefaultHeight,
+      )}
       overlayClassName={styles.overlay}
     >
       {children}

src/components/MyDocSearch.module.css

@@ -0,0 +1,31 @@
+/* BASIC STRUCTURE */
+
+.SearchInput {
+  align-items: center;
+  background: var(--docsearch-searchbox-background);
+  border: 0;
+  border-radius: 40px;
+  color: var(--docsearch-muted-color);
+  /* cursor: pointer; */
+  display: flex;
+  font-weight: 500;
+  height: 36px;
+  justify-content: space-between;
+  padding: 0 8px;
+  -webkit-user-select: none;
+  user-select: none;
+  width: 100%;
+  background-color: gainsboro;
+}
+
+.SearchSubmit {
+  display: none;
+}
+
+.SearchReset {
+  display: none;
+}
+
+.searchResult {
+  height: 100px;
+}