@seqera/docusaurus-theme-seqera 1.0.0

package/src/theme/MDXComponents/Button/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  href?: string;
+  to?: string;
+  onClick?: () => void;
+}
+
+export default function MDXButton({
+  children,
+  href,
+  to,
+  onClick,
+}: ButtonProps): JSX.Element {
+  const className = `btn btn-outline shadow-none btn-sm border px-6 py-1 text-[.9rem] hover:border-black hover:bg-black hover:text-white! dark:border-gray-600 dark:text-white dark:hover:border-white dark:hover:bg-white dark:hover:text-black! no-underline!`;
+
+  // External link
+  if (href) {
+    return (
+      <a href={href} className={className} target="_blank" rel="noopener noreferrer">
+        {children}
+      </a>
+    );
+  }
+
+  // Internal link
+  if (to) {
+    return (
+      <Link to={to} className={className}>
+        {children}
+      </Link>
+    );
+  }
+
+  // Regular button
+  return (
+    <button className={className} onClick={onClick}>
+      {children}
+    </button>
+  );
+}

package/src/theme/MDXComponents/Code.tsx

@@ -0,0 +1,26 @@
+
+
+import type {ComponentProps, ReactNode} from 'react';
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import CodeInline from '@theme/CodeInline';
+import type {Props} from '@theme/MDXComponents/Code';
+
+function shouldBeInline(props: Props) {
+  return (
+    // empty code blocks have no props.children,
+    // see https://github.com/facebook/docusaurus/pull/9704
+    typeof props.children !== 'undefined' &&
+    React.Children.toArray(props.children).every(
+      (el) => typeof el === 'string' && !el.includes('\n'),
+    )
+  );
+}
+
+export default function MDXCode(props: Props): ReactNode {
+  return shouldBeInline(props) ? (
+    <CodeInline {...props} />
+  ) : (
+    <CodeBlock {...(props as ComponentProps<typeof CodeBlock>)} />
+  );
+}

package/src/theme/MDXComponents/Details.tsx

@@ -0,0 +1,26 @@
+
+
+import React, {
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import Details from '@theme/Details';
+import type {Props} from '@theme/MDXComponents/Details';
+
+export default function MDXDetails(props: Props): ReactNode {
+  const items = React.Children.toArray(props.children);
+  // Split summary item from the rest to pass it as a separate prop to the
+  // Details theme component
+  const summary = items.find(
+    (item): item is ReactElement<ComponentProps<'summary'>> =>
+      React.isValidElement(item) && item.type === 'summary',
+  );
+  const children = <>{items.filter((item) => item !== summary)}</>;
+
+  return (
+    <Details {...props} summary={summary}>
+      {children}
+    </Details>
+  );
+}

package/src/theme/MDXComponents/Heading.tsx

@@ -0,0 +1,9 @@
+
+
+import React, {type ReactNode} from 'react';
+import Heading from '@theme/Heading';
+import type {Props} from '@theme/MDXComponents/Heading';
+
+export default function MDXHeading(props: Props): ReactNode {
+  return <Heading {...props} />;
+}

package/src/theme/MDXComponents/Img/index.tsx

@@ -0,0 +1,23 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+
+import styles from './styles.module.css';
+
+function transformImgClassName(className?: string): string {
+  return clsx(className, styles.img);
+}
+
+export default function MDXImg(props: Props): ReactNode {
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img
+      decoding="async"
+      loading="lazy"
+      {...props}
+      className={transformImgClassName(props.className)}
+    />
+  );
+}

package/src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,5 @@
+
+
+.img {
+  height: auto;
+}

package/src/theme/MDXComponents/Li.tsx

@@ -0,0 +1,17 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import {useAnchorTargetClassName} from '@docusaurus/theme-common';
+import type {Props} from '@theme/MDXComponents/Li';
+
+export default function MDXLi(props: Props): ReactNode | undefined {
+  // MDX Footnotes have ids such as <li id="user-content-fn-1-953011">
+  useBrokenLinks().collectAnchor(props.id);
+  const anchorTargetClassName = useAnchorTargetClassName(props.id);
+
+  return (
+    <li className={clsx(anchorTargetClassName, props.className)} {...props} />
+  );
+}

package/src/theme/MDXComponents/Pre.tsx

@@ -0,0 +1,10 @@
+
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/MDXComponents/Pre';
+
+export default function MDXPre(props: Props): ReactNode | undefined {
+  // With MDX 2, this element is only used for fenced code blocks
+  // It always receives a MDXComponents/Code as children
+  return <>{props.children}</>;
+}

