@seqera/docusaurus-theme-seqera 1.0.0

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

@@ -0,0 +1,37 @@
+
+
+import React, {type ReactNode} from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import IconClose from '@theme/Icon/Close';
+import NavbarLogo from '@theme/Navbar/Logo';
+
+function CloseButton() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
+      className="clean-btn navbar-sidebar__close"
+      onClick={() => mobileSidebar.toggle()}>
+      <IconClose color="var(--ifm-color-emphasis-600)" />
+    </button>
+  );
+}
+
+export default function NavbarMobileSidebarHeader(): ReactNode {
+  return (
+    <div className="navbar-sidebar__brand w-full px-4 flex justify-between">
+      <div>
+      <NavbarLogo />
+      </div>
+      {/* <NavbarColorModeToggle className="margin-right--md" /> */}
+      <CloseButton />
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import React, {version, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Navbar/MobileSidebar/Layout';
+import styles from './styles.module.css';
+
+// TODO Docusaurus v4: remove temporary inert workaround
+//  See https://github.com/facebook/react/issues/17157
+//  See https://github.com/radix-ui/themes/pull/509
+function inertProps(inert: boolean) {
+  const isBeforeReact19 = parseInt(version!.split('.')[0]!, 10) < 19;
+  if (isBeforeReact19) {
+    return {inert: inert ? '' : undefined};
+  }
+  return {inert};
+}
+
+function NavbarMobileSidebarPanel({
+  children,
+  inert,
+}: {
+  children: ReactNode;
+  inert: boolean;
+}) {
+  return (
+    <div
+      className={clsx(
+        'relative w-full h-full p-4',
+        // ThemeClassNames.layout.navbar.mobileSidebar.panel,
+        // 'navbar-sidebar__item menu',
+      )}
+      {...inertProps(inert)}>
+      {children}
+    </div>
+  );
+}
+
+export default function NavbarMobileSidebarLayout({
+  header,
+  primaryMenu,
+  secondaryMenu,
+}: Props): ReactNode {
+  const {shown: secondaryMenuShown} = useNavbarSecondaryMenu();
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.layout.navbar.mobileSidebar.container,
+        'navbar-sidebar',
+      )}>
+      {header}
+
+      <div
+        className={clsx('mobilemenu', {
+          hidden: secondaryMenuShown,
+        })}>
+        <NavbarMobileSidebarPanel inert={secondaryMenuShown}>
+          {primaryMenu}
+        </NavbarMobileSidebarPanel>
+      </div>
+      <div
+        className={clsx('mobilemenu', {
+          'flex': secondaryMenuShown,
+          'hidden' : !secondaryMenuShown,
+        })}>
+        <NavbarMobileSidebarPanel inert={!secondaryMenuShown}>
+          {secondaryMenu}
+        </NavbarMobileSidebarPanel>
+      </div>
+    </div>
+  );
+}

package/src/theme/Navbar/MobileSidebar/Layout/styles.module.css

