feat(nxdev): Search component using Algolia (#5451)

2021-04-29 12:00:21 -04:00 · 2021-04-29 12:00:21 -04:00 · fb22ba48b0
commit fb22ba48b0
parent 78fe230dcb
21 changed files with 845 additions and 48 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -25,7 +25,7 @@ commands:
      - checkout
      - when:
          condition:
-            equal: [ << parameters.os >>, windows ]
+            equal: [<< parameters.os >>, windows]
          steps:
            - run: nvm install 12.20
            - run: nvm use 12.20
@ -46,14 +46,14 @@ commands:

      - when:
          condition:
-            equal: [ << parameters.os >>, linux ]
+            equal: [<< parameters.os >>, linux]
          steps:
            - run:
                name: Install PNPM
                command: npm install --prefix=$HOME/.local -g pnpm@5.18.9
      - when:
          condition:
-            equal: [ << parameters.os >>, windows ]
+            equal: [<< parameters.os >>, windows]
          steps:
            - run:
                name: Install PNPM
@ -100,7 +100,7 @@ jobs:
        default: pnpm
    executor: << parameters.os >>
    environment:
-      NX_CLOUD_DISTRIBUTED_EXECUTION: "true"
+      NX_CLOUD_DISTRIBUTED_EXECUTION: 'true'
      SELECTED_CLI: << parameters.cli >>
      NX_E2E_CI_CACHE_KEY: e2e-circleci-<< parameters.os >>-<< parameters.pm >>
    steps:
@ -120,7 +120,7 @@ jobs:
          command: yarn depcheck
      - run:
          name: Run Builds
-          command: npx nx affected --target=build 
+          command: npx nx affected --target=build
      - run:
          name: Run Unit Tests
          command: npx nx affected --target=test
@ -147,7 +147,7 @@ jobs:
        default: pnpm
    executor: << parameters.os >>
    environment:
-      NX_CLOUD_DISTRIBUTED_EXECUTION: "true"
+      NX_CLOUD_DISTRIBUTED_EXECUTION: 'true'
      SELECTED_CLI: << parameters.cli >>
      NX_E2E_CI_CACHE_KEY: e2e-circleci-<< parameters.os >>-<< parameters.pm >>
    steps:
@ -191,4 +191,4 @@ workflows:
      - pr-main:
          filters:
            branches:
-              ignore: master
+              ignore: master
--- a/jest.config.js
+++ b/jest.config.js
@ -25,5 +25,6 @@ module.exports = {
    '<rootDir>/nx-dev/feature-doc-viewer',
    '<rootDir>/nx-dev/data-access-documents',
    '<rootDir>/nx-dev/data-access-menu',
+    '<rootDir>/nx-dev/feature-search',
  ],
 };
