@seqera/docusaurus-theme-seqera 1.0.30-next.99 → 1.0.31-next.102

package/lib/styles/admonition-alerts.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: stretch;
   padding: 1rem;
   font-size: 1rem;
   line-height: 1.6;

package/lib/styles/typography.css

@@ -18,8 +18,7 @@ h6 {
   border-bottom: 4px solid transparent;
 }
 .navbar__link--active {
-  /* border-bottom: 4px solid var(--color-nextflow-600); */
-  border-bottom: 4px solid var(--color-blu-600);
+  border-bottom: 4px solid var(--color-nextflow-500);
   padding-bottom: 0.1rem;
 }
 
@@ -256,6 +255,7 @@ main prose styles
 
   /* Tables */
   table {
+    display: table;
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -343,7 +343,7 @@ main prose styles
 /* Dark mode overrides */
 [data-theme='dark'] .prose__wrapper {
   code:not(pre code) {
-    border-color: var(--color-gray-200);
+    border-color: var(--color-gray-700);
   }
 
   .admonition code:not(pre code) {

package/lib/theme/BlogLayout/index.js

@@ -7,11 +7,11 @@ export default function BlogLayout(props) {
   const hasSidebar = sidebar && sidebar.items.length > 0;
   return (
     <Layout {...layoutProps}>
-      <div className="container">
+      <div className="container container--fluid margin-vert--lg">
         <div className="row">
           <BlogSidebar sidebar={sidebar} />
           <main
-            className={clsx('w-full prose__wrapper col max-w-3xl mx-auto', {
+            className={clsx('w-full prose__wrapper col px-4 md:px-8', {
               'col--7': hasSidebar,
               'col--9 col--offset-1': !hasSidebar,
             })}>

package/lib/theme/BlogPostItem/Container/index.js

@@ -1,4 +1,9 @@
 import React from 'react';
+import clsx from 'clsx';
 export default function BlogPostItemContainer({children, className}) {
-  return <article className={className}>{children}</article>;
+  return (
+    <article className={clsx('max-w-3xl mx-auto', className)}>
+      {children}
+    </article>
+  );
 }

package/lib/theme/BlogSidebar/Desktop/index.js

@@ -28,7 +28,7 @@ function BlogSidebarDesktop({sidebar}) {
   const pathMatch = location.pathname.match(
     /\/changelog\/(?:tags\/)?([^\/]+)(?:\/v[\d.]+.*)?/,
   );
-  const product = pathMatch ? pathMatch[1] : null;
+  const product = pathMatch?.[1] ?? null;
   // Map product names to their correct documentation paths
   const getProductPath = (product) => {
     if (!product || product === 'tags' || product === 'page') return '/';
@@ -39,9 +39,13 @@ function BlogSidebarDesktop({sidebar}) {
     return mapping[product] || `/${product}`;
   };
   // Filter the sidebar for just this product
-  const filteredItems = product
-    ? items.filter((item) => item.permalink.includes(`/changelog/${product}/`))
-    : items;
+  const productPath = getProductPath(product);
+  const filteredItems =
+    product && productPath !== '/'
+      ? items.filter((item) =>
+          item.permalink.includes(`/changelog/${product}/`),
+        )
+      : items;
   return (
     <aside
       className={`${styles.sidebarWrapper} col col--3 border-r border-black/20 dark:border-white/20`}>

package/lib/theme/Navbar/Content/index.js

@@ -9,6 +9,7 @@ import {
   splitNavbarItems,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
+import {useLocation} from '@docusaurus/router';
 import NavbarItem from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import SearchBar from '@theme/SearchBar';
@@ -66,6 +67,7 @@ function NavbarContentLayout({left, right, isMenuOpen}) {
 }
 export default function NavbarContent() {
   const mobileSidebar = useNavbarMobileSidebar();
+  const {pathname} = useLocation();
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
   const searchBarItem = items.find((item) => item.type === 'search');
@@ -110,13 +112,19 @@ export default function NavbarContent() {
           </div>
           <div className="mr-2">
             <a
-              className="navbar__link ml-8 font-normal"
+              className={clsx(
+                'navbar__link ml-8 font-normal',
+                pathname.startsWith('/platform-api/') && 'navbar__link--active',
+              )}
               href="/platform-api/"
               aria-label="Platform API">
               Platform API
             </a>
             <a
-              className="navbar__link ml-8 font-normal"
+              className={clsx(
+                'navbar__link ml-8 font-normal',
+                pathname.startsWith('/changelog/') && 'navbar__link--active',
+              )}
               href="/changelog/"
               aria-label="Changelog">
               Changelog

package/lib/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -50,28 +50,20 @@ export default function NavbarMobilePrimaryMenu() {
               Resources
             </h3>
 
-            <div className="mb-3">
-              <li className="mb-3">
-                <Link
-                  className="menu__link"
-                  to={'/changelog'}
-                  aria-label="Changelog">
-                  Changelog
-                </Link>
-              </li>
+            <li className="mb-3">
               <Link
                 className="menu__link"
-                to={'/platform-cloud/seqera-ai'}
-                aria-label="Seqera AI">
-                Seqera AI
+                to={'/platform-api/'}
+                aria-label="Platform API">
+                Platform API
               </Link>
-            </div>
+            </li>
             <li className="mb-3">
               <Link
                 className="menu__link"
-                to={'/platform-cloud/seqera-mcp'}
-                aria-label="Seqera MCP">
-                Seqera MCP
+                to={'/changelog/'}
+                aria-label="Changelog">
+                Changelog
               </Link>
             </li>
           </div>

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
+import {useLocation} from '@docusaurus/router';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 export default function NavbarNavLink({
   activeBasePath,
@@ -21,6 +23,7 @@ export default function NavbarNavLink({
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
+  const {pathname} = useLocation();
   // Link content is set through html XOR label
   const linkContentProps = html
     ? {dangerouslySetInnerHTML: {__html: html}}
@@ -37,10 +40,14 @@ export default function NavbarNavLink({
         ),
       };
   if (href) {
+    const isActiveHref = !isExternalLink && pathname.startsWith(href);
     return (
       <Link
         href={prependBaseUrlToHref ? normalizedHref : href}
         {...props}
+        {...(isActiveHref && {
+          className: clsx(props.className, props.activeClassName),
+        })}
         {...linkContentProps}
       />
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seqera/docusaurus-theme-seqera",
-  "version": "1.0.30-next.99",
+  "version": "1.0.31-next.102",
   "description": "Seqera docs theme for Docusaurus",
   "author": "Seqera docs team <education@seqera.io>",
   "license": "Apache-2.0",

package/src/styles/admonition-alerts.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: stretch;
   padding: 1rem;
   font-size: 1rem;
   line-height: 1.6;

package/src/styles/typography.css

@@ -18,8 +18,7 @@ h6 {
   border-bottom: 4px solid transparent;
 }
 .navbar__link--active {
-  /* border-bottom: 4px solid var(--color-nextflow-600); */
-  border-bottom: 4px solid var(--color-blu-600);
+  border-bottom: 4px solid var(--color-nextflow-500);
   padding-bottom: 0.1rem;
 }
 
@@ -256,6 +255,7 @@ main prose styles
 
   /* Tables */
   table {
+    display: table;
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -343,7 +343,7 @@ main prose styles
 /* Dark mode overrides */
 [data-theme='dark'] .prose__wrapper {
   code:not(pre code) {
-    border-color: var(--color-gray-200);
+    border-color: var(--color-gray-700);
   }
 
   .admonition code:not(pre code) {

package/src/theme/BlogLayout/index.tsx

@@ -13,11 +13,11 @@ export default function BlogLayout(props: Props): ReactNode {
 
   return (
     <Layout {...layoutProps}>
-      <div className="container">
+      <div className="container container--fluid margin-vert--lg">
         <div className="row">
           <BlogSidebar sidebar={sidebar} />
           <main
-            className={clsx('w-full prose__wrapper col max-w-3xl mx-auto', {
+            className={clsx('w-full prose__wrapper col px-4 md:px-8', {
               'col--7': hasSidebar,
               'col--9 col--offset-1': !hasSidebar,
             })}>

package/src/theme/BlogPostItem/Container/index.tsx

@@ -1,11 +1,12 @@
 
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import type {Props} from '@theme/BlogPostItem/Container';
 
 export default function BlogPostItemContainer({
   children,
   className,
 }: Props): ReactNode {
-  return <article className={className}>{children}</article>;
+  return <article className={clsx('max-w-3xl mx-auto', className)}>{children}</article>;
 }

package/src/theme/BlogSidebar/Desktop/index.tsx

@@ -31,7 +31,7 @@ function BlogSidebarDesktop({sidebar}: Props) {
   // Figure out if we're looking at a product tag or changelog entry
   const location = useLocation();
   const pathMatch = location.pathname.match(/\/changelog\/(?:tags\/)?([^\/]+)(?:\/v[\d.]+.*)?/);
-  const product = pathMatch ? pathMatch[1] : null;
+  const product = pathMatch?.[1] ?? null;
 
   // Map product names to their correct documentation paths
   const getProductPath = (product: string | null): string => {
@@ -44,8 +44,9 @@ function BlogSidebarDesktop({sidebar}: Props) {
   };
   
   // Filter the sidebar for just this product
-  const filteredItems = product 
-    ? items.filter(item => item.permalink.includes(`/changelog/${product}/`)) 
+  const productPath = getProductPath(product);
+  const filteredItems = product && productPath !== '/'
+    ? items.filter(item => item.permalink.includes(`/changelog/${product}/`))
     : items;
 
 

package/src/theme/Navbar/Content/index.tsx

@@ -9,6 +9,7 @@ import {
   splitNavbarItems,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
+import {useLocation} from '@docusaurus/router';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import SearchBar from '@theme/SearchBar';
@@ -79,6 +80,7 @@ function NavbarContentLayout({
 
 export default function NavbarContent(): ReactNode {
   const mobileSidebar = useNavbarMobileSidebar();
+  const {pathname} = useLocation();
 
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
@@ -126,13 +128,13 @@ export default function NavbarContent(): ReactNode {
           </div>
           <div className="mr-2">
             <a
-              className="navbar__link ml-8 font-normal"
+              className={clsx('navbar__link ml-8 font-normal', pathname.startsWith('/platform-api/') && 'navbar__link--active')}
               href="/platform-api/"
               aria-label="Platform API">
               Platform API
             </a>
             <a
-              className="navbar__link ml-8 font-normal"
+              className={clsx('navbar__link ml-8 font-normal', pathname.startsWith('/changelog/') && 'navbar__link--active')}
               href="/changelog/"
               aria-label="Changelog">
               Changelog

package/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx

@@ -54,28 +54,20 @@ export default function NavbarMobilePrimaryMenu(): ReactNode {
               Resources
             </h3>
 
-            <div className="mb-3">
-              <li className="mb-3">
-                <Link
-                  className="menu__link"
-                  to={'/changelog'}
-                  aria-label="Changelog">
-                  Changelog
-                </Link>
-              </li>
+            <li className="mb-3">
               <Link
                 className="menu__link"
-                to={'/platform-cloud/seqera-ai'}
-                aria-label="Seqera AI">
-                Seqera AI
+                to={'/platform-api/'}
+                aria-label="Platform API">
+                Platform API
               </Link>
-            </div>
+            </li>
             <li className="mb-3">
               <Link
                 className="menu__link"
-                to={'/platform-cloud/seqera-mcp'}
-                aria-label="Seqera MCP">
-                Seqera MCP
+                to={'/changelog/'}
+                aria-label="Changelog">
+                Changelog
               </Link>
             </li>
           </div>

package/src/theme/NavbarItem/NavbarNavLink.tsx

@@ -1,10 +1,12 @@
 
 
 import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
+import {useLocation} from '@docusaurus/router';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/NavbarItem/NavbarNavLink';
 
@@ -25,6 +27,7 @@ export default function NavbarNavLink({
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
+  const {pathname} = useLocation();
 
   // Link content is set through html XOR label
   const linkContentProps = html
@@ -43,10 +46,14 @@ export default function NavbarNavLink({
       };
 
   if (href) {
+    const isActiveHref = !isExternalLink && pathname.startsWith(href);
     return (
       <Link
         href={prependBaseUrlToHref ? normalizedHref : href}
         {...props}
+        {...(isActiveHref && {
+          className: clsx(props.className, props.activeClassName),
+        })}
         {...linkContentProps}
       />
     );

package/lib/theme/SearchBar/index.d.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * Swizzled from docusaurus-theme-search-typesense SearchBar.
- * Adds full hierarchy breadcrumbs and product labels to the path shown
- * under each modal result. Product routes are configured via
- * themeConfig.typesense.productRoutes.
- */
-export default function SearchBar(): JSX.Element;

package/lib/theme/SearchBar/index.js

@@ -1,239 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * Swizzled from docusaurus-theme-search-typesense SearchBar.
- * Adds full hierarchy breadcrumbs and product labels to the path shown
- * under each modal result. Product routes are configured via
- * themeConfig.typesense.productRoutes.
- */
-import React, {useState, useRef, useCallback, useMemo} from 'react';
-// @ts-ignore
-import {createPortal} from 'react-dom';
-// @ts-ignore
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// @ts-ignore
-import {useHistory} from '@docusaurus/router';
-// @ts-ignore
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-// @ts-ignore
-import Link from '@docusaurus/Link';
-// @ts-ignore
-import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import {
-  DocSearchButton,
-  useDocSearchKeyboardEvents,
-} from 'typesense-docsearch-react';
-import {useTypesenseContextualFilters} from 'docusaurus-theme-search-typesense/client';
-// @ts-ignore
-import Translate from '@docusaurus/Translate';
-// @ts-ignore
-import translations from '@theme/SearchTranslations';
-import {DocsPreferredVersionContextProvider} from '@docusaurus/plugin-content-docs/lib/client/index.js';
-let DocSearchModal = null;
-function Hit({hit, children}) {
-  return <Link to={hit.url}>{children}</Link>;
-}
-function ResultsFooter({state, onClose}) {
-  const {
-    siteConfig: {baseUrl},
-  } = useDocusaurusContext();
-  return (
-    <Link
-      to={`${baseUrl}search?q=${encodeURIComponent(state.query)}`}
-      onClick={onClose}>
-      <Translate
-        id="theme.SearchBar.seeAll"
-        values={{count: state.context.nbHits}}>
-        {'See all {count} results'}
-      </Translate>
-    </Link>
-  );
-}
-/**
- * Resolve a product label from a URL pathname using the configured productRoutes.
- */
-function getProductLabel(pathname, productRoutes) {
-  const match = productRoutes.find(([prefix]) => pathname.startsWith(prefix));
-  return match ? match[1] : null;
-}
-/**
- * Build a breadcrumb string from all ancestor hierarchy levels of a hit.
- * For lvl2+ and content hits this replaces the single-level hierarchy.lvl1
- * path with the full parent chain (e.g. "Nextflow › Getting Started › Installation").
- *
- * When productRoutes are provided, the first level (lvl0, typically "Documentation")
- * is replaced with the product name derived from the hit URL.
- */
-function buildBreadcrumb(item, productRoutes) {
-  const {type} = item;
-  const maxLevel =
-    type === 'content' ? 7 : parseInt(type.replace('lvl', ''), 10);
-  const parts = [];
-  for (let i = 0; i < maxLevel; i++) {
-    const val = item[`hierarchy.lvl${i}`];
-    if (val) parts.push(val);
-  }
-  // Replace lvl0 (typically "Documentation") with the product label
-  if (parts.length > 0 && productRoutes.length > 0) {
-    try {
-      const pathname = new URL(item.url).pathname;
-      const product = getProductLabel(pathname, productRoutes);
-      if (product) {
-        parts[0] = product;
-      }
-    } catch {
-      // URL parsing failed — keep the original lvl0 value
-    }
-  }
-  return parts.length > 1 ? parts.join(' › ') : null;
-}
-function DocSearch({
-  contextualSearch,
-  externalUrlRegex,
-  productRoutes = [],
-  ...props
-}) {
-  const contextualSearchFacetFilters = useTypesenseContextualFilters();
-  const configFacetFilters = props.typesenseSearchParameters?.filter_by ?? '';
-  const facetFilters = contextualSearch
-    ? [contextualSearchFacetFilters, configFacetFilters]
-        .filter((e) => e)
-        .join(' && ')
-    : configFacetFilters;
-  const typesenseSearchParameters = {
-    filter_by: facetFilters,
-    ...props.typesenseSearchParameters,
-  };
-  const {withBaseUrl} = useBaseUrlUtils();
-  const history = useHistory();
-  const searchContainer = useRef(null);
-  const searchButtonRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [initialQuery, setInitialQuery] = useState(undefined);
-  const importDocSearchModalIfNeeded = useCallback(() => {
-    if (DocSearchModal) {
-      return Promise.resolve();
-    }
-    return Promise.all([
-      // @ts-ignore
-      import('typesense-docsearch-react/modal'),
-      // @ts-ignore
-      import('typesense-docsearch-react/style'),
-      // @ts-ignore
-      import('./styles.css'),
-    ]).then(([{DocSearchModal: Modal}]) => {
-      DocSearchModal = Modal;
-    });
-  }, []);
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement('div');
-      document.body.insertBefore(
-        searchContainer.current,
-        document.body.firstChild,
-      );
-      setIsOpen(true);
-    });
-  }, [importDocSearchModalIfNeeded]);
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-    searchContainer.current?.remove();
-  }, []);
-  const onInput = useCallback(
-    (event) => {
-      importDocSearchModalIfNeeded().then(() => {
-        setIsOpen(true);
-        setInitialQuery(event.key);
-      });
-    },
-    [importDocSearchModalIfNeeded],
-  );
-  const navigator = useRef({
-    navigate({itemUrl}) {
-      if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
-        window.location.href = itemUrl;
-      } else {
-        history.push(itemUrl);
-      }
-    },
-  }).current;
-  const transformItems = useRef((items) =>
-    items.map((item) => {
-      // Transform absolute URL to relative.
-      const withRelativeUrl = isRegexpStringMatch(externalUrlRegex, item.url)
-        ? item
-        : {
-            ...item,
-            url: withBaseUrl(
-              `${new URL(item.url).pathname}${new URL(item.url).hash}`,
-            ),
-          };
-      // Overwrite hierarchy.lvl1 with the full ancestor breadcrumb so the
-      // DocSearch-Hit-path slot shows the complete path for lvl2+ results.
-      const breadcrumb = buildBreadcrumb(withRelativeUrl, productRoutes);
-      if (!breadcrumb) return withRelativeUrl;
-      return {
-        ...withRelativeUrl,
-        'hierarchy.lvl1': breadcrumb,
-      };
-    }),
-  ).current;
-  const resultsFooterComponent = useMemo(
-    () =>
-      // eslint-disable-next-line react/no-unstable-nested-components
-      (footerProps) =>
-        <ResultsFooter {...footerProps} onClose={onClose} />,
-    [onClose],
-  );
-  useDocSearchKeyboardEvents({
-    isOpen,
-    onOpen,
-    onClose,
-    onInput,
-    searchButtonRef,
-  });
-  return (
-    <>
-      <DocSearchButton
-        onTouchStart={importDocSearchModalIfNeeded}
-        onFocus={importDocSearchModalIfNeeded}
-        onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
-        ref={searchButtonRef}
-        translations={translations.button}
-      />
-      {isOpen &&
-        DocSearchModal &&
-        searchContainer.current &&
-        createPortal(
-          <DocSearchModal
-            onClose={onClose}
-            initialScrollY={window.scrollY}
-            initialQuery={initialQuery}
-            navigator={navigator}
-            transformItems={transformItems}
-            hitComponent={Hit}
-            {...(props.searchPagePath && {resultsFooterComponent})}
-            {...props}
-            typesenseSearchParameters={typesenseSearchParameters}
-            typesenseServerConfig={props.typesenseServerConfig}
-            typesenseCollectionName={props.typesenseCollectionName}
-            placeholder={translations.placeholder}
-            translations={translations.modal}
-          />,
-          searchContainer.current,
-        )}
-    </>
-  );
-}
-export default function SearchBar() {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <DocsPreferredVersionContextProvider>
-      <DocSearch {...siteConfig.themeConfig.typesense} />
-    </DocsPreferredVersionContextProvider>
-  );
-}

package/lib/theme/SearchBar/styles.css

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-:root {
-  --docsearch-primary-color: var(--ifm-color-primary);
-  --docsearch-text-color: var(--ifm-font-color-base);
-}
-
-.DocSearch-Button {
-  margin: 0;
-  transition: all var(--ifm-transition-fast)
-    var(--ifm-transition-timing-default);
-}
-
-.DocSearch-Container {
-  z-index: calc(var(--ifm-z-index-fixed) + 1);
-}

package/src/theme/SearchBar/index.tsx

@@ -1,314 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * Swizzled from docusaurus-theme-search-typesense SearchBar.
- * Adds full hierarchy breadcrumbs and product labels to the path shown
- * under each modal result. Product routes are configured via
- * themeConfig.typesense.productRoutes.
- */
-
-import React, {useState, useRef, useCallback, useMemo} from 'react';
-// @ts-ignore
-import {createPortal} from 'react-dom';
-// @ts-ignore
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-// @ts-ignore
-import {useHistory} from '@docusaurus/router';
-// @ts-ignore
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-// @ts-ignore
-import Link from '@docusaurus/Link';
-// @ts-ignore
-import {isRegexpStringMatch} from '@docusaurus/theme-common';
-import {
-  DocSearchButton,
-  useDocSearchKeyboardEvents,
-} from 'typesense-docsearch-react';
-import {useTypesenseContextualFilters} from 'docusaurus-theme-search-typesense/client';
-// @ts-ignore
-import Translate from '@docusaurus/Translate';
-// @ts-ignore
-import translations from '@theme/SearchTranslations';
-import {DocsPreferredVersionContextProvider} from '@docusaurus/plugin-content-docs/lib/client/index.js';
-
-import type {
-  DocSearchModal as DocSearchModalType,
-  DocSearchModalProps,
-} from 'typesense-docsearch-react';
-import type {
-  InternalDocSearchHit,
-  StoredDocSearchHit,
-} from 'typesense-docsearch-react/dist/esm/types';
-
-type DocSearchProps = Omit<
-  DocSearchModalProps,
-  'onClose' | 'initialScrollY'
-> & {
-  contextualSearch?: string;
-  externalUrlRegex?: string;
-  searchPagePath: boolean | string;
-  productRoutes?: [string, string, string | null, string | null][];
-};
-
-let DocSearchModal: typeof DocSearchModalType | null = null;
-
-function Hit({
-  hit,
-  children,
-}: {
-  hit: InternalDocSearchHit | StoredDocSearchHit;
-  children: React.ReactNode;
-}) {
-  return <Link to={hit.url}>{children}</Link>;
-}
-
-type ResultsFooterProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  state: any;
-  onClose: () => void;
-};
-
-function ResultsFooter({state, onClose}: ResultsFooterProps) {
-  const {
-    siteConfig: {baseUrl},
-  } = useDocusaurusContext();
-
-  return (
-    <Link
-      to={`${baseUrl}search?q=${encodeURIComponent(state.query)}`}
-      onClick={onClose}>
-      <Translate
-        id="theme.SearchBar.seeAll"
-        values={{count: state.context.nbHits}}>
-        {'See all {count} results'}
-      </Translate>
-    </Link>
-  );
-}
-
-/**
- * Resolve a product label from a URL pathname using the configured productRoutes.
- */
-function getProductLabel(
-  pathname: string,
-  productRoutes: [string, string, string | null, string | null][],
-): string | null {
-  const match = productRoutes.find(([prefix]) =>
-    pathname.startsWith(prefix),
-  );
-  return match ? match[1] : null;
-}
-
-/**
- * Build a breadcrumb string from all ancestor hierarchy levels of a hit.
- * For lvl2+ and content hits this replaces the single-level hierarchy.lvl1
- * path with the full parent chain (e.g. "Nextflow › Getting Started › Installation").
- *
- * When productRoutes are provided, the first level (lvl0, typically "Documentation")
- * is replaced with the product name derived from the hit URL.
- */
-function buildBreadcrumb(
-  item: InternalDocSearchHit | StoredDocSearchHit,
-  productRoutes: [string, string, string | null, string | null][],
-): string | null {
-  const {type} = item;
-  const maxLevel =
-    type === 'content' ? 7 : parseInt(type.replace('lvl', ''), 10);
-
-  const parts: string[] = [];
-  for (let i = 0; i < maxLevel; i++) {
-    const val = (item as unknown as Record<string, string | null>)[
-      `hierarchy.lvl${i}`
-    ];
-    if (val) parts.push(val);
-  }
-
-  // Replace lvl0 (typically "Documentation") with the product label
-  if (parts.length > 0 && productRoutes.length > 0) {
-    try {
-      const pathname = new URL(item.url).pathname;
-      const product = getProductLabel(pathname, productRoutes);
-      if (product) {
-        parts[0] = product;
-      }
-    } catch {
-      // URL parsing failed — keep the original lvl0 value
-    }
-  }
-
-  return parts.length > 1 ? parts.join(' › ') : null;
-}
-
-function DocSearch({
-  contextualSearch,
-  externalUrlRegex,
-  productRoutes = [],
-  ...props
-}: DocSearchProps) {
-  const contextualSearchFacetFilters =
-    useTypesenseContextualFilters() as string;
-  const configFacetFilters: string =
-    props.typesenseSearchParameters?.filter_by ?? '';
-  const facetFilters = contextualSearch
-    ? [contextualSearchFacetFilters, configFacetFilters]
-        .filter((e) => e)
-        .join(' && ')
-    : configFacetFilters;
-
-  const typesenseSearchParameters = {
-    filter_by: facetFilters,
-    ...props.typesenseSearchParameters,
-  };
-
-  const {withBaseUrl} = useBaseUrlUtils();
-  const history = useHistory();
-  const searchContainer = useRef<HTMLDivElement | null>(null);
-  const searchButtonRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const [initialQuery, setInitialQuery] = useState<string | undefined>(
-    undefined,
-  );
-
-  const importDocSearchModalIfNeeded = useCallback(() => {
-    if (DocSearchModal) {
-      return Promise.resolve();
-    }
-    return Promise.all([
-      // @ts-ignore
-      import('typesense-docsearch-react/modal') as Promise<
-        typeof import('typesense-docsearch-react')
-      >,
-      // @ts-ignore
-      import('typesense-docsearch-react/style'),
-      // @ts-ignore
-      import('./styles.css'),
-    ]).then(([{DocSearchModal: Modal}]) => {
-      DocSearchModal = Modal;
-    });
-  }, []);
-
-  const onOpen = useCallback(() => {
-    importDocSearchModalIfNeeded().then(() => {
-      searchContainer.current = document.createElement('div');
-      document.body.insertBefore(
-        searchContainer.current,
-        document.body.firstChild,
-      );
-      setIsOpen(true);
-    });
-  }, [importDocSearchModalIfNeeded]);
-
-  const onClose = useCallback(() => {
-    setIsOpen(false);
-    searchContainer.current?.remove();
-  }, []);
-
-  const onInput = useCallback(
-    (event: KeyboardEvent) => {
-      importDocSearchModalIfNeeded().then(() => {
-        setIsOpen(true);
-        setInitialQuery(event.key);
-      });
-    },
-    [importDocSearchModalIfNeeded],
-  );
-
-  const navigator = useRef({
-    navigate({itemUrl}: {itemUrl?: string}) {
-      if (isRegexpStringMatch(externalUrlRegex, itemUrl)) {
-        window.location.href = itemUrl!;
-      } else {
-        history.push(itemUrl!);
-      }
-    },
-  }).current;
-
-  const transformItems = useRef<DocSearchModalProps['transformItems']>(
-    (items) =>
-      items.map((item) => {
-        // Transform absolute URL to relative.
-        const withRelativeUrl = isRegexpStringMatch(externalUrlRegex, item.url)
-          ? item
-          : {
-              ...item,
-              url: withBaseUrl(
-                `${new URL(item.url).pathname}${new URL(item.url).hash}`,
-              ),
-            };
-
-        // Overwrite hierarchy.lvl1 with the full ancestor breadcrumb so the
-        // DocSearch-Hit-path slot shows the complete path for lvl2+ results.
-        const breadcrumb = buildBreadcrumb(withRelativeUrl, productRoutes);
-        if (!breadcrumb) return withRelativeUrl;
-
-        return {
-          ...withRelativeUrl,
-          'hierarchy.lvl1': breadcrumb,
-        };
-      }),
-  ).current;
-
-  const resultsFooterComponent: DocSearchProps['resultsFooterComponent'] =
-    useMemo(
-      () =>
-        // eslint-disable-next-line react/no-unstable-nested-components
-        (footerProps: Omit<ResultsFooterProps, 'onClose'>): JSX.Element => (
-          <ResultsFooter {...footerProps} onClose={onClose} />
-        ),
-      [onClose],
-    );
-
-  useDocSearchKeyboardEvents({
-    isOpen,
-    onOpen,
-    onClose,
-    onInput,
-    searchButtonRef,
-  });
-
-  return (
-    <>
-      <DocSearchButton
-        onTouchStart={importDocSearchModalIfNeeded}
-        onFocus={importDocSearchModalIfNeeded}
-        onMouseOver={importDocSearchModalIfNeeded}
-        onClick={onOpen}
-        ref={searchButtonRef}
-        translations={translations.button}
-      />
-      {isOpen &&
-        DocSearchModal &&
-        searchContainer.current &&
-        createPortal(
-          <DocSearchModal
-            onClose={onClose}
-            initialScrollY={window.scrollY}
-            initialQuery={initialQuery}
-            navigator={navigator}
-            transformItems={transformItems}
-            hitComponent={Hit}
-            {...(props.searchPagePath && {resultsFooterComponent})}
-            {...props}
-            typesenseSearchParameters={typesenseSearchParameters}
-            typesenseServerConfig={props.typesenseServerConfig}
-            typesenseCollectionName={props.typesenseCollectionName}
-            placeholder={translations.placeholder}
-            translations={translations.modal}
-          />,
-          searchContainer.current,
-        )}
-    </>
-  );
-}
-
-export default function SearchBar(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <DocsPreferredVersionContextProvider>
-      <DocSearch {...(siteConfig.themeConfig.typesense as DocSearchProps)} />
-    </DocsPreferredVersionContextProvider>
-  );
-}

package/src/theme/SearchBar/styles.css

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-:root {
-  --docsearch-primary-color: var(--ifm-color-primary);
-  --docsearch-text-color: var(--ifm-font-color-base);
-}
-
-.DocSearch-Button {
-  margin: 0;
-  transition: all var(--ifm-transition-fast)
-    var(--ifm-transition-timing-default);
-}
-
-.DocSearch-Container {
-  z-index: calc(var(--ifm-z-index-fixed) + 1);
-}