@seqera/docusaurus-theme-seqera 1.0.0

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

@@ -0,0 +1,22 @@
+
+
+.codeBlockContent {
+  position: relative;
+  /* rtl:ignore */
+  direction: ltr;
+  border-radius: inherit;
+}
+
+.codeBlockTitle {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
+  padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

package/src/theme/CodeBlock/Line/Token/index.tsx

@@ -0,0 +1,13 @@
+
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/CodeBlock/Line/Token';
+
+// Pass-through components that users can swizzle and customize
+export default function CodeBlockLineToken({
+  line,
+  token,
+  ...props
+}: Props): ReactNode {
+  return <span {...props} />;
+}

package/src/theme/CodeBlock/Line/index.tsx

@@ -0,0 +1,61 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import LineToken from '@theme/CodeBlock/Line/Token';
+import type {Props} from '@theme/CodeBlock/Line';
+
+import styles from './styles.module.css';
+
+type Token = Props['line'][number];
+
+// Replaces '\n' by ''
+// Historical code, not sure why we even need this :/
+function fixLineBreak(line: Token[]) {
+  const singleLineBreakToken =
+    line.length === 1 && line[0]!.content === '\n' ? line[0] : undefined;
+
+  if (singleLineBreakToken) {
+    return [{...singleLineBreakToken, content: ''}];
+  }
+
+  return line;
+}
+
+export default function CodeBlockLine({
+  line: lineProp,
+  classNames,
+  showLineNumbers,
+  getLineProps,
+  getTokenProps,
+}: Props): ReactNode {
+  const line = fixLineBreak(lineProp);
+
+  const lineProps = getLineProps({
+    line,
+    className: clsx(classNames, showLineNumbers && styles.codeLine),
+  });
+
+  const lineTokens = line.map((token, key) => {
+    const tokenProps = getTokenProps({token});
+    return (
+      <LineToken key={key} {...tokenProps} line={line} token={token}>
+        {tokenProps.children}
+      </LineToken>
+    );
+  });
+
+  return (
+    <span {...lineProps}>
+      {showLineNumbers ? (
+        <>
+          <span className={styles.codeLineNumber} />
+          <span className={styles.codeLineContent}>{lineTokens}</span>
+        </>
+      ) : (
+        lineTokens
+      )}
+      <br />
+    </span>
+  );
+}

package/src/theme/CodeBlock/Line/styles.module.css

@@ -0,0 +1,47 @@
+
+
+/* Intentionally has zero specificity, so that to be able to override
+the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
+:where(:root) {
+  --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
+}
+
+:where([data-theme='dark']) {
+  --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
+}
+
+:global(.theme-code-block-highlighted-line) {
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.codeLine {
+  display: table-row;
+  counter-increment: line-count;
+}
+
+.codeLineNumber {
+  display: table-cell;
+  text-align: right;
+  width: 1%;
+  position: sticky;
+  left: 0;
+  padding: 0 var(--ifm-pre-padding);
+  background: var(--ifm-pre-background);
+  overflow-wrap: normal;
+}
+
+.codeLineNumber::before {
+  content: counter(line-count);
+  opacity: 0.4;
+}
+
+:global(.theme-code-block-highlighted-line) .codeLineNumber::before {
+  opacity: 0.8;
+}
+
+.codeLineContent {
+  padding-right: var(--ifm-pre-padding);
+}

package/src/theme/CodeBlock/Title/index.tsx

@@ -0,0 +1,10 @@
+
+
+import type {ReactNode} from 'react';
+
+import type {Props} from '@theme/CodeBlock/Title';
+
+// Just a pass-through component that users can swizzle and customize
+export default function CodeBlockTitle({children}: Props): ReactNode {
+  return children;
+}

package/src/theme/CodeBlock/index.tsx

@@ -0,0 +1,40 @@
+
+
+import React, {isValidElement, type ReactNode} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import ElementContent from '@theme/CodeBlock/Content/Element';
+import StringContent from '@theme/CodeBlock/Content/String';
+import type {Props} from '@theme/CodeBlock';
+
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children: ReactNode): ReactNode {
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return children;
+  }
+  // The children is now guaranteed to be one/more plain strings
+  return Array.isArray(children) ? children.join('') : (children as string);
+}
+
+export default function CodeBlock({
+  children: rawChildren,
+  ...props
+}: Props): ReactNode {
+  // The Prism theme on SSR is always the default theme but the site theme can
+  // be in a different mode. React hydration doesn't update DOM styles that come
+  // from SSR. Hence force a re-render after mounting to apply the current
+  // relevant styles.
+  const isBrowser = useIsBrowser();
+  const children = maybeStringifyChildren(rawChildren);
+  const CodeBlockComp =
+    typeof children === 'string' ? StringContent : ElementContent;
+  return (
+    <CodeBlockComp key={String(isBrowser)} {...props}>
+      {children as string}
+    </CodeBlockComp>
+  );
+}

package/src/theme/CodeInline/index.tsx

@@ -0,0 +1,11 @@
+
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/CodeInline';
+
+// Simple component used to render inline code blocks
+// its purpose is to be swizzled and customized
+// MDX 1 used to have a inlineCode comp, see https://mdxjs.com/migrating/v2/
+export default function CodeInline(props: Props): ReactNode {
+  return <code {...props} />;
+}

package/src/theme/ColorModeToggle/index.tsx

@@ -0,0 +1,140 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
+import IconLightMode from '@theme/Icon/LightMode';
+import IconDarkMode from '@theme/Icon/DarkMode';
+import IconSystemColorMode from '@theme/Icon/SystemColorMode';
+import type {Props} from '@theme/ColorModeToggle';
+import type {ColorMode} from '@docusaurus/theme-common';
+
+import styles from './styles.module.css';
+
+// The order of color modes is defined here, and can be customized with swizzle
+function getNextColorMode(
+  colorMode: ColorMode | null,
+  respectPrefersColorScheme: boolean,
+) {
+  // 2-value transition
+  if (!respectPrefersColorScheme) {
+    return colorMode === 'dark' ? 'light' : 'dark';
+  }
+
+  // 3-value transition
+  switch (colorMode) {
+    case null:
+      return 'light';
+    case 'light':
+      return 'dark';
+    case 'dark':
+      return null;
+    default:
+      throw new Error(`unexpected color mode ${colorMode}`);
+  }
+}
+
+function getColorModeLabel(colorMode: ColorMode | null): string {
+  switch (colorMode) {
+    case null:
+      return translate({
+        message: 'system mode',
+        id: 'theme.colorToggle.ariaLabel.mode.system',
+        description: 'The name for the system color mode',
+      });
+    case 'light':
+      return translate({
+        message: 'light mode',
+        id: 'theme.colorToggle.ariaLabel.mode.light',
+        description: 'The name for the light color mode',
+      });
+    case 'dark':
+      return translate({
+        message: 'dark mode',
+        id: 'theme.colorToggle.ariaLabel.mode.dark',
+        description: 'The name for the dark color mode',
+      });
+    default:
+      throw new Error(`unexpected color mode ${colorMode}`);
+  }
+}
+
+function getColorModeAriaLabel(colorMode: ColorMode | null) {
+  return translate(
+    {
+      message: 'Switch between dark and light mode (currently {mode})',
+      id: 'theme.colorToggle.ariaLabel',
+      description: 'The ARIA label for the color mode toggle',
+    },
+    {
+      mode: getColorModeLabel(colorMode),
+    },
+  );
+}
+
+function CurrentColorModeIcon(): ReactNode {
+  // 3 icons are always rendered for technical reasons
+  // We use "data-theme-choice" to render the correct one
+  // This must work even before React hydrates
+  return (
+    <>
+      <IconLightMode
+        // a18y is handled at the button level,
+        // not relying on button content (svg icons)
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
+      />
+      <IconDarkMode
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.darkToggleIcon)}
+      />
+      <IconSystemColorMode
+        aria-hidden
+        className={clsx(styles.toggleIcon, styles.systemToggleIcon)}
+      />
+    </>
+  );
+}
+
+function ColorModeToggle({
+  className,
+  buttonClassName,
+  respectPrefersColorScheme,
+  value,
+  onChange,
+}: Props): ReactNode {
+  const isBrowser = useIsBrowser();
+  return (
+    <div className={clsx(styles.toggle, className)}>
+      <button
+        className={clsx(
+          'clean-btn',
+          styles.toggleButton,
+          !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
+        )}
+        type="button"
+        onClick={() =>
+          onChange(getNextColorMode(value, respectPrefersColorScheme))
+        }
+        disabled={!isBrowser}
+        title={getColorModeLabel(value)}
+        aria-label={getColorModeAriaLabel(value)}
+
+        // For accessibility decisions
+        // See https://github.com/facebook/docusaurus/issues/7667#issuecomment-2724401796
+
+        // aria-live disabled on purpose - This is annoying because:
+        // - without this attribute, VoiceOver doesn't announce on button enter
+        // - with this attribute, VoiceOver announces twice on ctrl+opt+space
+        // - with this attribute, NVDA announces many times
+        // aria-live="polite"
+      >
+        <CurrentColorModeIcon />
+      </button>
+    </div>
+  );
+}
+
+export default React.memo(ColorModeToggle);

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

@@ -0,0 +1,35 @@
+
+
+.toggle {
+  width: 2rem;
+  height: 2rem;
+}
+
+.toggleButton {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  transition: background var(--ifm-transition-fast);
+}
+
+.toggleButton:hover {
+  background: var(--ifm-color-emphasis-200);
+}
+
+.toggleIcon {
+  display: none;
+}
+
+[data-theme-choice='system'] .systemToggleIcon,
+[data-theme-choice='light'] .lightToggleIcon,
+[data-theme-choice='dark'] .darkToggleIcon {
+  display: initial;
+}
+
+.toggleButtonDisabled {
+  cursor: not-allowed;
+}

package/src/theme/ContentVisibility/Draft/index.tsx

@@ -0,0 +1,22 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+  ThemeClassNames,
+  DraftBannerTitle,
+  DraftBannerMessage,
+} from '@docusaurus/theme-common';
+import Admonition from '@theme/Admonition';
+import type {Props} from '@theme/ContentVisibility/Draft';
+
+export default function Draft({className}: Props): ReactNode {
+  return (
+    <Admonition
+      type="caution"
+      title={<DraftBannerTitle />}
+      className={clsx(className, ThemeClassNames.common.draftBanner)}>
+      <DraftBannerMessage />
+    </Admonition>
+  );
+}

package/src/theme/ContentVisibility/Unlisted/index.tsx

@@ -0,0 +1,37 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {
+  ThemeClassNames,
+  UnlistedBannerTitle,
+  UnlistedBannerMessage,
+  UnlistedMetadata,
+} from '@docusaurus/theme-common';
+import Admonition from '@theme/Admonition';
+import type {Props} from '@theme/ContentVisibility/Unlisted';
+
+function UnlistedBanner({className}: Props) {
+  return (
+    <Admonition
+      type="caution"
+      title={<UnlistedBannerTitle />}
+      className={clsx(className, ThemeClassNames.common.unlistedBanner)}>
+      <UnlistedBannerMessage />
+    </Admonition>
+  );
+}
+
+export default function Unlisted(props: Props): ReactNode {
+  return (
+    <>
+      {/*
+      Unlisted metadata declared here for simplicity.
+      Ensures we never forget to add the correct noindex metadata.
+      Also gives a central place for user to swizzle override default metadata.
+      */}
+      <UnlistedMetadata />
+      <UnlistedBanner {...props} />
+    </>
+  );
+}

