adds doc search (#366)

- adds the algolia docsearch component
- gets rid of the community/github/tiwtter button on mobile

Author: jay-khatri

components/Docs/Docs.module.scss

@@ -1,5 +1,6 @@
 .mainWrapper {
   display: flex;
+  border-top: 1px solid var(--color-divider-on-dark);
 }
 
 .docsCard {
@@ -45,7 +46,7 @@
   flex: 0 0 300px;
   position: sticky;
   height: calc(100vh - 54px);
-  top: 54px;
+  top: 0px;
   z-index: 5;
   max-width: 300px;
 }
@@ -409,17 +410,16 @@ h5:hover .headingCopyIcon {
   min-height: 54px;
   display: flex;
   align-items: stretch;
-  border-bottom: 1px solid var(--color-divider-on-dark);
   border-top: 1px solid var(--color-divider-on-dark);
   background-color: var(--color-primary-background);
   z-index: 10;
 }
 
 .leftInner {
   position: relative;
-  padding: 0 var(--size-medium);
-  flex: 0 0 300px;
+  padding: var(--size-small) var(--size-medium);
   display: flex;
+  border-bottom: 1px solid var(--color-divider-on-dark);
   align-items: center;
 }
 
@@ -634,7 +634,7 @@ h5:hover .headingCopyIcon {
   flex-direction: column;
   position: sticky;
   padding: var(--size-xLarge) var(--size-large);
-  top: 80px;
+  top: 0px;
   height: calc(100vh - 80px);
 }
 

components/common/Navbar/Navbar.tsx

@@ -15,6 +15,10 @@ import ProductDropdown from './ProductDropdown';
 import { GithubPopup } from '../../GithubPopup/GithubPopup';
 import { AiFillGithub } from 'react-icons/ai';
 import { FaDiscord } from 'react-icons/fa';
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+import { useMediaQuery } from '../../MediaQuery/MediaQuery';
 
 const Navbar = ({
   hideFreeTrialText,
@@ -89,7 +93,6 @@ const Navbar = ({
               <Link href={'/'} className={styles.urlStyle}>
                 {isOpen ? <HighlightLogoWhite /> : <HighlightLogo />}
               </Link>
-
               <Typography type="copy3" emphasis={true}>
                 <p
                   className={classNames(styles.navTitle, {
@@ -100,6 +103,11 @@ const Navbar = ({
                   {title}
                 </p>
               </Typography>
+              <DocSearch
+                appId="JGT9LI80J2"
+                indexName="highlight"
+                apiKey="ac336720d8f4f996abe3adee603a1c84"
+              />
             </div>
             <div className={styles.navMenu} onClick={() => setIsOpen(!isOpen)}>
               {isOpen ? (
@@ -108,6 +116,7 @@ const Navbar = ({
                 <AiOutlineMenu />
               )}
             </div>
+
             {isOpen && (
               <div className={styles.mobileMenu}>
                 <ul className={classNames(styles.menuList, styles.header)}>
@@ -191,22 +200,6 @@ const Navbar = ({
                 styles.headerRight
               )}
             >
-              {isDocsPage && (
-                <>
-                  <Link
-                    href="https://discord.gg/yxaXEAqgwN"
-                    className={styles.headerButton}
-                  >
-                    <Typography type="copy2">Community</Typography>
-                  </Link>
-                  <Link
-                    href="https://github.com/highlight/highlight"
-                    className={styles.headerButton}
-                  >
-                    <Typography type="copy2">Github</Typography>
-                  </Link>
-                </>
-              )}
               {!isDocsPage && (
                 <Link href="/docs" className={classNames(styles.headerButton, styles.headerButtonRight)}>
                   <Typography type="copy2">Docs</Typography>

package.json

@@ -12,6 +12,8 @@
     "styles": "yarn typed-scss-modules ./ --watch --ignore '**/node_modules'"
   },
   "dependencies": {
+    "@docsearch/css": "3",
+    "@docsearch/js": "3",
     "@graphcms/rich-text-react-renderer": "^0.6.1",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",

pages/_document.js

@@ -1,25 +1,23 @@
 // pages/_document.js
 
-import Document, {Head, Html, Main, NextScript} from 'next/document'
-import Script from "next/script";
+import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Script from 'next/script'
 
 class HighlightDocument extends Document {
-    render() {
-        return (
-            <Html>
-                <Head>
-                    <link rel="preconnect" href="https://fonts.googleapis.com"></link>
-                    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin></link>
-                    <link
-                        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-                        rel="stylesheet"
-                    ></link>
-                    <Script
-                        src="https://www.googletagmanager.com/gtag/js?id=AW-10833687189"
-                        strategy="afterInteractive"
-                    />
-                    <Script id="google-analytics" strategy="afterInteractive">
-                    {`
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://JGT9LI80J2-dsn.algolia.net" crossorigin />
+          <link rel="preconnect" href="https://fonts.googleapis.com"></link>
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin></link>
+          <link
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+            rel="stylesheet"
+          ></link>
+          <Script src="https://www.googletagmanager.com/gtag/js?id=AW-10833687189" strategy="afterInteractive" />
+          <Script id="google-analytics" strategy="afterInteractive">
+            {`
                         function gtag() {
                             (window.dataLayer || []).push(arguments);
                         }
@@ -31,15 +29,15 @@ class HighlightDocument extends Document {
                         gtag('config', 'AW-10833687189');
                         window.gtag = gtag
                     `}
-                    </Script>
-                    <NextScript/>
-                </Head>
-                <body style={{overflowX: 'hidden'}}>
-                <Main/>
-                </body>
-            </Html>
-        )
-    }
+          </Script>
+          <NextScript />
+        </Head>
+        <body style={{ overflowX: 'hidden' }}>
+          <Main />
+        </body>
+      </Html>
+    )
+  }
 }
 
 export default HighlightDocument

pages/docs/[[...doc]].tsx

@@ -30,6 +30,7 @@ import { Callout } from '../../components/Docs/Callout/Callout'
 import { CodeBlock } from '../../components/common/CodeBlock/CodeBlock'
 import { quickStartContent, QuickStartContent, QuickStartStep, QuickStartType } from '../../components/QuickstartContent/QuickstartContent'
 import Markdown from 'markdown-to-jsx'
+import { useMediaQuery } from '../../components/MediaQuery/MediaQuery'
 
 const DOCS_CONTENT_PATH = path.join(process.cwd(), 'docs-content')
 const DOCS_GITUB_LINK = `https://github.com/highlight/highlight.io/blob/main/docs-content/`
@@ -640,6 +641,8 @@ const DocPage = ({
 
   const currentToc = toc?.children.find((c) => c.tocSlug === relPath?.split("/").filter(r => r)[0])
 
+  const is400 = useMediaQuery(400);
+
   return (
     <>
       <Meta
@@ -655,47 +658,11 @@ const DocPage = ({
         canonical={`/docs/${slug}`}
       />
       <Navbar title="Docs" hideBanner isDocsPage fixed />
-      <div className={styles.contentInnerBar}>
-        <div className={styles.leftInner}>
-          <DocSelect />
-        </div>
-        <div className={styles.centerInner}>
-          <DocSearchbar docPaths={docOptions} />
-          {isSdkDoc && (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                gap: 8,
-              }}
-            >
-              <Link className={styles.sdkSocialItem} href={`${DOCS_GITUB_LINK}${relPath}`} target="_blank">
-                <FaGithub
-                  style={{
-                    height: 20,
-                    width: 20,
-                    flexShrink: 0,
-                  }}
-                ></FaGithub>
-                <Typography type="copy4">Suggest Edits?</Typography>
-              </Link>
-              <Link className={styles.sdkSocialItem} href="https://discord.gg/yxaXEAqgwN" target="_blank">
-                <FaDiscord
-                  style={{
-                    height: 20,
-                    width: 20,
-                    flexShrink: 0,
-                  }}
-                ></FaDiscord>
-                <Typography type="copy4">Community / Support</Typography>
-              </Link>
-            </div>
-          )}
-        </div>
-      </div>
       <main ref={blogBody} className={styles.mainWrapper}>
         <div className={styles.leftSection}>
+          <div className={styles.leftInner}>
+            <DocSelect />
+          </div>
           <div className={styles.tocMenuLarge}>
             {isSdkDoc ? (
               <SdkTableOfContents />
@@ -756,34 +723,6 @@ const DocPage = ({
               [styles.quickStartCenterSection]: isQuickstart,
             })}
           >
-            {!isSdkDoc && !isQuickstart && (
-              <div className={styles.resourcesMobile}>
-                <Link
-                  className={styles.socialItem}
-                  href="https://discord.gg/yxaXEAqgwN"
-                  target="_blank"
-                  style={{
-                    borderBottom: '1px solid #30294E',
-                  }}
-                >
-                  <FaDiscord style={{ height: 20, width: 20 }}></FaDiscord>
-                  <Typography type="copy3">Community / Support</Typography>
-                </Link>
-                <Link className={styles.socialItem} href={`${DOCS_GITUB_LINK}${relPath ?? ''}`} target="_blank">
-                  <FaGithub style={{ height: 20, width: 20 }}></FaGithub>
-                  <Typography type="copy3">Suggest Edits?</Typography>
-                </Link>
-                <Link
-                  style={{ borderTop: '1px solid #30294E' }}
-                  className={styles.socialItem}
-                  href="https://twitter.com/highlightio"
-                  target="_blank"
-                >
-                  <FaTwitter style={{ height: 20, width: 20 }}></FaTwitter>
-                  <Typography type="copy3">Follow us!</Typography>
-                </Link>
-              </div>
-            )}
             <div className={styles.breadcrumb}>
               {!isSdkDoc &&
                 getBreadcrumbs(metadata, docOptions, docIndex).map((breadcrumb, i) =>

styles/globals.scss

@@ -15,6 +15,21 @@
   scrollbar-width: none; /* Firefox */
 }
 
+.DocSearch-Button {
+  background-color: #0d0225 !important;
+  border: 1px solid var(--divider-on-dark) !important;
+}
+.DocSearch-Button:hover {
+  border: 1px solid var(--copy-on-dark) !important;
+  box-shadow: none !important;
+  border: 1px solid var(--copy-on-light) !important;
+  color: var(--copy-on-light) !important;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: var(--copy-on-light) !important;
+}
+
 :root {
   --color-purple-100: #ede9fe;
   --color-purple-200: #ddd6fe;
@@ -141,22 +156,17 @@
 
   --max-width: 1200px;
 
-  --box-shadow: 0px 0.9px 1.4px rgba(0, 0, 0, 0.012),
-    0px 2.2px 3.6px rgba(0, 0, 0, 0.018), 0px 4.4px 7.4px rgba(0, 0, 0, 0.022),
-    0px 9.1px 15.3px rgba(0, 0, 0, 0.028), 0px 25px 42px rgba(0, 0, 0, 0.04);
+  --box-shadow: 0px 0.9px 1.4px rgba(0, 0, 0, 0.012), 0px 2.2px 3.6px rgba(0, 0, 0, 0.018),
+    0px 4.4px 7.4px rgba(0, 0, 0, 0.022), 0px 9.1px 15.3px rgba(0, 0, 0, 0.028), 0px 25px 42px rgba(0, 0, 0, 0.04);
 
-  --box-shadow-2: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
-    0 9px 28px 8px rgb(0 0 0 / 5%);
-  --box-shadow-3: 0 2.8px 2.2px rgba(0, 0, 0, 0.02),
-    0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035),
-    0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
+  --box-shadow-2: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+  --box-shadow-3: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),
+    0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05),
     0 100px 80px rgba(0, 0, 0, 0.07);
 
-  --header-font-family: 'Poppins', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-    'Noto Sans', sans-serif;
-  --body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  --header-font-family: 'Poppins', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --monospace-font-family: 'Roboto Mono', monospace;
 
   --button-border-radius: var(--size-xSmall);