package/src/theme/MDXComponents/Ul/index.tsx

@@ -0,0 +1,25 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Ul';
+
+import styles from './styles.module.css';
+
+function transformUlClassName(className?: string): string | undefined {
+  // Fix https://github.com/facebook/docusaurus/issues/9098
+  if (typeof className === 'undefined') {
+    return undefined;
+  }
+  return clsx(
+    className,
+    // This class is set globally by GitHub/MDX. We keep the global class, and
+    // add another class to get a task list without the default ul styling
+    // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
+    className?.includes('contains-task-list') && styles.containsTaskList,
+  );
+}
+
+export default function MDXUl(props: Props): ReactNode {
+  return <ul {...props} className={transformUlClassName(props.className)} />;
+}

package/src/theme/MDXComponents/Ul/styles.module.css

@@ -0,0 +1,9 @@
+
+
+.containsTaskList {
+  list-style: none;
+}
+
+:not(.containsTaskList > li) > .containsTaskList {
+  padding-left: 0;
+}

package/src/theme/MDXComponents/index.tsx

@@ -0,0 +1,47 @@
+
+
+import React, {type ComponentProps} from 'react';
+import Head from '@docusaurus/Head';
+import MDXCode from '@theme/MDXComponents/Code';
+import MDXA from '@theme/MDXComponents/A';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXUl from '@theme/MDXComponents/Ul';
+import MDXLi from '@theme/MDXComponents/Li';
+import MDXImg from '@theme/MDXComponents/Img';
+import MDXButton from '@theme/MDXComponents/Button';
+import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
+import AddedInVersion from "../AdmonitionVersioned/AddedInVersion";
+import ChangedInVersion from "../AdmonitionVersioned/ChangedInVersion";
+import DeprecatedInVersion from "../AdmonitionVersioned/DeprecatedInVersion";
+
+
+import type {MDXComponentsObject} from '@theme/MDXComponents';
+
+const MDXComponents: MDXComponentsObject = {
+  Head,
+  details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
+  Details: MDXDetails,
+  code: MDXCode,
+  a: MDXA,
+  Button: MDXButton,
+  pre: MDXPre,
+  ul: MDXUl,
+  li: MDXLi,
+  img: MDXImg,
+  h1: (props: ComponentProps<'h1'>) => <MDXHeading as="h1" {...props} />,
+  h2: (props: ComponentProps<'h2'>) => <MDXHeading as="h2" {...props} />,
+  h3: (props: ComponentProps<'h3'>) => <MDXHeading as="h3" {...props} />,
+  h4: (props: ComponentProps<'h4'>) => <MDXHeading as="h4" {...props} />,
+  h5: (props: ComponentProps<'h5'>) => <MDXHeading as="h5" {...props} />,
+  h6: (props: ComponentProps<'h6'>) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+  AddedInVersion: AddedInVersion,
+  ChangedInVersion: ChangedInVersion,
+  DeprecatedInVersion: DeprecatedInVersion,
+};
+
+export default MDXComponents;

package/src/theme/MDXContent/index.tsx

@@ -0,0 +1,10 @@
+
+
+import React, {type ReactNode} from 'react';
+import {MDXProvider} from '@mdx-js/react';
+import MDXComponents from '@theme/MDXComponents';
+import type {Props} from '@theme/MDXContent';
+
+export default function MDXContent({children}: Props): ReactNode {
+  return <MDXProvider components={MDXComponents}>{children}</MDXProvider>;
+}

package/src/theme/MDXPage/index.tsx

