feat: 🎸 search

gatsby-config.js

@@ -130,5 +130,53 @@ module.exports = {
     },
     'gatsby-plugin-sitemap',
     'gatsby-plugin-meta-redirect',
+    {
+      resolve: 'gatsby-plugin-local-search',
+      options: {
+        name: 'learn-pages',
+        engine: 'flexsearch',
+        engineOptions: 'speed',
+        query: `
+        {
+          allMdx (filter: {frontmatter: {category: {eq: "learn"}}}){
+            edges {
+              node {
+                fields {
+                  slug
+                }
+                id
+                rawBody
+                frontmatter {
+                  title
+                  description
+                  category
+                }
+
+              }
+
+            }
+          }
+        }        
+        `,
+
+        ref: 'id',
+        index: ['title', 'body', 'description', 'slug'],
+        store: ['id', 'title', 'body', 'description', 'slug'],
+        normalizer: ({ error, data }) => {
+          if (error) {
+            throw error;
+          }
+          return data.allMdx.edges.map(node => {
+            return {
+              id: node.node.id,
+              title: node.node.frontmatter.title,
+              body: node.node.rawBody,
+              description: node.node.frontmatter.description,
+              slug: node.node.fields.slug,
+            };
+          });
+        },
+      },
+    },
   ],
 };

package.json

@@ -24,9 +24,11 @@
     "gatsby": "^3.14.5",
     "gatsby-plugin-canonical-urls": "^3.14.0",
     "gatsby-plugin-catch-links": "^3.14.0",
+    "framer-motion": "^4.1.17",
     "gatsby-plugin-dark-mode": "^1.1.2",
     "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-mdx": "^2.14.0",
+    "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-meta-redirect": "^1.1.1",
     "gatsby-plugin-offline": "^4.14.0",
     "gatsby-plugin-react-helmet": "^4.14.0",
@@ -44,13 +46,19 @@
     "highlight.js": "^11.3.1",
     "intersection-observer": "^0.12.0",
     "node-fetch": "^2.6.6",
+    "material-design-icons": "^3.0.1",
     "prism-react-renderer": "^1.2.1",
     "prismjs": "^1.25.0",
     "react": "^17.0.2",
+    "react-click-outside-hook": "^1.1.1",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.0.0",
     "react-icons": "^4.3.1",
+    "react-loader-spinner": "^4.0.0",
+    "react-lunr": "^1.1.0",
+    "react-spinners": "^0.11.0",
     "react-tabs": "3.2.2",
+    "react-use-flexsearch": "^0.1.1",
     "throttle-debounce": "^3.0.1",
     "typescript": "4.4.4"
   },
@@ -96,6 +104,7 @@
     "@types/jest": "^27.0.2",
     "@types/react-dom": "^17.0.10",
     "@types/react-helmet": "6.1.4",
+    "@types/react-click-outside-hook": "^1.0.0",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",

src/components/Header/__tests__/__snapshots__/header.test.tsx.snap

