@seqera/docusaurus-theme-seqera 1.0.0

package/src/theme/Icon/Socials/Instagram/styles.module.css

@@ -0,0 +1,9 @@
+
+
+[data-theme='dark'] .instagramSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .instagramSvg {
+  fill: var(--dark);
+}

package/src/theme/Icon/Socials/LinkedIn/index.tsx

@@ -0,0 +1,23 @@
+
+
+import type {SVGProps, ReactNode, CSSProperties} from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function LinkedIn(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid"
+      viewBox="0 0 256 256"
+      style={{'--dark': '#0a66c2', '--light': '#ffffffe6'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.linkedinSvg)}>
+      <path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" />
+    </svg>
+  );
+}
+export default LinkedIn;

package/src/theme/Icon/Socials/LinkedIn/styles.module.css

@@ -0,0 +1,9 @@
+
+
+[data-theme='dark'] .linkedinSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .linkedinSvg {
+  fill: var(--dark);
+}

package/src/theme/Icon/Socials/Mastodon/index.tsx

@@ -0,0 +1,40 @@
+
+
+import {useId} from 'react';
+import type {SVGProps, ReactNode} from 'react';
+
+// SVG Source: https://svgl.app/
+function Mastodon(props: SVGProps<SVGSVGElement>): ReactNode {
+  const gradientId = useId();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 61 65"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        fill={`url(#${gradientId})`}
+        d="M60.754 14.39C59.814 7.406 53.727 1.903 46.512.836 45.294.656 40.682 0 29.997 0h-.08C19.23 0 16.938.656 15.72.836 8.705 1.873 2.299 6.82.745 13.886c-.748 3.48-.828 7.338-.689 10.877.198 5.075.237 10.142.697 15.197a71.482 71.482 0 0 0 1.664 9.968c1.477 6.056 7.458 11.096 13.317 13.152a35.718 35.718 0 0 0 19.484 1.028 28.365 28.365 0 0 0 2.107-.576c1.572-.5 3.413-1.057 4.766-2.038a.154.154 0 0 0 .062-.118v-4.899a.146.146 0 0 0-.055-.111.145.145 0 0 0-.122-.028 54 54 0 0 1-12.644 1.478c-7.328 0-9.298-3.478-9.863-4.925a15.258 15.258 0 0 1-.857-3.882.142.142 0 0 1 .178-.145 52.976 52.976 0 0 0 12.437 1.477c1.007 0 2.012 0 3.02-.026 4.213-.119 8.654-.334 12.8-1.144.103-.02.206-.038.295-.065 6.539-1.255 12.762-5.196 13.394-15.176.024-.393.083-4.115.083-4.523.003-1.386.446-9.829-.065-15.017Z"
+      />
+      <path
+        fill="#fff"
+        d="M50.394 22.237v17.35H43.52V22.749c0-3.545-1.478-5.353-4.483-5.353-3.303 0-4.958 2.139-4.958 6.364v9.217h-6.835V23.76c0-4.225-1.657-6.364-4.96-6.364-2.988 0-4.48 1.808-4.48 5.353v16.84H10.93V22.237c0-3.545.905-6.362 2.715-8.45 1.868-2.082 4.317-3.152 7.358-3.152 3.519 0 6.178 1.354 7.951 4.057l1.711 2.871 1.714-2.871c1.773-2.704 4.432-4.056 7.945-4.056 3.038 0 5.487 1.069 7.36 3.152 1.81 2.085 2.712 4.902 2.71 8.449Z"
+      />
+      <defs>
+        <linearGradient
+          id={gradientId}
+          x1={30.5}
+          x2={30.5}
+          y1={0}
+          y2={65}
+          gradientUnits="userSpaceOnUse">
+          <stop stopColor="#6364FF" />
+          <stop offset={1} stopColor="#563ACC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+export default Mastodon;

package/src/theme/Icon/Socials/StackOverflow/index.tsx

@@ -0,0 +1,25 @@
+
+
+import type {ReactNode, SVGProps} from 'react';
+
+// SVG Source: https://svgl.app/
+function StackOverflow(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 169.61 200"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        d="M140.44 178.38v-48.65h21.61V200H0v-70.27h21.61v48.65z"
+        fill="#bcbbbb"
+      />
+      <path
+        d="M124.24 140.54l4.32-16.22-86.97-17.83-3.78 17.83zM49.7 82.16L130.72 120l7.56-16.22-81.02-37.83zm22.68-40l68.06 57.3 11.35-13.51-68.6-57.3-11.35 13.51zM116.14 0l-14.59 10.81 53.48 71.89 14.58-10.81zM37.81 162.16h86.43v-16.21H37.81z"
+        fill="#f48024"
+      />
+    </svg>
+  );
+}
+export default StackOverflow;

package/src/theme/Icon/Socials/Threads/index.tsx

@@ -0,0 +1,25 @@
+
+
+import type {SVGProps, ReactNode, CSSProperties} from 'react';
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function Threads(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Threads"
+      viewBox="0 0 192 192"
+      width="1em"
+      fill="none"
+      height="1em"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.threadsSvg)}>
+      <path d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z" />
+    </svg>
+  );
+}
+export default Threads;