@@ -0,0 +1,87 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import MDXContent from '@theme/MDXContent';
+import TOC from '@theme/TOC';
+import ContentVisibility from '@theme/ContentVisibility';
+import type {Props} from '@theme/MDXPage';
+
+import EditMetaRow from '@theme/EditMetaRow';
+import styles from './styles.module.css';
+
+export default function MDXPage(props: Props): ReactNode {
+  const {content: MDXPageContent} = props;
+  const {metadata, assets} = MDXPageContent;
+  const {
+    title,
+    editUrl,
+    description,
+    frontMatter,
+    lastUpdatedBy,
+    lastUpdatedAt,
+  } = metadata;
+  const {
+    keywords,
+    wrapperClassName,
+    hide_table_of_contents: hideTableOfContents,
+  } = frontMatter;
+  const image = assets.image ?? frontMatter.image;
+
+  const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
+
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
+        ThemeClassNames.page.mdxPage,
+      )}>
+      <Layout>
+        <PageMetadata
+          title={title}
+          description={description}
+          keywords={keywords}
+          image={image}
+        />
+        <main className="container container--fluid margin-vert--lg">
+          <div className={clsx('row', styles.mdxPageWrapper)}>
+            <div className={clsx('col', !hideTableOfContents && 'col--8')}>
+              <ContentVisibility metadata={metadata} />
+              <article>
+                <MDXContent>
+                  <MDXPageContent />
+                </MDXContent>
+              </article>
+              {canDisplayEditMetaRow && (
+                <EditMetaRow
+                  className={clsx(
+                    'margin-top--sm',
+                    ThemeClassNames.pages.pageFooterEditMetaRow,
+                  )}
+                  editUrl={editUrl}
+                  lastUpdatedAt={lastUpdatedAt}
+                  lastUpdatedBy={lastUpdatedBy}
+                />
+              )}
+            </div>
+            {!hideTableOfContents && MDXPageContent.toc.length > 0 && (
+              <div className="col col--2">
+                <TOC
+                  toc={MDXPageContent.toc}
+                  minHeadingLevel={frontMatter.toc_min_heading_level}
+                  maxHeadingLevel={frontMatter.toc_max_heading_level}
+                />
+              </div>
+            )}
+          </div>
+        </main>
+      </Layout>
+    </HtmlClassNameProvider>
+  );
+}

package/src/theme/MDXPage/styles.module.css

@@ -0,0 +1,5 @@
+
+
+.mdxPageWrapper {
+  justify-content: center;
+}

package/src/theme/Mermaid.tsx

@@ -0,0 +1,11 @@
+
+
+// This component is meant to be implemented by a Mermaid renderer theme
+// It is notable created to be overridden by docusaurus-theme-mermaid
+
+// By default, the classic theme does not provide any Mermaid implementation
+// Yet we declare it there so that we can register it in MDX
+// TODO later the mermaid theme should be able to register its MDX component
+// see https://github.com/facebook/docusaurus/pull/7490#issuecomment-1279117288
+
+export {default} from '@docusaurus/Noop';

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

@@ -0,0 +1,29 @@
+
+
+import React, {type ReactNode} from 'react';
+import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
+import ColorModeToggle from '@theme/ColorModeToggle';
+import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
+
+export default function NavbarColorModeToggle({className}: Props): ReactNode {
+  const navbarStyle = useThemeConfig().navbar.style;
+  const {disableSwitch, respectPrefersColorScheme} = useThemeConfig().colorMode;
+  const {colorModeChoice, setColorMode} = useColorMode();
+
+  if (disableSwitch) {
+    return null;
+  }
+
+  return (
+    <ColorModeToggle
+      className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
+      respectPrefersColorScheme={respectPrefersColorScheme}
+      value={colorModeChoice}
+      onChange={setColorMode}
+    />
+  );
+}

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

@@ -0,0 +1,5 @@
+
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}

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

