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

package/README.md

@@ -7,9 +7,9 @@ A custom Docusaurustheme for Seqera.
 Add `docusaurus/theme-classic` to your package:
 
 ```bash
-npm i @seqeralabs/docusaurus-theme-seqera
+npm i @seqera/docusaurus-theme-seqera
 # or
-yarn add @seqeralabs/docusaurus-theme-seqera
+yarn add @seqera/docusaurus-theme-seqera
 ```
 
 Modify your `docusaurus.config.js`:
@@ -17,7 +17,7 @@ Modify your `docusaurus.config.js`:
 ```diff
 module.exports = {
   ...
-+ themes: ['@seqeralabs/docusaurus-theme-seqera'],
++ themes: ['@seqera/docusaurus-theme-seqera'],
   ...
 }
 ```

package/lib/getSwizzleConfig.d.ts

@@ -0,0 +1,2 @@
+import type { SwizzleConfig } from '@docusaurus/types';
+export default function getSwizzleConfig(): SwizzleConfig;

package/lib/getSwizzleConfig.js

@@ -0,0 +1,400 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = getSwizzleConfig;
+/* eslint sort-keys: "error" */
+function getSwizzleConfig() {
+    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/lib/index.d.ts

@@ -0,0 +1,5 @@
+import type { LoadContext, Plugin } from '@docusaurus/types';
+import type { PluginOptions } from "@seqera/docusaurus-theme-seqera";
+export default function themeSeqera(context: LoadContext, options: PluginOptions): Plugin<undefined>;
+export { default as getSwizzleConfig } from './getSwizzleConfig';
+export { validateThemeConfig, validateOptions } from './options';

package/lib/index.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOptions = exports.validateThemeConfig = exports.getSwizzleConfig = void 0;
+exports.default = themeSeqera;
+const tslib_1 = require("tslib");
+const path_1 = tslib_1.__importDefault(require("path"));
+const theme_translations_1 = require("@docusaurus/theme-translations");
+const translations_1 = require("./translations");
+const inlineScripts_1 = require("./inlineScripts");
+const inlineSvgSprites_1 = require("./inlineSvgSprites");
+const postcss_import_1 = tslib_1.__importDefault(require("postcss-import"));
+function getInfimaCSSFile(direction) {
+    return `infima/dist/css/default/default${direction === 'rtl' ? '-rtl' : ''}.css`;
+}
+function getPurgeCSSPath(siteDir) {
+    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;
+}
+function themeSeqera(context, options) {
+    const { siteDir, i18n: { currentLocale, localeConfigs }, siteStorage, } = context;
+    const themeConfig = context.siteConfig.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: () => (0, translations_1.getTranslationFiles)({ themeConfig }),
+        translateThemeConfig: (params) => (0, translations_1.translateThemeConfig)({
+            themeConfig: params.themeConfig,
+            translationFiles: params.translationFiles,
+        }),
+        getDefaultCodeTranslationMessages() {
+            return (0, theme_translations_1.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_1.default.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) {
+            // Tailwind v4 auto-discovers content and config from CSS files
+            // Just add the postcss plugin
+            postCssOptions.plugins.unshift((0, postcss_import_1.default)(), require('@tailwindcss/postcss')());
+            return postCssOptions;
+        },
+        injectHtmlTags() {
+            return {
+                preBodyTags: [
+                    {
+                        tagName: 'svg',
+                        attributes: {
+                            style: 'display: none;',
+                        },
+                        innerHTML: inlineSvgSprites_1.SvgSpriteDefs,
+                    },
+                    {
+                        tagName: 'script',
+                        innerHTML: `
+${(0, inlineScripts_1.getThemeInlineScript)({ colorMode, siteStorage })}
+${inlineScripts_1.DataAttributeQueryStringInlineJavaScript}
+${announcementBar ? (0, inlineScripts_1.getAnnouncementBarInlineScript)({ siteStorage }) : ''}
+            `,
+                    },
+                ],
+            };
+        },
+    };
+}
+var getSwizzleConfig_1 = require("./getSwizzleConfig");
+Object.defineProperty(exports, "getSwizzleConfig", { enumerable: true, get: function () { return tslib_1.__importDefault(getSwizzleConfig_1).default; } });
+var options_1 = require("./options");
+Object.defineProperty(exports, "validateThemeConfig", { enumerable: true, get: function () { return options_1.validateThemeConfig; } });
+Object.defineProperty(exports, "validateOptions", { enumerable: true, get: function () { return options_1.validateOptions; } });

package/lib/inlineScripts.d.ts

@@ -0,0 +1,10 @@
+import type { SiteStorage } from '@docusaurus/types';
+import type { ThemeConfig } from '@docusaurus/theme-common';
+export declare function getThemeInlineScript({ colorMode: { disableSwitch, defaultMode, respectPrefersColorScheme }, siteStorage, }: {
+    colorMode: ThemeConfig['colorMode'];
+    siteStorage: SiteStorage;
+}): string;
+export declare const DataAttributeQueryStringInlineJavaScript = "\n(function() {\n  try {\n    const entries = new URLSearchParams(window.location.search).entries();\n    for (var [searchKey, value] of entries) {\n      if (searchKey.startsWith('docusaurus-data-')) {\n        var key = searchKey.replace('docusaurus-data-',\"data-\")\n        document.documentElement.setAttribute(key, value);\n      }\n    }\n  } catch(e) {}\n})();\n";
+export declare function getAnnouncementBarInlineScript({ siteStorage, }: {
+    siteStorage: SiteStorage;
+}): string;

package/lib/inlineScripts.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataAttributeQueryStringInlineJavaScript = void 0;
+exports.getThemeInlineScript = getThemeInlineScript;
+exports.getAnnouncementBarInlineScript = getAnnouncementBarInlineScript;
+// Support for ?docusaurus-theme=dark
+const ThemeQueryStringKey = 'docusaurus-theme';
+// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
+const DataQueryStringPrefixKey = 'docusaurus-data-';
+function getThemeInlineScript({ colorMode: { disableSwitch, defaultMode, respectPrefersColorScheme }, siteStorage, }) {
+    // Need to be inlined to prevent dark mode FOUC
+    // Make sure the key is the same as the one in the color mode React context
+    // Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
+    const themeStorageKey = `theme${siteStorage.namespace}`;
+    const isThemeUserConfigurable = !disableSwitch;
+    /* language=js */
+    return `(function() {
+  function getSystemColorMode() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+${isThemeUserConfigurable
+        ? `  function getQueryStringTheme() {
+    try {
+      return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+    } catch (e) {}
+  }
+  function getStoredTheme() {
+    try {
+      return window['${siteStorage.type}'].getItem('${themeStorageKey}');
+    } catch (err) {}
+  }
+  var initialTheme = getQueryStringTheme() || getStoredTheme();`
+        : '  var initialTheme;'}
+  document.documentElement.setAttribute('data-theme', initialTheme || ${respectPrefersColorScheme ? 'getSystemColorMode()' : `'${defaultMode}'`});
+  document.documentElement.setAttribute('data-theme-choice', initialTheme || ${respectPrefersColorScheme ? `'system'` : `'${defaultMode}'`});
+})();`;
+}
+/* language=js */
+exports.DataAttributeQueryStringInlineJavaScript = `
+(function() {
+  try {
+    const entries = new URLSearchParams(window.location.search).entries();
+    for (var [searchKey, value] of entries) {
+      if (searchKey.startsWith('${DataQueryStringPrefixKey}')) {
+        var key = searchKey.replace('${DataQueryStringPrefixKey}',"data-")
+        document.documentElement.setAttribute(key, value);
+      }
+    }
+  } catch(e) {}
+})();
+`;
+// We always render the announcement bar html on the server, to prevent layout
+// shifts on React hydration. The theme can use CSS + the data attribute to hide
+// the announcement bar asap (before React hydration)
+function getAnnouncementBarInlineScript({ siteStorage, }) {
+    // Duplicated constant. Unfortunately we can't import it from theme-common, as
+    // we need to support older nodejs versions without ESM support
+    // TODO: import from theme-common once we support Node.js with ESM support
+    // + move all those announcementBar stuff there too
+    const AnnouncementBarDismissStorageKey = `docusaurus.announcement.dismiss${siteStorage.namespace}`;
+    const AnnouncementBarDismissDataAttribute = 'data-announcement-bar-initially-dismissed';
+    /* language=js */
+    return `(function() {
+  function isDismissed() {
+    try {
+      return localStorage.getItem('${AnnouncementBarDismissStorageKey}') === 'true';
+    } catch (err) {}
+    return false;
+  }
+  document.documentElement.setAttribute('${AnnouncementBarDismissDataAttribute}', isDismissed());
+})();`;
+}

package/lib/inlineSvgSprites.d.ts

@@ -0,0 +1 @@
+export declare const SvgSpriteDefs = "<defs>\n<symbol id=\"theme-svg-external-link\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z\" /></symbol>\n</defs>";

package/lib/inlineSvgSprites.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgSpriteDefs = void 0;
+// For icons that are heavily repeated in the static html output
+// See also https://github.com/facebook/docusaurus/issues/5865
+exports.SvgSpriteDefs = `<defs>
+<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" /></symbol>
+</defs>`;