@docusaurus/theme-classic 3.8.1 → 3.9.0-canary-6403

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+[data-theme='dark'] .blueskySvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .blueskySvg {
+  fill: var(--dark);
+}

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

@@ -7,7 +7,7 @@
 
 import type {ReactNode, SVGProps} from 'react';
 
-// SVG Source: https://tabler.io/
+// SVG Source: https://github.com/tabler/tabler-icons
 function DefaultSocial(props: SVGProps<SVGSVGElement>): ReactNode {
   return (
     <svg
@@ -22,11 +22,11 @@ function DefaultSocial(props: SVGProps<SVGSVGElement>): ReactNode {
       strokeLinejoin="round"
       {...props}>
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
-      <path d="M3.6 9h16.8" />
-      <path d="M3.6 15h16.8" />
-      <path d="M11.5 3a17 17 0 0 0 0 18" />
-      <path d="M12.5 3a17 17 0 0 1 0 18" />
+      <path d="M1.2 12a10.8 10.8 0 1 0 21.6 0a10.8 10.8 0 0 0 -21.6 0" />
+      <path d="M1.92 8.4h20.16" />
+      <path d="M1.92 15.6h20.16" />
+      <path d="M11.4 1.2a20.4 20.4 0 0 0 0 21.6" />
+      <path d="M12.6 1.2a20.4 20.4 0 0 1 0 21.6" />
     </svg>
   );
 }

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ReactNode, SVGProps} from 'react';
+
+// SVG Source: https://github.com/tabler/tabler-icons
+function Email(props: SVGProps<SVGSVGElement>): ReactNode {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      {...props}>
+      <path stroke="none" d="M0 0h24v24H0z" />
+      <path d="M7.2 12a4.8 4.8 0 1 0 9.6 0 4.8 4.8 0 1 0-9.6 0" />
+      <path d="M16.8 12v1.8a3 3 0 0 0 6 0V12a10.8 10.8 0 1 0-6.6 9.936" />
+    </svg>
+  );
+}
+export default Email;

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

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactNode, SVGProps} from 'react';
+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 {
@@ -16,11 +18,10 @@ function LinkedIn(props: SVGProps<SVGSVGElement>): ReactNode {
       height="1em"
       preserveAspectRatio="xMidYMid"
       viewBox="0 0 256 256"
-      {...props}>
-      <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"
-        fill="#0A66C2"
-      />
+      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>
   );
 }

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+[data-theme='dark'] .linkedinSvg {
+  fill: var(--light);
+}
+
+[data-theme='light'] .linkedinSvg {
+  fill: var(--dark);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/MDXComponents/A';
+import styles from './styles.module.css';
+
+function isFootnoteRef(props: Props) {
+  return props['data-footnote-ref'] === true;
+}
+
+function FootnoteRefLink(props: Props) {
+  const {
+    navbar: {hideOnScroll},
+  } = useThemeConfig();
+  return (
+    <Link
+      {...props}
+      className={clsx(
+        hideOnScroll
+          ? styles.footnoteRefHideOnScrollNavbar
+          : styles.footnoteRefStickyNavbar,
+
+        props.className,
+      )}
+    />
+  );
+}
+
+export default function MDXA(props: Props): ReactNode {
+  if (isFootnoteRef(props)) {
+    return <FootnoteRefLink {...props} />;
+  }
+  return <Link {...props} />;
+}

package/src/theme/MDXComponents/A/styles.module.css

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/*
+When the navbar is sticky, ensure that on footnote click,
+the browser does not scroll to the ref behind the navbar
+See https://github.com/facebook/docusaurus/issues/11232
+See also headings case https://x.com/JoshWComeau/status/1332015868725891076
+ */
+.footnoteRefStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.footnoteRefHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
+}

package/src/theme/Navbar/Search/styles.module.css

@@ -22,7 +22,6 @@ See https://github.com/facebook/docusaurus/pull/9385
 
 @media (min-width: 997px) {
   .navbarSearchContainer {
-    padding: var(--ifm-navbar-item-padding-vertical)
-      var(--ifm-navbar-item-padding-horizontal);
+    padding: 0 var(--ifm-navbar-item-padding-horizontal);
   }
 }

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -13,7 +13,7 @@ import {
   useDocsPreferredVersion,
 } from '@docusaurus/plugin-content-docs/client';
 import {translate} from '@docusaurus/Translate';
