@seqera/docusaurus-theme-seqera 1.0.0

package/README.md

@@ -0,0 +1,26 @@
+# Docusaurus Theme Classic
+
+A custom Docusaurustheme for Seqera.
+
+## Installation
+
+Add `docusaurus/theme-classic` to your package:
+
+```bash
+npm i @seqeralabs/docusaurus-theme-seqera
+# or
+yarn add @seqeralabs/docusaurus-theme-seqera
+```
+
+Modify your `docusaurus.config.js`:
+
+```diff
+module.exports = {
+  ...
++ themes: ['@seqeralabs/docusaurus-theme-seqera'],
+  ...
+}
+```
+
+## Based on Docusaurus's Classic theme
+See all original components from classic theme can be found [here](https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-classic/src/theme)

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@seqera/docusaurus-theme-seqera",
+  "version": "1.0.0",
+  "description": "Seqera docs theme for Docusaurus",
+  "author": "Seqera docs team <education@seqera.io>",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "types": "src/theme-seqera.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.9.2",
+    "@docusaurus/logger": "3.9.2",
+    "@docusaurus/mdx-loader": "3.9.2",
+    "@docusaurus/module-type-aliases": "3.9.2",
+    "@docusaurus/plugin-content-blog": "3.9.2",
+    "@docusaurus/plugin-content-docs": "3.9.2",
+    "@docusaurus/plugin-content-pages": "3.9.2",
+    "@docusaurus/theme-common": "3.9.2",
+    "@docusaurus/theme-translations": "3.9.2",
+    "@docusaurus/types": "3.9.2",
+    "@docusaurus/utils": "3.9.2",
+    "@docusaurus/utils-common": "3.9.2",
+    "@docusaurus/utils-validation": "3.9.2",
+    "@mdx-js/react": "^3.0.0",
+    "@seqera/docusaurus-preset-seqera": "1.0.0",
+    "@tailwindcss/postcss": "^4.1.17",
+    "clsx": "^2.0.0",
+    "infima": "0.2.0-alpha.45",
+    "lodash": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "postcss": "^8.5.6",
+    "prism-react-renderer": "^2.3.0",
+    "prismjs": "^1.29.0",
+    "raw-loader": "^4.0.2",
+    "react-router-dom": "^5.3.4",
+    "rtlcss": "^4.1.0",
+    "tailwindcss": "^4.1.17",
+    "tslib": "^2.6.0",
+    "utility-types": "^3.10.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/nprogress": "^0.2.0",
+    "@types/prismjs": "^1.26.0",
+    "@types/rtlcss": "^3.5.1",
+    "daisyui": "^5.5.5",
+    "fs-extra": "^11.1.1",
+    "react-test-renderer": "^18.0.0",
+    "utility-types": "^3.10.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=20.0"
+  }
+}

package/src/getSwizzleConfig.ts

