Skip to content

Commit

Permalink
feat(v2): doc navbar item type (#3539)
Browse files Browse the repository at this point in the history 
* provide DocNavbarItem type

* update snapshots

* Fix Docusaurus tabs CSS

* revert navbar tabs css/style changes, instead apply simple navbar__link--active class + make it configurable

* Update website/docs/theme-classic.md

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

* add dropdownActiveClassDisabled option

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>
  • Loading branch information
@slorber @lex111
slorber and lex111 authored Oct 7, 2020
1 parent 9134b13 commit 9ba28a3
Show file tree
Hide file tree
Showing 12 changed files with 198 additions and 37 deletions.
47 changes: 47 additions & 0 deletions packages/docusaurus-plugin-content-docs/src/__tests__/__snapshots__/index.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,54 +60,67 @@ Object {
Object {
"id": "foo/bar",
"path": "/docs/foo/bar",
"sidebar": "docs",
},
Object {
"id": "foo/baz",
"path": "/docs/foo/bazSlug.html",
"sidebar": "docs",
},
Object {
"id": "hello",
"path": "/docs/",
"sidebar": "docs",
},
Object {
"id": "ipsum",
"path": "/docs/ipsum",
"sidebar": undefined,
},
Object {
"id": "lorem",
"path": "/docs/lorem",
"sidebar": undefined,
},
Object {
"id": "rootAbsoluteSlug",
"path": "/docs/rootAbsoluteSlug",
"sidebar": undefined,
},
Object {
"id": "rootRelativeSlug",
"path": "/docs/rootRelativeSlug",
"sidebar": undefined,
},
Object {
"id": "rootResolvedSlug",
"path": "/docs/hey/rootResolvedSlug",
"sidebar": undefined,
},
Object {
"id": "rootTryToEscapeSlug",
"path": "/docs/rootTryToEscapeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/absoluteSlug",
"path": "/docs/absoluteSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/relativeSlug",
"path": "/docs/slugs/relativeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/resolvedSlug",
"path": "/docs/slugs/hey/resolvedSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/tryToEscapeSlug",
"path": "/docs/tryToEscapeSlug",
"sidebar": undefined,
},
],
"isLast": true,
Expand Down Expand Up @@ -362,54 +375,67 @@ Object {
Object {
"id": "foo/bar",
"path": "/docs/foo/bar",
"sidebar": "docs",
},
Object {
"id": "foo/baz",
"path": "/docs/foo/bazSlug.html",
"sidebar": "docs",
},
Object {
"id": "hello",
"path": "/docs/",
"sidebar": "docs",
},
Object {
"id": "ipsum",
"path": "/docs/ipsum",
"sidebar": undefined,
},
Object {
"id": "lorem",
"path": "/docs/lorem",
"sidebar": undefined,
},
Object {
"id": "rootAbsoluteSlug",
"path": "/docs/rootAbsoluteSlug",
"sidebar": undefined,
},
Object {
"id": "rootRelativeSlug",
"path": "/docs/rootRelativeSlug",
"sidebar": undefined,
},
Object {
"id": "rootResolvedSlug",
"path": "/docs/hey/rootResolvedSlug",
"sidebar": undefined,
},
Object {
"id": "rootTryToEscapeSlug",
"path": "/docs/rootTryToEscapeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/absoluteSlug",
"path": "/docs/absoluteSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/relativeSlug",
"path": "/docs/slugs/relativeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/resolvedSlug",
"path": "/docs/slugs/hey/resolvedSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/tryToEscapeSlug",
"path": "/docs/tryToEscapeSlug",
"sidebar": undefined,
},
],
"isLast": true,
Expand Down Expand Up @@ -661,6 +687,7 @@ Object {
Object {
"id": "team",
"path": "/community/next/team",
"sidebar": "community",
},
],
"isLast": false,
Expand All @@ -674,6 +701,7 @@ Object {
Object {
"id": "team",
"path": "/community/team",
"sidebar": "version-1.0.0/community",
},
],
"isLast": true,
Expand Down Expand Up @@ -1228,26 +1256,32 @@ Object {
Object {
"id": "foo/bar",
"path": "/docs/next/foo/barSlug",
"sidebar": "docs",
},
Object {
"id": "hello",
"path": "/docs/next/",
"sidebar": "docs",
},
Object {
"id": "slugs/absoluteSlug",
"path": "/docs/next/absoluteSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/relativeSlug",
"path": "/docs/next/slugs/relativeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/resolvedSlug",
"path": "/docs/next/slugs/hey/resolvedSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/tryToEscapeSlug",
"path": "/docs/next/tryToEscapeSlug",
"sidebar": undefined,
},
],
"isLast": false,
Expand All @@ -1261,10 +1295,12 @@ Object {
Object {
"id": "foo/bar",
"path": "/docs/foo/bar",
"sidebar": "version-1.0.1/docs",
},
Object {
"id": "hello",
"path": "/docs/",
"sidebar": "version-1.0.1/docs",
},
],
"isLast": true,
Expand All @@ -1278,14 +1314,17 @@ Object {
Object {
"id": "foo/bar",
"path": "/docs/1.0.0/foo/barSlug",
"sidebar": "version-1.0.0/docs",
},
Object {
"id": "foo/baz",
"path": "/docs/1.0.0/foo/baz",
"sidebar": "version-1.0.0/docs",
},
Object {
"id": "hello",
"path": "/docs/1.0.0/",
"sidebar": "version-1.0.0/docs",
},
],
"isLast": false,
Expand All @@ -1299,34 +1338,42 @@ Object {
Object {
"id": "rootAbsoluteSlug",
"path": "/docs/withSlugs/rootAbsoluteSlug",
"sidebar": "version-1.0.1/docs",
},
Object {
"id": "rootRelativeSlug",
"path": "/docs/withSlugs/rootRelativeSlug",
"sidebar": undefined,
},
Object {
"id": "rootResolvedSlug",
"path": "/docs/withSlugs/hey/rootResolvedSlug",
"sidebar": undefined,
},
Object {
"id": "rootTryToEscapeSlug",
"path": "/docs/withSlugs/rootTryToEscapeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/absoluteSlug",
"path": "/docs/withSlugs/absoluteSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/relativeSlug",
"path": "/docs/withSlugs/slugs/relativeSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/resolvedSlug",
"path": "/docs/withSlugs/slugs/hey/resolvedSlug",
"sidebar": undefined,
},
Object {
"id": "slugs/tryToEscapeSlug",
"path": "/docs/withSlugs/tryToEscapeSlug",
"sidebar": undefined,
},
],
"isLast": false,
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-plugin-content-docs/src/globalData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export function toGlobalDataDoc(doc: DocMetadata): GlobalDoc {
return {
id: doc.unversionedId,
path: doc.permalink,
sidebar: doc.sidebar,
};
}

Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-plugin-content-docs/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,7 @@ export type LoadedContent = {
export type GlobalDoc = {
id: string;
path: string;
sidebar: string | undefined;
};

export type GlobalVersion = {
Expand Down
48 changes: 48 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* 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 DefaultNavbarItem from './DefaultNavbarItem';
import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
import clsx from 'clsx';
import type {Props} from '@theme/NavbarItem/DocNavbarItem';

export default function DocNavbarItem({
docId,
activeSidebarClassName,
label: staticLabel,
docsPluginId,
...props
}: Props): JSX.Element {
const latestVersion = useLatestVersion(docsPluginId);
const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);

const version = activeVersion ?? latestVersion;

const doc = version.docs.find((versionDoc) => versionDoc.id === docId);
if (!doc) {
throw new Error(
`DocNavbarItem: couldn't find any doc with id=${docId} in version ${
version.name
}.
Available docIds=\n- ${version.docs.join('\n- ')}`,
);
}

return (
<DefaultNavbarItem
exact
{...props}
className={clsx(props.className, {
[activeSidebarClassName]:
activeDoc && activeDoc.sidebar === doc.sidebar,
})}
label={staticLabel ?? doc.id}
to={doc.path}
/>
);
}
2 changes: 2 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const getVersionMainDoc = (version) =>
export default function DocsVersionDropdownNavbarItem({
mobile,
docsPluginId,
dropdownActiveClassDisabled,
...props
}: Props): JSX.Element {
const activeDocContext = useActiveDocContext(docsPluginId);
Expand Down Expand Up @@ -64,6 +65,7 @@ export default function DocsVersionDropdownNavbarItem({
label={dropdownLabel}
to={dropdownTo}
items={getItems()}
isActive={dropdownActiveClassDisabled ? () => false : undefined}
/>
);
}
3 changes: 3 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ const NavbarItemComponents = {
docsVersionDropdown: () =>
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
doc: () =>
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('@theme/NavbarItem/DocNavbarItem').default,
} as const;

const getNavbarItemComponent = (
Expand Down
20 changes: 19 additions & 1 deletion packages/docusaurus-theme-classic/src/types.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,10 +284,12 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
activeBasePath?: string;
activeBaseRegex?: string;
to?: string;
exact?: boolean;
href?: string;
label?: string;
activeClassName?: string;
prependBaseUrlToHref?: string;
isActive?: () => boolean;
} & ComponentProps<'a'>;

export type DesktopOrMobileNavBarItemProps = NavLinkProps & {
Expand All @@ -307,7 +309,10 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' {
import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';

export type Props = DefaultNavbarItemProps & {readonly docsPluginId?: string};
export type Props = DefaultNavbarItemProps & {
readonly docsPluginId?: string;
dropdownActiveClassDisabled?: boolean;
};

const DocsVersionDropdownNavbarItem: (props: Props) => JSX.Element;
export default DocsVersionDropdownNavbarItem;
Expand All @@ -322,6 +327,19 @@ declare module '@theme/NavbarItem/DocsVersionNavbarItem' {
export default DocsVersionNavbarItem;
}

declare module '@theme/NavbarItem/DocNavbarItem' {
import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';

export type Props = DefaultNavbarItemProps & {
readonly docId: string;
readonly activeSidebarClassName: string;
readonly docsPluginId?: string;
};

const DocsSidebarNavbarItem: (props: Props) => JSX.Element;
export default DocsSidebarNavbarItem;
}

declare module '@theme/NavbarItem' {
import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
import type {Props as DocsVersionDropdownNavbarItemProps} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
Expand Down
Loading

0 comments on commit 9ba28a3

Please sign in to comment.