package/src/theme/ContentVisibility/index.tsx

@@ -0,0 +1,20 @@
+
+
+import React, {type ReactNode} from 'react';
+
+import type {Props} from '@theme/ContentVisibility';
+import Draft from '@theme/ContentVisibility/Draft';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
+
+export default function ContentVisibility({metadata}: Props): ReactNode {
+  const {unlisted, frontMatter} = metadata;
+  // Reading draft/unlisted status from frontMatter is useful to display
+  // the banners in dev mode (in dev, metadata.unlisted is always false)
+  // See https://github.com/facebook/docusaurus/issues/8285
+  return (
+    <>
+      {(unlisted || frontMatter.unlisted) && <Unlisted />}
+      {frontMatter.draft && <Draft />}
+    </>
+  );
+}

package/src/theme/Details/index.tsx

@@ -0,0 +1,21 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
+import type {Props} from '@theme/Details';
+
+import styles from './styles.module.css';
+
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info';
+
+export default function Details({...props}: Props): ReactNode {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}

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

@@ -0,0 +1,8 @@
+
+
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+}

package/src/theme/DocBreadcrumbs/Items/Home/index.tsx

@@ -0,0 +1,29 @@
+
+
+import React, {type ReactNode} from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
+import IconHome from '@theme/Icon/Home';
+
+import styles from './styles.module.css';
+
+export default function HomeBreadcrumbItem(): ReactNode {
+  const homeHref = useBaseUrl('/');
+
+  return (
+    <li className="breadcrumbs__item">
+      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
+        className="breadcrumbs__link no-underline pr-1"
+        href={homeHref}>
+          Home
+        {/* <IconHome className={styles.breadcrumbHomeIcon} /> */}
+      </Link>
+    </li>
+  );
+}