@@ -0,0 +1,152 @@
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+  useThemeConfig,
+  ErrorCauseBoundary,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
+import SearchBar from '@theme/SearchBar';
+import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle';
+import NavbarLogo from '@theme/Navbar/Logo';
+import NavbarSearch from '@theme/Navbar/Search';
+import Submenu from '../Submenu';
+import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
+
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items as NavbarItemConfig[];
+}
+
+function NavbarItems({items}: {items: NavbarItemConfig[]}): ReactNode {
+  return (
+    <>
+      {items.map((item, i) => (
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+              {cause: error},
+            )
+          }>
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+function NavbarContentLayout({
+  left,
+  right,
+  isMenuOpen,
+}: {
+  left: ReactNode;
+  right: ReactNode;
+  isMenuOpen?: boolean | undefined;
+}) {
+  return (
+    <div className="navbar__inner">
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerLeft,
+          'navbar__items',
+        )}>
+        {left}
+      </div>
+      <div
+        className={clsx(
+          ThemeClassNames.layout.navbar.containerRight,
+          'navbar__items navbar__items--right',
+        )}>
+        {right}
+
+        <div className="hidden md:flex!">
+          <Submenu />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function NavbarContent(): ReactNode {
+  const mobileSidebar = useNavbarMobileSidebar();
+
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+
+  const searchBarItem = items.find((item) => item.type === 'search');
+
+  return (
+    <div className="w-full flex flex-col">
+      <div className="pt-3 pb-1">
+        <NavbarContentLayout
+          left={
+            <>
+              <NavbarLogo />
+            </>
+          }
+          right={
+            <>
+              <NavbarItems items={rightItems} />
+
+              <SearchBar />
+              <div className="mr-2">
+                <NavbarColorModeToggle className={styles.colorModeToggle} />
+              </div>
+              <div className="hidden md:flex!">
+                <a
+                  className="btn btn-secondary hover:bg-nextflow-600 shadow-none border text-black btn-sm px-6 py-1 text-[.9rem] mr-2 "
+                  href="https://cloud.seqera.io/oauth/login/auth0">
+                  Log In
+                </a>
+                <a
+                  className="btn btn-outline shadow-none btn-sm border px-6 py-1 text-[.9rem] hover:border-black hover:bg-black hover:text-white"
+                  href="https://cloud.seqera.io/oauth/login/auth0">
+                  Sign Up
+                </a>
+              </div>
+              {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+            </>
+          }
+        />
+      </div>
+      <div className="hidden md:flex! text-[.9rem] pt-1">
+        <div className="flex flex-row justify-between w-full">
+          <div>
+            <NavbarItems items={leftItems} />
+          </div>
+          <div className="mr-2">
+            <Link
+              className="navbar__link ml-8 font-normal"
+              to={'/platform-cloud/seqera-ai'}
+              aria-label="Seqera AI">
+              Seqera AI
+            </Link>
+            <Link
+              className="navbar__link ml-8 font-normal"
+              to={'/platform-cloud/seqera-mcp'}
+              aria-label="Seqera MCP">
+              Seqera MCP
+            </Link>
+            <Link
+              className="navbar__link ml-8 font-normal"
+              to={'/changelog'}
+              aria-label="Changelog">
+              Changelog
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+
+
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}
+
+/*
+Restore some Infima style that broke with CSS Cascade Layers
+See https://github.com/facebook/docusaurus/pull/11142
+ */
+:global(.navbar__items--right) > :last-child {
+  padding-right: 0;
+}
+

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

@@ -0,0 +1,59 @@
+
+
+import React, {type ComponentProps, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames, useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useHideableNavbar,
+  useNavbarMobileSidebar,
+} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
+import type {Props} from '@theme/Navbar/Layout';
+
+import styles from './styles.module.css';
+
+function NavbarBackdrop(props: ComponentProps<'div'>) {
+  return (
+    <div
+      role="presentation"
+      {...props}
+      className={clsx('navbar-sidebar__backdrop', props.className)}
+    />
+  );
+}
+
+export default function NavbarLayout({children}: Props): ReactNode {
+  const {
+    navbar: {hideOnScroll, style},
+  } = useThemeConfig();
+  const mobileSidebar = useNavbarMobileSidebar();
+  const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
+  return (
+    <nav
+      ref={navbarRef}
+      aria-label={translate({
+        id: 'theme.NavBar.navAriaLabel',
+        message: 'Main',
+        description: 'The ARIA label for the main navigation',
+      })}
+      className={clsx(
+        ThemeClassNames.layout.navbar.container,
+        'navbar border-b border-base-content/20 md:pt-10 md:pb-10 px-4 sticky top-0 shadow-none',
+        'navbar--fixed-top',
+        hideOnScroll && [
+          styles.navbarHideable,
+          !isNavbarVisible && styles.navbarHidden,
+        ],
+        {
+          'navbar--dark': style === 'dark',
+          'navbar--primary': style === 'primary',
+          'navbar-sidebar--show': mobileSidebar.shown,
+        },
+      )}>
+      {children}
+      <NavbarBackdrop onClick={mobileSidebar.toggle} />
+      <NavbarMobileSidebar />
+    </nav>
+  );
+}

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

@@ -0,0 +1,9 @@
+
+
+.navbarHideable {
+  transition: transform var(--ifm-transition-fast) ease;
+}
+
+.navbarHidden {
+  transform: translate3d(0, calc(-100% - 2px), 0);
+}

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

@@ -0,0 +1,14 @@
+
+
+import React, {type ReactNode} from 'react';
+import Logo from '@theme/Logo';
+
+export default function NavbarLogo(): ReactNode {
+  return (
+    <Logo
+      className="navbar__brand"
+      imageClassName="navbar__logo"
+      titleClassName="hidden"
+    />
+  );
+}