@seqera/docusaurus-theme-seqera 1.0.10 → 1.0.11

package/lib/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.d.ts

@@ -3,5 +3,8 @@ interface VersionSwitcherProps {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
+/**
+ * Main VersionSwitcher component that detects active plugin and delegates to inner component
+ */
 declare const VersionSwitcher: React.FC<VersionSwitcherProps>;
 export default VersionSwitcher;

package/lib/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.js

@@ -1,38 +1,52 @@
-import React, {useState, useRef, useEffect} from 'react';
+import React, {useRef, useEffect} from 'react';
 import {
   useVersions,
   useDocsVersion,
   useDocsPreferredVersion,
+  useActiveDocContext,
 } from '@docusaurus/plugin-content-docs/client';
-import {usePluginData} from '@docusaurus/useGlobalData';
+import {useAllPluginInstancesData} from '@docusaurus/useGlobalData';
 import {useLocation} from '@docusaurus/router';
 import Link from '@docusaurus/Link';
-const VersionSwitcher = ({isOpen, setIsOpen}) => {
-  const dropdownRef = useRef(null);
+/**
+ * Detects which docs plugin is active based on the current pathname
+ */
+function useActiveDocsPlugin() {
   const location = useLocation();
-  // check if the plugin exists first
-  let pluginData;
-  try {
-    pluginData = usePluginData(
-      'docusaurus-plugin-content-docs',
-      'platform-enterprise',
-    );
-  } catch (e) {
-    return null;
+  const allDocsData = useAllPluginInstancesData(
+    'docusaurus-plugin-content-docs',
+  );
+  // Find the plugin whose path matches the current pathname
+  for (const [pluginId, pluginData] of Object.entries(allDocsData)) {
+    if (pluginData?.path && location.pathname.startsWith(pluginData.path)) {
+      return pluginId;
+    }
   }
-  const {savePreferredVersionName} = useDocsPreferredVersion(
-    'platform-enterprise',
+  return null;
+}
+/**
+ * Helper functions to get version documents
+ */
+function getVersionMainDoc(version) {
+  return version.docs.find((doc) => doc.id === version.mainDocId);
+}
+function getVersionTargetDoc(version, activeDocContext) {
+  // Try to link to the same doc in another version
+  // When not possible, fallback to the "main doc" of the version
+  return (
+    activeDocContext.alternateDocVersions[version.name] ??
+    getVersionMainDoc(version)
   );
-  const versions = useVersions('platform-enterprise');
+}
+const VersionSwitcherInner = ({isOpen, setIsOpen, pluginId}) => {
+  const dropdownRef = useRef(null);
+  // Always call hooks unconditionally - this component only renders when pluginId exists
+  const versions = useVersions(pluginId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
   const currentVersion = useDocsVersion();
-  const [isEnterprisePage, setEnterprisePage] = useState(false);
-  useEffect(() => {
-    if (location.pathname.startsWith('/platform-enterprise')) {
-      setEnterprisePage(true);
-    } else {
-      setEnterprisePage(false);
-    }
-  }, [location.pathname]);
+  const activeDocContext = useActiveDocContext(pluginId);
+  // Only show version switcher if there is at least 1 version
+  if (!versions || versions.length === 0) return null;
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current?.contains(event.target)) return;
@@ -47,20 +61,9 @@ const VersionSwitcher = ({isOpen, setIsOpen}) => {
   function handleSelectVersion(version) {
     savePreferredVersionName(version);
   }
-  if (typeof window === 'undefined') return null;
-  if (!versions || versions.length === 0) return null;
-  if (!isEnterprisePage) return null;
   const items = versions.filter(
     (version) => version.label !== currentVersion?.label,
   );
-  let urlSuffix = '';
-  if (
-    currentVersion &&
-    location.pathname.startsWith(`/platform-enterprise/${currentVersion.label}`)
-  ) {
-    const currentVersionPrefix = `/platform-enterprise/${currentVersion.label}`;
-    urlSuffix = location.pathname.replace(currentVersionPrefix, '');
-  }
   return (
     <div ref={dropdownRef} className="relative px-4">
       <div
@@ -89,23 +92,44 @@ const VersionSwitcher = ({isOpen, setIsOpen}) => {
 
         {isOpen && (
           <div className="absolute left-4 right-4 top-full -mt-0.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 border-t-gray-200 dark:border-t-gray-600 rounded-b-lg overflow-hidden z-50 transition-all duration-100">
-            {items?.map((version) => (
-              <div
-                key={version.name}
-                className="w-full"
-                onClick={() => handleSelectVersion(version.name)}>
-                <Link
-                  to={`${version.path}${urlSuffix}`}
-                  className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0">
-                  v{version.label}{' '}
-                  {version.label === versions[0]?.label ? '(current)' : ''}
-                </Link>
-              </div>
-            ))}
+            {items?.map((version) => {
+              const targetDoc = getVersionTargetDoc(version, activeDocContext);
+              return (
+                <div
+                  key={version.name}
+                  className="w-full"
+                  onClick={() => handleSelectVersion(version.name)}>
+                  <Link
+                    to={targetDoc.path}
+                    className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0">
+                    v{version.label}{' '}
+                    {version.label === versions[0]?.label ? '(current)' : ''}
+                  </Link>
+                </div>
+              );
+            })}
           </div>
         )}
       </div>
     </div>
   );
 };
+/**
+ * Main VersionSwitcher component that detects active plugin and delegates to inner component
+ */
+const VersionSwitcher = ({isOpen, setIsOpen}) => {
+  const activePluginId = useActiveDocsPlugin();
+  // SSR guard
+  if (typeof window === 'undefined') return null;
+  // No active docs plugin found
+  if (!activePluginId) return null;
+  // Render the inner component with the detected plugin ID
+  return (
+    <VersionSwitcherInner
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      pluginId={activePluginId}
+    />
+  );
+};
 export default VersionSwitcher;

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

@@ -1,7 +1,6 @@
 import React, {useState} from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import {useLocation} from '@docusaurus/router';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
@@ -14,12 +13,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
       sidebar: {hideable},
     },
   } = useThemeConfig();
-  const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
-  // Check if URL contains /platform-enterprise
-  const showVersionSwitcher = location.pathname.includes(
-    '/platform-enterprise',
-  );
   return (
     <div
       className={clsx(
@@ -29,9 +23,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
         'h-full relative w-full',
       )}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      {showVersionSwitcher && (
-        <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
-      )}
+      <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
       <Content path={path} sidebar={sidebar} />
       {hideable && (
         <div className="absolute right-0 top-[3.75rem]">

package/lib/theme/DocSidebarItem/Category/styles.module.css

@@ -33,3 +33,8 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+/* Sidebar alignment - match category items with link items indentation */
+:global(.theme-doc-sidebar-item-category-level-2.menu__list-item) {
+  margin-left: 1rem !important;
+}

package/package.json

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

package/src/theme/DocSidebar/Desktop/Content/VersionSwitcher/index.tsx

@@ -3,8 +3,14 @@ import {
   useVersions,
   useDocsVersion,
   useDocsPreferredVersion,
+  useActiveDocContext,
 } from "@docusaurus/plugin-content-docs/client";
-import { usePluginData } from "@docusaurus/useGlobalData";
+import type {
+  GlobalVersion,
+  GlobalDoc,
+  ActiveDocContext,
+} from "@docusaurus/plugin-content-docs/client";
+import { useAllPluginInstancesData } from "@docusaurus/useGlobalData";
 import { useLocation } from "@docusaurus/router";
 import Link from "@docusaurus/Link";
 
@@ -13,30 +19,66 @@ interface VersionSwitcherProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen }) => {
-  const dropdownRef = useRef<HTMLDivElement>(null);
+interface DocsPluginData {
+  path: string;
+  versions: any[];
+  [key: string]: any;
+}
+
+/**
+ * Detects which docs plugin is active based on the current pathname
+ */
+function useActiveDocsPlugin(): string | null {
   const location = useLocation();
-  
-  // check if the plugin exists first
-  let pluginData;
-  try {
-    pluginData = usePluginData('docusaurus-plugin-content-docs', 'platform-enterprise');
-  } catch (e) {
-    return null;
+  const allDocsData = useAllPluginInstancesData('docusaurus-plugin-content-docs') as Record<string, DocsPluginData>;
+
+  // Find the plugin whose path matches the current pathname
+  for (const [pluginId, pluginData] of Object.entries(allDocsData)) {
+    if (pluginData?.path && location.pathname.startsWith(pluginData.path)) {
+      return pluginId;
+    }
   }
 
-  const { savePreferredVersionName } = useDocsPreferredVersion("platform-enterprise");
-  const versions = useVersions("platform-enterprise");
+  return null;
+}
+
+/**
+ * Helper functions to get version documents
+ */
+function getVersionMainDoc(version: GlobalVersion): GlobalDoc {
+  return version.docs.find((doc) => doc.id === version.mainDocId)!;
+}
+
+function getVersionTargetDoc(
+  version: GlobalVersion,
+  activeDocContext: ActiveDocContext,
+): GlobalDoc {
+  // Try to link to the same doc in another version
+  // When not possible, fallback to the "main doc" of the version
+  return (
+    activeDocContext.alternateDocVersions[version.name] ??
+    getVersionMainDoc(version)
+  );
+}
+
+/**
+ * Inner component that handles version switching for a specific plugin
+ */
+interface VersionSwitcherInnerProps extends VersionSwitcherProps {
+  pluginId: string;
+}
+
+const VersionSwitcherInner: React.FC<VersionSwitcherInnerProps> = ({ isOpen, setIsOpen, pluginId }) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Always call hooks unconditionally - this component only renders when pluginId exists
+  const versions = useVersions(pluginId);
+  const { savePreferredVersionName } = useDocsPreferredVersion(pluginId);
   const currentVersion = useDocsVersion();
-  const [isEnterprisePage, setEnterprisePage] = useState(false);
+  const activeDocContext = useActiveDocContext(pluginId);
 
-  useEffect(() => {
-    if (location.pathname.startsWith('/platform-enterprise')) {
-      setEnterprisePage(true);
-    } else {
-      setEnterprisePage(false);
-    }
-  }, [location.pathname]);
+  // Only show version switcher if there is at least 1 version
+  if (!versions || versions.length === 0) return null;
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -56,24 +98,10 @@ const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen })
     savePreferredVersionName(version);
   }
 
-  if (typeof window === "undefined") return null;
-  if (!versions || versions.length === 0) return null;
-  if (!isEnterprisePage) return null;
-
   const items = versions.filter(
     (version) => version.label !== currentVersion?.label,
   );
 
-  let urlSuffix = "";
-
-  if (
-    currentVersion &&
-    location.pathname.startsWith(`/platform-enterprise/${currentVersion.label}`)
-  ) {
-    const currentVersionPrefix = `/platform-enterprise/${currentVersion.label}`;
-    urlSuffix = location.pathname.replace(currentVersionPrefix, "");
-  }
-
   return (
     <div ref={dropdownRef} className="relative px-4">
       <div className={`bg-white dark:bg-gray-900 rounded-lg border border-gray-300 dark:border-gray-700 overflow-hidden ${isOpen ? 'rounded-b-none' : ''}`}>
@@ -87,33 +115,36 @@ const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen })
               ? "(current)"
               : ""}
           </span>
-          <svg 
+          <svg
             className={`w-5 h-5 transition-transform duration-200 ${isOpen ? 'rotate-0' : '-rotate-90'}`}
-            xmlns="http://www.w3.org/2000/svg" 
+            xmlns="http://www.w3.org/2000/svg"
             viewBox="4 4 16 16"
             fill="currentColor"
           >
             <path d="M11.8152 13.1989L10.0167 11.1432C9.80447 10.9013 9.97697 10.5214 10.2991 10.5214H13.8961C13.9682 10.5214 14.0388 10.5421 14.0994 10.5811C14.16 10.6201 14.2081 10.6758 14.2379 10.7414C14.2677 10.8071 14.2779 10.8799 14.2674 10.9512C14.2569 11.0226 14.226 11.0893 14.1785 11.1435L12.38 13.1985C12.3448 13.2388 12.3014 13.2711 12.2527 13.2932C12.204 13.3153 12.1511 13.3268 12.0976 13.3268C12.0441 13.3268 11.9912 13.3153 11.9425 13.2932C11.8938 13.2711 11.8504 13.2388 11.8152 13.1985V13.1989Z" />
           </svg>
         </button>
-        
+
         {isOpen && (
           <div className="absolute left-4 right-4 top-full -mt-0.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 border-t-gray-200 dark:border-t-gray-600 rounded-b-lg overflow-hidden z-50 transition-all duration-100">
-            {items?.map((version) => (
-              <div
-                key={version.name}
-                className="w-full"
-                onClick={() => handleSelectVersion(version.name)}
-              >
-                <Link
-                  to={`${version.path}${urlSuffix}`}
-                  className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0"
+            {items?.map((version) => {
+              const targetDoc = getVersionTargetDoc(version, activeDocContext);
+              return (
+                <div
+                  key={version.name}
+                  className="w-full"
+                  onClick={() => handleSelectVersion(version.name)}
                 >
-                  v{version.label}{" "}
-                  {version.label === versions[0]?.label ? "(current)" : ""}
-                </Link>
-              </div>
-            ))}
+                  <Link
+                    to={targetDoc.path}
+                    className="h-9 w-full flex items-center justify-between px-3 text-sm bg-transparent cursor-pointer text-gray-900 dark:text-white transition-colors hover:bg-gray-100 dark:hover:bg-gray-800 no-underline border-t border-gray-200 dark:border-gray-700 first:border-t-0"
+                  >
+                    v{version.label}{" "}
+                    {version.label === versions[0]?.label ? "(current)" : ""}
+                  </Link>
+                </div>
+              );
+            })}
           </div>
         )}
       </div>
@@ -121,4 +152,20 @@ const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen })
   );
 };
 
