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

package/lib/theme/BlogSidebar/Mobile/index.js

@@ -0,0 +1,38 @@
+import React, {memo} from 'react';
+import {
+  useVisibleBlogSidebarItems,
+  BlogSidebarItemList,
+} from '@docusaurus/plugin-content-blog/client';
+import {NavbarSecondaryMenuFiller} from '@docusaurus/theme-common';
+import BlogSidebarContent from '@theme/BlogSidebar/Content';
+import styles from './styles.module.css';
+const ListComponent = ({items}) => {
+  return (
+    <BlogSidebarItemList
+      items={items}
+      ulClassName="menu__list"
+      liClassName="menu__list-item"
+      linkClassName="menu__link"
+      linkActiveClassName="menu__link--active"
+    />
+  );
+};
+function BlogSidebarMobileSecondaryMenu({sidebar}) {
+  const items = useVisibleBlogSidebarItems(sidebar.items);
+  return (
+    <BlogSidebarContent
+      items={items}
+      ListComponent={ListComponent}
+      yearGroupHeadingClassName={styles.yearGroupHeading}
+    />
+  );
+}
+function BlogSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={BlogSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+export default memo(BlogSidebarMobile);

package/lib/theme/BlogSidebar/Mobile/styles.module.css

@@ -0,0 +1,5 @@
+
+
+.yearGroupHeading {
+  margin: 1rem 0.75rem 0.5rem;
+}

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

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

package/lib/theme/BlogSidebar/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
+import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
+export default function BlogSidebar({sidebar}) {
+  const windowSize = useWindowSize();
+  if (!sidebar?.items.length) {
+    return null;
+  }
+  // Mobile sidebar doesn't need to be server-rendered
+  if (windowSize === 'mobile') {
+    return <BlogSidebarMobile sidebar={sidebar} />;
+  }
+  return <BlogSidebarDesktop sidebar={sidebar} />;
+}

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

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

package/lib/theme/BlogTagsListPage/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+  translateTagsPageTitle,
+} from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import TagsListByLetter from '@theme/TagsListByLetter';
+import SearchMetadata from '@theme/SearchMetadata';
+import Heading from '@theme/Heading';
+export default function BlogTagsListPage({tags, sidebar}) {
+  const title = translateTagsPageTitle();
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagsListPage,
+      )}>
+      <PageMetadata title={title} />
+      <SearchMetadata tag="blog_tags_list" />
+      <BlogLayout sidebar={sidebar}>
+        <Heading as="h1">{title}</Heading>
+        <TagsListByLetter tags={tags} />
+      </BlogLayout>
+    </HtmlClassNameProvider>
+  );
+}

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

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

package/lib/theme/BlogTagsPostsPage/index.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useBlogTagsPostsPageTitle} from '@docusaurus/theme-common/internal';
+import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
+import BlogPostItems from '@theme/BlogPostItems';
+import Unlisted from '@theme/ContentVisibility/Unlisted';
+import Heading from '@theme/Heading';
+function BlogTagsPostsPageMetadata({tag}) {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <>
+      <PageMetadata title={title} description={tag.description} />
+      <SearchMetadata tag="blog_tags_posts" />
+    </>
+  );
+}
+function BlogTagsPostsPageContent({tag, items, sidebar, listMetadata}) {
+  const title = useBlogTagsPostsPageTitle(tag);
+  return (
+    <BlogLayout sidebar={sidebar}>
+      {tag.unlisted && <Unlisted />}
+      <header className="margin-bottom--xl">
+        <Heading as="h1">{title}</Heading>
+        {tag.description && <p>{tag.description}</p>}
+        <Link href={tag.allTagsPath}>
+          <Translate
+            id="theme.tags.tagsPageLink"
+            description="The label of the link targeting the tag list page">
+            View All Tags
+          </Translate>
+        </Link>
+      </header>
+      <BlogPostItems items={items} />
+      <BlogListPaginator metadata={listMetadata} />
+    </BlogLayout>
+  );
+}
+export default function BlogTagsPostsPage(props) {
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        ThemeClassNames.wrapper.blogPages,
+        ThemeClassNames.page.blogTagPostListPage,
+      )}>
+      <BlogTagsPostsPageMetadata {...props} />
+      <BlogTagsPostsPageContent {...props} />
+    </HtmlClassNameProvider>
+  );
+}

package/lib/theme/CodeBlock/Buttons/Button/index.d.ts

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