package/src/theme/Icon/Socials/Threads/styles.module.css

@@ -0,0 +1,9 @@
+
+
+[data-theme='dark'] .threadsSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .threadsSvg {
+  fill: var(--dark);
+}

package/src/theme/Icon/Socials/Twitch/index.tsx

@@ -0,0 +1,32 @@
+
+import type {SVGProps, ReactNode} from 'react';
+
+// SVG Source: https://svgl.app/
+function Twitch(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x={0}
+      y={0}
+      viewBox="0 0 2400 2800"
+      width="1em"
+      height="1em"
+      {...props}>
+      <path
+        d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z"
+        fill="#fff"
+      />
+      <g>
+        <path
+          d="M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z"
+          fill="#9146ff"
+        />
+        <path
+          d="M1700 550h200v600h-200zM1150 550h200v600h-200z"
+          fill="#9146ff"
+        />
+      </g>
+    </svg>
+  );
+}
+export default Twitch;

package/src/theme/Icon/Socials/Twitter/index.tsx

@@ -0,0 +1,22 @@
+
+
+import type {ReactNode, SVGProps} from 'react';
+
+// SVG Source: https://svgl.app/
+function Twitter(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 209"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid"
+      {...props}>
+      <path
+        d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27 10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52 0 4.117.465 8.125 1.36 11.97-43.65-2.191-82.35-23.1-108.255-54.876-4.52 7.757-7.11 16.78-7.11 26.404 0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661 0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475-17.975 14.086-40.622 22.483-65.228 22.483-4.24 0-8.42-.249-12.529-.734 23.243 14.902 50.85 23.597 80.51 23.597 96.607 0 149.434-80.031 149.434-149.435 0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45"
+        fill="#55acee"
+      />
+    </svg>
+  );
+}
+export default Twitter;

package/src/theme/Icon/Socials/X/index.tsx

@@ -0,0 +1,24 @@
+
+
+import type {ReactNode, SVGProps, CSSProperties} from 'react';
+
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+// SVG Source: https://svgl.app/
+function X(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      fill="none"
+      viewBox="0 0 1200 1227"
+      style={{'--dark': '#000', '--light': '#fff'} as CSSProperties}
+      {...props}
+      className={clsx(props.className, styles.xSvg)}>
+      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
+    </svg>
+  );
+}
+export default X;

package/src/theme/Icon/Socials/X/styles.module.css

@@ -0,0 +1,9 @@
+
+
+[data-theme='dark'] .xSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .xSvg {
+  fill: var(--dark);
+}

package/src/theme/Icon/Socials/YouTube/index.tsx

@@ -0,0 +1,22 @@
+
+import type {SVGProps, ReactNode} from 'react';
+
+// SVG Source: https://svgl.app/
+function YouTube(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      viewBox="0 0 256 180"
+      width="1em"
+      height="1em"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      {...props}>
+      <path
+        d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
+        fill="red"
+      />
+      <path fill="#FFF" d="m102.421 128.06 66.328-38.418-66.328-38.418z" />
+    </svg>
+  );
+}
+export default YouTube;

package/src/theme/Icon/Success/index.tsx

@@ -0,0 +1,15 @@
+
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/Success';
+
+export default function IconSuccess(props: Props): ReactNode {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+      />
+    </svg>
+  );
+}

package/src/theme/Icon/SystemColorMode/index.tsx

@@ -0,0 +1,15 @@
+
+
+import type {ReactNode} from 'react';
+import type {Props} from '@theme/Icon/SystemColorMode';
+
+export default function IconSystemColorMode(props: Props): ReactNode {
+  return (
+    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
+      <path
+        fill="currentColor"
+        d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"
+      />
+    </svg>
+  );
+}

package/src/theme/Icon/Wave/index.tsx

@@ -0,0 +1,32 @@
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/Wave';
+
+export default function IconWave(props: Props): ReactNode {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <g clipPath="url(#clip0_15_583)">
+        <path
+          d="M4.45901 11.2482C4.7054 7.53831 7.68555 4.56568 11.3992 4.33246V0C5.29033 0.240744 0.379521 5.14215 0.12561 11.2482H4.45901Z"
+          fill="currentColor"
+        />
+        <path
+          d="M4.45901 23.5104C4.7054 19.8005 7.68555 16.8279 11.3992 16.5947V12.2622C5.29033 12.503 0.379521 17.4044 0.12561 23.5104H4.45901Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19.3024 0.00012207C19.056 3.71003 16.0759 6.68266 12.3622 6.91588V11.2483C18.4711 11.0076 23.3819 6.10619 23.6358 0.00012207L19.3024 0.00012207Z"
+          fill="currentColor"
+        />
+        <path
+          d="M19.3024 12.2622C19.056 15.9721 16.0759 18.9447 12.3622 19.178V23.5104C18.4711 23.2697 23.3819 18.3683 23.6358 12.2622H19.3024Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15_583">
+          <rect width="24" height="23.5103" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/theme/Icon/WordWrap/index.tsx

@@ -0,0 +1,15 @@
+
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/Icon/WordWrap';
+
+export default function IconWordWrap(props: Props): ReactNode {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
+      />
+    </svg>
+  );
+}

