@seqera/docusaurus-theme-seqera 1.0.0 → 1.0.1-next.9

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import IconLanguage from '@theme/Icon/Language';
+import styles from './styles.module.css';
+function useLocaleDropdownUtils() {
+  const {
+    siteConfig,
+    i18n: {localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
+  const getLocaleConfig = (locale) => {
+    const localeConfig = localeConfigs[locale];
+    if (!localeConfig) {
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
+    }
+    return localeConfig;
+  };
+  const getBaseURLForLocale = (locale) => {
+    const localeConfig = getLocaleConfig(locale);
+    const isSameDomain = localeConfig.url === siteConfig.url;
+    if (isSameDomain) {
+      // Shorter paths if localized sites are hosted on the same domain
+      // This reduces HTML size a bit
+      return `pathname://${alternatePageUtils.createUrl({
+        locale,
+        fullyQualified: false,
+      })}`;
+    }
+    return alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: true,
+    });
+  };
+  return {
+    getURL: (locale, options) => {
+      // We have 2 query strings because
+      // - there's the current one
+      // - there's one user can provide through navbar config
+      // see https://github.com/facebook/docusaurus/pull/8915
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
+      return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
+    },
+    getLabel: (locale) => {
+      return getLocaleConfig(locale).label;
+    },
+    getLang: (locale) => {
+      return getLocaleConfig(locale).htmlLang;
+    },
+  };
+}
+export default function LocaleDropdownNavbarItem({
+  mobile,
+  dropdownItemsBefore,
+  dropdownItemsAfter,
+  queryString,
+  ...props
+}) {
+  const utils = useLocaleDropdownUtils();
+  const {
+    i18n: {currentLocale, locales},
+  } = useDocusaurusContext();
+  const localeItems = locales.map((locale) => {
+    return {
+      label: utils.getLabel(locale),
+      lang: utils.getLang(locale),
+      to: utils.getURL(locale, {queryString}),
+      target: '_self',
+      autoAddBaseUrl: false,
+      className:
+        // eslint-disable-next-line no-nested-ternary
+        locale === currentLocale
+          ? // Similar idea as DefaultNavbarItem: select the right Infima active
+            // class name. This cannot be substituted with isActive, because the
+            // target URLs contain `pathname://` and therefore are not NavLinks!
+            mobile
+            ? 'menu__link--active'
+            : 'dropdown__link--active'
+          : '',
+    };
+  });
+  const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+  // Mobile is handled a bit differently
+  const dropdownLabel = mobile
+    ? translate({
+        message: 'Languages',
+        id: 'theme.navbar.mobileLanguageDropdown.label',
+        description: 'The label for the mobile language switcher dropdown',
+      })
+    : utils.getLabel(currentLocale);
+  return (
+    <DropdownNavbarItem
+      {...props}
+      mobile={mobile}
+      label={
+        <>
+          <IconLanguage className={styles.iconLanguage} />
+          {dropdownLabel}
+        </>
+      }
+      items={items}
+    />
+  );
+}

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css

@@ -0,0 +1,6 @@
+
+
+.iconLanguage {
+  vertical-align: text-bottom;
+  margin-right: 5px;
+}

package/lib/theme/NavbarItem/NavbarNavLink.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/NavbarItem/NavbarNavLink';
+export default function NavbarNavLink({ activeBasePath, activeBaseRegex, to, href, label, html, isDropdownLink, prependBaseUrlToHref, ...props }: Props): ReactNode;

package/lib/theme/NavbarItem/NavbarNavLink.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function NavbarNavLink({
+  activeBasePath,
+  activeBaseRegex,
+  to,
+  href,
+  label,
+  html,
+  isDropdownLink,
+  prependBaseUrlToHref,
+  ...props
+}) {
+  // TODO all this seems hacky
+  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+  const toUrl = useBaseUrl(to);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  const isExternalLink = label && href && !isInternalUrl(href);
+  // Link content is set through html XOR label
+  const linkContentProps = html
+    ? {dangerouslySetInnerHTML: {__html: html}}
+    : {
+        children: (
+          <>
+            {label}
+            {isExternalLink && (
+              <IconExternalLink
+                {...(isDropdownLink && {width: 12, height: 12})}
+              />
+            )}
+          </>
+        ),
+      };
+  if (href) {
+    return (
+      <Link
+        href={prependBaseUrlToHref ? normalizedHref : href}
+        {...props}
+        {...linkContentProps}
+      />
+    );
+  }
+  return (
+    <Link
+      to={toUrl}
+      isNavLink
+      {...((activeBasePath || activeBaseRegex) && {
+        isActive: (_match, location) =>
+          activeBaseRegex
+            ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+            : location.pathname.startsWith(activeBaseUrl),
+      })}
+      {...props}
+      {...linkContentProps}
+    />
+  );
+}