@@ -0,0 +1,433 @@
+
+
+import type {SwizzleConfig} from '@docusaurus/types';
+
+/* eslint sort-keys: "error" */
+
+export default function getSwizzleConfig(): SwizzleConfig {
+  return {
+    components: {
+      'Admonition/Icon': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden', // Can't wrap a folder
+        },
+        description: 'The folder containing all admonition icons',
+      },
+      'Admonition/Icon/Danger': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The admonition danger icon',
+      },
+      'Admonition/Icon/Info': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The admonition info icon',
+      },
+      'Admonition/Icon/Note': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The admonition note icon',
+      },
+      'Admonition/Icon/Tip': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The admonition tip icon',
+      },
+      'Admonition/Icon/Warning': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The admonition warning icon',
+      },
+      'Admonition/Layout': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The standard admonition layout applied to all default admonition types',
+      },
+      'Admonition/Type': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden',
+        },
+        description:
+          'The folder containing all the admonition type components.',
+      },
+      'Admonition/Type/Caution': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::caution admonition type',
+      },
+      'Admonition/Type/Danger': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::danger admonition type',
+      },
+      'Admonition/Type/Info': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::info admonition type',
+      },
+      'Admonition/Type/Note': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::note admonition type',
+      },
+      'Admonition/Type/Tip': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::tip admonition type',
+      },
+      'Admonition/Type/Warning': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a :::warning admonition type',
+      },
+      'Admonition/Types': {
+        actions: {
+          eject: 'safe',
+          // TODO the swizzle CLI should provide a way to wrap such objects
+          wrap: 'forbidden',
+        },
+        description:
+          'The object mapping admonition type to a React component.\nUse it to add custom admonition type components, or replace existing ones.\nCan be ejected or wrapped (only manually, see our documentation).',
+      },
+      Blog: {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+      },
+      'Blog/Components': {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+      },
+      'Blog/Pages': {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+      },
+      CodeBlock: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render multi-line code blocks, generally used in Markdown files.',
+      },
+      'CodeBlock/Content': {
+        actions: {
+          eject: 'unsafe',
+          wrap: 'unsafe',
+        },
+        description:
+          'The folder containing components responsible for rendering different types of CodeBlock content.',
+      },
+      ColorModeToggle: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The color mode toggle to switch between light and dark mode.',
+      },
+      'DocBreadcrumbs/Items': {
+        actions: {
+          eject: 'unsafe',
+          wrap: 'forbidden', // Can't wrap a folder
+        },
+        description:
+          'The components responsible for rendering the breadcrumb items',
+      },
+      DocCardList: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for rendering a list of sidebar items cards.\nNotable used on the category generated-index pages.',
+      },
+      'DocItem/TOC': {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          // TODO the CLI should rather support --eject
+          // Subfolders can be swizzled
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+        description:
+          'The DocItem TOC is not directly swizzle-able, but you can swizzle its sub-components.',
+      },
+      DocSidebar: {
+        actions: {
+          eject: 'unsafe', // Too much technical code in sidebar, not very safe atm
+          wrap: 'safe',
+        },
+        description: 'The sidebar component on docs pages',
+      },
+      Footer: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: "The footer component of your site's layout",
+      },
+      'Footer/Copyright': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer copyright',
+      },
+      'Footer/Layout': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer main layout component',
+      },
+      'Footer/LinkItem': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer link item component',
+      },
+      'Footer/Links': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer component rendering the footer links',
+      },
+      'Footer/Links/MultiColumn': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The footer component rendering the footer links with a multi-column layout',
+      },
+      'Footer/Links/Simple': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The footer component rendering the footer links with a simple layout (single row)',
+      },
+      'Footer/Logo': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The footer logo',
+      },
+      Icon: {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          // TODO the CLI should rather support --eject
+          // Subfolders can be swizzled
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Icon folder is not directly swizzle-able, but you can swizzle its sub-components.',
+      },
+      'Icon/Arrow': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The arrow icon component',
+      },
+      'Icon/DarkMode': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The dark mode icon component.',
+      },
+      'Icon/Edit': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The edit icon component',
+      },
+      'Icon/LightMode': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The light mode icon component.',
+      },
+      'Icon/Menu': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The menu icon component',
+      },
+      'Icon/Socials': {
+        actions: {
+          // Forbidden because it's a parent folder, makes the CLI crash atm
+          // TODO the CLI should rather support --eject
+          // Subfolders can be swizzled
+          eject: 'forbidden',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Icon/Socials folder is not directly swizzle-able, but you can swizzle its sub-components.',
+      },
+      MDXComponents: {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden', /// TODO allow wrapping objects???
+        },
+        description:
+          'The MDX components to use for rendering MDX files. Meant to be ejected.',
+      },
+      'MDXComponents/A': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <a> tags and Markdown links in MDX',
+      },
+      'MDXComponents/Code': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <code> tags and Markdown code blocks in MDX',
+      },
+      'MDXComponents/Details': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The component used to render <details> tags in MDX',
+      },
+      'MDXComponents/Heading': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render heading tags (<h1>, <h2>...) and Markdown headings in MDX',
+      },
+      'MDXComponents/Img': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <img> tags and Markdown images in MDX',
+      },
+      'MDXComponents/Pre': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description: 'The component used to render <pre> tags in MDX',
+      },
+      'MDXComponents/Ul': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component used to render <ul> tags and Markdown unordered lists in MDX',
+      },
+      MDXContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'A component wrapping all MDX content and providing the MDXComponents to the MDX context',
+      },
+      'NavbarItem/ComponentTypes': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Navbar item components mapping. Can be ejected to add custom navbar item types.\nSee https://github.com/facebook/docusaurus/issues/7227.',
+      },
+      NotFound: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The global 404 page of your site, meant to be ejected and customized',
+      },
+      SearchBar: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        // TODO how to describe this one properly?
+        // By default it's an empty placeholder for the user to fill
+        description:
+          'The search bar component of your site, appearing in the navbar.',
+      },
+      SkipToContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for implementing the accessibility "skip to content" link (https://www.w3.org/TR/WCAG20-TECHS/G1.html)',
+      },
+      'prism-include-languages': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden', // Not a component!
+        },
+        description:
+          'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',
+      },
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,154 @@
+import path from 'path';
+import rtlcss from 'rtlcss';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import {getTranslationFiles, translateThemeConfig} from './translations';
+import {
+  getThemeInlineScript,
+  getAnnouncementBarInlineScript,
+  DataAttributeQueryStringInlineJavaScript,
+} from './inlineScripts';
+import {SvgSpriteDefs} from './inlineSvgSprites';
+import type {LoadContext, Plugin, PostCssOptions} from '@docusaurus/types';
+import type {Plugin as PostCssPlugin} from 'postcss';
+import type {
+  PluginOptions,
+  ThemeConfig,
+} from "@seqeralabs/docusaurus-theme-seqera";
+import postcssImport from "postcss-import";
+
+function getInfimaCSSFile(direction: string) {
+  return `infima/dist/css/default/default${
+    direction === 'rtl' ? '-rtl' : ''
+  }.css`;
+}
+
+function getPurgeCSSPath(siteDir?: string): string[] {
+  const purge = [
+    '!**/node_modules/**',  // Exclude node_modules first
+    `${__dirname}/theme/**/*.{js,jsx,ts,tsx}`
+  ];
+  if (siteDir) {
+    purge.push(`${siteDir}/**/*.{js,jsx,ts,tsx,mdx}`);
+  }
+  return purge;
+}
+
+export default function themeSeqera(
+  context: LoadContext,
+  options: PluginOptions,
+): Plugin<undefined> {
+  const {
+    siteDir,
+    i18n: {currentLocale, localeConfigs},
+    siteStorage,
+  } = context;
+  const themeConfig = context.siteConfig.themeConfig as ThemeConfig;
+  const {
+    announcementBar,
+    colorMode,
+    prism: {additionalLanguages},
+  } = themeConfig;
+  const {customCss} = options;
+  const {direction} = localeConfigs[currentLocale]!;
+
+  return {
+    name: 'docusaurus-theme-seqera',
+
+    getThemePath() {
+      return '../lib/theme';
+    },
+
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+
+    getTranslationFiles: () => getTranslationFiles({themeConfig}),
+
+    translateThemeConfig: (params) =>
+      translateThemeConfig({
+        themeConfig: params.themeConfig as ThemeConfig,
+        translationFiles: params.translationFiles,
+      }),
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'theme-common',
+      });
+    },
+
+    getClientModules() {
+      const modules = [
+        require.resolve(getInfimaCSSFile(direction)),
+        './prism-include-languages',
+        './nprogress',
+        './styles/typography.css',
+        './main-styles.css',
+        './styles/api.css',
+      ];
+
+      modules.push(...customCss.map((p) => path.resolve(context.siteDir, p)));
+
+      return modules;
+    },
+
+    configureWebpack(__config, __isServer, {currentBundler}) {
+      const prismLanguages = additionalLanguages
+        .map((lang) => `prism-${lang}`)
+        .join('|');
+
+      return {
+            module: {
+          rules: [
+            {
+              resourceQuery: /raw/,
+              type: 'asset/source', 
+            },
+          ],
+        },
+        plugins: [
+          new currentBundler.instance.ContextReplacementPlugin(
+            /prismjs[\\/]components$/,
+            new RegExp(`^./(${prismLanguages})$`),
+          ),
+        ],
+      };
+    },
+
+    configurePostCss(postCssOptions: PostCssOptions): PostCssOptions {
+      // Tailwind v4 auto-discovers content and config from CSS files
+      // Just add the postcss plugin
+      postCssOptions.plugins.unshift(
+        postcssImport(),
+        require('@tailwindcss/postcss')(),
+      );
+
+      return postCssOptions;
+    },
+
+    injectHtmlTags() {
+      return {
+        preBodyTags: [
+          {
+            tagName: 'svg',
+            attributes: {
+              style: 'display: none;',
+            },
+            innerHTML: SvgSpriteDefs,
+          },
+          {
+            tagName: 'script',
+            innerHTML: `
+${getThemeInlineScript({colorMode, siteStorage})}
+${DataAttributeQueryStringInlineJavaScript}
+${announcementBar ? getAnnouncementBarInlineScript({siteStorage}) : ''}
+            `,
+          },
+        ],
+      };
+    },
+  };
+}
+
+export {default as getSwizzleConfig} from './getSwizzleConfig';
+export {validateThemeConfig, validateOptions} from './options';