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

package/lib/theme/TOCCollapsible/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useCollapsible, Collapsible} from '@docusaurus/theme-common';
+import TOCItems from '@theme/TOCItems';
+import CollapseButton from '@theme/TOCCollapsible/CollapseButton';
+import styles from './styles.module.css';
+export default function TOCCollapsible({
+  toc,
+  className,
+  minHeadingLevel,
+  maxHeadingLevel,
+}) {
+  const {collapsed, toggleCollapsed} = useCollapsible({
+    initialState: true,
+  });
+  return (
+    <div
+      className={clsx(
+        styles.tocCollapsible,
+        !collapsed && styles.tocCollapsibleExpanded,
+        className,
+        'rounded-none!',
+      )}>
+      <CollapseButton collapsed={collapsed} onClick={toggleCollapsed} />
+      <Collapsible
+        lazy
+        className={styles.tocCollapsibleContent}
+        collapsed={collapsed}>
+        <TOCItems
+          toc={toc}
+          minHeadingLevel={minHeadingLevel}
+          maxHeadingLevel={maxHeadingLevel}
+        />
+      </Collapsible>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+
+
+.tocCollapsible {
+  background-color: var(--ifm-menu-color-background-active);
+  border-radius: var(--ifm-global-radius);
+  margin: 1rem 0;
+}
+
+.tocCollapsibleContent > ul {
+  border-left: none;
+  border-top: 1px solid var(--ifm-color-emphasis-300);
+  padding: 0.2rem 0;
+  font-size: 15px;
+}
+
+.tocCollapsibleContent ul li {
+  margin: 0.4rem 0.8rem;
+}
+
+.tocCollapsibleContent a {
+  display: block;
+}
+
+.tocCollapsibleExpanded {
+  transform: none;
+}

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

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

package/lib/theme/TOCInline/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css';
+export default function TOCInline({toc, minHeadingLevel, maxHeadingLevel}) {
+  return (
+    <div className={styles.tableOfContentsInline}>
+      <TOCItems
+        toc={toc}
+        minHeadingLevel={minHeadingLevel}
+        maxHeadingLevel={maxHeadingLevel}
+        className="table-of-contents"
+        linkClassName={null}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+
+
+.tableOfContentsInline ul {
+  list-style-type: disc;
+  font-size: initial;
+  padding-top: 0;
+}

package/lib/theme/TOCItems/Tree.d.ts

@@ -0,0 +1,5 @@
+import React, { type ReactNode } from 'react';
+import type { Props } from '@theme/TOCItems/Tree';
+declare function TOCItemTree({ toc, className, linkClassName, isChild, }: Props): ReactNode;
+declare const _default: React.MemoExoticComponent<typeof TOCItemTree>;
+export default _default;

package/lib/theme/TOCItems/Tree.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+// Recursive component rendering the toc tree
+function TOCItemTree({toc, className, linkClassName, isChild}) {
+  if (!toc.length) {
+    return null;
+  }
+  return (
+    <ul className={`${isChild ? undefined : className}`}>
+      {toc.map((heading) => (
+        <li key={heading.id} className="pl-3">
+          <Link
+            to={`#${heading.id}`}
+            className={linkClassName ?? undefined}
+            // Developer provided the HTML, so assume it's safe.
+            dangerouslySetInnerHTML={{__html: heading.value}}
+          />
+          <TOCItemTree
+            isChild
+            toc={heading.children}
+            className={className}
+            linkClassName={linkClassName}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+// Memo only the tree root is enough
+export default React.memo(TOCItemTree);

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/TOCItems';
+export default function TOCItems({ toc, className, linkClassName, linkActiveClassName, minHeadingLevel: minHeadingLevelOption, maxHeadingLevel: maxHeadingLevelOption, ...props }: Props): ReactNode;

package/lib/theme/TOCItems/index.js

@@ -0,0 +1,47 @@
+import React, {useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useTOCHighlight,
+  useFilteredAndTreeifiedTOC,
+} from '@docusaurus/theme-common/internal';
+import TOCItemTree from '@theme/TOCItems/Tree';
+export default function TOCItems({
+  toc,
+  className = 'table-of-contents table-of-contents__left-border border-l border-base-content/20 leading-7',
+  linkClassName = 'table-of-contents__link',
+  linkActiveClassName = undefined,
+  minHeadingLevel: minHeadingLevelOption,
+  maxHeadingLevel: maxHeadingLevelOption,
+  ...props
+}) {
+  const themeConfig = useThemeConfig();
+  const minHeadingLevel =
+    minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel =
+    maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
+  const tocTree = useFilteredAndTreeifiedTOC({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel,
+  });
+  const tocHighlightConfig = useMemo(() => {
+    if (linkClassName && linkActiveClassName) {
+      return {
+        linkClassName,
+        linkActiveClassName,
+        minHeadingLevel,
+        maxHeadingLevel,
+      };
+    }
+    return undefined;
+  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel]);
+  useTOCHighlight(tocHighlightConfig);
+  return (
+    <TOCItemTree
+      toc={tocTree}
+      className={className}
+      linkClassName={linkClassName}
+      {...props}
+    />
+  );
+}

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

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

package/lib/theme/TabItem/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+export default function TabItem({children, hidden, className}) {
+  return (
+    <div
+      role="tabpanel"
+      className={clsx(styles.tabItem, className)}
+      {...{hidden}}>
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,5 @@
+
+
+.tabItem > *:last-child {
+  margin-bottom: 0;
+}

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

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

package/lib/theme/Tabs/index.js

@@ -0,0 +1,133 @@
+import React, {cloneElement} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  useTabs,
+  sanitizeTabsChildren,
+} from '@docusaurus/theme-common/internal';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import styles from './styles.module.css';
+function TabList({className, block, selectedValue, selectValue, tabValues}) {
+  const tabRefs = [];
+  const {blockElementScrollPositionUntilNextRender} =
+    useScrollPositionBlocker();
+  const handleTabChange = (event) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = tabValues[newTabIndex].value;
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      selectValue(newTabValue);
+    }
+  };
+  const handleKeydown = (event) => {
+    let focusElement = null;
+    switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
+      case 'ArrowRight': {
+        const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
+        focusElement = tabRefs[nextTab] ?? tabRefs[0];
+        break;
+      }
+      case 'ArrowLeft': {
+        const prevTab = tabRefs.indexOf(event.currentTarget) - 1;
+        focusElement = tabRefs[prevTab] ?? tabRefs[tabRefs.length - 1];
+        break;
+      }
+      default:
+        break;
+    }
+    focusElement?.focus();
+  };
+  return (
+    <ul
+      role="tablist"
+      aria-orientation="horizontal"
+      className={clsx(
+        'tabs',
+        {
+          'tabs--block': block,
+        },
+        className,
+      )}>
+      {tabValues.map(({value, label, attributes}) => (
+        <li
+          // TODO extract TabListItem
+          role="tab"
+          tabIndex={selectedValue === value ? 0 : -1}
+          aria-selected={selectedValue === value}
+          key={value}
+          ref={(tabControl) => {
+            tabRefs.push(tabControl);
+          }}
+          onKeyDown={handleKeydown}
+          onClick={handleTabChange}
+          {...attributes}
+          className={clsx('tabs__item', styles.tabItem, attributes?.className, {
+            'tabs__item--active': selectedValue === value,
+          })}>
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+function TabContent({lazy, children, selectedValue}) {
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(
+    Boolean,
+  );
+  if (lazy) {
+    const selectedTabItem = childTabs.find(
+      (tabItem) => tabItem.props.value === selectedValue,
+    );
+    if (!selectedTabItem) {
+      // fail-safe or fail-fast? not sure what's best here
+      return null;
+    }
+    return cloneElement(selectedTabItem, {
+      className: clsx('margin-top--md', selectedTabItem.props.className),
+    });
+  }
+  return (
+    <div className="margin-top--md">
+      {childTabs.map((tabItem, i) =>
+        cloneElement(tabItem, {
+          key: i,
+          hidden: tabItem.props.value !== selectedValue,
+        }),
+      )}
+    </div>
+  );
+}
+function TabsComponent(props) {
+  const tabs = useTabs(props);
+  return (
+    <div
+      className={clsx(
+        ThemeClassNames.tabs.container,
+        // former name kept for backward compatibility
+        // see https://github.com/facebook/docusaurus/pull/4086
+        'tabs-container',
+        styles.tabList,
+      )}>
+      <TabList {...tabs} {...props} />
+      <TabContent {...tabs} {...props} />
+    </div>
+  );
+}
+export default function Tabs(props) {
+  const isBrowser = useIsBrowser();
+  return (
+    <TabsComponent
+      // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}>
+      {sanitizeTabsChildren(props.children)}
+    </TabsComponent>
+  );
+}

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

@@ -0,0 +1,9 @@
+
+
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
+.tabItem {
+  margin-top: 0 !important;
+}

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

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Tag';
+export default function Tag({ permalink, label, count, description, }: Props): ReactNode;

package/lib/theme/Tag/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+export default function Tag({permalink, label, count, description}) {
+  return (
+    <Link
+      rel="tag"
+      href={permalink}
+      title={description}
+      className={clsx(
+        styles.tag,
+        count ? styles.tagWithCount : styles.tagRegular,
+        ' text-black dark:text-gray-800',
+      )}>
+      {label}
+      {count && <span>{count}</span>}
+    </Link>
+  );
+}

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

@@ -0,0 +1,65 @@
+
+
+:root {
+  --docusaurus-tag-list-border: var(--ifm-color-emphasis-300);
+}
+
+.tag {
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: border var(--ifm-transition-fast);
+}
+
+.tag:hover {
+  --docusaurus-tag-list-border:var(--ifm-color-emphasis-600);
+  text-decoration: none;
+}
+
+.tagRegular {
+  border-radius: var(--ifm-global-radius);
+  padding: 0.2rem 0.5rem 0.3rem;
+  font-size: 80%;
+}
+
+.tagWithCount {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 0.5rem 0 1rem;
+  border-left: 0;
+}
+
+.tagWithCount::before,
+.tagWithCount::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  border: 1px solid var(--docusaurus-tag-list-border);
+  transition: inherit;
+}
+
+.tagWithCount::before {
+  right: 100%;
+  transform: translate(50%, -50%) rotate(-45deg);
+  width: 1.18rem;
+  height: 1.18rem;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.tagWithCount::after {
+  left: 0;
+  transform: translateY(-50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+}
+
+.tagWithCount span {
+  background: var(--ifm-color-secondary);
+  color: var(--ifm-color-black);
+  font-size: 0.7rem;
+  line-height: 1.2;
+  border-radius: var(--ifm-global-radius);
+  padding: 0.1rem 0.4rem;
+  margin-left: 0.3rem;
+}

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

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

package/lib/theme/TagsListByLetter/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {listTagsByLetters} from '@docusaurus/theme-common';
+import Tag from '@theme/Tag';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+function TagLetterEntryItem({letterEntry}) {
+  return (
+    <article>
+      <Heading as="h2" id={letterEntry.letter}>
+        {letterEntry.letter}
+      </Heading>
+      <ul className="padding--none">
+        {letterEntry.tags.map((tag) => (
+          <li key={tag.permalink} className={styles.tag}>
+            <Tag {...tag} />
+          </li>
+        ))}
+      </ul>
+      <hr />
+    </article>
+  );
+}
+export default function TagsListByLetter({tags}) {
+  const letterList = listTagsByLetters(tags);
+  return (
+    <section className="margin-vert--lg">
+      {letterList.map((letterEntry) => (
+        <TagLetterEntryItem
+          key={letterEntry.letter}
+          letterEntry={letterEntry}
+        />
+      ))}
+    </section>
+  );
+}

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

@@ -0,0 +1,6 @@
+
+
+.tag {
+  display: inline-block;
+  margin: 0.5rem 0.5rem 0 1rem;
+}

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

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

package/lib/theme/TagsListInline/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
+import styles from './styles.module.css';
+export default function TagsListInline({tags}) {
+  return (
+    <>
+      <b className="text-[.8rem]">
+        <Translate
+          id="theme.tags.tagsListLabel"
+          description="The label alongside a tag list">
+          Tags:
+        </Translate>
+      </b>
+      <ul className={clsx(styles.tags, 'padding--none', 'ml-1')}>
+        {tags.map((tag) => (
+          <li key={tag.permalink} className={styles.tag}>
+            <Tag {...tag} />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+
+
+.tags {
+  display: inline;
+}
+
+.tag {
+  margin: 0 0.24rem 0.5rem 0;
+  display: inline-block;
+}

package/lib/theme/ThemeProvider/TitleFormatter/index.d.ts

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

package/lib/theme/ThemeProvider/TitleFormatter/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {TitleFormatterProvider} from '@docusaurus/theme-common/internal';
+const formatter = (params) => {
+  // Add your own title formatting logic here!
+  return params.defaultFormatter(params);
+};
+export default function ThemeProviderTitleFormatter({children}) {
+  return (
+    <TitleFormatterProvider formatter={formatter}>
+      {children}
+    </TitleFormatterProvider>
+  );
+}

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

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

package/lib/theme/ThemeProvider/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import TitleFormatterProvider from '@theme/ThemeProvider/TitleFormatter';
+export default function ThemeProvider({children}) {
+  return <TitleFormatterProvider>{children}</TitleFormatterProvider>;
+}

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

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

package/lib/theme/ThemedImage/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {ThemedComponent} from '@docusaurus/theme-common';
+export default function ThemedImage(props) {
+  const {sources, className: parentClassName, alt, ...propsRest} = props;
+  return (
+    <ThemedComponent className={parentClassName}>
+      {({theme, className}) => (
+        <img
+          src={sources[theme]}
+          alt={alt}
+          className={className}
+          {...propsRest}
+        />
+      )}
+    </ThemedComponent>
+  );
+}

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

@@ -0,0 +1,13 @@
+
+
+.themedImage {
+  display: none;
+}
+
+[data-theme='light'] .themedImage--light {
+  display: initial;
+}
+
+[data-theme='dark'] .themedImage--dark {
+  display: initial;
+}

package/lib/theme/pages/Home/index.d.ts

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

package/lib/theme/pages/Home/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import Homepage from '@theme/Homepage';
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
+      <main>
+        <Homepage />
+      </main>
+    </Layout>
+  );
+}

package/lib/theme/prism-include-languages.d.ts

@@ -0,0 +1,2 @@
+import type * as PrismNamespace from 'prismjs';
+export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void;

package/lib/theme/prism-include-languages.js

@@ -0,0 +1,28 @@
+import siteConfig from '@generated/docusaurus.config';
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  const PrismBefore = globalThis.Prism;
+  globalThis.Prism = PrismObject;
+  additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
+  // Clean up and eventually restore former globalThis.Prism object (if any)
+  delete globalThis.Prism;
+  if (typeof PrismBefore !== 'undefined') {
+    globalThis.Prism = PrismObject;
+  }
+}