package/lib/theme/NavbarItem/SearchNavbarItem.d.ts

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

package/lib/theme/NavbarItem/SearchNavbarItem.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import SearchBar from '@theme/SearchBar';
+import NavbarSearch from '@theme/Navbar/Search';
+export default function SearchNavbarItem({mobile, className}) {
+  if (mobile) {
+    return null;
+  }
+  return (
+    <NavbarSearch className={className}>
+      <SearchBar />
+    </NavbarSearch>
+  );
+}

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

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

package/lib/theme/NavbarItem/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ComponentTypes from '@theme/NavbarItem/ComponentTypes';
+function normalizeComponentType(type, props) {
+  // Backward compatibility: navbar item with no type set
+  // but containing dropdown items should use the type "dropdown"
+  if (!type || type === 'default') {
+    return 'items' in props ? 'dropdown' : 'default';
+  }
+  return type;
+}
+export default function NavbarItem({type, ...props}) {
+  const componentType = normalizeComponentType(type, props);
+  const NavbarItemComponent = ComponentTypes[componentType];
+  if (!NavbarItemComponent) {
+    throw new Error(`No NavbarItem component found for type "${type}".`);
+  }
+  return <NavbarItemComponent {...props} />;
+}

package/lib/theme/NotFound/Content/index.d.ts

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

package/lib/theme/NotFound/Content/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Heading from '@theme/Heading';
+export default function NotFoundContent({className}) {
+  return (
+    <main
+      className={clsx(
+        'prose__wrapper container-md py-18 flex justify-center items-center',
+        className,
+      )}>
+      <div className="">
+        <div className="">
+          <Heading as="h1" className="font-display font-semibold">
+            <Translate
+              id="theme.NotFound.title"
+              description="The title of the 404 page">
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p className="max-w-md">
+            <Translate
+              id="theme.NotFound.p1"
+              description="The first paragraph of the 404 page">
+              404: Something has gone wrong with our dataflow. The page you are
+              looking for does not exist.
+            </Translate>
+          </p>
+          <a
+            className="btn btn-secondary shadow-none border text-black"
+            href="/">
+            Back to docs homepage
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export default function Index(): ReactNode;

package/lib/theme/NotFound/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
+export default function Index() {
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  });
+  return (
+    <>
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
+    </>
+  );
+}

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

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

package/lib/theme/PaginatorNavLink/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+export default function PaginatorNavLink(props) {
+  const {permalink, title, subLabel, isNext} = props;
+  return (
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}>
+      {subLabel && (
+        <div className="pagination-nav__sublabel mb-1">{subLabel}</div>
+      )}
+      <div className="pagination-nav__label font-medium">{title}</div>
+    </Link>
+  );
+}

package/lib/theme/SearchBar.d.ts

@@ -0,0 +1 @@
+export { default } from '@docusaurus/Noop';

package/lib/theme/SearchBar.js

@@ -0,0 +1,5 @@
+// By default, the classic theme does not provide any SearchBar implementation
+// If you swizzled this, it is your responsibility to provide an implementation
+// Tip: swizzle the SearchBar from the Algolia theme for inspiration:
+// npm run swizzle @docusaurus/theme-search-algolia SearchBar
+export {default} from '@docusaurus/Noop';

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

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

