@seqera/docusaurus-theme-seqera 1.0.25 → 1.0.26

package/src/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/src/theme/SearchPage/useSearchPage.ts

@@ -0,0 +1,67 @@
+/**
+ * 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: string) => {
+      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: string) => {
+      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: string) =>
+      // Refer to https://github.com/facebook/docusaurus/pull/2838
+      `${baseUrl}search?${SEARCH_PARAM_QUERY}=${encodeURIComponent(targetSearchQuery)}`,
+    [baseUrl],
+  );
+
+  return {searchQuery, setSearchQuery, selectedFilter, setSelectedFilter, generateSearchPageLink};
+}

package/src/theme-seqera.d.ts

@@ -26,6 +26,9 @@ declare module '@seqera/docusaurus-theme-seqera' {
     customCss?: string[] | string;
   };
 
+  // [urlPrefix, label, pluginId | null, customTag | null]
+  export type ProductRoute = [string, string, string | null, string | null];
+
   export const getSwizzleConfig: PluginModule['getSwizzleConfig'];
 
   type DeepOverwrite<T, U> = U extends (infer V)[]

package/lib/theme/SearchBar.d.ts

@@ -1 +0,0 @@
-export { default } from '@docusaurus/Noop';

package/lib/theme/SearchBar.js

@@ -1,5 +0,0 @@
-// By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this, it is your responsibility to provide an implementation
-// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
-// npm run swizzle @docusaurus/theme-search-algolia SearchBar
-export {default} from '@docusaurus/Noop';

package/src/theme/SearchBar.tsx

@@ -1,8 +0,0 @@
-
-
-// By default, the classic theme does not provide any SearchBar implementation
-// If you swizzled this, it is your responsibility to provide an implementation
-// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
-// npm run swizzle @docusaurus/theme-search-algolia SearchBar
-
-export {default} from '@docusaurus/Noop';