package/lib/theme/CodeBlock/Buttons/Button/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import clsx from 'clsx';
+export default function CodeBlockButton({className, ...props}) {
+  return (
+    <button type="button" {...props} className={clsx('clean-btn', className)} />
+  );
+}

package/lib/theme/CodeBlock/Buttons/CopyButton/index.d.ts

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

package/lib/theme/CodeBlock/Buttons/CopyButton/index.js

@@ -0,0 +1,64 @@
+import React, {useCallback, useState, useRef, useEffect} from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import Button from '@theme/CodeBlock/Buttons/Button';
+import IconCopy from '@theme/Icon/Copy';
+import IconSuccess from '@theme/Icon/Success';
+import styles from './styles.module.css';
+function title() {
+  return translate({
+    id: 'theme.CodeBlock.copy',
+    message: 'Copy',
+    description: 'The copy button label on code blocks',
+  });
+}
+function ariaLabel(isCopied) {
+  return isCopied
+    ? translate({
+        id: 'theme.CodeBlock.copied',
+        message: 'Copied',
+        description: 'The copied button label on code blocks',
+      })
+    : translate({
+        id: 'theme.CodeBlock.copyButtonAriaLabel',
+        message: 'Copy code to clipboard',
+        description: 'The ARIA label for copy code blocks button',
+      });
+}
+function useCopyButton() {
+  const {
+    metadata: {code},
+  } = useCodeBlockContext();
+  const [isCopied, setIsCopied] = useState(false);
+  const copyTimeout = useRef(undefined);
+  const copyCode = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setIsCopied(true);
+      copyTimeout.current = window.setTimeout(() => {
+        setIsCopied(false);
+      }, 1000);
+    });
+  }, [code]);
+  useEffect(() => () => window.clearTimeout(copyTimeout.current), []);
+  return {copyCode, isCopied};
+}
+export default function CopyButton({className}) {
+  const {copyCode, isCopied} = useCopyButton();
+  return (
+    <Button
+      aria-label={ariaLabel(isCopied)}
+      title={title()}
+      className={clsx(
+        className,
+        styles.copyButton,
+        isCopied && styles.copyButtonCopied,
+      )}
+      onClick={copyCode}>
+      <span className={styles.copyButtonIcons} aria-hidden="true">
+        <IconCopy className={styles.copyButtonIcon} />
+        <IconSuccess className={styles.copyButtonSuccessIcon} />
+      </span>
+    </Button>
+  );
+}

package/lib/theme/CodeBlock/Buttons/CopyButton/styles.module.css

@@ -0,0 +1,42 @@
+
+
+:global(.theme-code-block:hover) .copyButtonCopied {
+  opacity: 1 !important;
+}
+
+.copyButtonIcons {
+  position: relative;
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.copyButtonIcon,
+.copyButtonSuccessIcon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  fill: currentColor;
+  opacity: inherit;
+  width: inherit;
+  height: inherit;
+  transition: all var(--ifm-transition-fast) ease;
+}
+
+.copyButtonSuccessIcon {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.33);
+  opacity: 0;
+  color: #00d600;
+}
+
+.copyButtonCopied .copyButtonIcon {
+  transform: scale(0.33);
+  opacity: 0;
+}
+
+.copyButtonCopied .copyButtonSuccessIcon {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+  transition-delay: 0.075s;
+}

package/lib/theme/CodeBlock/Buttons/WordWrapButton/index.d.ts

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

package/lib/theme/CodeBlock/Buttons/WordWrapButton/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import Button from '@theme/CodeBlock/Buttons/Button';
+import IconWordWrap from '@theme/Icon/WordWrap';
+import styles from './styles.module.css';
+export default function WordWrapButton({className}) {
+  const {wordWrap} = useCodeBlockContext();
+  const canShowButton = wordWrap.isEnabled || wordWrap.isCodeScrollable;
+  if (!canShowButton) {
+    return false;
+  }
+  const title = translate({
+    id: 'theme.CodeBlock.wordWrapToggle',
+    message: 'Toggle word wrap',
+    description:
+      'The title attribute for toggle word wrapping button of code block lines',
+  });
+  return (
+    <Button
+      onClick={() => wordWrap.toggle()}
+      className={clsx(
+        className,
+        wordWrap.isEnabled && styles.wordWrapButtonEnabled,
+      )}
+      aria-label={title}
+      title={title}>
+      <IconWordWrap className={styles.wordWrapButtonIcon} aria-hidden="true" />
+    </Button>
+  );
+}