@@ -83,6 +83,9 @@ exports[`Tests for Header component Theme color switcher skips rendering in case
         <ul
           class="right-container"
         >
+          <li
+            class="nav__tabs"
+          />
           <li
             class="nav__tabs nav__tabs--right"
           />
@@ -201,6 +204,9 @@ exports[`Tests for Header component renders correctly 1`] = `
         <ul
           class="right-container"
         >
+          <li
+            class="nav__tabs"
+          />
           <li
             class="nav__tabs nav__tabs--right"
           >
@@ -340,6 +346,9 @@ exports[`Tests for Header component renders shorter menu items for mobile 1`] =
         <ul
           class="right-container"
         >
+          <li
+            class="nav__tabs"
+          />
           <li
             class="nav__tabs nav__tabs--right"
           >

src/components/Header/index.tsx

@@ -4,6 +4,7 @@ import { ThemeToggler } from 'gatsby-plugin-dark-mode';
 import logoLight from '../../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../../images/logos/nodejs-logo-dark-mode.svg';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
+import SearchBar from '../SearchBar';
 
 const Header = (): JSX.Element => {
   const isMobile = useMediaQuery('(max-width: 870px)');
@@ -87,6 +88,12 @@ const Header = (): JSX.Element => {
 
         <div className="nav__endwrapper">
           <ul className="right-container">
+            <li className="nav__tabs">
+              {typeof window !== `undefined` &&
+              window.location.pathname.includes('learn') ? (
+                <SearchBar />
+              ) : null}
+            </li>
             <li className="nav__tabs nav__tabs--right">
               <ThemeToggler>
                 {({

src/components/Layout/__tests__/__snapshots__/centered-layout.test.tsx.snap

@@ -83,6 +83,9 @@ exports[`CenteredLayout component renders correctly with footer 1`] = `
         <ul
           class="right-container"
         >
+          <li
+            class="nav__tabs"
+          />
           <li
             class="nav__tabs nav__tabs--right"
           >
@@ -370,6 +373,9 @@ exports[`CenteredLayout component renders correctly without footer 1`] = `
         <ul
           class="right-container"
         >
+          <li
+            class="nav__tabs"
+          />
           <li
             class="nav__tabs nav__tabs--right"
           >

src/components/Layout/__tests__/__snapshots__/layout.test.tsx.snap

@@ -86,6 +86,9 @@ exports[`Layout component renders correctly with data 1`] = `
           <ul
             class="right-container"
           >
+            <li
+              class="nav__tabs"
+            />
             <li
               class="nav__tabs nav__tabs--right"
             >

src/components/Layout/__tests__/__snapshots__/page-layout.test.tsx.snap

@@ -86,6 +86,9 @@ exports[`PageLayout component renders correctly with data 1`] = `
           <ul
             class="right-container"
           >
+            <li
+              class="nav__tabs"
+            />
             <li
               class="nav__tabs nav__tabs--right"
             >

src/components/SearchBar/SearchBar.scss

@@ -0,0 +1,84 @@
+.searchBarContainer {
+  background-color: var(--color-fill-top-nav);
+  border-radius: 6px;
+  box-shadow: 0px 2px 12px 3px rgba(153, 204, 125, 0.14);
+  display: flex;
+  flex-direction: column;
+  height: 3.8em;
+  width: 34em;
+}
+
+.searchInputContainer {
+  align-items: center;
+  display: flex;
+  min-height: 4em;
+  padding: 2px 15px;
+  position: relative;
+  width: 100%;
+}
+
+.inputText {
+  background-color: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-body3);
+  font-weight: 500;
+  height: 100%;
+  outline: none;
+  width: 100%;
+  &:focus {
+    outline: none;
+    &::placeholder {
+      opacity: 0;
+    }
+  }
+
+  &::placeholder {
+    color: var(--color-text-primary);
+    transition: all 250ms ease-in-out;
+  }
+}
+
+.closeIcon {
+  position: relative;
+  right: 10px;
+  top: 5px;
+}
+
+.searchIcon {
+  color: var(--color-brand-primar);
+  font-size: 27px;
+  margin-right: 10px;
+  margin-top: 6px;
+  vertical-align: middle;
+}
+
+.searchContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.loadingWrapper {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.warningMessage {
+  align-self: center;
+  color: var(--color-text-primary);
+  display: flex;
+  font-size: 14px;
+  justify-self: center;
+}
+
+.resultItem {
+  color: var(--color-text-primary);
+  list-style-type: none;
+}

src/components/SearchBar/SearchInput.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useClickOutside } from 'react-click-outside-hook';
+import { Link } from 'gatsby';
+import { useFlexSearch } from 'react-use-flexsearch';
+import { SearchResult } from '../../types';
+import { SearchProps } from '.';
+
+const containerTransition = { type: 'spring', damping: 22, stiffness: 150 };
+const containerVariants = {
+  expanded: {
+    height: '30em',
+  },
+  collapsed: {
+    height: '3.8em',
+  },
+};
+
+const SearchInput = ({ localSearchLearnPages }: SearchProps): JSX.Element => {
+  const { index, store } = localSearchLearnPages;
+  const [query, setQuery] = useState('');
+  const [noResults, setNoResults] = useState(false);
+
+  const results = useFlexSearch(query, index, store);
+
+  const isEmpty = !results || results.length === 0;
+  const [isExpanded, setExpanded] = useState(false);
+  const [parentRef, isClickedOutside] = useClickOutside();
+
+  const changeHandler = (e: {
+    preventDefault: () => void;
+    target: { value: React.SetStateAction<string> };
+  }) => {
+    e.preventDefault();
+    if (e.target.value === '') {
+      setNoResults(false);
+    }
+    setQuery(e.target.value);
+  };
+
+  const expandContainer = () => {
+    setExpanded(true);
+  };
+
+  const collapseContainer = () => {
+    setExpanded(false);
+    setQuery('');
+    setNoResults(false);
+  };
+
+  useEffect(() => {
+    if (isClickedOutside) {
+      collapseContainer();
+    }
+  }, [isClickedOutside]);
+
+  return (
+    <motion.div
+      className="searchBarContainer"
+      animate={isExpanded ? 'expanded' : 'collapsed'}
+      variants={containerVariants}
+      transition={containerTransition}
+      ref={parentRef}
+    >
+      <div className="searchInputContainer">
+        <div className="searchIcon material-icons">search</div>
+        <input
+          autoComplete="off"
+          className="inputText"
+          name="query"
+          value={query}
+          onChange={changeHandler}
+          placeholder="search"
+          onFocus={expandContainer}
+        />
+        <AnimatePresence>
+          {isExpanded && (
+            <motion.span
+              className="material-icons closeIcon"
+              key="close-icon"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={collapseContainer}
+              transition={{ duration: 0.2 }}
+            >
+              close
+            </motion.span>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {isExpanded && (
+        <div className="searchContent">
+          {/* loading state with an expanded area for the results */}
+          {isEmpty && !noResults && (
+            <div className="loadingWrapper">
+              <div className="warningMessage">Start typing to Search</div>
+            </div>
+          )}
+          {/* success state */}
+          {!isEmpty && (
+            <>
+              {results.map((result: SearchResult) => (
+                <ul key={result.id}>
+                  <li className="resultItem">
+                    <Link to={`/learn/${result.slug}`}>{result.title}</Link>
+                  </li>
+                </ul>
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+export default SearchInput;