@seqera/docusaurus-theme-seqera 1.0.0 → 1.0.2-next.10

package/lib/theme/DocVersionBanner/index.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Link from '@docusaurus/Link';
+import Translate from '@docusaurus/Translate';
+import {
+  useActivePlugin,
+  useDocVersionSuggestions,
+} from '@docusaurus/plugin-content-docs/client';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useDocsPreferredVersion,
+  useDocsVersion,
+} from '@docusaurus/plugin-content-docs/client';
+function UnreleasedVersionLabel({siteTitle, versionMetadata}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unreleasedVersionLabel"
+      description="The label used to tell the user that he's browsing an unreleased doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionMetadata.label}</b>,
+      }}>
+      {
+        'This is unreleased documentation for {siteTitle} {versionLabel} version.'
+      }
+    </Translate>
+  );
+}
+function UnmaintainedVersionLabel({siteTitle, versionMetadata}) {
+  return (
+    <Translate
+      id="theme.docs.versions.unmaintainedVersionLabel"
+      description="The label used to tell the user that he's browsing an unmaintained doc version"
+      values={{
+        siteTitle,
+        versionLabel: <b>{versionMetadata.label}</b>,
+      }}>
+      {
+        'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
+      }
+    </Translate>
+  );
+}
+const BannerLabelComponents = {
+  unreleased: UnreleasedVersionLabel,
+  unmaintained: UnmaintainedVersionLabel,
+};
+function BannerLabel(props) {
+  const BannerLabelComponent =
+    BannerLabelComponents[props.versionMetadata.banner];
+  return <BannerLabelComponent {...props} />;
+}
+function LatestVersionSuggestionLabel({versionLabel, to, onClick}) {
+  return (
+    <Translate
+      id="theme.docs.versions.latestVersionSuggestionLabel"
+      description="The label used to tell the user to check the latest version"
+      values={{
+        versionLabel,
+        latestVersionLink: (
+          <b>
+            <Link to={to} onClick={onClick}>
+              <Translate
+                id="theme.docs.versions.latestVersionLinkLabel"
+                description="The label used for the latest version suggestion link label">
+                latest version
+              </Translate>
+            </Link>
+          </b>
+        ),
+      }}>
+      {
+        'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'
+      }
+    </Translate>
+  );
+}
+function DocVersionBannerEnabled({className, versionMetadata}) {
+  const {
+    siteConfig: {title: siteTitle},
+  } = useDocusaurusContext();
+  const {pluginId} = useActivePlugin({failfast: true});
+  const getVersionMainDoc = (version) =>
+    version.docs.find((doc) => doc.id === version.mainDocId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
+  const {latestDocSuggestion, latestVersionSuggestion} =
+    useDocVersionSuggestions(pluginId);
+  // Try to link to same doc in latest version (not always possible), falling
+  // back to main doc of latest version
+  const latestVersionSuggestedDoc =
+    latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);
+  return (
+    <div
+      className={clsx(
+        className,
+        ThemeClassNames.docs.docVersionBanner,
+        'alert alert--warning margin-bottom--md',
+      )}
+      role="alert">
+      <div>
+        <BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
+      </div>
+      <div className="margin-top--md">
+        <LatestVersionSuggestionLabel
+          versionLabel={latestVersionSuggestion.label}
+          to={latestVersionSuggestedDoc.path}
+          onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
+        />
+      </div>
+    </div>
+  );
+}
+export default function DocVersionBanner({className}) {
+  const versionMetadata = useDocsVersion();
+  if (versionMetadata.banner) {
+    return (
+      <DocVersionBannerEnabled
+        className={className}
+        versionMetadata={versionMetadata}
+      />
+    );
+  }
+  return null;
+}

package/lib/theme/DocVersionRoot/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocVersionRoot';
+export default function DocVersionRoot(props: Props): ReactNode;

package/lib/theme/DocVersionRoot/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {HtmlClassNameProvider, PageMetadata} from '@docusaurus/theme-common';
+import {
+  getDocsVersionSearchTag,
+  DocsVersionProvider,
+} from '@docusaurus/plugin-content-docs/client';
+import renderRoutes from '@docusaurus/renderRoutes';
+import SearchMetadata from '@theme/SearchMetadata';
+function DocVersionRootMetadata(props) {
+  const {version} = props;
+  return (
+    <>
+      <SearchMetadata
+        version={version.version}
+        tag={getDocsVersionSearchTag(version.pluginId, version.version)}
+      />
+      <PageMetadata>
+        {version.noIndex && <meta name="robots" content="noindex, nofollow" />}
+      </PageMetadata>
+    </>
+  );
+}
+function DocVersionRootContent(props) {
+  const {version, route} = props;
+  return (
+    <HtmlClassNameProvider className={version.className}>
+      <DocsVersionProvider version={version}>
+        {renderRoutes(route.routes)}
+      </DocsVersionProvider>
+    </HtmlClassNameProvider>
+  );
+}
+export default function DocVersionRoot(props) {
+  return (
+    <>
+      <DocVersionRootMetadata {...props} />
+      <DocVersionRootContent {...props} />
+    </>
+  );
+}

