- {children}
-
-
diff --git a/src/components/page/theming/InputWrapper/index.tsx b/src/components/page/theming/InputWrapper/index.tsx
index 617879d83d5..06337ce60ec 100644
--- a/src/components/page/theming/InputWrapper/index.tsx
+++ b/src/components/page/theming/InputWrapper/index.tsx
@@ -3,10 +3,10 @@ import React from 'react';
import styles from './index.module.scss';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import { useColorMode } from '@docusaurus/theme-common';
export default function InputWrapper({ ...props }) {
- const { isDarkTheme } = useThemeContext();
+ const { colorMode } = useColorMode();
return (
);
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index bd0e97a20fc..9c9b0f0f5a0 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/src/components/page/theming/LayeredColorsSelect/index.tsx
@@ -6,11 +6,11 @@ import ColorDot from '../ColorDot';
import InputWrapper from '../InputWrapper';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import { useColorMode } from '@docusaurus/theme-common';
import clsx from 'clsx';
export default function LayeredColorsSelect({ ...props }) {
- const { isDarkTheme } = useThemeContext();
+ const { colorMode } = useColorMode();
const [color, setColor] = useState('primary');
const el = useRef(null);
@@ -64,7 +64,10 @@ export default function LayeredColorsSelect({ ...props }) {
-
- );
-}
-
-function DocPage(props: Props): JSX.Element {
- const {
- route: {routes: docRoutes},
- versionMetadata,
- location,
- } = props;
- const currentDocRoute = docRoutes.find((docRoute) =>
- matchPath(location.pathname, docRoute),
- );
- if (!currentDocRoute) {
- return
- {renderRoutes(docRoutes, {versionMetadata})}
-
-
- );
-}
-
-export default DocPage;
diff --git a/src/theme/DocPage/styles.module.css b/src/theme/DocPage/styles.module.css
deleted file mode 100644
index 07948dc0541..00000000000
--- a/src/theme/DocPage/styles.module.css
+++ /dev/null
@@ -1,89 +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.
- */
-
-/* ********************* */
-/* DO NOT EDIT THIS FILE */
-/* ********************* */
-
-:root {
- --doc-sidebar-width: 300px;
- --doc-sidebar-hidden-width: 30px;
-}
-
-:global(.docs-wrapper) {
- display: flex;
-}
-
-.docPage,
-.docMainContainer {
- display: flex;
- width: 100%;
-}
-
-.docSidebarContainer {
- display: none;
-}
-
-@media (min-width: 997px) {
- .docMainContainer {
- flex-grow: 1;
- max-width: calc(100% - var(--doc-sidebar-width));
- }
-
- .docMainContainerEnhanced {
- max-width: calc(100% - var(--doc-sidebar-hidden-width));
- }
-
- .docSidebarContainer {
- display: block;
- width: var(--doc-sidebar-width);
- margin-top: calc(-1 * var(--ifm-navbar-height));
- border-right: 1px solid var(--ifm-toc-border-color);
- will-change: width;
- transition: width var(--ifm-transition-fast) ease;
- clip-path: inset(0);
- }
-
- .docSidebarContainerHidden {
- width: var(--doc-sidebar-hidden-width);
- cursor: pointer;
- }
-
- .collapsedDocSidebar {
- position: sticky;
- top: 0;
- height: 100%;
- max-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color var(--ifm-transition-fast) ease;
- }
-
- .collapsedDocSidebar:hover,
- .collapsedDocSidebar:focus {
- background-color: var(--ifm-color-emphasis-200);
- }
-
- .expandSidebarButtonIcon {
- transform: rotate(0);
- }
- html[dir='rtl'] .expandSidebarButtonIcon {
- transform: rotate(180deg);
- }
-
- html[data-theme='dark'] .collapsedDocSidebar:hover,
- html[data-theme='dark'] .collapsedDocSidebar:focus {
- background-color: var(--collapse-button-bg-color-dark);
- }
-
- .docItemWrapperEnhanced {
- max-width: calc(
- var(--ifm-container-width) + var(--doc-sidebar-width)
- ) !important;
- }
-}
diff --git a/src/theme/DocSidebar/index.tsx b/src/theme/DocSidebar/index.tsx
index 7d820a088f4..c99f9e85c83 100644
--- a/src/theme/DocSidebar/index.tsx
+++ b/src/theme/DocSidebar/index.tsx
@@ -1,14 +1,21 @@
-import OriginalSidebar from '@theme-original/DocSidebar';
+/**
+ * This file wraps the original DocSidebar so we don't need to modify the original code.
+ *
+ * Reason for modifying:
+ * - Add a logo to the top of the sidebar
+ */
+
import React from 'react';
-import FrameworkSelector from '@theme/FrameworkSelector';
-import Logo from '@theme/Logo';
+import DocSidebar from '@theme-original/DocSidebar';
+import type { Props } from '@theme/DocSidebar';
+
+import Logo from '@theme-original/Logo';
-export default function DocSidebar(props) {
+export default function DocSidebarWrapper(props: Props): JSX.Element {
return (
<>
+
+ );
+}
diff --git a/src/theme/MDXComponents/Table.tsx b/src/theme/MDXComponents/Table.tsx
new file mode 100644
index 00000000000..ec769e29d12
--- /dev/null
+++ b/src/theme/MDXComponents/Table.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function MDXTable({ children, ...props }) {
+ const tableHeadings = children[0].props.children.props.children;
+
+ const hasTheadValue = !Array.isArray(tableHeadings) || tableHeadings.every(({ props }) => props.children);
+
+ return (
+
+ })
-
- );
-}
diff --git a/src/theme/NavbarItem/NavbarSeparator.tsx b/src/theme/NavbarItem/NavbarSeparator.tsx
deleted file mode 100644
index ffd9760c03f..00000000000
--- a/src/theme/NavbarItem/NavbarSeparator.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-
-export default function NavbarSeparator(props) {
- return ;
-}
diff --git a/src/theme/NavbarItem/index.tsx b/src/theme/NavbarItem/index.tsx
deleted file mode 100644
index 4a61f2e22e6..00000000000
--- a/src/theme/NavbarItem/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import OriginalNavbarItem from '@theme-original/NavbarItem';
-import React from 'react';
-import NavbarIconLink from '@theme/NavbarItem/NavbarIconLink';
-import NavbarSeparator from '@theme/NavbarItem/NavbarSeparator';
-import NavbarCta from '@theme/NavbarItem/NavbarCta';
-
-const CustomNavbarItemComponents = {
- iconLink: () => NavbarIconLink,
- separator: () => NavbarSeparator,
- cta: () => NavbarCta,
-} as const;
-
-export default function NavbarItem({ type, ...props }) {
- if (Object.keys(CustomNavbarItemComponents).includes(type)) {
- const Component = CustomNavbarItemComponents[type]();
- return ();
const location = useLocation();
+ const { metadata } = useDoc();
- const isEmpty = toc.length <= 0;
+ const isEmpty = props.toc.length <= 0;
useEffect(() => {
setActiveAd(prismicAds[Math.floor(Math.random() * prismicAds.length)].data);
@@ -21,9 +38,8 @@ export default function TOC({ toc, editUrl, ...props }) {
return (
+
+ );
+}
diff --git a/src/theme/DocItem/index.tsx b/src/theme/DocItem/index.tsx
deleted file mode 100644
index 8f7523b379c..00000000000
--- a/src/theme/DocItem/index.tsx
+++ /dev/null
@@ -1,158 +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 from 'react';
-import clsx from 'clsx';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import DocPaginator from '@theme/DocPaginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import Seo from '@theme/Seo';
-import type {Props} from '@theme/DocItem';
-import DocItemFooter from '@theme/DocItemFooter';
-import TOC from '@theme/TOC';
-import TOCCollapsible from '@theme/TOCCollapsible';
-import {MainHeading} from '@theme/Heading';
-import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-
-// CUSTOM CODE
-import DocDemo from '@components/global/DocDemo'
-
-export default function DocItem(props: Props): JSX.Element {
- const {content: DocContent, versionMetadata} = props;
- const {metadata, frontMatter} = DocContent;
- const {
- image,
- keywords,
- hide_title: hideTitle,
- hide_table_of_contents: hideTableOfContents,
- toc_min_heading_level: tocMinHeadingLevel,
- toc_max_heading_level: tocMaxHeadingLevel,
- //#region ------- CUSTOM CODE --------
- demoUrl,
- demoSourceUrl,
- //#endregion
- } = frontMatter;
-
- //#region --------- CUSTOM CODE ---------
- const { metadata: { editUrl } } = DocContent;
- //#endregion
-
- const {description, title} = metadata;
-
- // We only add a title if:
- // - user asks to hide it with frontmatter
- // - the markdown content does not already contain a top-level h1 heading
- const shouldAddTitle =
- !hideTitle && typeof DocContent.contentTitle === 'undefined';
-
- const windowSize = useWindowSize();
-
- const canRenderTOC =
- !hideTableOfContents && DocContent.toc && DocContent.toc.length > 0;
-
- const renderTocDesktop =
- canRenderTOC && (windowSize === 'desktop' || windowSize === 'ssr');
-
- return (
- <>
-
+
+ {/* ------- CUSTOM CODE -------- */}
+ {/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */}
+ {demoUrl && (
+
+
+ {children}
+
+
+
+
+ )}
+ {/* ------- CUSTOM CODE END -------- */}
+ {docTOC.desktop &&
+
+ {docTOC.desktop}
}
+
-
-
- );
-}
diff --git a/src/theme/DocItem/styles.module.css b/src/theme/DocItem/styles.module.css
deleted file mode 100644
index 61b60063115..00000000000
--- a/src/theme/DocItem/styles.module.css
+++ /dev/null
@@ -1,26 +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.
- */
-
-/* ********************* */
-/* DO NOT EDIT THIS FILE */
-/* ********************* */
-
-.docItemContainer article > *:first-child,
-.docItemContainer header + * {
- margin-top: 0;
-}
-
-@media (min-width: 997px) {
- .docItemCol {
- max-width: 75% !important;
- }
-
- /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
- .tocMobile {
- display: none;
- }
-}
diff --git a/src/theme/DocPage/Layout/Main/index.tsx b/src/theme/DocPage/Layout/Main/index.tsx
new file mode 100644
index 00000000000..593b2c2175b
--- /dev/null
+++ b/src/theme/DocPage/Layout/Main/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * This file wraps the original Main so we don't need to modify the original code.
+ *
+ * Reason for modifying:
+ * - Moved the navbar to the top of the page. Originally, the navbar would be placed along the top of the entire site, but we want it to be placed along the top of the docs page only.
+ */
+
+import React from 'react';
+import Main from '@theme-original/DocPage/Layout/Main';
+import type {Props} from '@theme/DocPage/Layout/Main';
+
+import Navbar from '@theme/Navbar';
+
+export default function MainWrapper(props: Props): JSX.Element {
+ return (
+
-
-
- {/* ------- CUSTOM CODE -------- */}
- {/* {renderTocDesktop && (
-
-
- {versionMetadata.badge && (
-
- Version: {versionMetadata.label}
-
- )}
-
- {canRenderTOC && (
-
-
-
-
- {/* ------- CUSTOM CODE -------- */}
-
- {/* ---------------------------- */}
-
-
- {/* ------- CUSTOM CODE -------- */}
- {demoUrl && (
-
- {/*
- Title can be declared inside md content or declared through frontmatter and added manually
- To make both cases consistent, the added title is added under the same div.markdown block
- See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
- */}
- {shouldAddTitle && {title} }
-
-
-
-
-
- )}
- {/* ---------------------------- */}
-
-
- )} */}
-
- {!demoUrl && !hideTableOfContents && DocContent.toc && (
-
- {/* -------------- */}
-
-
+
+ );
+}
diff --git a/src/theme/DocPage/index.tsx b/src/theme/DocPage/index.tsx
deleted file mode 100644
index 1009ecb266a..00000000000
--- a/src/theme/DocPage/index.tsx
+++ /dev/null
@@ -1,174 +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, {ReactNode, useState, useCallback} from 'react';
-import {MDXProvider} from '@mdx-js/react';
-
-import renderRoutes from '@docusaurus/renderRoutes';
-import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
-import Layout from '@theme/Layout';
-import DocSidebar from '@theme/DocSidebar';
-import MDXComponents from '@theme/MDXComponents';
-import NotFound from '@theme/NotFound';
-import type {DocumentRoute} from '@theme/DocItem';
-import type {Props} from '@theme/DocPage';
-import IconArrow from '@theme/IconArrow';
-import BackToTopButton from '@theme/BackToTopButton';
-import {matchPath} from '@docusaurus/router';
-import {translate} from '@docusaurus/Translate';
-import Navbar from '@theme/Navbar';
-
-import clsx from 'clsx';
-import styles from './styles.module.css';
-import {ThemeClassNames, docVersionSearchTag} from '@docusaurus/theme-common';
-import Head from '@docusaurus/Head';
-
-type DocPageContentProps = {
- readonly currentDocRoute: DocumentRoute;
- readonly versionMetadata: PropVersionMetadata;
- readonly children: ReactNode;
-};
-
-function DocPageContent({
- currentDocRoute,
- versionMetadata,
- children,
-}: DocPageContentProps): JSX.Element {
- const {pluginId, version} = versionMetadata;
-
- const sidebarName = currentDocRoute.sidebar;
- const sidebar = sidebarName
- ? versionMetadata.docsSidebars[sidebarName]
- : undefined;
-
- const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
- const [hiddenSidebar, setHiddenSidebar] = useState(false);
- const toggleSidebar = useCallback(() => {
- if (hiddenSidebar) {
- setHiddenSidebar(false);
- }
-
- setHiddenSidebarContainer((value) => !value);
- }, [hiddenSidebar]);
-
- return (
-
-
-
- {/* CUSTOM CODE - navbar placement */}
-
-
-
-
+
+
+
+ {!noFooter && }
+
+
+
+ );
+}
diff --git a/src/theme/MDXComponents/index.tsx b/src/theme/MDXComponents/index.tsx
index bc1f6fd52df..950b71bc42c 100644
--- a/src/theme/MDXComponents/index.tsx
+++ b/src/theme/MDXComponents/index.tsx
@@ -1,17 +1,20 @@
-import React from 'react';
+/**
+ * This file wraps the original MDXComponents so we don't need to modify the original code.
+ *
+ * Reason for modifying:
+ * - Add a custom table component
+ */
+
import MDXComponentsOriginal from '@theme-original/MDXComponents';
+// CUSTOM CODE
+import MDXTable from './Table';
+// CUSTOM CODE END
+import type { MDXComponentsObject } from '@theme/MDXComponents';
-export default {
+const MDXComponents: MDXComponentsObject = {
...MDXComponentsOriginal,
- table: ({ children, ...props }) => {
- const tableHeadings = children[0].props.children.props.children;
-
- const hasTheadValue = !Array.isArray(tableHeadings) || tableHeadings.every(({ props }) => props.children);
-
- return (
-
-
-
- );
- },
+ // CUSTOM CODE
+ table: MDXTable,
+ // CUSTOM CODE END
};
+export default MDXComponents;
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
new file mode 100644
index 00000000000..9b27731c096
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -0,0 +1,73 @@
+/**
+ * Original source:
+ * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
+ *
+ * Reasons for overriding:
+ * - Add a span with a visually hidden class in order to hide the text. We only want to show the language icon.
+ * - Removed the original styles that were applied to the language icon. We want to use our own styles.
+ */
+
+import React 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 DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import IconLanguage from '@theme/Icon/Language';
+import styles from './styles.module.css';
+export default function LocaleDropdownNavbarItem({ mobile, dropdownItemsBefore, dropdownItemsAfter, ...props }) {
+ const {
+ i18n: { currentLocale, locales, localeConfigs },
+ } = useDocusaurusContext();
+ const alternatePageUtils = useAlternatePageUtils();
+ const { search, hash } = useLocation();
+ const localeItems = locales.map((locale) => {
+ const baseTo = `pathname://${alternatePageUtils.createUrl({
+ locale,
+ fullyQualified: false,
+ })}`;
+ // preserve ?search#hash suffix on locale switches
+ const to = `${baseTo}${search}${hash}`;
+ return {
+ label: localeConfigs[locale].label,
+ lang: localeConfigs[locale].htmlLang,
+ to,
+ target: '_self',
+ autoAddBaseUrl: false,
+ className:
+ // eslint-disable-next-line no-nested-ternary
+ locale === currentLocale
+ ? // Similar idea as DefaultNavbarItem: select the right Infima active
+ // class name. This cannot be substituted with isActive, because the
+ // target URLs contain `pathname://` and therefore are not NavLinks!
+ mobile
+ ? 'menu__link--active'
+ : 'dropdown__link--active'
+ : '',
+ };
+ });
+ const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
+ // Mobile is handled a bit differently
+ const dropdownLabel = mobile
+ ? translate({
+ message: 'Languages',
+ id: 'theme.navbar.mobileLanguageDropdown.label',
+ description: 'The label for the mobile language switcher dropdown',
+ })
+ : localeConfigs[currentLocale].label;
+
+ return (
+