package/src/theme/LastUpdated/index.tsx

@@ -0,0 +1,91 @@
+
+
+import React, {type ReactNode} from 'react';
+import Translate from '@docusaurus/Translate';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {useDateTimeFormat} from '@docusaurus/theme-common/internal';
+import type {Props} from '@theme/LastUpdated';
+
+function LastUpdatedAtDate({
+  lastUpdatedAt,
+}: {
+  lastUpdatedAt: number;
+}): ReactNode {
+  const atDate = new Date(lastUpdatedAt);
+
+  const dateTimeFormat = useDateTimeFormat({
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+
+  const formattedLastUpdatedAt = dateTimeFormat.format(atDate);
+
+  return (
+    <Translate
+      id="theme.lastUpdated.atDate"
+      description="The words used to describe on which date a page has been last updated"
+      values={{
+        date: (
+          <b>
+            <time dateTime={atDate.toISOString()} itemProp="dateModified">
+              {formattedLastUpdatedAt}
+            </time>
+          </b>
+        ),
+      }}>
+      {' on {date}'}
+    </Translate>
+  );
+}
+
+function LastUpdatedByUser({
+  lastUpdatedBy,
+}: {
+  lastUpdatedBy: string;
+}): ReactNode {
+  return (
+    <Translate
+      id="theme.lastUpdated.byUser"
+      description="The words used to describe by who the page has been last updated"
+      values={{
+        user: <b>{lastUpdatedBy}</b>,
+      }}>
+      {' by {user}'}
+    </Translate>
+  );
+}
+
+export default function LastUpdated({
+  lastUpdatedAt,
+  lastUpdatedBy,
+}: Props): ReactNode {
+  return (
+    <span className={ThemeClassNames.common.lastUpdated}>
+      <Translate
+        id="theme.lastUpdated.lastUpdatedAtBy"
+        description="The sentence used to display when a page has been last updated, and by who"
+        values={{
+          atDate: lastUpdatedAt ? (
+            <LastUpdatedAtDate lastUpdatedAt={lastUpdatedAt} />
+          ) : (
+            ''
+          ),
+          byUser: lastUpdatedBy ? (
+            <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
+          ) : (
+            ''
+          ),
+        }}>
+        {'Last updated{atDate}{byUser}'}
+      </Translate>
+      {process.env.NODE_ENV === 'development' && (
+        <div>
+          {/* eslint-disable-next-line @docusaurus/no-untranslated-text */}
+          <small> (Simulated during dev for better perf)</small>
+        </div>
+      )}
+    </span>
+  );
+}

package/src/theme/Layout/Provider/index.tsx

@@ -0,0 +1,26 @@
+
+
+import React, {type ReactNode} from 'react';
+import {composeProviders} from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+import {DocsPreferredVersionContextProvider} from '@docusaurus/plugin-content-docs/client';
+import type {Props} from '@theme/Layout/Provider';
+
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+
+export default function LayoutProvider({children}: Props): ReactNode {
+  return <Provider>{children}</Provider>;
+}

package/src/theme/Layout/index.tsx

@@ -0,0 +1,59 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import type {Props} from '@theme/Layout';
+import styles from './styles.module.css';
+
+export default function Layout(props: Props): ReactNode {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // Not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
+
+  useKeyboardNavigation();
+
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.layout.main.container,
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+
+      {!noFooter && <Footer />}
+    </LayoutProvider>
+  );
+}

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

@@ -0,0 +1,23 @@
+
+
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}

package/src/theme/Logo/index.tsx

@@ -0,0 +1,78 @@
+
+
+import React, {type ReactNode} from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig, type NavbarLogo} from '@docusaurus/theme-common';
+import ThemedImage from '@theme/ThemedImage';
+import type {Props} from '@theme/Logo';
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  );
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): ReactNode {
+  const {
+    siteConfig: {title},
+  } = useDocusaurusContext();
+  const {
+    navbar: {title: navbarTitle, logo},
+  } = useThemeConfig();
+
+  const {imageClassName, titleClassName, ...propsRest} = props;
+  const logoLink = useBaseUrl(logo?.href || '/');
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? '' : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && {target: logo.target})}>
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+    </Link>
+  );
+}

package/src/theme/MDXComponents/A/index.tsx

@@ -0,0 +1,16 @@
+
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useAnchorTargetClassName} from '@docusaurus/theme-common';
+import type {Props} from '@theme/MDXComponents/A';
+
+export default function MDXA(props: Props): ReactNode {
+  // MDX Footnotes have ids such as <a id="user-content-fn-1-953011" ...>
+  const anchorTargetClassName = useAnchorTargetClassName(props.id);
+
+  return (
+    <Link {...props} className={clsx(anchorTargetClassName, props.className)} />
+  );
+}