@seqera/docusaurus-theme-seqera 1.0.25 → 1.0.26-next.85

package/lib/theme/SearchPage/styles.module.css

@@ -0,0 +1,325 @@
+/**
+ * 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.
+ */
+
+.searchQueryInput,
+.searchVersionInput {
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+  font-size: 0.875rem;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  width: 100%;
+  background: white;
+  color: #111827;
+  margin-bottom: 0.5rem;
+  transition: border-color 0.15s;
+}
+
+.searchQueryInput:focus,
+.searchVersionInput:focus {
+  border-color: #6b7280;
+  outline: none;
+}
+
+.searchQueryInput::placeholder {
+  color: #6b7280;
+}
+
+[data-theme='dark'] .searchQueryInput,
+[data-theme='dark'] .searchVersionInput {
+  background: #111827;
+  border-color: #374151;
+  color: white;
+}
+
+[data-theme='dark'] .searchQueryInput:focus,
+[data-theme='dark'] .searchVersionInput:focus {
+  border-color: #4b5563;
+}
+
+[data-theme='dark'] .searchQueryInput::placeholder {
+  color: #6b7280;
+}
+
+.searchInputRow {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.searchInputRow .searchQueryInput {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+/* At narrow widths the input takes the full first row;
+   the filter and search button drop together to the next row */
+@media (max-width: 640px) {
+  .searchInputRow .searchQueryInput {
+    flex: 0 0 100%;
+  }
+}
+
+.searchQueryButton {
+  border-radius: 4px;
+  transition: all 0.3s;
+  color: black;
+  background: var(--color-nextflow-500);
+  border: 1px solid var(--color-nextflow-700);
+  font-weight: 500;
+  font-size: 0.9rem;
+  text-align: center;
+  padding: 0.3rem 1rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.searchQueryButton:hover {
+  background: var(--color-nextflow-700);
+  border-color: var(--color-nextflow-700);
+}
+
+[data-theme='dark'] .searchQueryButton {
+  color: black;
+  background: var(--color-nextflow-400);
+  border: 1px solid var(--color-nextflow-400);
+}
+
+[data-theme='dark'] .searchQueryButton:hover {
+  background: var(--color-nextflow-600);
+  border-color: var(--color-nextflow-700);
+}
+
+.filterSelectWrapper {
+  position: relative;
+  width: 16.25rem;
+}
+
+/* Matches VersionSwitcher: rounded-lg border border-gray-300 overflow-hidden bg-white */
+.filterBox {
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+  overflow: hidden;
+  background: white;
+}
+
+/* Matches VersionSwitcher: rounded-b-none when open */
+.filterBoxOpen {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Matches VersionSwitcher trigger: h-9 px-3 text-sm text-gray-900 bg-transparent hover:bg-gray-100 */
+.filterTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2.25rem;
+  width: 100%;
+  padding: 0 0.75rem;
+  background: transparent;
+  border: none;
+  color: #111827;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.filterTrigger:hover {
+  background: #f3f4f6;
+}
+
+.filterTrigger:focus {
+  outline: none;
+}
+
+.filterTriggerChevron {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.filterTriggerChevronOpen {
+  transform: rotate(0deg);
+}
+
+.filterTriggerChevronClosed {
+  transform: rotate(-90deg);
+}
+
+/* Matches VersionSwitcher dropdown: bg-white border-gray-300 border-t-gray-200 rounded-b-lg */
+.filterDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 100%;
+  margin: -1px 0 0;
+  padding: 0;
+  list-style: none;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-top-color: #e5e7eb;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  overflow: hidden;
+  z-index: 50;
+}
+
+/* Matches VersionSwitcher items: h-9 px-3 text-sm text-gray-900 border-t border-gray-200 hover:bg-gray-100 */
+.filterOption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  color: #111827;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  border-top: 1px solid #e5e7eb;
+  transition: background 0.15s;
+}
+
+.filterOption:first-child {
+  border-top: none;
+}
+
+.filterOption:hover {
+  background: #f3f4f6;
+}
+
+.filterOptionActive {
+  color: var(--ifm-color-primary);
+}
+
+.filterExpandChevron {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.filterSubOption {
+  padding-left: 1.5rem;
+}
+
+/* Dark mode — matches VersionSwitcher: dark:bg-gray-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 */
+[data-theme='dark'] .filterBox {
+  background: #111827;
+  border-color: #374151;
+}
+
+[data-theme='dark'] .filterTrigger {
+  color: white;
+}
+
+[data-theme='dark'] .filterTrigger:hover {
+  background: #1f2937;
+}
+
+[data-theme='dark'] .filterDropdown {
+  background: #111827;
+  border-color: #374151;
+  border-top-color: #4b5563;
+}
+
+[data-theme='dark'] .filterOption {
+  color: white;
+  border-top-color: #374151;
+}
+
+[data-theme='dark'] .filterOption:hover {
+  background: #1f2937;
+}
+
+.searchResultsColumn {
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+.algoliaLogo {
+  max-width: 150px;
+}
+
+.algoliaLogoPathFill {
+  fill: var(--ifm-font-color-base);
+}
+
+.searchResultItem {
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+}
+
+.searchResultItemHeading {
+  font-weight: 400;
+  margin-bottom: 0;
+}
+
+.searchResultItemPath {
+  font-size: 0.8rem;
+  color: var(--ifm-font-color-base);
+  --ifm-breadcrumb-separator-size-multiplier: 1;
+}
+
+.searchResultItemPath :global(.breadcrumbs__item:not(:last-child))::after {
+  margin: 0 0.1875rem;
+}
+
+.searchResultItemSummary {
+  margin: 0.5rem 0 0;
+  font-style: italic;
+}
+
+@media only screen and (max-width: 996px) {
+  .searchResultsColumn {
+    max-width: 60% !important;
+  }
+
+  .searchLogoColumn {
+    max-width: 40% !important;
+    padding-left: 0 !important;
+  }
+}
+
+.loadingSpinner {
+  width: 3rem;
+  height: 3rem;
+  border: 0.4em solid #eee;
+  border-top-color: var(--ifm-color-primary);
+  border-radius: 50%;
+  animation: loading-spin 1s linear infinite;
+  margin: 2rem auto 0;
+}
+
+@keyframes loading-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  margin-top: 6rem;
+}
+
+:global(.search-page-wrapper .theme-layout-main) {
+  width: 100%;
+}
+
+:global(.search-result-match) {
+  color: var(--docsearch-hit-color);
+  background: rgb(255 215 142 / 25%);
+  padding: 0.09em 0;
+}

package/lib/theme/SearchPage/useSearchPage.d.ts

@@ -0,0 +1,7 @@
+export declare function useSearchPage(): {
+    searchQuery: string;
+    setSearchQuery: (newSearchQuery: string) => void;
+    selectedFilter: string;
+    setSelectedFilter: (newFilter: string) => void;
+    generateSearchPageLink: (targetSearchQuery: string) => string;
+};

package/lib/theme/SearchPage/useSearchPage.js

@@ -0,0 +1,68 @@
+/**
+ * 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.
+ */
+// Source: https://github.com/facebook/docusaurus/blob/a308fb7c81832cca354192fe2984f52749441249/packages/docusaurus-theme-common/src/hooks/useSearchPage.ts
+// Context: https://github.com/typesense/docusaurus-theme-search-typesense/issues/27#issuecomment-1415757477
+import {useState, useEffect, useCallback} from 'react';
+import {useHistory} from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+const SEARCH_PARAM_QUERY = 'q';
+const SEARCH_PARAM_FILTER = 'filter';
+export function useSearchPage() {
+  const history = useHistory();
+  const {
+    siteConfig: {baseUrl},
+  } = useDocusaurusContext();
+  const [searchQuery, setSearchQueryState] = useState('');
+  const [selectedFilter, setSelectedFilterState] = useState('');
+  // Init search query and filter just after React hydration
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setSearchQueryState(params.get(SEARCH_PARAM_QUERY) ?? '');
+    setSelectedFilterState(params.get(SEARCH_PARAM_FILTER) ?? '');
+  }, []);
+  const setSearchQuery = useCallback(
+    (newSearchQuery) => {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (newSearchQuery) {
+        searchParams.set(SEARCH_PARAM_QUERY, newSearchQuery);
+      } else {
+        searchParams.delete(SEARCH_PARAM_QUERY);
+      }
+      history.replace({search: searchParams.toString()});
+      setSearchQueryState(newSearchQuery);
+    },
+    [history],
+  );
+  const setSelectedFilter = useCallback(
+    (newFilter) => {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (newFilter) {
+        searchParams.set(SEARCH_PARAM_FILTER, newFilter);
+      } else {
+        searchParams.delete(SEARCH_PARAM_FILTER);
+      }
+      history.replace({search: searchParams.toString()});
+      setSelectedFilterState(newFilter);
+    },
+    [history],
+  );
+  const generateSearchPageLink = useCallback(
+    (targetSearchQuery) =>
+      // Refer to https://github.com/facebook/docusaurus/pull/2838
+      `${baseUrl}search?${SEARCH_PARAM_QUERY}=${encodeURIComponent(
+        targetSearchQuery,
+      )}`,
+    [baseUrl],
+  );
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedFilter,
+    setSelectedFilter,
+    generateSearchPageLink,
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seqera/docusaurus-theme-seqera",
-  "version": "1.0.25",
+  "version": "1.0.26-next.85",
   "description": "Seqera docs theme for Docusaurus",
   "author": "Seqera docs team <education@seqera.io>",
   "license": "Apache-2.0",
@@ -31,7 +31,9 @@
     "@docusaurus/utils-validation": "3.9.2",
     "@mdx-js/react": "^3.0.0",
     "@tailwindcss/postcss": "^4.1.17",
+    "algoliasearch-helper": "^3.0.0",
     "clsx": "^2.0.0",
+    "typesense-instantsearch-adapter": "^2.0.0",
     "infima": "0.2.0-alpha.45",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",

package/src/getSwizzleConfig.ts

@@ -402,16 +402,6 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The global 404 page of your site, meant to be ejected and customized',
       },
-      SearchBar: {
-        actions: {
-          eject: 'safe',
-          wrap: 'safe',
-        },
-        // TODO how to describe this one properly?
-        // By default it's an empty placeholder for the user to fill
-        description:
-          'The search bar component of your site, appearing in the navbar.',
-      },
       SkipToContent: {
         actions: {
           eject: 'safe',

package/src/theme/SearchPage/generalUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+// Source: https://github.com/facebook/docusaurus/blob/a308fb7c81832cca354192fe2984f52749441249/packages/docusaurus-theme-common/src/utils/generalUtils.ts
+// Context: https://github.com/typesense/docusaurus-theme-search-typesense/issues/27#issuecomment-1415757477
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+/**
+ * Formats the page's title based on relevant site config and other contexts.
+ */
+export function useTitleFormatter(title?: string): string {
+  const {siteConfig} = useDocusaurusContext();
+  const {title: siteTitle, titleDelimiter} = siteConfig;
+  return title?.trim().length
+    ? `${title.trim()} ${titleDelimiter} ${siteTitle}`
+    : siteTitle;
+}