--- a/nx-dev/feature-search/.babelrc
+++ b/nx-dev/feature-search/.babelrc
@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}
--- a/nx-dev/feature-search/.eslintrc.json
+++ b/nx-dev/feature-search/.eslintrc.json
@ -0,0 +1,21 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["/nx-dev/feature-search/tsconfig.*?.json"]
+      },
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
--- a/nx-dev/feature-search/README.md
+++ b/nx-dev/feature-search/README.md
@ -0,0 +1,7 @@
+# nx-dev-feature-search
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test nx-dev-feature-search` to execute the unit tests via [Jest](https://jestjs.io).
--- a/nx-dev/feature-search/jest.config.js
+++ b/nx-dev/feature-search/jest.config.js
@ -0,0 +1,9 @@
+module.exports = {
+  displayName: 'nx-dev-feature-search',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/feature-search',
+};
--- a/nx-dev/feature-search/src/index.ts
+++ b/nx-dev/feature-search/src/index.ts
@ -0,0 +1 @@
+export * from './lib/algolia-search';
--- a/nx-dev/feature-search/src/lib/algolia-search.global.css
+++ b/nx-dev/feature-search/src/lib/algolia-search.global.css
@ -0,0 +1,403 @@
+.DocSearch--active {
+  overflow: hidden !important;
+}
+
+.DocSearch-Container {
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.25);
+  padding: 1rem;
+}
+
+@screen sm {
+  .DocSearch-Container {
+    padding: 1.5rem;
+  }
+}
+
+@screen md {
+  .DocSearch-Container {
+    padding: 10vh;
+  }
+}
+
+@screen lg {
+  .DocSearch-Container {
+    padding: 12vh;
+  }
+}
+
+.DocSearch-LoadingIndicator svg {
+  display: none;
+}
+
+.DocSearch-LoadingIndicator {
+  display: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke-width='2' stroke='%23cffafe' /%3E%3Cpath d='M3,12a9,9 0 1,0 18,0a9,9 0 1,0 -18,0' stroke-width='2' stroke='%232663eb' stroke-dasharray='56.5486677646' stroke-dashoffset='37.6991118431' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-size: 100% 100%;
+}
+
+.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
+  display: block;
+}
+
+.DocSearch-Modal {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 47.375rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-radius: 1rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  background: white;
+}
+
+.DocSearch-SearchBar {
+  flex: none;
+  border-bottom: 1px solid theme('colors.gray.200');
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  margin: 0 1.5rem;
+}
+
+.DocSearch-Form {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.DocSearch-Dropdown {
+  flex: auto;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  padding: 0 1.5rem 1.5rem;
+  overflow: auto;
+}
+
+.DocSearch-MagnifierLabel {
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%232663eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  background-size: 100%;
+}
+
+.DocSearch-MagnifierLabel svg {
+  display: none;
+}
+
+.DocSearch-Container--Stalled .DocSearch-MagnifierLabel {
+  display: none;
+}
+
+.DocSearch-Input {
+  appearance: none;
+  background: transparent;
+  height: 4.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: black;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  flex: auto;
+  min-width: 0;
+}
+
+.DocSearch-Input:focus {
+  outline: 2px dotted transparent;
+}
+
+.DocSearch-Input::-webkit-search-cancel-button,
+.DocSearch-Input::-webkit-search-decoration,
+.DocSearch-Input::-webkit-search-results-button,
+.DocSearch-Input::-webkit-search-results-decoration {
+  display: none;
+}
+
+.DocSearch-Reset {
+  display: none;
+}
+
+.DocSearch-Reset::before {
+  content: 'esc';
+}
+
+.DocSearch-Cancel {
+  flex: none;
+  font-size: 0;
+  border-radius: 0.375rem;
+  background-color: theme('colors.gray.50');
+  border: 1px solid theme('colors.gray.300');
+  padding: 0.125rem 0.375rem;
+}
+
+.DocSearch-Cancel::before {
+  content: 'esc';
+  color: theme('colors.gray.400');
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.DocSearch-Reset svg {
+  display: none;
+}
+
+.DocSearch-Hit-source {
+  line-height: 1.5rem;
+  font-weight: bold;
+  color: theme('colors.gray.600');
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.DocSearch-Hit-Container {
+  display: flex;
+  align-items: center;
+  height: 4rem;
+}
+
+.DocSearch-Hit-Tree {
+  display: none;
+}
+
+.DocSearch-Hit-icon {
+  flex: none;
+  margin-right: 0.875rem;
+}
+
+.DocSearch-Hit-icon path {
+  stroke-width: 2px;
+  stroke: #71717a;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon path {
+  stroke: white;
+}
+
+.DocSearch-Hit-content-wrapper {
+  flex: auto;
+  display: flex;
+  flex-direction: column-reverse;
+  min-width: 0;
+}
+
+.DocSearch-Hit-path {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  color: theme('colors.gray.500');
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path {
+  color: theme('colors.blue.200');
+}
+
+.DocSearch-Hit-title {
+  color: black;
+  line-height: 1.5rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title {
+  color: white;
+}
+
+.DocSearch-Hit-title + .DocSearch-Hit-path {
+  margin-bottom: 0.125rem;
+}
+
+.DocSearch-Hit-action {
+  flex: none;
+  margin-left: 0.875rem;
+}
+
+.DocSearch-Hit-action-button {
+  display: flex;
+}
+
+.DocSearch-Hit-action + .DocSearch-Hit-action {
+  margin-left: 0.5rem;
+}
+
+.DocSearch-Hit-action path {
+  stroke-width: 2px;
+  stroke: #71717a;
+}
+
+.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action path {
+  stroke: white;
+}
+
+.DocSearch-Hit > a {
+  display: block;
+  background: theme('colors.gray.50');
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  padding: 0 1.25rem 0 1rem;
+}
+
+.DocSearch-Hit[aria-selected='true'] > a {
+  background: theme('colors.blue.500');
+}
+
+.DocSearch-Hit + .DocSearch-Hit {
+  margin-top: 0.5rem;
+}
+
+.DocSearch-Hit {
+  position: relative;
+}
+
+.DocSearch-Hit--Child {
+  padding-left: 1.75rem;
+}
+
+.DocSearch-Hit--Child::before,
+.DocSearch-Hit--Child + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before {
+  content: '';
+  position: absolute;
+  top: -0.25rem;
+  bottom: -0.25rem;
+  left: 0.5rem;
+  width: 1.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='200' viewBox='0 0 12 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1 0 V 200 M 1 100 H 12' stroke='%23a1a1aa' stroke-width='2'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center left;
+}
+
+.DocSearch-Hit--Child:last-child::before,
+.DocSearch-Hit--Child + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before {
+  background-image: url("data:image/svg+xml,%3Csvg width='12' height='200' viewBox='0 0 12 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1 0 V 89 Q 1 100 12 100' stroke='%23a1a1aa' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
+
+.DocSearch-Hit:not(.DocSearch-Hit--Child) + .DocSearch-Hit--Child::after {
+  content: '';
+  position: absolute;
+  top: -0.25rem;
+  left: 0;
+  width: 1.25rem;
+  height: 0.25rem;
+  background: #fff;
+}
+
+.DocSearch-Hit--Child + .DocSearch-Hit:not(.DocSearch-Hit--Child)::before {
+  top: auto;
+  bottom: calc(100% + 0.25rem);
+  height: calc(100% + 0.25rem);
+  background-color: #fff;
+}
+
+.DocSearch-Hits mark {
+  background: none;
+  color: theme('colors.blue.500');
+}
+
+.DocSearch-Hit[aria-selected='true'] mark {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.DocSearch-Footer {
+  flex: none;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 1.5rem;
+  border-top: 1px solid theme('colors.gray.200');
+  padding: 1.25rem 0;
+}
+
+.DocSearch-Commands {
+  display: none;
+}
+
+.DocSearch-Logo a {
+  display: flex;
+  align-items: center;
+  color: #5d6494;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.DocSearch-Logo svg {
+  color: #5468ff;
+  margin-left: 0.5rem;
+}
+
+.DocSearch-Hit--deleting,
+.DocSearch-Hit--favoriting {
+  opacity: 0;
+  transition: all 250ms linear;
+}
+
+.DocSearch-NoResults .DocSearch-Screen-Icon {
+  display: none;
+}
+
+.DocSearch-Title {
+  font-size: theme('fontSize.lg');
+  line-height: theme('lineHeight.6');
+  margin-bottom: 2.5rem;
+}
+
+.DocSearch-Title strong {
+  color: theme('colors.gray.900');
+  font-weight: 500;
+}
+
+.DocSearch-StartScreen,
+.DocSearch-NoResults {
+  padding-top: 2.5rem;
+  padding-bottom: 1rem;
+}
+
+.DocSearch-StartScreen .DocSearch-Help {
+  font-size: theme('fontSize.lg');
+  line-height: theme('lineHeight.6');
+}
+
+.DocSearch-NoResults-Prefill-List .DocSearch-Help {
+  font-size: theme('fontSize.xs');
+  line-height: theme('lineHeight.4');
+  letter-spacing: theme('letterSpacing.wide');
+  text-transform: uppercase;
+  font-weight: 600;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid theme('colors.gray.200');
+}
+
+.DocSearch-NoResults-Prefill-List li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid theme('colors.gray.200');
+}
+
+.DocSearch-NoResults-Prefill-List button {
+  font-weight: 500;
+  color: theme('colors.blue.600');
+}
+
+.DocSearch-NoResults-Prefill-List + .DocSearch-Help {
+  font-size: theme('fontSize.sm');
+  line-height: theme('lineHeight.5');
+  margin-top: 1rem;
+}
+
+.DocSearch-NoResults-Prefill-List + .DocSearch-Help a {
+  box-shadow: theme('boxShadow.sm');
+  color: theme('colors.blue.700');
+  font-weight: 500;
+}
--- a/nx-dev/feature-search/src/lib/algolia-search.tsx
+++ b/nx-dev/feature-search/src/lib/algolia-search.tsx
@ -0,0 +1,151 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import Link from 'next/link';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
+
+const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control'];
+const ACTION_KEY_APPLE = ['⌘', 'Command'];
+
+function Hit({ hit, children }) {
+  return (
+    <Link href={hit.url}>
+      <a>{children}</a>
+    </Link>
+  );
+}
+
+export function AlgoliaSearch() {
+  const frameworkFilter = `framework:react`; // TODO: @ben Tap into current framework selection
+  const versionFilter = `version:latest`; // TODO: @ben Tap into current version selection
+
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false);
+  const searchButtonRef = useRef();
+  const [initialQuery, setInitialQuery] = useState(null);
+  const [browserDetected, setBrowserDetected] = useState(false);
+  const [actionKey, setActionKey] = useState(ACTION_KEY_DEFAULT);
+
+  const handleOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  const handleInput = useCallback(
+    (e) => {
+      setIsOpen(true);
+      setInitialQuery(e.key);
+    },
+    [setIsOpen, setInitialQuery]
+  );
+
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen: handleOpen,
+    onClose: handleClose,
+    onInput: handleInput,
+    searchButtonRef,
+  });
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+        setActionKey(ACTION_KEY_APPLE);
+      } else {
+        setActionKey(ACTION_KEY_DEFAULT);
+      }
+      setBrowserDetected(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <link
+          rel="preconnect"
+          href="https://BH4D9OD16A-dsn.algolia.net"
+          crossOrigin="true"
+        />
+      </Head>
+      <button
+        type="button"
+        ref={searchButtonRef}
+        onClick={handleOpen}
+        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200 w-full py-2"
+      >
+        <svg
+          width="24"
+          height="24"
+          fill="none"
+          className="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"
+        >
+          <path
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <span>
+          Quick search<span className="hidden sm:inline"> for anything</span>
+        </span>
+        <span
+          style={{ opacity: browserDetected ? '1' : '0' }}
+          className="hidden sm:block text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md"
+        >
+          <span className="sr-only">Press </span>
+          <kbd className="font-sans">
+            <abbr title={actionKey[1]} className="no-underline">
+              {actionKey[0]}
+            </abbr>
+          </kbd>
+          <span className="sr-only"> and </span>
+          <kbd className="font-sans">K</kbd>
+          <span className="sr-only"> to search</span>
+        </span>
+      </button>
+      {isOpen &&
+        createPortal(
+          <DocSearchModal
+            initialQuery={initialQuery}
+            initialScrollY={window.scrollY}
+            searchParameters={{
+              facetFilters: [frameworkFilter, versionFilter],
+              distinct: 1,
+            }}
+            onClose={handleClose}
+            indexName="nx"
+            apiKey="0c9c3fb22624056e7475eddcbcbfbe91"
+            appId="BH4D9OD16A"
+            navigator={{
+              navigate({ suggestionUrl }) {
+                setIsOpen(false);
+                router.push(suggestionUrl);
+              },
+            }}
+            hitComponent={Hit}
+            transformItems={(items) => {
+              return items.map((item) => {
+                // We transform the absolute URL into a relative URL to
+                // leverage Next's preloading.
+                const a = document.createElement('a');
+                a.href = item.url;
+
+                const hash = a.hash === '#content-wrapper' ? '' : a.hash;
+
+                return {
+                  ...item,
+                  url: `${a.pathname}${hash}`,
+                };
+              });
+            }}
+          />,
+          document.body
+        )}
+    </>
+  );
+}
--- a/nx-dev/feature-search/tsconfig.json
+++ b/nx-dev/feature-search/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/nx-dev/feature-search/tsconfig.lib.json
+++ b/nx-dev/feature-search/tsconfig.lib.json
@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"],
+    "lib": ["dom"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
--- a/nx-dev/feature-search/tsconfig.spec.json
+++ b/nx-dev/feature-search/tsconfig.spec.json
@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}
--- a/nx-dev/nx-dev/pages/_app.tsx
+++ b/nx-dev/nx-dev/pages/_app.tsx
@ -2,8 +2,7 @@ import React from 'react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Header, Footer } from '@nrwl/nx-dev/ui/common';
-import 'tailwindcss/tailwind.css';
-import './styles.css';
+import '../styles/main.css';

 export default function CustomApp({ Component, pageProps }: AppProps) {
  return (
--- a/nx-dev/nx-dev/pages/styles.css
+++ b/nx-dev/nx-dev/pages/styles.css
@ -1,4 +0,0 @@
-svg {
-  shape-rendering: crispEdges;
-  text-rendering: optimizeLegibility;
-}
--- a/nx-dev/nx-dev/styles/main.css
+++ b/nx-dev/nx-dev/styles/main.css
@ -0,0 +1,13 @@
+@tailwind base;
+
+/*! purgecss start ignore */
+@import 'nx-dev/feature-search/src/lib/algolia-search.global.css';
+/*! purgecss end ignore */
+
+@tailwind components;
+@tailwind utilities;
+
+svg {
+  shape-rendering: crispEdges;
+  text-rendering: optimizeLegibility;
+}
--- a/nx-dev/ui/common/src/lib/header.tsx
+++ b/nx-dev/ui/common/src/lib/header.tsx
@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';

 /* eslint-disable-next-line */
 export interface headerProps {}
@ -46,39 +47,7 @@ export function Header(props: headerProps) {
          </a>
        </div>
        {/*SEARCH*/}
-        <button
-          type="button"
-          className="group leading-6 font-medium hidden sm:flex items-center justify-center space-x-3 sm:space-x-4 text-gray-500 hover:text-gray-600 transition-colors duration-200 w-full py-2"
-        >
-          <svg
-            width="24"
-            height="24"
-            fill="none"
-            className="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"
-          >
-            <path
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-          <span>
-            Search <span className="hidden lg:inline">for something</span>
-          </span>
-          <span className="hidden md:block text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md">
-            <span className="sr-only">Press </span>
-            <kbd className="font-sans">
-              <abbr title="Command" className="no-underline">
-                ⌘
-              </abbr>
-            </kbd>
-            <span className="sr-only"> and </span>
-            <kbd className="font-sans">K</kbd>
-            <span className="sr-only"> to search</span>
-          </span>
-        </button>
+        <AlgoliaSearch />
        {/*NAVIGATION*/}
        <div className="text-sm flex-shrink-0">
          <nav className="flex items-justified justify-center space-x-1">
--- a/nx.json
+++ b/nx.json
@ -133,7 +133,8 @@
    "nx-dev-data-access-documents": {
      "tags": ["scope:nx-dev", "type:data-access"]
    },
-    "nx-dev-data-access-menu": { "tags": ["scope:nx-dev", "type:data-access"] }
+    "nx-dev-data-access-menu": { "tags": ["scope:nx-dev", "type:data-access"] },
+    "nx-dev-feature-search": { "tags": ["scope:nx-dev", "type:feature"] }
  },
  "affected": { "defaultBase": "master" }
 }
--- a/package.json
+++ b/package.json
@ -251,6 +251,7 @@
  },
  "dependencies": {
    "classnames": "^2.3.1",
+    "@docsearch/react": "^1.0.0-alpha.14",
    "core-js": "^3.6.5",
    "document-register-element": "^1.13.1",
    "gray-matter": "^4.0.2",
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -52,7 +52,8 @@
      ],
      "@nrwl/nx-dev/data-access-menu": [
        "./nx-dev/data-access-menu/src/index.ts"
-      ]
+      ],
+      "@nrwl/nx-dev/feature-search": ["./nx-dev/feature-search/src/index.ts"]
    }
  }
 }
--- a/workspace.json
+++ b/workspace.json
@ -2369,6 +2369,27 @@
          }
        }
      }
+    },
+    "nx-dev-feature-search": {
+      "root": "nx-dev/feature-search",
+      "sourceRoot": "nx-dev/feature-search/src",
+      "projectType": "library",
+      "targets": {
+        "lint": {
+          "executor": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["nx-dev/feature-search/**/*.{ts,tsx,js,jsx}"]
+          }
+        },
+        "test": {
+          "executor": "@nrwl/jest:jest",
+          "outputs": ["coverage/nx-dev/feature-search"],
+          "options": {
+            "jestConfig": "nx-dev/feature-search/jest.config.js",
+            "passWithNoTests": true
+          }
+        }
+      }
    }
  },
  "cli": {
--- a/yarn.lock
+++ b/yarn.lock
@ -2,6 +2,110 @@
 # yarn lockfile v1


+"@algolia/cache-browser-local-storage@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.9.0.tgz#9adf95a143b71219b24fa2874de771b58109c9c2"
+  integrity sha512-H659baxPygLp1ed5Y+kko9nLhhTRtZ6v2k2cs2/WTErAd6XU+OrvTvsEedUprDYUve/t9NLg95Ka9TK8QEQk1w==
+  dependencies:
+    "@algolia/cache-common" "4.9.0"
+
+"@algolia/cache-common@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.9.0.tgz#ec63d71ec201d0d9eb9946bc58f10e430e982b7b"
+  integrity sha512-hBqkLEw1Y7oxEJEVmcdm/s/+KKlvCmSenlX5rrQts5qCNdhdS1QkCvHx8vgFF9J6uliP2TPs+umrrXc+aKsLPw==
+
+"@algolia/cache-in-memory@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.9.0.tgz#14287235b7eff46c0c3dae2f05e7816805948804"
+  integrity sha512-8q9z8tkIrgPenZl+aTc6MOQleLnanVy+Nsz7Uzga5r9Kb7xpqYKNI9rSJYyBzl7KRxock5v6AOUiFgi45eDnDg==
+  dependencies:
+    "@algolia/cache-common" "4.9.0"
+
+"@algolia/client-account@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.9.0.tgz#bf8c23d8c7ff9bfa08b480fa27f96cfb489f3263"
+  integrity sha512-u9cljyqUnlgHIKazeOA2R820pDZFReRVm3AObiGrxhdKVQ44ZOgAlN+NIqA+c19iFdpulzpkPKxU+Uavcky7JQ==
+  dependencies:
+    "@algolia/client-common" "4.9.0"
+    "@algolia/client-search" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
+"@algolia/client-analytics@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.9.0.tgz#4d559ffc9c644684fa152500178eafa1df21ba3d"
+  integrity sha512-5TafTR/uP9X4EpDOvBK1w4cgc3JpKeokPJqD37q46AH1IGI8UO5Gy1H5LxcGmPTIMdMnuSfiYgRJsyoEO1Co0A==
+  dependencies:
+    "@algolia/client-common" "4.9.0"
+    "@algolia/client-search" "4.9.0"
+    "@algolia/requester-common" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
+"@algolia/client-common@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.9.0.tgz#51f9cf66b99e4042647d344bb4dd1cd970de0f81"
+  integrity sha512-Rjk4XMXi6B63jdKQwnGbKwIubB5QIgok+k67QwrgadbqVphHueJ3af3D6i3sRcKBBTmdprFAXn0zX/zaxYBhAQ==
+  dependencies:
+    "@algolia/requester-common" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
+"@algolia/client-recommendation@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-recommendation/-/client-recommendation-4.9.0.tgz#24992ff450d82fa982f8a3c9af7b043532cfa64b"
+  integrity sha512-6y6uyQmmowuBqMkk4iLeBOkd1qtBpfGJ5/di0S041eHQlD0v9WxyhbZyOopn0XxopSLbQaO22u0rjEcla7KYlA==
+  dependencies:
+    "@algolia/client-common" "4.9.0"
+    "@algolia/requester-common" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
+"@algolia/client-search@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.9.0.tgz#806379940d08cb95f562d93e31c2f0478fc040a4"
+  integrity sha512-HFfeUJN6GPHsjfcchmksoqlBLF5gT+jRHmSait4fWtde85eGFyJVL7ubUZD9KjlEjzebmUPPIZ1ixcupaTUBnw==
+  dependencies:
+    "@algolia/client-common" "4.9.0"
+    "@algolia/requester-common" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
+"@algolia/logger-common@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.9.0.tgz#488f23c0758ab0cd79f0fcbbd3691fb216a0b0dc"
+  integrity sha512-OU8lzR1I8R0Qsgk+u4GOSFpEEKZkzPYZP1OXsw92gejW08k5N6kVLzfvVvgNA1KAeZPFXADdH26VBQ/2M9wF3g==
+
+"@algolia/logger-console@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.9.0.tgz#fe6bdd316f163908617874fae9f61e3249ae23a2"
+  integrity sha512-CrBU+E2iA4xXnb1rwX3G1ox9O+N+OjxnWccL75sWr1nQ/kh08TPpV7TYAvQEOFEDj8vV1kPeYEMENulbjmVZSA==
+  dependencies:
+    "@algolia/logger-common" "4.9.0"
+
+"@algolia/requester-browser-xhr@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.9.0.tgz#ae4f39171f74ea3532f66cd39be777eaafe8147d"
+  integrity sha512-KJESXTv4z+mDCn1C9b/azUqPTgIFVL/Y4+Eopz6YBg9Lj0C6KQrsW68w0uLJcGSw9o/qBoKcpUo4QNm4/CwrdQ==
+  dependencies:
+    "@algolia/requester-common" "4.9.0"
+
+"@algolia/requester-common@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.9.0.tgz#e65d6fb08d239d86a0076ad32638fe2d8abedaf6"
+  integrity sha512-8/ljy4/pnB8d4/yTaJQa2t3oKdbsVq9nDXkwhCACVum8tGYSSGpCtpBGln6M4g+QdfBSQxYILTB1wwHLFUstmg==
+
+"@algolia/requester-node-http@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.9.0.tgz#4cb7cf5b1f4228a3128ccb2700b790a6f81ec7e6"
+  integrity sha512-JpkjPXDCgT+Z8G8d/6hxId7+560HeCHoiDcEFr9eWR/kClAOgVwgVH1I64pmH8ucsjL7kdWbkxez7zBzPiV+Tg==
+  dependencies:
+    "@algolia/requester-common" "4.9.0"
+
+"@algolia/transporter@4.9.0":
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.9.0.tgz#8d4cadcee1b848e3b7c3efbfb76f46c3a374afbb"
+  integrity sha512-GySLvXwg0DQ2LM0/W+hr9y1Co3QY1iNnhWA82gFhBrz7RWGzw47qEsh//9u/wnjl6S1WOjH+eKm5PaQATG1BXg==
+  dependencies:
+    "@algolia/cache-common" "4.9.0"
+    "@algolia/logger-common" "4.9.0"
+    "@algolia/requester-common" "4.9.0"
+
 "@angular-devkit/architect@0.1102.4", "@angular-devkit/architect@~0.1102.0":
  version "0.1102.4"
  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1102.4.tgz#7c79d785c5072eacc937aea46128860ab03759bb"
@ -1781,6 +1885,15 @@
    debug "^3.1.0"
    lodash.once "^4.1.1"

+"@docsearch/react@^1.0.0-alpha.14":
+  version "1.0.0-alpha.14"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.14.tgz#13817445b50ec7ff387b23be4786d5b496d1e83f"
+  integrity sha512-I+JrJKZlRZIiIVefIY9AkC9OQegHfUCkdHmqGqsMu6suF+VtQNoTMCN0joAvMx4wid54RafWa/UnlEwEPMf5/w==
+  dependencies:
+    "@francoischalifour/autocomplete-core" "^1.0.0-alpha.14"
+    "@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.14"
+    algoliasearch "^4.0.0"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
  version "10.0.29"
  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@ -1899,6 +2012,16 @@
    minimatch "^3.0.4"
    strip-json-comments "^3.1.1"

+"@francoischalifour/autocomplete-core@^1.0.0-alpha.14":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.28.tgz#6b9d8491288e77f831e9b345d461623b0d3f5005"
+  integrity sha512-rL9x+72btViw+9icfBKUJjZj87FgjFrD2esuTUqtj4RAX3s4AuVZiN8XEsfjQBSc6qJk31cxlvqZHC/BIyYXgg==
+
+"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.14":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.28.tgz#a5ad7996f42e43e4acbb4e0010d663746d0e9997"
+  integrity sha512-bprfNmYt1opFUFEtD2XfY/kEsm13bzHQgU80uMjhuK0DJ914IjolT1GytpkdM6tJ4MBvyiJPP+bTtWO+BZ7c7w==
+
 "@fullhuman/postcss-purgecss@^3.1.3":
  version "3.1.3"
  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"
@ -4769,6 +4892,26 @@ ajv@^7.0.3:
    require-from-string "^2.0.2"
    uri-js "^4.2.2"

+algoliasearch@^4.0.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.9.0.tgz#76a78632014902845af5f1d7c02a7115e5b53b50"
+  integrity sha512-hhlza8j/uCWGe2kSz89HlcexiLxO1wzOKLNPWivNtZeZO5J85agbcMsrKV5+xLFI4LbulP/b/4/IvswxzPrGIw==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.9.0"
+    "@algolia/cache-common" "4.9.0"
+    "@algolia/cache-in-memory" "4.9.0"
+    "@algolia/client-account" "4.9.0"
+    "@algolia/client-analytics" "4.9.0"
+    "@algolia/client-common" "4.9.0"
+    "@algolia/client-recommendation" "4.9.0"
+    "@algolia/client-search" "4.9.0"
+    "@algolia/logger-common" "4.9.0"
+    "@algolia/logger-console" "4.9.0"
+    "@algolia/requester-browser-xhr" "4.9.0"
+    "@algolia/requester-common" "4.9.0"
+    "@algolia/requester-node-http" "4.9.0"
+    "@algolia/transporter" "4.9.0"
+
 alphanum-sort@^1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"