package/lib/theme/SearchMetadata/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+// Note: we bias toward using Algolia metadata on purpose
+// Not doing so leads to confusion in the community,
+// as it requires to first crawl the site with the Algolia plugin enabled first
+// - https://github.com/facebook/docusaurus/issues/6693
+// - https://github.com/facebook/docusaurus/issues/4555
+export default function SearchMetadata({locale, version, tag}) {
+  // Seems safe to consider here the locale is the language, as the existing
+  // docsearch:language filter is afaik a regular string-based filter
+  const language = locale;
+  return (
+    <Head>
+      {/*
+        Docusaurus metadata, used by third-party search plugin
+        See https://github.com/cmfcmf/docusaurus-search-local/issues/99
+        */}
+      {locale && <meta name="docusaurus_locale" content={locale} />}
+      {version && <meta name="docusaurus_version" content={version} />}
+      {tag && <meta name="docusaurus_tag" content={tag} />}
+
+      {/* Algolia DocSearch metadata */}
+      {language && <meta name="docsearch:language" content={language} />}
+      {version && <meta name="docsearch:version" content={version} />}
+      {tag && <meta name="docsearch:docusaurus_tag" content={tag} />}
+    </Head>
+  );
+}

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

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export default function SiteMetadata(): ReactNode;

package/lib/theme/SiteMetadata/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {PageMetadata, useThemeConfig} from '@docusaurus/theme-common';
+import {
+  DEFAULT_SEARCH_TAG,
+  useAlternatePageUtils,
+  keyboardFocusedClassName,
+} from '@docusaurus/theme-common/internal';
+import {useLocation} from '@docusaurus/router';
+import {applyTrailingSlash} from '@docusaurus/utils-common';
+import SearchMetadata from '@theme/SearchMetadata';
+// TODO move to SiteMetadataDefaults or theme-common ?
+// Useful for i18n/SEO
+// See https://developers.google.com/search/docs/advanced/crawling/localized-versions
+// See https://github.com/facebook/docusaurus/issues/3317
+function AlternateLangHeaders() {
+  const {
+    i18n: {currentLocale, defaultLocale, localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const currentHtmlLang = localeConfigs[currentLocale].htmlLang;
+  // HTML lang is a BCP 47 tag, but the Open Graph protocol requires
+  // using underscores instead of dashes.
+  // See https://ogp.me/#optional
+  // See https://en.wikipedia.org/wiki/IETF_language_tag)
+  const bcp47ToOpenGraphLocale = (code) => code.replace('-', '_');
+  // Note: it is fine to use both "x-default" and "en" to target the same url
+  // See https://www.searchviu.com/en/multiple-hreflang-tags-one-url/
+  return (
+    <Head>
+      {Object.entries(localeConfigs).map(([locale, {htmlLang}]) => (
+        <link
+          key={locale}
+          rel="alternate"
+          href={alternatePageUtils.createUrl({
+            locale,
+            fullyQualified: true,
+          })}
+          hrefLang={htmlLang}
+        />
+      ))}
+      <link
+        rel="alternate"
+        href={alternatePageUtils.createUrl({
+          locale: defaultLocale,
+          fullyQualified: true,
+        })}
+        hrefLang="x-default"
+      />
+
+      <meta
+        property="og:locale"
+        content={bcp47ToOpenGraphLocale(currentHtmlLang)}
+      />
+      {Object.values(localeConfigs)
+        .filter((config) => currentHtmlLang !== config.htmlLang)
+        .map((config) => (
+          <meta
+            key={`meta-og-${config.htmlLang}`}
+            property="og:locale:alternate"
+            content={bcp47ToOpenGraphLocale(config.htmlLang)}
+          />
+        ))}
+    </Head>
+  );
+}
+// Default canonical url inferred from current page location pathname
+function useDefaultCanonicalUrl() {
+  const {
+    siteConfig: {url: siteUrl, baseUrl, trailingSlash},
+  } = useDocusaurusContext();
+  // TODO using useLocation().pathname is not a super idea
+  // See https://github.com/facebook/docusaurus/issues/9170
+  const {pathname} = useLocation();
+  const canonicalPathname = applyTrailingSlash(useBaseUrl(pathname), {
+    trailingSlash,
+    baseUrl,
+  });
+  return siteUrl + canonicalPathname;
+}
+// TODO move to SiteMetadataDefaults or theme-common ?
+function CanonicalUrlHeaders({permalink}) {
+  const {
+    siteConfig: {url: siteUrl},
+  } = useDocusaurusContext();
+  const defaultCanonicalUrl = useDefaultCanonicalUrl();
+  const canonicalUrl = permalink
+    ? `${siteUrl}${permalink}`
+    : defaultCanonicalUrl;
+  return (
+    <Head>
+      <meta property="og:url" content={canonicalUrl} />
+      <link rel="canonical" href={canonicalUrl} />
+    </Head>
+  );
+}
+export default function SiteMetadata() {
+  const {
+    i18n: {currentLocale},
+  } = useDocusaurusContext();
+  // TODO maybe move these 2 themeConfig to siteConfig?
+  // These seems useful for other themes as well
+  const {metadata, image: defaultImage} = useThemeConfig();
+  return (
+    <>
+      <Head>
+        <meta name="twitter:card" content="summary_large_image" />
+        {/* The keyboard focus class name need to be applied when SSR so links
+        are outlined when JS is disabled */}
+        <body className={keyboardFocusedClassName} />
+      </Head>
+
+      {defaultImage && <PageMetadata image={defaultImage} />}
+
+      <CanonicalUrlHeaders />
+
+      <AlternateLangHeaders />
+
+      <SearchMetadata tag={DEFAULT_SEARCH_TAG} locale={currentLocale} />
+
+      {/*
+          It's important to have an additional <Head> element here, as it allows
+          react-helmet to override default metadata values set in previous <Head>
+          like "twitter:card". In same Head, the same meta would appear twice
+          instead of overriding.
+        */}
+      <Head>
+        {/* Yes, "metadatum" is the grammatically correct term */}
+        {metadata.map((metadatum, i) => (
+          <meta key={i} {...metadatum} />
+        ))}
+      </Head>
+    </>
+  );
+}

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

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export default function SkipToContent(): ReactNode;

package/lib/theme/SkipToContent/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import {SkipToContentLink} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function SkipToContent() {
+  return <SkipToContentLink className={styles.skipToContent} />;
+}

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

@@ -0,0 +1,16 @@
+
+
+.skipToContent {
+  position: fixed;
+  top: 1rem;
+  left: 100%;
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing);
+  color: var(--ifm-color-emphasis-900);
+  background-color: var(--ifm-background-surface-color);
+}
+
+.skipToContent:focus {
+  left: 1rem;
+  box-shadow: var(--ifm-global-shadow-md);
+}

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

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

package/lib/theme/TOC/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css';
+// Using a custom className
+// This prevents TOCInline/TOCCollapsible getting highlighted by mistake
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+export default function TOC({className, ...props}) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <div className="text-[.7rem] mb-1 uppercase text-primary font-semibold">
+        On this Page
+      </div>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 4rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 3rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}

