Integrate Orama for search

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 npm-debug.log
 .npm
+.env.local
 
 # Next.js Build Output
 .next

components/Containers/NavBar/index.tsx

@@ -13,6 +13,7 @@ import NodejsDark from '@/components/Icons/Logos/NodejsDark';
 import NodejsLight from '@/components/Icons/Logos/NodejsLight';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
+import { SearchButton } from '@/components/SearchBox';
 import type { FormattedMessage } from '@/types';
 
 import style from './index.module.css';
@@ -64,6 +65,8 @@ const NavBar: FC<NavbarProps> = ({
         </div>
 
         <div className={style.actionsWrapper}>
+          <SearchButton />
+
           <ThemeToggle onClick={onThemeTogglerClick} />
 
           <LanguageDropdown

components/SearchBox/components/EmptyState.tsx

@@ -0,0 +1,14 @@
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export const EmptyState: FC = () => {
+  const t = useTranslations();
+
+  return (
+    <div className={styles.emptyStateContainer}>
+      {t('components.search.emptyState.text')}
+    </div>
+  );
+};

components/SearchBox/components/NoResults.tsx

@@ -0,0 +1,16 @@
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+type NoResultsProps = { searchTerm: string };
+
+export const NoResults: FC<NoResultsProps> = props => {
+  const t = useTranslations();
+
+  return (
+    <div className={styles.noResultsContainer}>
+      {t('components.search.noResults.text', { query: props.searchTerm })}
+    </div>
+  );
+};

components/SearchBox/components/PoweredBy.tsx

@@ -0,0 +1,27 @@
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+
+import styles from './index.module.css';
+
+export const PoweredBy = () => {
+  const t = useTranslations();
+
+  return (
+    <div className={styles.poweredBy}>
+      {t('components.search.poweredBy.text')}
+      <a
+        href="https://oramasearch.com?utm_source=nodejs.org"
+        target="_blank"
+        rel="noreferer"
+      >
+        <Image
+          src="https://website-assets.oramasearch.com/light-orama-logo.svg"
+          alt="Powered by OramaSearch"
+          className={styles.poweredByLogo}
+          width={80}
+          height={20}
+        />
+      </a>
+    </div>
+  );
+};

components/SearchBox/components/SearchBox.tsx

@@ -0,0 +1,196 @@
+import {
+  MagnifyingGlassIcon,
+  ChevronLeftIcon,
+} from '@heroicons/react/24/outline';
+import type { Results, Nullable } from '@orama/orama';
+import classNames from 'classnames';
+import { useRouter } from 'next/navigation';
+import { useState, useRef, type FC, useEffect } from 'react';
+
+import styles from '@/components/SearchBox/components/index.module.css';
+import { PoweredBy } from '@/components/SearchBox/components/PoweredBy';
+import { SearchResult } from '@/components/SearchBox/components/SearchResult';
+import { SeeAll } from '@/components/SearchBox/components/SeeAll';
+import { orama, getInitialFacets } from '@/components/SearchBox/lib/orama';
+import { useClickOutside } from '@/components/SearchBox/lib/useClickOutside';
+
+import { EmptyState } from './EmptyState';
+import { NoResults } from './NoResults';
+
+export type SearchDoc = {
+  id: string;
+  path: string;
+  pageTitle: string;
+  siteSection: string;
+  pageSectionTitle: string;
+  pageSectionContent: string;
+};
+
+type SearchResults = Nullable<Results<SearchDoc>>;
+
+type SearchBoxProps = { onClose: () => void };
+
+export const SearchBox: FC<SearchBoxProps> = ({ onClose }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResults>(null);
+  const [selectedFacet, setSelectedFacet] = useState<number>(0);
+  const [searchError, setSearchError] = useState<Nullable<Error>>(null);
+
+  const router = useRouter();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchBoxRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(searchBoxRef, () => {
+    reset();
+    onClose();
+  });
+
+  useEffect(() => {
+    searchInputRef.current?.focus();
+    getInitialFacets().then(setSearchResults).catch(setSearchError);
+
+    return () => reset();
+  }, []);
+
+  useEffect(() => {
+    search(searchTerm);
+  }, [searchTerm, selectedFacet]);
+
+  const search = (term: string) => {
+    orama
+      .search({
+        term,
+        limit: 8,
+        threshold: 0,
+        boost: {
+          pageSectionTitle: 4,
+          pageSectionContent: 2.5,
+          pageTitle: 1.5,
+        },
+        facets: {
+          siteSection: {},
+        },
+        ...filterBySection(),
+      })
+      .then(setSearchResults)
+      .catch(setSearchError);
+  };
+
+  const reset = () => {
+    setSearchTerm('');
+    setSearchResults(null);
+    setSelectedFacet(0);
+  };
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push(`/en/search?q=${searchTerm}&section=${selectedFacetName}`);
+    onClose();
+  };
+
+  const changeFacet = (idx: number) => {
+    setSelectedFacet(idx);
+  };
+
+  const filterBySection = () => {
+    if (selectedFacet === 0) {
+      return {};
+    }
+
+    return {
+      where: {
+        siteSection: {
+          eq: selectedFacetName,
+        },
+      },
+    };
+  };
+
+  const facets = {
+    all: searchResults?.count ?? 0,
+    ...(searchResults?.facets?.siteSection?.values ?? {}),
+  };
+
+  const selectedFacetName = Object.keys(facets)[selectedFacet];
+
+  return (
+    <div className={styles.searchBoxModalContainer}>
+      <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
+        <div className={styles.searchBoxInnerPanel}>
+          <div className={styles.searchBoxInputContainer}>
+            <button
+              onClick={onClose}
+              className={styles.searchBoxBackIconContainer}
+            >
+              <ChevronLeftIcon className={styles.searchBoxBackIcon} />
+            </button>
+            <MagnifyingGlassIcon
+              className={styles.searchBoxMagnifyingGlassIcon}
+            />
+            <form onSubmit={onSubmit}>
+              <input
+                ref={searchInputRef}
+                type="search"
+                className={styles.searchBoxInput}
+                onChange={event => setSearchTerm(event.target.value)}
+                value={searchTerm}
+              />
+            </form>
+          </div>
+
+          <div className={styles.fulltextSearchSections}>
+            {Object.keys(facets).map((facetName, idx) => (
+              <button
+                key={facetName}
+                className={classNames(styles.fulltextSearchSection, {
+                  [styles.fulltextSearchSectionSelected]: selectedFacet === idx,
+                })}
+                onClick={() => changeFacet(idx)}
+              >
+                {facetName}
+                <span className={styles.fulltextSearchSectionCount}>
+                  (
+                  {facets[facetName as keyof typeof facets].toLocaleString(
+                    'en'
+                  )}
+                  )
+                </span>
+              </button>
+            ))}
+          </div>
+
+          <div className={styles.fulltextResultsContainer}>
+            {searchError ? <></> : null}
+
+            {(searchTerm ? (
+              searchResults?.count ? (
+                searchResults?.hits.map(hit => (
+                  <SearchResult
+                    key={hit.id}
+                    hit={hit}
+                    searchTerm={searchTerm}
+                  />
+                ))
+              ) : (
+                <NoResults searchTerm={searchTerm} />
+              )
+            ) : (
+              <EmptyState />
+            )) ?? null}
+
+            {searchResults?.count
+              ? searchResults?.count > 8 && (
+                  <SeeAll
+                    searchResults={searchResults}
+                    searchTerm={searchTerm}
+                    selectedFacetName={selectedFacetName}
+                  />
+                )
+              : null}
+          </div>
+          <PoweredBy />
+        </div>
+      </div>
+    </div>
+  );
+};

components/SearchBox/components/SearchError.tsx

@@ -0,0 +1,14 @@
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export const SearchError: FC = () => {
+  const t = useTranslations();
+
+  return (
+    <div className={styles.searchErrorContainer}>
+      {t('components.search.searchError.text')}
+    </div>
+  );
+};

components/SearchBox/components/SearchResult.tsx

@@ -0,0 +1,44 @@
+import type { Result } from '@orama/orama';
+import NextLink from 'next/link';
+import type { FC } from 'react';
+
+import type { SearchDoc } from '@/components/SearchBox/components/SearchBox';
+import { highlighter } from '@/components/SearchBox/lib/orama';
+import { pathToBreadcrumbs } from '@/components/SearchBox/lib/utils';
+
+import styles from './index.module.css';
+
+type SearchResultProps = {
+  hit: Result<SearchDoc>;
+  searchTerm: string;
+};
+
+export const SearchResult: FC<SearchResultProps> = props => {
+  const isAPIResult = props.hit.document.siteSection.toLowerCase() === 'api';
+  const basePath = isAPIResult ? 'https://nodejs.org/docs/latest' : '/en';
+  const path = `${basePath}/${props.hit.document.path}`;
+
+  return (
+    <NextLink
+      key={props.hit.id}
+      href={path}
+      className={styles.fulltextSearchResult}
+      target={isAPIResult ? '_blank' : undefined}
+      rel={isAPIResult ? 'noopener noreferrer' : undefined}
+    >
+      <div
+        className={styles.fulltextSearchResultTitle}
+        dangerouslySetInnerHTML={{
+          __html: highlighter
+            .highlight(props.hit.document.pageSectionTitle, props.searchTerm)
+            .trim(125),
+        }}
+      />
+      <div className={styles.fulltextSearchResultBreadcrumb}>
+        {pathToBreadcrumbs(props.hit.document.path).join(' > ')}
+        {' > '}
+        {props.hit.document.pageTitle}
+      </div>
+    </NextLink>
+  );
+};

components/SearchBox/components/SeeAll.tsx

@@ -0,0 +1,37 @@
+import type { Results } from '@orama/orama';
+import NextLink from 'next/link';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import type { SearchDoc } from '@/components/SearchBox/components/SearchBox';
+
+import styles from './index.module.css';
+
+type SearchResults = Results<SearchDoc>;
+
+type SeeAllProps = {
+  searchResults: SearchResults;
+  searchTerm: string;
+  selectedFacetName: string;
+};
+
+export const SeeAll: FC<SeeAllProps> = props => {
+  const t = useTranslations();
+  const resultsCount = props.searchResults?.count?.toLocaleString('en') ?? 0;
+
+  if (!props.searchTerm) {
+    return null;
+  }
+
+  const sanitizedSearchTerm = encodeURIComponent(props.searchTerm);
+  const sanitizedFacetName = encodeURIComponent(props.selectedFacetName);
+  const allResultsURL = `/en/search?q=${sanitizedSearchTerm}&section=${sanitizedFacetName}`;
+
+  return (
+    <div className={styles.seeAllFulltextSearchResults}>
+      <NextLink href={allResultsURL}>
+        {t('components.search.seeAll.text', { count: resultsCount })}
+      </NextLink>
+    </div>
+  );
+};