@seqera/docusaurus-theme-seqera 1.0.0

package/src/theme/TOCCollapsible/index.tsx

@@ -0,0 +1,42 @@
+
+
+import React, {type ReactNode} 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 type {Props} from '@theme/TOCCollapsible';
+
+import styles from './styles.module.css';
+
+export default function TOCCollapsible({
+  toc,
+  className,
+  minHeadingLevel,
+  maxHeadingLevel,
+}: Props): ReactNode {
+  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/src/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/src/theme/TOCInline/index.tsx

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

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

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

package/src/theme/TOCItems/Tree.tsx

@@ -0,0 +1,40 @@
+
+
+import React, {type ReactNode} from 'react';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/TOCItems/Tree';
+
+// Recursive component rendering the toc tree
+function TOCItemTree({
+  toc,
+  className,
+  linkClassName,
+  isChild,
+}: Props): ReactNode {
+  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/src/theme/TOCItems/index.tsx

@@ -0,0 +1,56 @@
+
+
+import React, {type ReactNode, useMemo} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  useTOCHighlight,
+  useFilteredAndTreeifiedTOC,
+  type TOCHighlightConfig,
+} from '@docusaurus/theme-common/internal';
+import TOCItemTree from '@theme/TOCItems/Tree';
+import type {Props} from '@theme/TOCItems';
+
+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
+}: Props): ReactNode {
+  const themeConfig = useThemeConfig();
+
+  const minHeadingLevel =
+    minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel;
+  const maxHeadingLevel =
+    maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel;
+
+  const tocTree = useFilteredAndTreeifiedTOC({
+    toc,
+    minHeadingLevel,
+    maxHeadingLevel,
+  });
+
+  const tocHighlightConfig: TOCHighlightConfig | undefined = 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/src/theme/TabItem/index.tsx

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

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

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

package/src/theme/Tabs/index.tsx

@@ -0,0 +1,167 @@
+
+
+import React, {cloneElement, type ReactElement, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  useTabs,
+  sanitizeTabsChildren,
+  type TabItemProps,
+} from '@docusaurus/theme-common/internal';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import type {Props} from '@theme/Tabs';
+import styles from './styles.module.css';
+
+function TabList({
+  className,
+  block,
+  selectedValue,
+  selectValue,
+  tabValues,
+}: Props & ReturnType<typeof useTabs>) {
+  const tabRefs: (HTMLLIElement | null)[] = [];
+  const {blockElementScrollPositionUntilNextRender} =
+    useScrollPositionBlocker();
+
+  const handleTabChange = (
+    event:
+      | React.FocusEvent<HTMLLIElement>
+      | React.MouseEvent<HTMLLIElement>
+      | React.KeyboardEvent<HTMLLIElement>,
+  ) => {
+    const newTab = event.currentTarget;
+    const newTabIndex = tabRefs.indexOf(newTab);
+    const newTabValue = tabValues[newTabIndex]!.value;
+
+    if (newTabValue !== selectedValue) {
+      blockElementScrollPositionUntilNextRender(newTab);
+      selectValue(newTabValue);
+    }
+  };
+
+  const handleKeydown = (event: React.KeyboardEvent<HTMLLIElement>) => {
+    let focusElement: HTMLLIElement | null = 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 as string,
+            {
+              'tabs__item--active': selectedValue === value,
+            },
+          )}>
+          {label ?? value}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function TabContent({
+  lazy,
+  children,
+  selectedValue,
+}: Props & ReturnType<typeof useTabs>) {
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(
+    Boolean,
+  ) as ReactElement<TabItemProps>[];
+  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: Props): ReactNode {
+  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: Props): ReactNode {
+  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/src/theme/Tabs/styles.module.css

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

package/src/theme/Tag/index.tsx

@@ -0,0 +1,30 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import type {Props} from '@theme/Tag';
+
+import styles from './styles.module.css';
+
+export default function Tag({
+  permalink,
+  label,
+  count,
+  description,
+}: Props): ReactNode {
+  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/src/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/src/theme/TagsListByLetter/index.tsx

@@ -0,0 +1,40 @@
+
+
+import React, {type ReactNode} from 'react';
+import {listTagsByLetters, type TagLetterEntry} from '@docusaurus/theme-common';
+import Tag from '@theme/Tag';
+import type {Props} from '@theme/TagsListByLetter';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+function TagLetterEntryItem({letterEntry}: {letterEntry: TagLetterEntry}) {
+  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}: Props): ReactNode {
+  const letterList = listTagsByLetters(tags);
+  return (
+    <section className="margin-vert--lg">
+      {letterList.map((letterEntry) => (
+        <TagLetterEntryItem
+          key={letterEntry.letter}
+          letterEntry={letterEntry}
+        />
+      ))}
+    </section>
+  );
+}

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

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

package/src/theme/TagsListInline/index.tsx

@@ -0,0 +1,30 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
+import type {Props} from '@theme/TagsListInline';
+
+import styles from './styles.module.css';
+
+export default function TagsListInline({tags}: Props): ReactNode {
+  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/src/theme/TagsListInline/styles.module.css

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

package/src/theme/ThemeProvider/TitleFormatter/index.tsx

@@ -0,0 +1,22 @@
+
+
+import React, {type ComponentProps, type ReactNode} from 'react';
+import {TitleFormatterProvider} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/ThemeProvider/TitleFormatter';
+
+type FormatterProp = ComponentProps<typeof TitleFormatterProvider>['formatter'];
+
+const formatter: FormatterProp = (params) => {
+  // Add your own title formatting logic here!
+  return params.defaultFormatter(params);
+};
+
+export default function ThemeProviderTitleFormatter({
+  children,
+}: Props): ReactNode {
+  return (
+    <TitleFormatterProvider formatter={formatter}>
+      {children}
+    </TitleFormatterProvider>
+  );
+}

package/src/theme/ThemeProvider/index.tsx

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

package/src/theme/ThemedImage/index.tsx

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

package/src/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/src/theme/pages/Home/index.tsx

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