package/lib/theme/CodeBlock/Buttons/WordWrapButton/styles.module.css

@@ -0,0 +1,10 @@
+
+
+.wordWrapButtonIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.wordWrapButtonEnabled .wordWrapButtonIcon {
+  color: var(--ifm-color-primary);
+}

package/lib/theme/CodeBlock/Buttons/index.d.ts

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

package/lib/theme/CodeBlock/Buttons/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import CopyButton from '@theme/CodeBlock/Buttons/CopyButton';
+import WordWrapButton from '@theme/CodeBlock/Buttons/WordWrapButton';
+import styles from './styles.module.css';
+// Code block buttons are not server-rendered on purpose
+// Adding them to the initial HTML is useless and expensive (due to JSX SVG)
+// They are hidden by default and require React  to become interactive
+export default function CodeBlockButtons({className}) {
+  return (
+    <BrowserOnly>
+      {() => (
+        <div className={clsx(className, styles.buttonGroup)}>
+          <WordWrapButton />
+          <CopyButton />
+        </div>
+      )}
+    </BrowserOnly>
+  );
+}

package/lib/theme/CodeBlock/Buttons/styles.module.css

@@ -0,0 +1,32 @@
+
+
+.buttonGroup {
+  display: flex;
+  column-gap: 0.2rem;
+  position: absolute;
+  /* rtl:ignore */
+  right: calc(var(--ifm-pre-padding) / 2);
+  top: calc(var(--ifm-pre-padding) / 2);
+}
+
+.buttonGroup button {
+  display: flex;
+  align-items: center;
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  padding: 0.4rem;
+  line-height: 0;
+  transition: opacity var(--ifm-transition-fast) ease-in-out;
+  opacity: 0;
+}
+
+.buttonGroup button:focus-visible,
+.buttonGroup button:hover {
+  opacity: 1 !important;
+}
+
+:global(.theme-code-block:hover) .buttonGroup button {
+  opacity: 0.4;
+}

package/lib/theme/CodeBlock/Container/index.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export default function CodeBlockContainer<T extends 'div' | 'pre'>({ as: As, ...props }: {
+    as: T;
+} & ComponentProps<T>): ReactNode;

package/lib/theme/CodeBlock/Container/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
+import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+export default function CodeBlockContainer({as: As, ...props}) {
+  const prismTheme = usePrismTheme();
+  const prismCssVariables = getPrismCssVariables(prismTheme);
+  return (
+    <As
+      // Polymorphic components are hard to type, without `oneOf` generics
+      {...props}
+      style={prismCssVariables}
+      className={clsx(
+        props.className,
+        styles.codeBlockContainer,
+        ThemeClassNames.common.codeBlock,
+      )}
+    />
+  );
+}

package/lib/theme/CodeBlock/Container/styles.module.css

@@ -0,0 +1,9 @@
+
+
+.codeBlockContainer {
+  background: var(--prism-background-color);
+  color: var(--prism-color);
+  margin-bottom: var(--ifm-leading);
+  box-shadow: var(--ifm-global-shadow-lw);
+  border-radius: var(--ifm-code-border-radius);
+}

package/lib/theme/CodeBlock/Content/Element.d.ts

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

package/lib/theme/CodeBlock/Content/Element.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+// TODO Docusaurus v4: move this component at the root?
+// This component only handles a rare edge-case: <pre><MyComp/></pre> in MDX
+// <pre> tags in markdown map to CodeBlocks. They may contain JSX children.
+// When children is not a simple string, we just return a styled block without
+// actually highlighting.
+export default function CodeBlockJSX({children, className}) {
+  return (
+    <Container
+      as="pre"
+      tabIndex={0}
+      className={clsx(styles.codeBlockStandalone, 'thin-scrollbar', className)}>
+      <code className={styles.codeBlockLines}>{children}</code>
+    </Container>
+  );
+}

package/lib/theme/CodeBlock/Content/String.d.ts

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