package/lib/theme/DocsRoot/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/DocVersionRoot';
+export default function DocsRoot(props: Props): ReactNode;

package/lib/theme/DocsRoot/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames, HtmlClassNameProvider} from '@docusaurus/theme-common';
+import renderRoutes from '@docusaurus/renderRoutes';
+import Layout from '@theme/Layout';
+export default function DocsRoot(props) {
+  return (
+    <HtmlClassNameProvider className={clsx(ThemeClassNames.wrapper.docsPages)}>
+      <Layout>{renderRoutes(props.route.routes)}</Layout>
+    </HtmlClassNameProvider>
+  );
+}

package/lib/theme/EditMetaRow/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/EditMetaRow';
+export default function EditMetaRow({ className, editUrl, lastUpdatedAt, lastUpdatedBy, }: Props): ReactNode;

package/lib/theme/EditMetaRow/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import EditThisPage from '@theme/EditThisPage';
+import LastUpdated from '@theme/LastUpdated';
+import styles from './styles.module.css';
+export default function EditMetaRow({
+  className,
+  editUrl,
+  lastUpdatedAt,
+  lastUpdatedBy,
+}) {
+  return (
+    <div className={clsx('row', className)}>
+      <div className={clsx('col', styles.noPrint)}>
+        {editUrl && <EditThisPage editUrl={editUrl} />}
+      </div>
+      <div className={clsx('col', styles.lastUpdated)}>
+        {(lastUpdatedAt || lastUpdatedBy) && (
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/lib/theme/EditMetaRow/styles.module.css

@@ -0,0 +1,19 @@
+
+
+.lastUpdated {
+  font-size: smaller;
+  font-style: italic;
+  margin-top: 0.2rem;
+}
+
+@media (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}
+
+@media print {
+  .noPrint {
+    display: none;
+  }
+}

package/lib/theme/EditThisPage/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/EditThisPage';
+export default function EditThisPage({ editUrl }: Props): ReactNode;

package/lib/theme/EditThisPage/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Translate from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import IconEdit from '@theme/Icon/Edit';
+export default function EditThisPage({editUrl}) {
+  return (
+    <Link
+      to={editUrl}
+      className={'flex flex-row items-center no-underline text-[.8rem]'}>
+      <IconEdit className="max-w-[15px]" />
+      <Translate
+        id="theme.common.editThisPage"
+        description="The link label to edit the current page">
+        Edit this page on Github
+      </Translate>
+    </Link>
+  );
+}

package/lib/theme/ErrorPageContent.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Error';
+export default function ErrorPageContent({ error, tryAgain }: Props): ReactNode;

package/lib/theme/ErrorPageContent.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Translate from '@docusaurus/Translate';
+import {
+  ErrorBoundaryError,
+  ErrorBoundaryTryAgainButton,
+} from '@docusaurus/theme-common';
+import Heading from '@theme/Heading';
+export default function ErrorPageContent({error, tryAgain}) {
+  return (
+    <main className="container margin-vert--xl">
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate
+              id="theme.ErrorPageContent.title"
+              description="The title of the fallback page when the page crashed">
+              This page crashed.
+            </Translate>
+          </Heading>
+          <div className="margin-vert--lg">
+            <ErrorBoundaryTryAgainButton
+              onClick={tryAgain}
+              className="button button--primary shadow--lw"
+            />
+          </div>
+          <hr />
+          <div className="margin-vert--md">
+            <ErrorBoundaryError error={error} />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/lib/theme/Footer/Copyright/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Copyright';
+export default function FooterCopyright({ copyright }: Props): ReactNode;

package/lib/theme/Footer/Copyright/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function FooterCopyright({copyright}) {
+  return (
+    <div
+      className="footer__copyright"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: copyright}}
+    />
+  );
+}

package/lib/theme/Footer/Layout/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Layout';
+export default function FooterLayout({ style, links, logo, copyright, }: Props): ReactNode;

package/lib/theme/Footer/Layout/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+export default function FooterLayout({style, links, logo, copyright}) {
+  return (
+    <footer
+      className={clsx(
+        ThemeClassNames.layout.footer.container,
+        'border-t border-base-content/20',
+        {
+          'footer--dark': style === 'dark',
+        },
+      )}>
+      <div className="w-full flex flex-row justify-between mb-4 pt-8 px-4">
+        {links}
+        {logo && <div className="">{logo && logo}</div>}
+      </div>
+      {copyright && (
+        <div className="flex flex-col-reverse md:flex-row justify-center md:justify-between w-full text-[.75rem] pb-6 px-4">
+          <div>{copyright}</div>
+          <div className="mb-2 mt-6 md:m-0">
+            <a className="mr-4 hover:underline" href="https://seqera.io/legal/">
+              User Agreement
+            </a>
+            <a
+              className="hover:underline"
+              href="https://seqera.io/privacy-policy/">
+              Privacy Statement
+            </a>
+          </div>
+        </div>
+      )}
+    </footer>
+  );
+}

package/lib/theme/Footer/LinkItem/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/LinkItem';
+export default function FooterLinkItem({ item }: Props): ReactNode;

package/lib/theme/Footer/LinkItem/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, className, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  return (
+    <Link
+      className={clsx('footer__link-item mr-6 hover:underline', className)}
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

package/lib/theme/Footer/Links/MultiColumn/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Links/MultiColumn';
+export default function FooterLinksMultiColumn({ columns }: Props): ReactNode;

package/lib/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className={clsx('footer__item', item.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <li key={item.href ?? item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+function Column({column}) {
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.layout.footer.column,
+        'col footer__col',
+        column.className,
+      )}>
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

package/lib/theme/Footer/Links/Simple/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Links/Simple';
+export default function FooterLinksSimple({ links }: Props): ReactNode;

package/lib/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className={clsx('footer__link-item', item.className)}
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links text-[.9rem]">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {/* {links.length !== i + 1 && <Separator />} */}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

package/lib/theme/Footer/Links/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Links';
+export default function FooterLinks({ links }: Props): ReactNode;

package/lib/theme/Footer/Links/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

package/lib/theme/Footer/Logo/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Footer/Logo';
+export default function FooterLogo({ logo }: Props): ReactNode;

package/lib/theme/Footer/Logo/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className={clsx('footer__logo', logo.className)}
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+      style={logo.style}
+    />
+  );
+}
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

package/lib/theme/Footer/Logo/styles.module.css

@@ -0,0 +1,11 @@
+
+
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}

package/lib/theme/Footer/index.d.ts

@@ -0,0 +1,4 @@
+import React, { type ReactNode } from 'react';
+declare function Footer(): ReactNode;
+declare const _default: React.MemoExoticComponent<typeof Footer>;
+export default _default;

package/lib/theme/Footer/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
+function Footer() {
+  const {footer} = useThemeConfig();
+  if (!footer) {
+    return null;
+  }
+  const {copyright, links, logo, style} = footer;
+  return (
+    <FooterLayout
+      style={style}
+      links={links && links.length > 0 && <FooterLinks links={links} />}
+      logo={logo && <FooterLogo logo={logo} />}
+      copyright={copyright && <FooterCopyright copyright={copyright} />}
+    />
+  );
+}
+export default React.memo(Footer);

package/lib/theme/Heading/index.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Heading';
+import './styles.module.css';
+export default function Heading({ as: As, id, ...props }: Props): ReactNode;

package/lib/theme/Heading/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {useAnchorTargetClassName} from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import useBrokenLinks from '@docusaurus/useBrokenLinks';
+import './styles.module.css';
+export default function Heading({as: As, id, ...props}) {
+  const brokenLinks = useBrokenLinks();
+  const anchorTargetClassName = useAnchorTargetClassName(id);
+  // H1 headings do not need an id because they don't appear in the TOC.
+  if (As === 'h1' || !id) {
+    return <As {...props} id={undefined} />;
+  }
+  brokenLinks.collectAnchor(id);
+  const anchorTitle = translate(
+    {
+      id: 'theme.common.headingLinkTitle',
+      message: 'Direct link to {heading}',
+      description: 'Title for link to heading',
+    },
+    {
+      heading: typeof props.children === 'string' ? props.children : id,
+    },
+  );
+  return (
+    <As
+      {...props}
+      className={clsx('anchor', anchorTargetClassName, props.className)}
+      id={id}>
+      {props.children}
+      <Link
+        className="hash-link"
+        to={`#${id}`}
+        aria-label={anchorTitle}
+        title={anchorTitle}
+        translate="no">
+        &#8203;
+      </Link>
+    </As>
+  );
+}

package/lib/theme/Heading/styles.module.css

@@ -0,0 +1,17 @@
+
+
+:global(.hash-link) {
+  opacity: 0;
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
+  user-select: none;
+}
+
+:global(.hash-link::before) {
+  content: '#';
+}
+
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
+}

package/lib/theme/Homepage/index.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export interface Props {
+    children?: ReactNode;
+}
+export default function Homepage({ children }: Props): ReactNode;