package/lib/theme/TOCCollapsible/CollapseButton/index.d.ts

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

package/lib/theme/TOCCollapsible/CollapseButton/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import styles from './styles.module.css';
+export default function TOCCollapsibleCollapseButton({collapsed, ...props}) {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={clsx(
+        styles.tocCollapsibleButton,
+        !collapsed && styles.tocCollapsibleButtonExpanded,
+        props.className,
+      )}>
+      <Translate
+        id="theme.TOCCollapsible.toggleButtonLabel"
+        description="The label used by the button on the collapsible TOC component">
+        On this page
+      </Translate>
+    </button>
+  );
+}

package/lib/theme/TOCCollapsible/CollapseButton/styles.module.css

@@ -0,0 +1,27 @@
+.tocCollapsible {
+  border-radius: none;
+}
+.tocCollapsibleButton {
+  font-size: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0.8rem;
+  width: 100%;
+}
+
+.tocCollapsibleButton::after {
+  content: '';
+  /* background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat; */
+  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.4943 10.4038L7.7174 15.1615L7.16162 14.6057L12.4943 9.29225L17.8078 14.6057L17.252 15.1615L12.4943 10.4038Z' fill='%23160F26'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 100%;
+  transform: rotateX(180deg);
+  filter: var(--ifm-menu-link-sublist-icon-filter);
+  height: 1.75rem;
+  width: 1.75rem;
+}
+
+.tocCollapsibleButtonExpanded::after {
+  /* transform: none; */
+}

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/TOCCollapsible';
+export default function TOCCollapsible({ toc, className, minHeadingLevel, maxHeadingLevel, }: Props): ReactNode;