package/lib/theme/CodeBlock/Content/String.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {
+  CodeBlockContextProvider,
+  createCodeBlockMetadata,
+  useCodeWordWrap,
+} from '@docusaurus/theme-common/internal';
+import CodeBlockLayout from '@theme/CodeBlock/Layout';
+function useCodeBlockMetadata(props) {
+  const {prism} = useThemeConfig();
+  return createCodeBlockMetadata({
+    code: props.children,
+    className: props.className,
+    metastring: props.metastring,
+    magicComments: prism.magicComments,
+    defaultLanguage: prism.defaultLanguage,
+    language: props.language,
+    title: props.title,
+    showLineNumbers: props.showLineNumbers,
+  });
+}
+// TODO Docusaurus v4: move this component at the root?
+export default function CodeBlockString(props) {
+  const metadata = useCodeBlockMetadata(props);
+  const wordWrap = useCodeWordWrap();
+  return (
+    <CodeBlockContextProvider metadata={metadata} wordWrap={wordWrap}>
+      <CodeBlockLayout />
+    </CodeBlockContextProvider>
+  );
+}

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

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

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import {usePrismTheme} from '@docusaurus/theme-common';
+import {Highlight} from 'prism-react-renderer';
+import Line from '@theme/CodeBlock/Line';
+import styles from './styles.module.css';
+// TODO Docusaurus v4: remove useless forwardRef
+const Pre = React.forwardRef((props, ref) => {
+  return (
+    <pre
+      ref={ref}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+      tabIndex={0}
+      {...props}
+      className={clsx(props.className, styles.codeBlock, 'thin-scrollbar')}
+    />
+  );
+});
+function Code(props) {
+  const {metadata} = useCodeBlockContext();
+  return (
+    <code
+      {...props}
+      className={clsx(
+        props.className,
+        styles.codeBlockLines,
+        metadata.lineNumbersStart !== undefined &&
+          styles.codeBlockLinesWithNumbering,
+      )}
+      style={{
+        ...props.style,
+        counterReset:
+          metadata.lineNumbersStart === undefined
+            ? undefined
+            : `line-count ${metadata.lineNumbersStart - 1}`,
+      }}
+    />
+  );
+}
+export default function CodeBlockContent({className: classNameProp}) {
+  const {metadata, wordWrap} = useCodeBlockContext();
+  const prismTheme = usePrismTheme();
+  const {code, language, lineNumbersStart, lineClassNames} = metadata;
+  return (
+    <Highlight theme={prismTheme} code={code} language={language}>
+      {({className, style, tokens: lines, getLineProps, getTokenProps}) => (
+        <Pre
+          ref={wordWrap.codeBlockRef}
+          className={clsx(classNameProp, className)}
+          style={style}>
+          <Code>
+            {lines.map((line, i) => (
+              <Line
+                key={i}
+                line={line}
+                getLineProps={getLineProps}
+                getTokenProps={getTokenProps}
+                classNames={lineClassNames[i]}
+                showLineNumbers={lineNumbersStart !== undefined}
+              />
+            ))}
+          </Code>
+        </Pre>
+      )}
+    </Highlight>
+  );
+}

package/lib/theme/CodeBlock/Content/styles.module.css

@@ -0,0 +1,30 @@
+
+
+.codeBlock {
+  --ifm-pre-background: var(--prism-background-color);
+  margin: 0;
+  padding: 0;
+}
+
+.codeBlockStandalone {
+  padding: 0;
+}
+
+.codeBlockLines {
+  font: inherit;
+  /* rtl:ignore */
+  float: left;
+  min-width: 100%;
+  padding: var(--ifm-pre-padding);
+}
+
+.codeBlockLinesWithNumbering {
+  display: table;
+  padding: var(--ifm-pre-padding) 0;
+}
+
+@media print {
+  .codeBlockLines {
+    white-space: pre-wrap;
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import Container from '@theme/CodeBlock/Container';
+import Title from '@theme/CodeBlock/Title';
+import Content from '@theme/CodeBlock/Content';
+import Buttons from '@theme/CodeBlock/Buttons';
+import styles from './styles.module.css';
+export default function CodeBlockLayout({className}) {
+  const {metadata} = useCodeBlockContext();
+  return (
+    <Container as="div" className={clsx(className, metadata.className)}>
+      {metadata.title && (
+        <div className={styles.codeBlockTitle}>
+          <Title>{metadata.title}</Title>
+        </div>
+      )}
+      <div className={styles.codeBlockContent}>
+        <Content />
+        <Buttons />
+      </div>
+    </Container>
+  );
+}

package/lib/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/lib/theme/CodeBlock/Line/Token/index.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/CodeBlock/Line/Token';
+export default function CodeBlockLineToken({ line, token, ...props }: Props): ReactNode;