feat(website): add search powered by Algolia (pmndrs#993)

ilias500 · Jan 31, 2022 · fc6c8d2 · fc6c8d2
1 parent d6bf0f6
commit fc6c8d2
Show file tree

Hide file tree

Showing 21 changed files with 793 additions and 211 deletions.
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -1,5 +1,47 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 require('dotenv').config()
 
+const DOCS_QUERY = `
+  query {
+    allMdx {
+      nodes {
+        slug
+        meta: frontmatter {
+          title
+          description
+        }
+        excerpt
+        rawBody
+      }
+    }
+  }
+`
+
+const queries = [
+  {
+    query: DOCS_QUERY,
+    transformer: ({ data }) =>
+      data.allMdx.nodes.map((item) => {
+        const transformedNode = {
+          objectID: item.slug,
+          slug: item.slug,
+          title: item.meta.title,
+          description: item.meta.description,
+          excerpt: item.excerpt,
+          body: item.rawBody.replace(/(<([^>]+)>)/gi, ''),
+        }
+
+        return transformedNode
+      }),
+    indexName: 'Docs',
+    settings: {
+      searchableAttributes: ['title', 'description', 'slug', 'excerpt', 'body'],
+      indexLanguages: ['en'],
+    },
+    mergeSettings: false,
+  },
+]
+
 module.exports = {
   siteMetadata: {
     title: `Jotai, primitive and flexible state management for React`,
@@ -42,6 +84,15 @@ module.exports = {
         failOnError: false,
       },
     },
+    {
+      resolve: `gatsby-plugin-algolia`,
+      options: {
+        appId: process.env.GATSBY_ALGOLIA_APP_ID,
+        apiKey: process.env.ALGOLIA_ADMIN_KEY,
+        queries,
+        skipIndexing: process.env.ALGOLIA_SKIP_INDEXING,
+      },
+    },
     `gatsby-plugin-sitemap`,
     {
       resolve: `gatsby-plugin-google-gtag`,

diff --git a/website/package.json b/website/package.json
@@ -18,8 +18,11 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@radix-ui/react-dialog": "^0.1.5",
+    "algoliasearch": "^4.12.1",
     "classnames": "^2.3.1",
     "gatsby": "^4.6.0",
+    "gatsby-plugin-algolia": "^0.25.0",
     "gatsby-plugin-google-gtag": "^4.6.0",
     "gatsby-plugin-image": "^2.6.0",
     "gatsby-plugin-mdx": "^3.6.0",
@@ -34,7 +37,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-lazyload": "^3.2.0"
+    "react-instantsearch-dom": "^6.21.1"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.4.0",

diff --git a/website/src/atoms/index.js b/website/src/atoms/index.js
@@ -2,15 +2,10 @@ import { atom } from 'jotai'
 import { atomWithImmer } from 'jotai/immer'
 import { atomWithStorage } from 'jotai/utils'
 
-// Website state
 export const menuAtom = atom(false)
+export const searchAtom = atom(false)
 
-// Core demo state
 export const textAtom = atom('hello')
 export const uppercaseAtom = atom((get) => get(textAtom).toUpperCase())
-
-// Utilities demo state
 export const darkModeAtom = atomWithStorage('darkMode', false)
-
-// Integrations demo state
 export const countAtom = atomWithImmer(0)
diff --git a/website/src/components/button.js b/website/src/components/button.js
@@ -31,7 +31,7 @@ export const Button = ({
   const iconClassNames = cx(
     'flex-shrink-0 object-contain fill-current',
     !small ? 'w-6 h-6' : 'w-4 h-4',
-    !dark ? 'text-gray-600' : 'text-gray-300'
+    !dark ? 'text-gray-700' : 'text-gray-300'
   )
 
   if (onClick && to) {
@@ -77,7 +77,7 @@ export const Button = ({
         <span>{children}</span>
       </Link>
     )
-  } else if (type) {
+  } else {
     return (
       <button
         type={type}
@@ -89,6 +89,4 @@ export const Button = ({
       </button>
     )
   }
-
-  return null
 }
diff --git a/website/src/components/code-sandbox.js b/website/src/components/code-sandbox.js
@@ -1,19 +1,16 @@
-import LazyLoad from 'react-lazyload'
-
 export const CodeSandbox = ({ id, tests }) => {
   return (
     <div className="mb-8 overflow-hidden shadow-lg rounded-md sm:rounded-lg border-b border-gray-200">
-      <LazyLoad height={400} once>
-        <iframe
-          title={id}
-          className="w-full h-[400px]"
-          src={`https://codesandbox.io/embed/${id}?codemirror=1&fontsize=14&hidenavigation=1&theme=light&hidedevtools=1${
-            tests ? '&previewwindow=tests' : ''
-          }`}
-          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-        />
-      </LazyLoad>
+      <iframe
+        title={id}
+        className="w-full h-[400px]"
+        src={`https://codesandbox.io/embed/${id}?codemirror=1&fontsize=14&hidenavigation=1&theme=light&hidedevtools=1${
+          tests ? '&previewwindow=tests' : ''
+        }`}
+        allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+        sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+        loading="lazy"
+      />
     </div>
   )
 }
diff --git a/website/src/components/credits.js b/website/src/components/credits.js
@@ -24,7 +24,7 @@ export const Credits = () => {
         <div className="inline-flex items-center space-x-1">
           <span>website by</span>
           <img
-            src="https://storage.googleapis.com/candycode/candycode.png"
+            src="https://storage.googleapis.com/candycode/candycode.svg"
             alt="candycode alternative graphic design web development agency San Diego"
             style={{ height: 15 }}
           />

diff --git a/website/src/components/docs.js b/website/src/components/docs.js
@@ -8,9 +8,7 @@ export const Docs = ({ className = '', ...rest }) => {
 
   const setIsMenuOpen = useUpdateAtom(menuAtom)
 
-  const allDocs = data.allMdx.nodes
-    .filter((item) => item.meta.nav !== null)
-    .sort(sortDocs)
+  const allDocs = data.allMdx.nodes.filter(checkDocs).sort(sortDocs)
   const navLinks = parseDocs(allDocs)
 
   return (
@@ -55,6 +53,9 @@ const staticQuery = graphql`
     }
   }
 `
+
+const checkDocs = (doc) => doc.meta?.nav !== null
+
 const sortDocs = (a, b) => a.meta.nav - b.meta.nav
 
 const parseDocs = (docs) => {

diff --git a/website/src/components/head.js b/website/src/components/head.js
@@ -4,22 +4,22 @@ import { Helmet } from 'react-helmet'
 export const Head = ({ lang = 'en', title, description, uri }) => {
   const data = useStaticQuery(staticQuery)
 
-  const { gatsby } = data
+  const { site } = data
 
   const htmlAttributes = {
     lang,
   }
 
-  const siteTitle = gatsby.meta.title
-  const siteUrl = gatsby.meta.siteUrl
+  const siteTitle = site.siteMetadata.title
+  const siteUrl = site.siteMetadata.siteUrl
   const siteIcon = `${siteUrl}/favicon.svg`
   const socialMediaCardImage = `${siteUrl}/preview_DRAFT.png`
-  const shortName = gatsby.meta.shortName
+  const shortName = site.siteMetadata.shortName
 
   const pageTitle = title
     ? `${title} — ${title.length <= 10 ? siteTitle : shortName}`
     : siteTitle
-  const pageDescription = description || gatsby.meta.description
+  const pageDescription = description || site.siteMetadata.description
   const pageUrl = uri ? `${siteUrl}/${uri}` : siteUrl
 
   return (
@@ -46,8 +46,8 @@ export const Head = ({ lang = 'en', title, description, uri }) => {
 
 const staticQuery = graphql`
   query {
-    gatsby: site {
-      meta: siteMetadata {
+    site {
+      siteMetadata {
         title
         description
         siteUrl

diff --git a/website/src/components/icon.js b/website/src/components/icon.js
diff --git a/website/src/components/index.js b/website/src/components/index.js
@@ -15,6 +15,9 @@ export * from './logo'
 export * from './main'
 export * from './mdx'
 export * from './menu'
+export * from './modal'
+export * from './search-button'
+export * from './search-modal'
 export * from './sidebar'
-export * from './wrapper'
 export * from './stackblitz'
+export * from './wrapper'
diff --git a/website/src/components/layout.js b/website/src/components/layout.js
@@ -1,4 +1,11 @@
-import { Footer, Main, Menu, Sidebar, Wrapper } from '../components'
+import {
+  Footer,
+  Main,
+  Menu,
+  SearchModal,
+  Sidebar,
+  Wrapper,
+} from '../components'
 
 export const Layout = ({ showDocs = false, children }) => {
   return (
@@ -11,6 +18,7 @@ export const Layout = ({ showDocs = false, children }) => {
         </Main>
       </Wrapper>
       <Menu />
+      <SearchModal />
     </>
   )
 }
diff --git a/website/src/components/main.js b/website/src/components/main.js
@@ -1,7 +1,7 @@
 export const Main = ({ children, ...rest }) => {
   return (
     <main
-      className="lg:flex-shrink lg:max-w-prose xl:max-w-4xl 2xl:max-w-5xl lg:mt-8 p-6 sm:p-8 xl:p-16"
+      className="lg:flex-shrink lg:w-full lg:max-w-prose xl:max-w-4xl 2xl:max-w-5xl lg:mt-8 p-6 sm:p-8 xl:p-16"
       {...rest}>
       {children}
     </main>

diff --git a/website/src/components/menu.js b/website/src/components/menu.js
@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { useAtom } from 'jotai'
 import { menuAtom } from '../atoms'
-import { Button, Docs } from '../components'
+import { Button, Docs, SearchButton } from '../components'
 
 export const Menu = () => {
   const [isMenuOpen, setIsMenuOpen] = useAtom(menuAtom)
@@ -48,6 +48,9 @@ export const Menu = () => {
         )}>
         <div className="w-full max-h-full overflow-y-scroll p-8 border border-gray-300 rounded-lg bg-white shadow-2xl !overscroll-none">
           <div className="px-3 pb-16 sm:pb-0">
+            <div className="-mx-3 mb-6">
+              <SearchButton className="w-full" />
+            </div>
             <Docs />
           </div>
           <div className="fixed left-8 sm:left-auto right-8 sm:right-16 bottom-8 sm:bottom-16 z-70">

diff --git a/website/src/components/modal.js b/website/src/components/modal.js
@@ -0,0 +1,18 @@
+import * as Dialog from '@radix-ui/react-dialog'
+
+export const Modal = ({ isOpen, onOpenChange, children, ...rest }) => (
+  <Dialog.Root open={isOpen} onOpenChange={onOpenChange} {...rest}>
+    <Dialog.Portal>
+      <div className="fixed top-0 right-0 bottom-0 w-8 h-full bg-white z-100" />
+      <Dialog.Overlay className="fixed inset-0 z-[1000] flex justify-center bg-black/50 backdrop-blur p-8 sm:p-12 lg:p-32">
+        <div className="w-full max-w-3xl">
+          <Dialog.Content className="min-w-full z-[1001]">
+            <div className="bg-white rounded-lg shadow-xl overflow-hidden">
+              {children}
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Overlay>
+    </Dialog.Portal>
+  </Dialog.Root>
+)