@seqera/docusaurus-theme-seqera 1.0.0

package/src/inlineScripts.ts

@@ -0,0 +1,95 @@
+
+
+import type {SiteStorage} from '@docusaurus/types';
+import type {ThemeConfig} from '@docusaurus/theme-common';
+
+// Support for ?docusaurus-theme=dark
+const ThemeQueryStringKey = 'docusaurus-theme';
+
+// Support for ?docusaurus-data-mode=embed&docusaurus-data-myAttr=42
+const DataQueryStringPrefixKey = 'docusaurus-data-';
+
+export function getThemeInlineScript({
+  colorMode: {disableSwitch, defaultMode, respectPrefersColorScheme},
+  siteStorage,
+}: {
+  colorMode: ThemeConfig['colorMode'];
+  siteStorage: SiteStorage;
+}): string {
+  // 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 */
+export const 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)
+export function getAnnouncementBarInlineScript({
+  siteStorage,
+}: {
+  siteStorage: SiteStorage;
+}): string {
+  // 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/src/inlineSvgSprites.ts

@@ -0,0 +1,7 @@
+
+
+// For icons that are heavily repeated in the static html output
+// See also https://github.com/facebook/docusaurus/issues/5865
+export const 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>`;

package/src/main-styles.css

@@ -0,0 +1,322 @@
+@import 'tailwindcss';
+@plugin "daisyui";
+@config "../tailwind.config.js";
+
+/* Dark mode variant */
+@custom-variant dark (&:is([data-theme="dark"] *));
+
+/* Daisy UI settings */
+@plugin "daisyui/theme" {
+  name: 'light';
+  default: true;
+  --color-primary: var(--color-nextflow-800);
+  --color-secondary: var(--color-nextflow-200);
+  --color-accent: #f59e0b;
+  --color-neutral: #3d4451;
+  --color-base-100: #ffffff;
+  --color-base-200: #f2f2f2;
+  --color-base-300: #e5e6e6;
+  --color-info: #3abff8;
+  --color-success: #36d399;
+  --color-warning: #fbbd23;
+  --color-error: #f87272;
+}
+
+@plugin "daisyui/theme" {
+  name: 'dark';
+  --color-primary: var(--color-nextflow-500);
+  --color-secondary: var(--color-nextflow-500);
+  --color-accent: #1fb2a5;
+  --color-neutral: #191d24;
+  --color-base-100: rgb(28, 28, 30);
+  --color-base-200: #242933;
+  --color-base-300: #20252e;
+  --color-info: #3abff8;
+  --color-success: #36d399;
+  --color-warning: #fbbd23;
+  --color-error: #f87272;
+}
+
+/***
+Infima is Docusaurus's built in CSS framework. 
+
+- We have removed Infima using CSS Cascade Layers (https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-css-cascade-layers),
+- We do this so we can more seamless integrate Tailwind 4
+- However, Infima root styles settings can still be used and configured below
+
+**/
+:root {
+  /* the primary color is set to nextflow-900 because it's the most web accessible */
+  --ifm-color-primary: var(--color-nextflow-900);
+  --ifm-color-primary-dark: var(--color-nextflow-700);
+  --ifm-color-primary-darker: var(--color-nextflow-800);
+  --ifm-color-primary-darkest: var(--color-nextflow-900);
+  --ifm-color-primary-light: var(--color-nextflow-400);
+  --ifm-color-primary-lighter: var(--color-nextflow-300);
+  --ifm-color-primary-lightest: var(--color-nextflow-200);
+  --ifm-badge-background-color: var(--color-nextflow-300);
+  --ifm-navbar-sidebar-width: 100%;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-navbar-height: 4rem;
+  --ifm-breadcrumb-item-background-active: rgba(0, 0, 0, 0);
+  --ifm-code-color: var(--color-red-600);
+
+  /* remove box shadow variables */
+  --ifm-global-shadow-lw: none;
+  --ifm-global-shadow-md: none;
+  --ifm-global-shadow-tl: none;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+}
+
+/* Dark mode */
+[data-theme='dark'] {
+  color-scheme: dark;
+  --ifm-color-primary: var(--color-nextflow-300);
+  --ifm-color-primary-dark: var(--color-nextflow-400);
+  --ifm-color-primary-darker: var(--color-nextflow-500);
+  --ifm-color-primary-darkest: var(--color-nextflow-600);
+  --ifm-color-primary-light: var(--color-nextflow-300);
+  --ifm-color-primary-lighter: var(--color-nextflow-200);
+  --ifm-color-primary-lightest: var(--color-nextflow-100);
+  --ifm-navbar-background-color: rgb(28, 28, 30);
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-code-color: var(--color-red-400);
+  --ifm-color-content: #e3e3e3;
+  --ifm-font-color-base: #e3e3e3;
+  --ifm-heading-color: #e3e3e3;
+}
+
+/* Seqera Tailwind  */
+@theme {
+  /* Breakpoints */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 996px; /* matches docusaurus default */
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+
+  /* Font Families */
+  --font-title: 'Degular', Helvetica, sans-serif;
+  --font-display: 'Degular', Helvetica, sans-serif;
+  --font-body: 'Inter', Helvetica, sans-serif;
+
+  /* Font Sizes with Line Heights */
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 18px;
+
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 21px;
+
+  --font-size-base: 16px;
+  --font-size-base--line-height: 24px;
+
+  --font-size-lg: 18px;
+  --font-size-lg--line-height: 26px;
+
+  --font-size-xl: 24px;
+  --font-size-xl--line-height: 32px;
+
+  --font-size-2xl: 28px;
+  --font-size-2xl--line-height: 1;
+
+  --font-size-3xl: 32px;
+  --font-size-3xl--line-height: 1;
+
+  --font-size-4xl: 40px;
+  --font-size-4xl--line-height: 1;
+
+  --font-size-5xl: 48px;
+  --font-size-5xl--line-height: 1;
+
+  --font-size-6xl: 56px;
+  --font-size-6xl--line-height: 1;
+
+  --font-size-7xl: 60px;
+  --font-size-7xl--line-height: 1;
+
+  --font-size-8xl: 64px;
+  --font-size-8xl--line-height: 1;
+
+  --font-size-9xl: 68px;
+  --font-size-9xl--line-height: 1;
+
+  /* Nextflow (green) colors */
+  --color-nextflow-100: #e2f7f3;
+  --color-nextflow-200: #b6ece2;
+  --color-nextflow-300: #86e0ce;
+  --color-nextflow-400: #56d3ba;
+  --color-nextflow-500: #31c9ac;
+  --color-nextflow-600: #0dc09d;
+  --color-nextflow-700: #0cae8e;
+  --color-nextflow-800: #0a967b;
+  --color-nextflow-900: #087f68;
+  --color-nextflow-1000: #065647;
+  --color-nextflow: #0dc09d;
+
+  /* Wave (blue) colors */
+  --color-wave-100: #e8f2ff;
+  --color-wave-200: #c5dffe;
+  --color-wave-300: #9ecafe;
+  --color-wave-400: #77b5fe;
+  --color-wave-500: #5aa5fd;
+  --color-wave-600: #3d95fd;
+  --color-wave-700: #3787e5;
+  --color-wave-800: #3074c5;
+  --color-wave-900: #2863a7;
+  --color-wave-1000: #1b4372;
+  --color-wave: #3d95fd;
+
+  /* Fusion (red) colors */
+  --color-fusion-100: #feedec;
+  --color-fusion-200: #fed2d0;
+  --color-fusion-300: #fdb4b1;
+  --color-fusion-400: #fc9592;
+  --color-fusion-500: #fb7f7a;
+  --color-fusion-600: #fa6863;
+  --color-fusion-700: #e25e5a;
+  --color-fusion-800: #c3514d;
+  --color-fusion-900: #a64541;
+  --color-fusion-1000: #712f2c;
+  --color-fusion: #fa6863;
+
+  /* MultiQC (orange) colors */
+  --color-multiqc-100: #fdf0e9;
+  --color-multiqc-200: #fbd9c8;
+  --color-multiqc-300: #f8c0a3;
+  --color-multiqc-400: #f5a67e;
+  --color-multiqc-500: #f39362;
+  --color-multiqc-600: #f18046;
+  --color-multiqc-700: #da743f;
+  --color-multiqc-800: #bc6437;
+  --color-multiqc-900: #a0552f;
+  --color-multiqc-1000: #6c3a20;
+  --color-multiqc: #f18046;
+
+  /* Brand (purple/grey) colors */
+  --color-brand-100: #f3f3f4;
+  --color-brand-200: #e8e7e9;
+  --color-brand-300: #d0cfd4;
+  --color-brand-400: #b9b7be;
+  --color-brand-500: #a29fa8;
+  --color-brand-600: #8a8792;
+  --color-brand-700: #736f7d;
+  --color-brand-800: #5c5767;
+  --color-brand-900: #453f51;
+  --color-brand-1000: #2d273c;
+  --color-brand-1100: #160f26;
+  --color-brand-1200: #151121;
+  --color-brand-1300: #141024;
+  --color-brand-1400: #110d1d;
+  --color-brand: #160f26;
+
+  /* Gray Colors */
+  --color-gray-100: #f7f7f7;
+  --color-gray-200: #eaebeb;
+  --color-gray-300: #dddede;
+  --color-gray-400: #cfd0d1;
+  --color-gray-500: #c4c6c7;
+  --color-gray-600: #babcbd;
+  --color-gray-700: #a8aaab;
+  --color-gray-800: #919393;
+  --color-gray-900: #7b7b7b;
+  --color-gray-1000: #545555;
+
+  /* Product (purple) colors */
+  --color-product-100: #eae8f1;
+  --color-product-200: #cbc6dd;
+  --color-product-300: #a9a1c6;
+  --color-product-400: #867baf;
+  --color-product-500: #6c5e9d;
+  --color-product-600: #52428c;
+  --color-product-700: #4a3c7f;
+  --color-product-800: #40346d;
+  --color-product-900: #362c5d;
+  --color-product-1000: #251e3f;
+
+  /* Seqera "blue" Cclors */
+  --color-blu-100: #e8ebfc;
+  --color-blu-200: #c6ccf8;
+  --color-blu-300: #a1abf3;
+  --color-blu-400: #7b89ee;
+  --color-blu-500: #5e6feb;
+  --color-blu-600: #4256e7;
+  --color-blu-700: #3c4ed1;
+  --color-blu-800: #3443b4;
+  --color-blu-900: #2c3999;
+  --color-blu-1000: #1e2768;
+  --color-blu: #4256e7;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-full: 9999px;
+
+  /* Height Extensions */
+  --height-18: 4.5rem;
+
+  /* Z-Index */
+  --z-index-header: 100;
+  --z-index-sidebar: 150;
+}
+
+/* Custom Utilities for Fractional Sizing */
+@layer utilities {
+  .container {
+    max-width: none;
+    margin: 0 auto;
+  }
+  .container-sm {
+    max-width: 640px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-md {
+    max-width: 996px; /* matches docusaurus default */
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-lg {
+    max-width: 1024px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-xl {
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .container-2xl {
+    max-width: 1536px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.mobilemenu {
+  .menu__link:hover {
+    background: none;
+  }
+  .menu__link--active {
+    background: none;
+  }
+}

package/src/nprogress.css

@@ -0,0 +1,36 @@
+
+
+/**
+ * Styles for NProgress
+ * Copied over to remove unused styles for the spinner.
+ * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
+ */
+
+:root {
+  --docusaurus-progress-bar-color: var(--ifm-color-primary);
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--docusaurus-progress-bar-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
+    0 0 5px var(--docusaurus-progress-bar-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}

package/src/nprogress.ts

@@ -0,0 +1,27 @@
+
+
+import nprogress from 'nprogress';
+import type {ClientModule} from '@docusaurus/types';
+
+import './nprogress.css';
+
+nprogress.configure({showSpinner: false});
+
+const delay = 200;
+
+const clientModule: ClientModule = {
+  onRouteUpdate({location, previousLocation}) {
+    if (previousLocation && location.pathname !== previousLocation.pathname) {
+      const progressBarTimeout = window.setTimeout(() => {
+        nprogress.start();
+      }, delay);
+      return () => window.clearTimeout(progressBarTimeout);
+    }
+    return undefined;
+  },
+  onRouteDidUpdate() {
+    nprogress.done();
+  },
+};
+
+export default clientModule;