-import {useLocation} from '@docusaurus/router';
+import {useHistorySelector} from '@docusaurus/theme-common';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import type {
@@ -119,7 +119,8 @@ export default function DocsVersionDropdownNavbarItem({
   versions: configs,
   ...props
 }: Props): ReactNode {
-  const {search, hash} = useLocation();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
   const activeDocContext = useActiveDocContext(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
   const versionItems = useVersionItems({docsPluginId, configs});

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -9,7 +9,7 @@ import React, {type ReactNode} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
-import {useLocation} from '@docusaurus/router';
+import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
@@ -17,30 +17,80 @@ import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 
 import styles from './styles.module.css';
 
+function useLocaleDropdownUtils() {
+  const {
+    siteConfig,
+    i18n: {localeConfigs},
+  } = useDocusaurusContext();
+  const alternatePageUtils = useAlternatePageUtils();
+  const search = useHistorySelector((history) => history.location.search);
+  const hash = useHistorySelector((history) => history.location.hash);
+
+  const getLocaleConfig = (locale: string) => {
+    const localeConfig = localeConfigs[locale];
+    if (!localeConfig) {
+      throw new Error(
+        `Docusaurus bug, no locale config found for locale=${locale}`,
+      );
+    }
+    return localeConfig;
+  };
+
+  const getBaseURLForLocale = (locale: string) => {
+    const localeConfig = getLocaleConfig(locale);
+    const isSameDomain = localeConfig.url === siteConfig.url;
+    if (isSameDomain) {
+      // Shorter paths if localized sites are hosted on the same domain
+      // This reduces HTML size a bit
+      return `pathname://${alternatePageUtils.createUrl({
+        locale,
+        fullyQualified: false,
+      })}`;
+    }
+    return alternatePageUtils.createUrl({
+      locale,
+      fullyQualified: true,
+    });
+  };
+
+  return {
+    getURL: (locale: string, options: {queryString: string | undefined}) => {
+      // We have 2 query strings because
+      // - there's the current one
+      // - there's one user can provide through navbar config
+      // see https://github.com/facebook/docusaurus/pull/8915
+      const finalSearch = mergeSearchStrings(
+        [search, options.queryString],
+        'append',
+      );
+      return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`;
+    },
+    getLabel: (locale: string) => {
+      return getLocaleConfig(locale).label;
+    },
+    getLang: (locale: string) => {
+      return getLocaleConfig(locale).htmlLang;
+    },
+  };
+}
+
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
   dropdownItemsAfter,
-  queryString = '',
+  queryString,
   ...props
 }: Props): ReactNode {
+  const utils = useLocaleDropdownUtils();
+
   const {
-    i18n: {currentLocale, locales, localeConfigs},
+    i18n: {currentLocale, locales},
   } = useDocusaurusContext();
-  const alternatePageUtils = useAlternatePageUtils();
-  const {search, hash} = useLocation();
-
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    const baseTo = `pathname://${alternatePageUtils.createUrl({
-      locale,
-      fullyQualified: false,
-    })}`;
-    // preserve ?search#hash suffix on locale switches
-    const to = `${baseTo}${search}${hash}${queryString}`;
     return {
-      label: localeConfigs[locale]!.label,
-      lang: localeConfigs[locale]!.htmlLang,
-      to,
+      label: utils.getLabel(locale),
+      lang: utils.getLang(locale),
+      to: utils.getURL(locale, {queryString}),
       target: '_self',
       autoAddBaseUrl: false,
       className:
@@ -65,7 +115,7 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale]!.label;
+    : utils.getLabel(currentLocale);
 
   return (
     <DropdownNavbarItem

package/src/theme/Tabs/index.tsx

@@ -7,6 +7,7 @@
 
 import React, {cloneElement, type ReactElement, type ReactNode} from 'react';
 import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 import {
   useScrollPositionBlocker,
   useTabs,
@@ -143,7 +144,14 @@ function TabContent({
 function TabsComponent(props: Props): ReactNode {
   const tabs = useTabs(props);
   return (
-    <div className={clsx('tabs-container', styles.tabList)}>
+    <div
+      className={clsx(
+        ThemeClassNames.tabs.container,
+        // former name kept for backward compatibility
+        // see https://github.com/facebook/docusaurus/pull/4086
+        'tabs-container',
+        styles.tabList,
+      )}>
       <TabList {...tabs} {...props} />
       <TabContent {...tabs} {...props} />
     </div>

package/src/theme-classic.d.ts

@@ -1040,7 +1040,9 @@ declare module '@theme/SkipToContent' {
 declare module '@theme/MDXComponents/A' {
   import type {ComponentProps, ReactNode} from 'react';
 
-  export interface Props extends ComponentProps<'a'> {}
+  export interface Props extends ComponentProps<'a'> {
+    'data-footnote-ref'?: true;
+  }
 
   export default function MDXA(props: Props): ReactNode;
 }
@@ -1892,6 +1894,14 @@ declare module '@theme/Icon/Socials/Twitch' {
   export default function Twitch(props: Props): ReactNode;
 }
 
+declare module '@theme/Icon/Socials/Email' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export interface Props extends ComponentProps<'svg'> {}
+
+  export default function Email(props: Props): ReactNode;
+}
+
 declare module '@theme/Icon/Socials/Mastodon' {
   import type {ComponentProps, ReactNode} from 'react';
 

package/src/theme/MDXComponents/A.tsx

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {type ReactNode} from 'react';
-import Link from '@docusaurus/Link';
-import type {Props} from '@theme/MDXComponents/A';
-
-export default function MDXA(props: Props): ReactNode {
-  return <Link {...props} />;
-}