diff --git a/.eslintrc.js b/.eslintrc.js index 62068bcee308..351201fd3e75 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -174,6 +174,16 @@ module.exports = { ], }, overrides: [ + { + files: [ + 'packages/docusaurus-theme-*/src/theme/**/*.js', + 'packages/docusaurus-theme-*/src/theme/**/*.ts', + 'packages/docusaurus-theme-*/src/theme/**/*.tsx', + ], + rules: { + 'import/no-named-export': ERROR, + }, + }, { files: [ 'packages/create-docusaurus/templates/**/*.js', diff --git a/jest.config.mjs b/jest.config.mjs index 93119e4ac94b..4d11b9bb1749 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -44,5 +44,9 @@ export default { // TODO maybe use "projects" + multiple configs if we plan to add tests to another theme? '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1', '@site/(.*)': 'website/$1', + + // TODO why Jest can't figure node package entry points? + '@docusaurus/plugin-content-docs/client': + '@docusaurus/plugin-content-docs/lib/client/index.js', }, }; diff --git a/packages/docusaurus-plugin-content-docs/package.json b/packages/docusaurus-plugin-content-docs/package.json index aaf61d1c1aa9..b8dac15f6174 100644 --- a/packages/docusaurus-plugin-content-docs/package.json +++ b/packages/docusaurus-plugin-content-docs/package.json @@ -3,6 +3,10 @@ "version": "2.0.0-beta.14", "description": "Docs plugin for Docusaurus.", "main": "lib/index.js", + "exports": { + "./client": "./lib/client/index.js", + ".": "./lib/index.js" + }, "types": "src/plugin-content-docs.d.ts", "scripts": { "build": "tsc", diff --git a/packages/docusaurus-plugin-content-docs/src/theme/hooks/useDocs.ts b/packages/docusaurus-plugin-content-docs/src/client/globalDataHooks.ts similarity index 95% rename from packages/docusaurus-plugin-content-docs/src/theme/hooks/useDocs.ts rename to packages/docusaurus-plugin-content-docs/src/client/globalDataHooks.ts index c55505c797aa..5a1d5b844925 100644 --- a/packages/docusaurus-plugin-content-docs/src/theme/hooks/useDocs.ts +++ b/packages/docusaurus-plugin-content-docs/src/client/globalDataHooks.ts @@ -11,7 +11,7 @@ import useGlobalData, { usePluginData, } from '@docusaurus/useGlobalData'; -import type {GlobalPluginData, GlobalVersion} from '../../types'; +import type {GlobalPluginData, GlobalVersion} from '../types'; import { getActivePlugin, getLatestVersion, @@ -22,7 +22,7 @@ import { type ActiveDocContext, type DocVersionSuggestions, type GetActivePluginOptions, -} from '../../client/docsClientUtils'; +} from './docsClientUtils'; // Important to use a constant object to avoid React useEffect executions etc..., // see https://github.com/facebook/docusaurus/issues/5089 @@ -37,6 +37,7 @@ export const useAllDocsData = (): Record => export const useDocsData = (pluginId: string | undefined): GlobalPluginData => usePluginData('docusaurus-plugin-content-docs', pluginId) as GlobalPluginData; +// TODO this feature should be provided by docusaurus core export const useActivePlugin = ( options: GetActivePluginOptions = {}, ): ActivePlugin | undefined => { diff --git a/packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.ts b/packages/docusaurus-plugin-content-docs/src/client/index.ts similarity index 58% rename from packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.ts rename to packages/docusaurus-plugin-content-docs/src/client/index.ts index c9c8252f5dc3..d2d1cf887ed1 100644 --- a/packages/docusaurus-theme-classic/src/theme/UserPreferencesContext.ts +++ b/packages/docusaurus-plugin-content-docs/src/client/index.ts @@ -5,8 +5,4 @@ * LICENSE file in the root directory of this source tree. */ -import {createContext} from 'react'; - -const UserPreferencesContext = createContext(undefined); - -export default UserPreferencesContext; +export * from './globalDataHooks'; diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index 8f751c0670df..65c26c13ae1e 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -79,14 +79,6 @@ export default async function pluginContentDocs( return { name: 'docusaurus-plugin-content-docs', - getThemePath() { - return path.resolve(__dirname, './theme'); - }, - - getTypeScriptThemePath() { - return path.resolve(__dirname, '..', 'src', 'theme'); - }, - extendCli(cli) { const isDefaultPluginId = pluginId === DEFAULT_PLUGIN_ID; diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index ffef51982105..a656d29b78c5 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts @@ -241,7 +241,8 @@ declare module '@theme/Seo' { export default Seo; } -declare module '@theme/hooks/useDocs' { +// TODO can't we infer types directly from code? +declare module '@docusaurus/plugin-content-docs/client' { type GlobalPluginData = import('./types').GlobalPluginData; type GlobalVersion = import('./types').GlobalVersion; type ActivePlugin = import('./client/docsClientUtils').ActivePlugin; diff --git a/packages/docusaurus-theme-classic/src/index.ts b/packages/docusaurus-theme-classic/src/index.ts index 7ac8ded28a61..f8a6d75d74ce 100644 --- a/packages/docusaurus-theme-classic/src/index.ts +++ b/packages/docusaurus-theme-classic/src/index.ts @@ -171,10 +171,6 @@ export default function docusaurusThemeClassic( .join('|'); return { - ignoreWarnings: [ - // See https://github.com/facebook/docusaurus/pull/3382 - (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"), - ], plugins: [ new ContextReplacementPlugin( /prismjs[\\/]components$/, diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index c7ea3e9de4c4..553c04d69647 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -149,23 +149,33 @@ declare module '@theme/DocSidebar' { declare module '@theme/DocSidebarItem' { import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; - type DocSidebarPropsBase = { + export type DocSidebarPropsBase = { readonly activePath: string; readonly onItemClick?: (item: PropSidebarItem) => void; readonly level: number; readonly tabIndex?: number; }; - export interface Props extends DocSidebarPropsBase { + export interface Props { + readonly activePath: string; + readonly onItemClick?: (item: PropSidebarItem) => void; + readonly level: number; + readonly tabIndex?: number; readonly item: PropSidebarItem; } - const DocSidebarItem: (props: Props) => JSX.Element; - export default DocSidebarItem; - export type DocSidebarItemsProps = DocSidebarPropsBase & { + export default function DocSidebarItem(props: Props): JSX.Element; +} + +declare module '@theme/DocSidebarItems' { + import type {Props as DocSidebarItemProps} from '@theme/DocSidebarItem'; + import type {PropSidebarItem} from '@docusaurus/plugin-content-docs'; + + export type Props = Omit & { readonly items: readonly PropSidebarItem[]; }; - export const DocSidebarItems: (props: DocSidebarItemsProps) => JSX.Element; + + export default function DocSidebarItems(props: Props): JSX.Element; } declare module '@theme/DocVersionSuggestions' { @@ -196,92 +206,13 @@ declare module '@theme/Footer' { declare module '@theme/Heading' { import type {ComponentProps} from 'react'; - export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - export interface Props extends ComponentProps {} - - const Heading: (Tag: HeadingType) => (props: Props) => JSX.Element; - export default Heading; - export const MainHeading: (props: Props) => JSX.Element; -} - -declare module '@theme/hooks/useHideableNavbar' { - export type useHideableNavbarReturns = { - readonly navbarRef: (node: HTMLElement | null) => void; - readonly isNavbarVisible: boolean; - }; - - const useHideableNavbar: (hideOnScroll: boolean) => useHideableNavbarReturns; - export default useHideableNavbar; -} - -declare module '@theme/hooks/useLockBodyScroll' { - const useLockBodyScroll: (lock?: boolean) => void; - export default useLockBodyScroll; -} - -declare module '@theme/hooks/usePrismTheme' { - import type defaultTheme from 'prism-react-renderer/themes/palenight'; - - const usePrismTheme: () => typeof defaultTheme; - export default usePrismTheme; -} - -declare module '@theme/hooks/useTabGroupChoice' { - export type useTabGroupChoiceReturns = { - readonly tabGroupChoices: {readonly [groupId: string]: string}; - readonly setTabGroupChoices: (groupId: string, newChoice: string) => void; - }; - - const useTabGroupChoice: () => useTabGroupChoiceReturns; - export default useTabGroupChoice; -} - -declare module '@theme/hooks/useTheme' { - export type useThemeReturns = { - readonly isDarkTheme: boolean; - readonly setLightTheme: () => void; - readonly setDarkTheme: () => void; - }; + type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - const useTheme: () => useThemeReturns; - export default useTheme; -} - -declare module '@theme/hooks/useThemeContext' { - export type ThemeContextProps = { - isDarkTheme: boolean; - setLightTheme: () => void; - setDarkTheme: () => void; - }; - - export default function useThemeContext(): ThemeContextProps; -} - -declare module '@theme/hooks/useUserPreferencesContext' { - export type UserPreferencesContextProps = { - tabGroupChoices: {readonly [groupId: string]: string}; - setTabGroupChoices: (groupId: string, newChoice: string) => void; - }; - - export default function useUserPreferencesContext(): UserPreferencesContextProps; -} - -declare module '@theme/hooks/useWindowSize' { - export const windowSizes: { - desktop: 'desktop'; - mobile: 'mobile'; - ssr: 'ssr'; - }; - - export type WindowSize = keyof typeof windowSizes; - - export default function useWindowSize(): WindowSize; -} - -declare module '@theme/hooks/useKeyboardNavigation' { - const useKeyboardNavigation: () => void; + export interface Props extends ComponentProps { + as: HeadingType; + } - export default useKeyboardNavigation; + export default function Heading(props: Props): JSX.Element; } declare module '@theme/Layout' { @@ -303,8 +234,7 @@ declare module '@theme/Layout' { }; } - const Layout: (props: Props) => JSX.Element; - export default Layout; + export default function Layout(props: Props): JSX.Element; } declare module '@theme/LayoutHead' { @@ -312,8 +242,17 @@ declare module '@theme/LayoutHead' { export interface Props extends Omit {} - const LayoutHead: (props: Props) => JSX.Element; - export default LayoutHead; + export default function LayoutHead(props: Props): JSX.Element; +} + +declare module '@theme/LayoutProviders' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly children: ReactNode; + } + + export default function LayoutProviders(props: Props): JSX.Element; } declare module '@theme/SearchMetadata' { @@ -372,18 +311,9 @@ declare module '@theme/Navbar' { } declare module '@theme/NavbarItem/DefaultNavbarItem' { - import type {ReactNode} from 'react'; - import type {LinkProps} from '@docusaurus/Link'; - - export type NavLinkProps = LinkProps & { - readonly activeBasePath?: string; - readonly activeBaseRegex?: string; - readonly exact?: boolean; - readonly label?: ReactNode; - readonly prependBaseUrlToHref?: string; - }; + import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; - export type DesktopOrMobileNavBarItemProps = NavLinkProps & { + export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & { readonly isDropdownItem?: boolean; readonly className?: string; readonly position?: 'left' | 'right'; @@ -393,17 +323,30 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' { readonly mobile?: boolean; } - export const NavLink: (props: NavLinkProps) => JSX.Element; + export default function DefaultNavbarItem(props: Props): JSX.Element; +} - const DefaultNavbarItem: (props: Props) => JSX.Element; - export default DefaultNavbarItem; +declare module '@theme/NavbarItem/NavbarNavLink' { + import type {ReactNode} from 'react'; + import type {LinkProps} from '@docusaurus/Link'; + + export type Props = LinkProps & { + readonly activeBasePath?: string; + readonly activeBaseRegex?: string; + readonly exact?: boolean; + readonly label?: ReactNode; + readonly prependBaseUrlToHref?: string; + }; + + export default function NavbarNavLink(props: Props): JSX.Element; } declare module '@theme/NavbarItem/DropdownNavbarItem' { - import type {NavLinkProps} from '@theme/NavbarItem/DefaultNavbarItem'; + import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; + import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; - export type DesktopOrMobileNavBarItemProps = NavLinkProps & { + export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & { readonly position?: 'left' | 'right'; readonly items: readonly LinkLikeNavbarItemProps[]; readonly className?: string; @@ -526,6 +469,10 @@ declare module '@theme/NavbarItem' { export default NavbarItem; } +declare module '@theme/NavbarItem/utils' { + export function getInfimaActiveClassName(mobile?: boolean): string; +} + declare module '@theme/PaginatorNavLink' { import type {ReactNode} from 'react'; import type {PropNavigationLink} from '@docusaurus/plugin-content-docs'; @@ -602,17 +549,6 @@ declare module '@theme/Details' { export default Details; } -declare module '@theme/ThemeProvider' { - import type {ReactNode} from 'react'; - - export interface Props { - readonly children: ReactNode; - } - - const ThemeProvider: (props: Props) => JSX.Element; - export default ThemeProvider; -} - declare module '@theme/TOCItems' { import type {TOCItem} from '@docusaurus/types'; @@ -693,46 +629,6 @@ declare module '@theme/Toggle' { export default Toggle; } -declare module '@theme/UserPreferencesProvider' { - import type {ReactNode} from 'react'; - - export interface Props { - readonly children: ReactNode; - } - - const UserPreferencesProvider: (props: Props) => JSX.Element; - export default UserPreferencesProvider; -} - -declare module '@theme/LayoutProviders' { - import type {ReactNode} from 'react'; - - export interface Props { - readonly children: ReactNode; - } - - const LayoutProviders: (props: Props) => JSX.Element; - export default LayoutProviders; -} - -declare module '@theme/ThemeContext' { - import type {Context} from 'react'; - import type {ThemeContextProps} from '@theme/hooks/useThemeContext'; - - const ThemeContext: Context; - export default ThemeContext; -} - -declare module '@theme/UserPreferencesContext' { - import type {Context} from 'react'; - import type {UserPreferencesContextProps} from '@theme/hooks/useUserPreferencesContext'; - - const UserPreferencesContext: Context< - UserPreferencesContextProps | undefined - >; - export default UserPreferencesContext; -} - declare module '@theme/Logo' { import type {ComponentProps} from 'react'; diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx index de19668d9799..0640022dc7ad 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx @@ -16,8 +16,8 @@ import { parseLanguage, parseLines, ThemeClassNames, + usePrismTheme, } from '@docusaurus/theme-common'; -import usePrismTheme from '@theme/hooks/usePrismTheme'; import type {Props} from '@theme/CodeBlock'; import styles from './styles.module.css'; diff --git a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx index 757713df0e9e..1214a86aab3f 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx @@ -13,7 +13,7 @@ import DocPaginator from '@theme/DocPaginator'; import Seo from '@theme/Seo'; import DocVersionBanner from '@theme/DocVersionBanner'; import DocVersionBadge from '@theme/DocVersionBadge'; -import {MainHeading} from '@theme/Heading'; +import Heading from '@theme/Heading'; import useBaseUrl from '@docusaurus/useBaseUrl'; import styles from './styles.module.css'; @@ -35,9 +35,9 @@ export default function DocCategoryGeneratedIndexPage({
- + {categoryGeneratedIndex.title} - + {categoryGeneratedIndex.description && (

{categoryGeneratedIndex.description}

)} diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx index 1d30c2d3f65d..0df290a46a7d 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx @@ -7,7 +7,6 @@ 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 DocVersionBadge from '@theme/DocVersionBadge'; @@ -16,9 +15,9 @@ 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 Heading from '@theme/Heading'; import styles from './styles.module.css'; -import {ThemeClassNames} from '@docusaurus/theme-common'; +import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common'; export default function DocItem(props: Props): JSX.Element { const {content: DocContent} = props; @@ -80,7 +79,11 @@ export default function DocItem(props: Props): JSX.Element { 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}} + {shouldAddTitle && ( +
+ {title} +
+ )} diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx index 65fa6a2609b3..77f6e0aae312 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx @@ -14,12 +14,12 @@ import { type MobileSecondaryMenuComponent, ThemeClassNames, useScrollPosition, + useWindowSize, } from '@docusaurus/theme-common'; -import useWindowSize from '@theme/hooks/useWindowSize'; import Logo from '@theme/Logo'; import IconArrow from '@theme/IconArrow'; import {translate} from '@docusaurus/Translate'; -import {DocSidebarItems} from '@theme/DocSidebarItem'; +import DocSidebarItems from '@theme/DocSidebarItems'; import type {Props} from '@theme/DocSidebar'; import styles from './styles.module.css'; diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/index.tsx index 2718bfebf54c..f94d8077e823 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/index.tsx @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useEffect, memo, useMemo} from 'react'; +import React, {useEffect, useMemo} from 'react'; import clsx from 'clsx'; import { isActiveSidebarItem, @@ -20,7 +20,8 @@ import isInternalUrl from '@docusaurus/isInternalUrl'; import {translate} from '@docusaurus/Translate'; import IconExternalLink from '@theme/IconExternalLink'; -import type {Props, DocSidebarItemsProps} from '@theme/DocSidebarItem'; +import DocSidebarItems from '@theme/DocSidebarItems'; +import type {Props} from '@theme/DocSidebarItem'; import type { PropSidebarItemCategory, PropSidebarItemLink, @@ -29,23 +30,6 @@ import type { import styles from './styles.module.css'; import useIsBrowser from '@docusaurus/useIsBrowser'; -// Optimize sidebar at each "level" -// TODO this item should probably not receive the "activePath" props -// TODO this triggers whole sidebar re-renders on navigation -export const DocSidebarItems = memo( - ({items, ...props}: DocSidebarItemsProps): JSX.Element => ( - <> - {items.map((item, index) => ( - - ))} - - ), -); - export default function DocSidebarItem({ item, ...props diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx new file mode 100644 index 000000000000..baec5931288f --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/index.tsx @@ -0,0 +1,31 @@ +/** + * 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, {memo} from 'react'; + +import DocSidebarItem from '@theme/DocSidebarItem'; + +import type {Props} from '@theme/DocSidebarItems'; + +// TODO this item should probably not receive the "activePath" props +// TODO this triggers whole sidebar re-renders on navigation +function DocSidebarItems({items, ...props}: Props): JSX.Element { + return ( + <> + {items.map((item, index) => ( + + ))} + + ); +} + +// Optimize sidebar at each "level" +export default memo(DocSidebarItems); diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css new file mode 100644 index 000000000000..2fcd42e59fe0 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItems/styles.module.css @@ -0,0 +1,19 @@ +/** + * 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. + */ + +@media (min-width: 997px) { + .menuLinkText { + cursor: initial; + } + .menuLinkText:hover { + background: none; + } + + .menuLinkText.hasHref { + cursor: pointer; + } +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx index 36c7cd8ccaad..679feaf85897 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocVersionBanner/index.tsx @@ -13,7 +13,7 @@ import { useActivePlugin, useDocVersionSuggestions, type GlobalVersion, -} from '@theme/hooks/useDocs'; +} from '@docusaurus/plugin-content-docs/client'; import { ThemeClassNames, useDocsPreferredVersion, diff --git a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx index c86b7c4243b6..7f7a11095d55 100644 --- a/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Heading/index.tsx @@ -7,62 +7,55 @@ import React from 'react'; import clsx from 'clsx'; -import type {HeadingType, Props} from '@theme/Heading'; +import type {Props} from '@theme/Heading'; import {translate} from '@docusaurus/Translate'; import {useThemeConfig} from '@docusaurus/theme-common'; import './styles.css'; import styles from './styles.module.css'; -type HeadingComponent = (props: Props) => JSX.Element; +function AnchorHeading({as: As, id, ...props}: Props) { + const { + navbar: {hideOnScroll}, + } = useThemeConfig(); -// eslint-disable-next-line react/function-component-definition -export const MainHeading: HeadingComponent = ({...props}) => ( -
-

; + } + + return ( + + className={clsx('anchor', { + [styles.anchorWithHideOnScrollNavbar]: hideOnScroll, + [styles.anchorWithStickyNavbar]: !hideOnScroll, + })} + id={id}> {props.children} -

-
-); - -const createAnchorHeading = - (Tag: HeadingType) => - ({id, ...props}: Props) => { - const { - navbar: {hideOnScroll}, - } = useThemeConfig(); - - if (!id) { - return ; - } - + + ​ + + + ); +} + +export default function Heading({as, ...props}: Props) { + if (as === 'h1') { return ( - + id={undefined} // h1 headings do not need an id because they don't appear in the TOC + > {props.children} - - ​ - - + ); - }; - -const Heading = (headingType: HeadingType): ((props: Props) => JSX.Element) => - headingType === 'h1' ? MainHeading : createAnchorHeading(headingType); - -export default Heading; + } + return ; +} diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx index 1f0e9e5e6388..2353118cea8d 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx @@ -15,8 +15,7 @@ import Footer from '@theme/Footer'; import LayoutProviders from '@theme/LayoutProviders'; import LayoutHead from '@theme/LayoutHead'; import type {Props} from '@theme/Layout'; -import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation'; -import {ThemeClassNames} from '@docusaurus/theme-common'; +import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common'; import ErrorPageContent from '@theme/ErrorPageContent'; import './styles.css'; diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx index 34cb7a2f157d..5d0d2bf859d0 100644 --- a/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx @@ -6,9 +6,9 @@ */ import React from 'react'; -import ThemeProvider from '@theme/ThemeProvider'; -import UserPreferencesProvider from '@theme/UserPreferencesProvider'; import { + ColorModeProvider, + TabGroupChoiceProvider, AnnouncementBarProvider, DocsPreferredVersionContextProvider, MobileSecondaryMenuProvider, @@ -18,9 +18,9 @@ import type {Props} from '@theme/LayoutProviders'; export default function LayoutProviders({children}: Props): JSX.Element { return ( - + - + @@ -28,8 +28,8 @@ export default function LayoutProviders({children}: Props): JSX.Element { - + - + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx index cc7bc915aabf..17c34a9b06dc 100644 --- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx @@ -67,12 +67,12 @@ const MDXComponents: MDXComponentsObject = { ); }, - h1: Heading('h1'), - h2: Heading('h2'), - h3: Heading('h3'), - h4: Heading('h4'), - h5: Heading('h5'), - h6: Heading('h6'), + h1: (props) => , + h2: (props) => , + h3: (props) => , + h4: (props) => , + h5: (props) => , + h6: (props) => , }; export default MDXComponents; diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx index ddeb5f746985..136f08a27f47 100644 --- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx @@ -10,17 +10,17 @@ import clsx from 'clsx'; import Translate from '@docusaurus/Translate'; import SearchBar from '@theme/SearchBar'; import Toggle from '@theme/Toggle'; -import useThemeContext from '@theme/hooks/useThemeContext'; import { useThemeConfig, useMobileSecondaryMenuRenderer, usePrevious, useHistoryPopHandler, + useHideableNavbar, + useLockBodyScroll, + useWindowSize, + useColorMode, } from '@docusaurus/theme-common'; -import useHideableNavbar from '@theme/hooks/useHideableNavbar'; -import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; -import useWindowSize from '@theme/hooks/useWindowSize'; -import {useActivePlugin} from '@theme/hooks/useDocs'; +import {useActivePlugin} from '@docusaurus/plugin-content-docs/client'; import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem'; import Logo from '@theme/Logo'; import IconMenu from '@theme/IconMenu'; @@ -88,7 +88,7 @@ function useColorModeToggle() { const { colorMode: {disableSwitch}, } = useThemeConfig(); - const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext(); + const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode(); const toggle = useCallback( (e) => (e.target.checked ? setDarkTheme() : setLightTheme()), [setLightTheme, setDarkTheme], diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx index 5ae65695c3cc..cb4207afc631 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx @@ -7,71 +7,15 @@ import React from 'react'; import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; + +import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; + import type { - NavLinkProps, DesktopOrMobileNavBarItemProps, Props, } from '@theme/NavbarItem/DefaultNavbarItem'; -import IconExternalLink from '@theme/IconExternalLink'; -import isInternalUrl from '@docusaurus/isInternalUrl'; -import {isRegexpStringMatch} from '@docusaurus/theme-common'; -import {getInfimaActiveClassName} from './index'; - -const dropdownLinkActiveClass = 'dropdown__link--active'; - -export function NavLink({ - activeBasePath, - activeBaseRegex, - to, - href, - label, - activeClassName = '', - prependBaseUrlToHref, - ...props -}: NavLinkProps): JSX.Element { - // TODO all this seems hacky - // {to: 'version'} should probably be forbidden, in favor of {to: '/version'} - const toUrl = useBaseUrl(to); - const activeBaseUrl = useBaseUrl(activeBasePath); - const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true}); - const isExternalLink = label && href && !isInternalUrl(href); - const isDropdownLink = activeClassName === dropdownLinkActiveClass; - return ( - - activeBaseRegex - ? isRegexpStringMatch(activeBaseRegex, location.pathname) - : location.pathname.startsWith(activeBaseUrl), - } - : null), - })} - {...props}> - {isExternalLink ? ( - - {label} - - - ) : ( - label - )} - - ); -} +import {getInfimaActiveClassName} from '@theme/NavbarItem/utils'; function DefaultNavbarItemDesktop({ className, @@ -79,7 +23,7 @@ function DefaultNavbarItemDesktop({ ...props }: DesktopOrMobileNavBarItemProps) { const element = ( - - + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx index 895efb3b7758..ab29113f1358 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx @@ -7,9 +7,12 @@ import React from 'react'; import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem'; -import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs'; +import { + useLatestVersion, + useActiveDocContext, +} from '@docusaurus/plugin-content-docs/client'; import clsx from 'clsx'; -import {getInfimaActiveClassName} from './index'; +import {getInfimaActiveClassName} from '@theme/NavbarItem/utils'; import type {Props} from '@theme/NavbarItem/DocNavbarItem'; import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common'; import type {GlobalDataVersion} from '@docusaurus/plugin-content-docs'; diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocSidebarNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocSidebarNavbarItem.tsx index f1b76b216e1d..a9dd13fbdd3c 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocSidebarNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocSidebarNavbarItem.tsx @@ -7,11 +7,15 @@ import React from 'react'; import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem'; -import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs'; +import { + useLatestVersion, + useActiveDocContext, +} from '@docusaurus/plugin-content-docs/client'; import clsx from 'clsx'; -import {getInfimaActiveClassName} from './index'; -import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem'; +import {getInfimaActiveClassName} from '@theme/NavbarItem/utils'; import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common'; + +import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem'; import type { GlobalDataVersion, GlobalDataSidebar, diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx index 83803b843eb1..6291be80ecb8 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx @@ -12,7 +12,7 @@ import { useVersions, useLatestVersion, useActiveDocContext, -} from '@theme/hooks/useDocs'; +} from '@docusaurus/plugin-content-docs/client'; import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem'; import {useDocsPreferredVersion} from '@docusaurus/theme-common'; import {translate} from '@docusaurus/Translate'; diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionNavbarItem.tsx index 4c2d87ace3ee..5d88a534ae3b 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionNavbarItem.tsx @@ -11,7 +11,7 @@ import { useActiveVersion, useLatestVersion, type GlobalVersion, -} from '@theme/hooks/useDocs'; +} from '@docusaurus/plugin-content-docs/client'; import type {Props} from '@theme/NavbarItem/DocsVersionNavbarItem'; import {useDocsPreferredVersion} from '@docusaurus/theme-common'; diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx index 770f86bd37bd..cd04e822f992 100644 --- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx +++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem.tsx @@ -20,7 +20,7 @@ import type { } from '@theme/NavbarItem/DropdownNavbarItem'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; -import {NavLink} from '@theme/NavbarItem/DefaultNavbarItem'; +import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; import NavbarItem from '@theme/NavbarItem'; const dropdownLinkActiveClass = 'dropdown__link--active'; @@ -84,7 +84,7 @@ function DropdownNavbarItemDesktop({ 'dropdown--right': position === 'right', 'dropdown--show': showDropdown, })}> - {props.children ?? props.label} - +