@@ -0,0 +1,11 @@
+.theme-layout-navbar {
+
+    .mobilemenu {
+        display: none;
+    }
+    &.navbar-sidebar--show {
+        .mobilemenu {
+            display: block;
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+import React, {type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+import SubmenuLinks from '../../Submenu/SubmenuLinks';
+import Link from '@docusaurus/Link';
+
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  // TODO how can the order be defined for mobile?
+  // Should we allow providing a different list of items?
+  const items = useNavbarItems();
+
+  return (
+    <div>
+      <div className="relative flex flex-row justify-center items-stretch w-full max-w-full mb-10">
+        <a
+          className="btn btn-primary shadow-none border text-white btn-sm px-6 py-1 text-[.9rem] mr-2 flex-1"
+          href="https://cloud.seqera.io/oauth/login/auth0">
+          Log In
+        </a>
+        <a
+          className="btn btn-outline shadow-none btn-sm border flex-1 px-6 py-1 text-[.9rem] hover:border-black hover:bg-black  bg-white text-black dark:text-black hover:text-white"
+          href="https://cloud.seqera.io/oauth/login/auth0">
+          Sign Up
+        </a>
+      </div>
+      <ul className="menu__list relative w-full">
+        <div className="flex flex-row">
+          <div>
+            <h3 className="font-semibold mb-3 text-[.8rem] text-gray-900 dark:text-gray-100">
+              Docs
+            </h3>
+
+            {items.map((item, i) => (
+              <NavbarItem
+                mobile
+                {...item}
+                onClick={() => mobileSidebar.toggle()}
+                key={i}
+              />
+            ))}
+          </div>
+
+          <div className="flex flex-col ml-20">
+            <h3 className="font-semibold mb-3 text-[.8rem] text-gray-900 dark:text-gray-100">
+              Resources
+            </h3>
+
+            <li className="mb-3">
+              <li className="mb-3">
+                <Link
+                  className="menu__link"
+                  to={'/changelog'}
+                  aria-label="Changelog">
+                  Changelog
+                </Link>
+              </li>
+              <Link
+                className="menu__link"
+                to={'/platform-cloud/seqera-ai'}
+                aria-label="Seqera AI">
+                Seqera AI
+              </Link>
+            </li>
+            <li className="mb-3">
+              <Link
+                className="menu__link"
+                to={'/platform-cloud/seqera-mcp'}
+                aria-label="Seqera MCP">
+                Seqera MCP
+              </Link>
+            </li>
+          </div>
+        </div>
+      </ul>
+
+      <div className="w-full border-t border-gray-600 pt-4 mt-8">
+        <SubmenuLinks />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,34 @@
+
+
+import React, {type ComponentProps, type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useNavbarSecondaryMenu} from '@docusaurus/theme-common/internal';
+import Translate from '@docusaurus/Translate';
+
+function SecondaryMenuBackButton(props: ComponentProps<'button'>) {
+  return (
+    <button {...props} type="button" className="clean-btn navbar-sidebar__back mb-4 text-[.875rem] text-gray-900 font-semibold mt-4">
+      <Translate
+        id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
+        description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
+        ← Main Menu
+      </Translate>
+    </button>
+  );
+}
+
+// The secondary menu slides from the right and shows contextual information
+// such as the docs sidebar
+export default function NavbarMobileSidebarSecondaryMenu(): ReactNode {
+  const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0;
+  const secondaryMenu = useNavbarSecondaryMenu();
+  return (
+    <>
+      {/* edge-case: prevent returning to the primaryMenu when it's empty */}
+      {!isPrimaryMenuEmpty && (
+        <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} />
+      )}
+      {secondaryMenu.content}
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+
+
+import React, {type ReactNode} from 'react';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import IconMenu from '@theme/Icon/Menu';
+
+export default function MobileSidebarToggle(): ReactNode {
+  const {toggle, shown} = useNavbarMobileSidebar();
+  return (
+    <button
+      onClick={toggle}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+        message: 'Toggle navigation bar',
+        description:
+          'The ARIA label for hamburger menu button of mobile navigation',
+      })}
+      aria-expanded={shown}
+      className="navbar__toggle clean-btn"
+      type="button">
+      <IconMenu />
+    </button>
+  );
+}

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

@@ -0,0 +1,28 @@
+
+
+import React, {type ReactNode} from 'react';
+import {
+  useLockBodyScroll,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarMobileSidebarLayout from '@theme/Navbar/MobileSidebar/Layout';
+import NavbarMobileSidebarHeader from '@theme/Navbar/MobileSidebar/Header';
+import NavbarMobileSidebarPrimaryMenu from '@theme/Navbar/MobileSidebar/PrimaryMenu';
+import NavbarMobileSidebarSecondaryMenu from '@theme/Navbar/MobileSidebar/SecondaryMenu';
+
+export default function NavbarMobileSidebar(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+  useLockBodyScroll(mobileSidebar.shown);
+
+  if (!mobileSidebar.shouldRender) {
+    return null;
+  }
+
+  return (
+    <NavbarMobileSidebarLayout
+      header={<NavbarMobileSidebarHeader />}
+      primaryMenu={<NavbarMobileSidebarPrimaryMenu />}
+      secondaryMenu={<NavbarMobileSidebarSecondaryMenu />}
+    />
+  );
+}

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

@@ -0,0 +1,15 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/Navbar/Search';
+
+import styles from './styles.module.css';
+
+export default function NavbarSearch({children, className}: Props): ReactNode {
+  return (
+    <div className={clsx(className, styles.navbarSearchContainer)}>
+      {children}
+    </div>
+  );
+}

package/src/theme/Navbar/Search/styles.module.css

@@ -0,0 +1,22 @@
+
+
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:empty {
+  display: none;
+}
+
+@media (max-width: 996px) {
+  .navbarSearchContainer {
+    position: absolute;
+    right: var(--ifm-navbar-padding-horizontal);
+  }
+}
+
+@media (min-width: 997px) {
+  .navbarSearchContainer {
+    padding: 0 var(--ifm-navbar-item-padding-horizontal);
+  }
+}

package/src/theme/Navbar/Submenu/SubmenuLinks.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import type {ComponentType, ReactNode} from 'react';
+import IconNextflow from '@theme/Icon/Nextflow';
+import IconSeqeraLogo from '@theme/Icon/SeqeraLogo';
+import IconQuestionMark from '@theme/Icon/QuestionMark';
+import IconChatBubble from '@theme/Icon/ChatBubble';
+import IconChatBubbles from '@theme/Icon/ChatBubbles';
+import IconAI from '@theme/Icon/AI';
+import IconEnvelope from '@theme/Icon/Envelope';
+
+interface LinkConfig {
+  label: string;
+  href: string;
+  icon: ComponentType<any>;
+}
+
+interface LinksConfig {
+  [key: string]: LinkConfig[];
+}
+
+interface LinkItemProps {
+  to: string;
+  children: ReactNode;
+}
+
+interface ColumnProps {
+  title: string;
+  links: LinkConfig[];
+}
+
+const LINKS_CONFIG: LinksConfig = {
+  Help: [
+    {label: 'Forum', href: 'https://community.seqera.io', icon: IconChatBubbles},
+    {
+      label: 'Support Portal',
+      href: 'https://support.seqera.io',
+      icon: IconQuestionMark,
+    },
+    {
+      label: 'Nextflow Slack',
+      href: 'https://www.nextflow.io/slack-invite.html',
+      icon: IconNextflow,
+    },
+    {label: 'Seqera AI', href: '/ask-ai', icon: IconAI},
+  ],
+  Company: [
+    {label: 'Seqera.io', href: '/about/', icon: IconSeqeraLogo},
+    {label: 'Contact us', href: '/contact-us/', icon: IconEnvelope},
+    {label: 'Submit Feedback', href: '/feedback/', icon: IconChatBubble},
+  ],
+};
+
+function isActive(path: string): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.location.pathname === path;
+}
+
+function getLinkHref(to: string): string {
+  if (to.startsWith('http')) {
+    return to;
+  }
+  return `https://seqera.io${to}`;
+}
+
+function isExternalNonSeqera(href: string): boolean {
+  return href.startsWith('http') && !href.includes('seqera.io');
+}
+
+function LinkItem({to, children}: LinkItemProps): ReactNode {
+  const href = getLinkHref(to);
+  const isExternal = isExternalNonSeqera(href);
+
+  const externalProps = isExternal
+    ? {target: '_blank', rel: 'noopener noreferrer'}
+    : {};
+
+  return (
+    <Link
+      to={href}
+      {...externalProps}
+      className={clsx(
+        'flex items-center gap-2 px-2 rounded-md h-[37px] mb-1',
+        'text-sm text-gray-900 dark:text-gray-100',
+        'transition-all duration-500 ease-in-out',
+        'hover:bg-nextflow-100 dark:hover:bg-gray-800 hover:no-underline',
+        isActive(href) && 'bg-blue-50 dark:bg-blue-900/30',
+      )}>
+      {children}
+    </Link>
+  );
+}
+
+function Column({title, links}: ColumnProps): ReactNode {
+  return (
+    <div className="flex flex-col items-start">
+      <h3 className="text-[0.8rem] font-semibold my-0.5 text-gray-900 dark:text-gray-100">
+        {title}
+      </h3>
+      <ul className="mt-3 -mx-2 p-0 list-none mb-0">
+        {links.map(({label, href, icon: Icon}) => (
+          <li key={label}>
+            <LinkItem to={href}>
+              <div
+                className={clsx(
+                  'flex items-center justify-center',
+                  'w-8 h-8 shrink-0 rounded p-2',
+                  'border border-gray-300 dark:border-gray-600',
+                )}
+                style={{
+                  backgroundColor: 'var(--ifm-navbar-background-color)',
+                  borderColor: 'var(--ifm-color-emphasis-300)',
+                }}>
+                <Icon className="text-black dark:text-white" />
+              </div>
+              <span className="text-black dark:text-white">{label}</span>
+            </LinkItem>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function SubmenuLinks(): ReactNode {
+  return (
+    <div className="flex p-2">
+      <div className="flex-auto flex flex-row gap-8">
+        {Object.entries(LINKS_CONFIG).map(([title, links]) => (
+          <Column key={title} title={title} links={links} />
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import React, {useState, useRef, useEffect, type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+import SubmenuLinks from './SubmenuLinks';
+
+export default function Submenu(): ReactNode {
+  const [isOpen, setIsOpen] = useState(false);
+  const submenuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const toggle = () => setIsOpen(!isOpen);
+  const close = () => setIsOpen(false);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        submenuRef.current &&
+        buttonRef.current &&
+        !submenuRef.current.contains(event.target as Node) &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        close();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        close();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        onClick={toggle}
+        className="hover:opacity-70"
+        aria-label={translate({
+          id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+          message: 'Toggle navigation bar',
+          description: 'The ARIA label for hamburger menu button',
+        })}
+        aria-expanded={isOpen}
+        type="button">
+        <div className={clsx(styles.hamburger)}>
+          <span />
+          <span />
+          <span />
+        </div>
+      </button>
+
+      <div
+        ref={submenuRef}
+        style={{
+          backgroundColor: 'var(--ifm-navbar-background-color)',
+          borderColor: 'var(--ifm-color-emphasis-300)',
+        }}
+        className={clsx(
+          styles.submenu,
+          'border rounded-sm',
+          'border-gray-300 dark:border-gray-700',
+          isOpen && styles.open,
+        )}>
+        <div className="flex p-2 pl-4">
+          <div className="flex-auto flex">
+            <SubmenuLinks />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/theme/Navbar/Submenu/styles.module.css

@@ -0,0 +1,82 @@
+.hamburger {
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  outline: none !important;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  width: 40px;
+  &:hover {
+    cursor: pointer;
+    background: transparent;
+  }
+  &:focus {
+    border: 2px solid blue;
+  }
+  & span {
+    width: 20px;
+    height: 2px;
+    background-color: black;
+    display: block;
+    margin: 4.8px auto;
+    transition: all 0.3s ease-in-out;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    box-sizing: border-box;
+    width: 20px;
+    height: 42px;
+    border: 3px solid transparent;
+    top: calc(50% - 21px);
+    left: calc(50% - 21px);
+    border-radius: 100%;
+    transition: all 0.3s ease-in-out;
+    background: none;
+  }
+  &.open {
+    @media (max-width: 996px) {
+      transform: rotate(45deg) translate(0, 0);
+      & span {
+        width: 21px;
+      }
+
+      & span:nth-child(2) {
+        opacity: 0;
+      }
+
+      & span:nth-child(1) {
+        transform: translateY(7px);
+      }
+
+      & span:nth-child(3) {
+        transform: translateY(-6.5px) rotate(90deg);
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] .hamburger {
+  &:focus {
+    border: 2px solid #f1f1f1;
+  }
+  & span {
+    background-color: #f1f1f1;
+  }
+}
+
+.submenu {
+  display: none;
+  position: fixed;
+  top: 3.5rem;
+  right: 1.5rem;
+  width: auto;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+  z-index: 200;
+}
+
+.submenu.open {
+  display: flex;
+}

package/src/theme/Navbar/index.tsx

@@ -0,0 +1,13 @@
+
+
+import React, {type ReactNode} from 'react';
+import NavbarLayout from '@theme/Navbar/Layout';
+import NavbarContent from '@theme/Navbar/Content';
+
+export default function Navbar(): ReactNode {
+  return (
+    <NavbarLayout>
+      <NavbarContent />
+    </NavbarLayout>
+  );
+}

package/src/theme/NavbarItem/ComponentTypes.tsx

@@ -0,0 +1,27 @@
+
+
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+
+import type {ComponentTypesObject} from '@theme/NavbarItem/ComponentTypes';
+
+const ComponentTypes: ComponentTypesObject = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+};
+
+export default ComponentTypes;