+/**
+ * Main VersionSwitcher component that detects active plugin and delegates to inner component
+ */
+const VersionSwitcher: React.FC<VersionSwitcherProps> = ({ isOpen, setIsOpen }) => {
+  const activePluginId = useActiveDocsPlugin();
+
+  // SSR guard
+  if (typeof window === "undefined") return null;
+
+  // No active docs plugin found
+  if (!activePluginId) return null;
+
+  // Render the inner component with the detected plugin ID
+  return <VersionSwitcherInner isOpen={isOpen} setIsOpen={setIsOpen} pluginId={activePluginId} />;
+};
+
 export default VersionSwitcher;

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

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import {useLocation} from '@docusaurus/router';
 import Logo from '@theme/Logo';
 import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
 import Content from '@theme/DocSidebar/Desktop/Content';
@@ -17,12 +16,8 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
     },
   } = useThemeConfig();
 
-  const location = useLocation();
   const [isOpen, setIsOpen] = useState(false);
 
-  // Check if URL contains /platform-enterprise
-  const showVersionSwitcher = location.pathname.includes('/platform-enterprise');
-
   return (
     <div
       className={clsx(
@@ -32,9 +27,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
         'h-full relative w-full'
       )}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      {showVersionSwitcher && (
-        <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
-      )}
+      <VersionSwitcher isOpen={isOpen} setIsOpen={setIsOpen} />
       <Content path={path} sidebar={sidebar} />
       {hideable && <div className="absolute right-0 top-[3.75rem]"><CollapseButton onClick={onCollapse} /></div>}
     </div>

package/src/theme/DocSidebarItem/Category/styles.module.css

@@ -33,3 +33,8 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+/* Sidebar alignment - match category items with link items indentation */
+:global(.theme-doc-sidebar-item-category-level-2.menu__list-item) {
+  margin-left: 1rem !important;
+}

package/src/theme-seqera.d.ts

@@ -51,6 +51,7 @@ declare module '@seqera/docusaurus-theme-seqera' {
       footer: {
         socialLinks?: SocialLink[];
       };
+      docs?: {};
     };
   };