package/src/theme/DocBreadcrumbs/Items/Home/styles.module.css

@@ -0,0 +1,9 @@
+
+
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
+  height: 1.1rem;
+  width: 1.1rem;
+}

package/src/theme/DocBreadcrumbs/StructuredData/index.tsx

@@ -0,0 +1,19 @@
+
+
+import React, {type ReactNode} from 'react';
+import Head from '@docusaurus/Head';
+import {useBreadcrumbsStructuredData} from '@docusaurus/plugin-content-docs/client';
+import type {Props} from '@theme/DocBreadcrumbs/StructuredData';
+
+export default function DocBreadcrumbsStructuredData(props: Props): ReactNode {
+  const structuredData = useBreadcrumbsStructuredData({
+    breadcrumbs: props.breadcrumbs,
+  });
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify(structuredData)}
+      </script>
+    </Head>
+  );
+}

package/src/theme/DocBreadcrumbs/index.tsx

@@ -0,0 +1,98 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client';
+import {useHomePageRoute} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import {translate} from '@docusaurus/Translate';
+import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import DocBreadcrumbsStructuredData from '@theme/DocBreadcrumbs/StructuredData';
+
+import styles from './styles.module.css';
+
+// TODO move to design system folder
+function BreadcrumbsItemLink({
+  children,
+  href,
+  isLast,
+}: {
+  children: ReactNode;
+  href: string | undefined;
+  isLast: boolean;
+}): ReactNode {
+  const className = 'breadcrumbs__link pr-1';
+  if (isLast) {
+    return <span className={className}>{children}</span>;
+  }
+  return href ? (
+    <Link className={className} href={href}>
+      <span>{children}</span>
+    </Link>
+  ) : (
+    <span className={className}>{children}</span>
+  );
+}
+
+// TODO move to design system folder
+function BreadcrumbsItem({
+  children,
+  active,
+}: {
+  children: ReactNode;
+  active?: boolean;
+}): ReactNode {
+  return (
+    <li
+      className={clsx('breadcrumbs__item', {
+        'breadcrumbs__item--active': active,
+      })}>
+      {children}
+    </li>
+  );
+}
+
+export default function DocBreadcrumbs(): ReactNode {
+  const breadcrumbs = useSidebarBreadcrumbs();
+  const homePageRoute = useHomePageRoute();
+
+  if (!breadcrumbs) {
+    return null;
+  }
+
+  return (
+    <>
+      <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
+      <nav
+        className={clsx(
+          ThemeClassNames.docs.docBreadcrumbs,
+          styles.breadcrumbsContainer,
+          ''
+        )}
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.navAriaLabel',
+          message: 'Breadcrumbs',
+          description: 'The ARIA label for the breadcrumbs',
+        })}>
+        <ul className="breadcrumbs">
+          {homePageRoute && <HomeBreadcrumbItem />}
+          {breadcrumbs.map((item, idx) => {
+            const isLast = idx === breadcrumbs.length - 1;
+            const href =
+              item.type === 'category' && item.linkUnlisted
+                ? undefined
+                : item.href;
+            return (
+              <BreadcrumbsItem key={idx}>
+                <BreadcrumbsItemLink href={href} isLast={isLast}>
+                  {item.label}
+                </BreadcrumbsItemLink>
+              </BreadcrumbsItem>
+            );
+          })}
+        </ul>
+      </nav>
+    </>
+  );
+}

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

@@ -0,0 +1,14 @@
+
+
+.breadcrumbsContainer {
+  --ifm-breadcrumb-size-multiplier: 0.8;
+  margin-bottom: 0.8rem;
+
+  a, li, span {
+    transition: opacity .25s;
+  }
+  a:hover {
+    opacity: .8;
+    transition: opacity .25s;
+  }
+}