feat(v2): docs version banner configuration option (#5052)

* refactor DocVersionBanner => versionMetadata prop should be forwarded instead of using "useActiveVersion" + global data

* docs version banner configuration

* add doc for versions.banner

* fix tests

* improve docs plugin option api doc
This commit is contained in:
Sébastien Lorber 2021-06-24 18:04:16 +02:00 committed by GitHub
parent f47826297c
commit 364051f232
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 187 additions and 83 deletions

View file

@ -405,6 +405,7 @@ Object {
\\"pluginId\\": \\"default\\",
\\"version\\": \\"current\\",
\\"label\\": \\"Next\\",
\\"banner\\": \\"none\\",
\\"isLast\\": true,
\\"docsSidebars\\": {
\\"docs\\": [
@ -872,6 +873,7 @@ Object {
\\"pluginId\\": \\"community\\",
\\"version\\": \\"1.0.0\\",
\\"label\\": \\"1.0.0\\",
\\"banner\\": \\"none\\",
\\"isLast\\": true,
\\"docsSidebars\\": {
\\"version-1.0.0/community\\": [
@ -890,6 +892,7 @@ Object {
\\"pluginId\\": \\"community\\",
\\"version\\": \\"current\\",
\\"label\\": \\"Next\\",
\\"banner\\": \\"unreleased\\",
\\"isLast\\": false,
\\"docsSidebars\\": {
\\"community\\": [
@ -1402,6 +1405,7 @@ Object {
\\"pluginId\\": \\"default\\",
\\"version\\": \\"1.0.0\\",
\\"label\\": \\"1.0.0\\",
\\"banner\\": \\"unmaintained\\",
\\"isLast\\": false,
\\"docsSidebars\\": {
\\"version-1.0.0/docs\\": [
@ -1446,6 +1450,7 @@ Object {
\\"pluginId\\": \\"default\\",
\\"version\\": \\"1.0.1\\",
\\"label\\": \\"1.0.1\\",
\\"banner\\": \\"none\\",
\\"isLast\\": true,
\\"docsSidebars\\": {
\\"version-1.0.1/docs\\": [
@ -1484,6 +1489,7 @@ Object {
\\"pluginId\\": \\"default\\",
\\"version\\": \\"current\\",
\\"label\\": \\"Next\\",
\\"banner\\": \\"unreleased\\",
\\"isLast\\": false,
\\"docsSidebars\\": {
\\"docs\\": [
@ -1522,6 +1528,7 @@ Object {
\\"pluginId\\": \\"default\\",
\\"version\\": \\"withSlugs\\",
\\"label\\": \\"withSlugs\\",
\\"banner\\": \\"unmaintained\\",
\\"isLast\\": false,
\\"docsSidebars\\": {
\\"version-1.0.1/docs\\": [

View file

@ -21,6 +21,7 @@ const DefaultI18N: I18n = {
currentLocale: 'en',
locales: ['en'],
defaultLocale: 'en',
localeConfigs: {},
};
describe('version paths', () => {
@ -79,6 +80,7 @@ describe('simple site', () => {
versionLabel: 'Next',
versionName: 'current',
versionPath: '/docs',
versionBanner: 'none',
};
return {simpleSiteDir, defaultOptions, defaultContext, vCurrent};
}
@ -233,6 +235,7 @@ describe('versioned site, pluginId=default', () => {
versionLabel: 'Next',
versionName: 'current',
versionPath: '/docs/next',
versionBanner: 'unreleased',
};
const v101: VersionMetadata = {
@ -250,6 +253,7 @@ describe('versioned site, pluginId=default', () => {
versionLabel: '1.0.1',
versionName: '1.0.1',
versionPath: '/docs',
versionBanner: 'none',
};
const v100: VersionMetadata = {
@ -267,6 +271,7 @@ describe('versioned site, pluginId=default', () => {
versionLabel: '1.0.0',
versionName: '1.0.0',
versionPath: '/docs/1.0.0',
versionBanner: 'unmaintained',
};
const vwithSlugs: VersionMetadata = {
@ -287,6 +292,7 @@ describe('versioned site, pluginId=default', () => {
versionLabel: 'withSlugs',
versionName: 'withSlugs',
versionPath: '/docs/withSlugs',
versionBanner: 'unmaintained',
};
return {
@ -357,9 +363,11 @@ describe('versioned site, pluginId=default', () => {
versions: {
current: {
path: 'current-path',
banner: 'unmaintained',
},
'1.0.0': {
label: '1.0.0-label',
banner: 'unreleased',
},
},
},
@ -367,12 +375,17 @@ describe('versioned site, pluginId=default', () => {
});
expect(versionsMetadata).toEqual([
{...vCurrent, versionPath: '/docs/current-path'},
{
...vCurrent,
versionPath: '/docs/current-path',
versionBanner: 'unmaintained',
},
{
...v101,
isLast: false,
routePriority: undefined,
versionPath: '/docs/1.0.1',
versionBanner: 'unreleased',
},
{
...v100,
@ -380,6 +393,7 @@ describe('versioned site, pluginId=default', () => {
routePriority: -1,
versionLabel: '1.0.0-label',
versionPath: '/docs',
versionBanner: 'unreleased',
},
vwithSlugs,
]);
@ -510,7 +524,13 @@ describe('versioned site, pluginId=default', () => {
});
expect(versionsMetadata).toEqual([
{...vCurrent, isLast: true, routePriority: -1, versionPath: '/docs'},
{
...vCurrent,
isLast: true,
routePriority: -1,
versionPath: '/docs',
versionBanner: 'none',
},
]);
});
@ -631,6 +651,7 @@ describe('versioned site, pluginId=community', () => {
versionLabel: 'Next',
versionName: 'current',
versionPath: '/communityBasePath/next',
versionBanner: 'unreleased',
};
const v100: VersionMetadata = {
@ -651,6 +672,7 @@ describe('versioned site, pluginId=community', () => {
versionLabel: '1.0.0',
versionName: '1.0.0',
versionPath: '/communityBasePath',
versionBanner: 'none',
};
return {versionedSiteDir, defaultOptions, defaultContext, vCurrent, v100};
@ -695,6 +717,7 @@ describe('versioned site, pluginId=community', () => {
isLast: true,
routePriority: -1,
versionPath: '/communityBasePath',
versionBanner: 'none',
},
]);
});

View file

@ -350,14 +350,13 @@ describe('docsClientUtils', () => {
latestVersionSuggestion: version2,
});
// nothing to suggest, we are already on latest version
expect(getDocVersionSuggestions(data, '/docs/')).toEqual({
latestDocSuggestion: undefined,
latestVersionSuggestion: undefined,
latestDocSuggestion: version2.docs[0],
latestVersionSuggestion: version2,
});
expect(getDocVersionSuggestions(data, '/docs/doc2')).toEqual({
latestDocSuggestion: undefined,
latestVersionSuggestion: undefined,
latestDocSuggestion: version2.docs[1],
latestVersionSuggestion: version2,
});
expect(getDocVersionSuggestions(data, '/docs/version1/')).toEqual({

View file

@ -140,10 +140,10 @@ export const getActiveDocContext = (
};
export type DocVersionSuggestions = {
// suggest the latest version
latestVersionSuggestion: GlobalVersion;
// suggest the same doc, in latest version (if exist)
latestDocSuggestion?: GlobalDoc;
// suggest the latest version
latestVersionSuggestion?: GlobalVersion;
};
export const getDocVersionSuggestions = (
@ -152,17 +152,7 @@ export const getDocVersionSuggestions = (
): DocVersionSuggestions => {
const latestVersion = getLatestVersion(data);
const activeDocContext = getActiveDocContext(data, pathname);
// We only suggest another doc/version if user is not using the latest version
const isNotOnLatestVersion = activeDocContext.activeVersion !== latestVersion;
const latestDocSuggestion: GlobalDoc | undefined = isNotOnLatestVersion
? activeDocContext?.alternateDocVersions[latestVersion.name]
: undefined;
const latestVersionSuggestion = isNotOnLatestVersion
? latestVersion
: undefined;
return {latestDocSuggestion, latestVersionSuggestion};
const latestDocSuggestion: GlobalDoc | undefined =
activeDocContext?.alternateDocVersions[latestVersion.name];
return {latestDocSuggestion, latestVersionSuggestion: latestVersion};
};

View file

@ -49,6 +49,7 @@ export const DEFAULT_OPTIONS: Omit<PluginOptions, 'id' | 'sidebarPath'> = {
const VersionOptionsSchema = Joi.object({
path: Joi.string().allow('').optional(),
label: Joi.string().optional(),
banner: Joi.string().equal('none', 'unreleased', 'unmaintained').optional(),
});
const VersionsOptionsSchema = Joi.object()
@ -101,6 +102,7 @@ export const OptionsSchema = Joi.object({
showLastUpdateAuthor: Joi.bool().default(
DEFAULT_OPTIONS.showLastUpdateAuthor,
),
// TODO deprecated, excludeNextVersionDocs replaced by includeCurrentVersion
excludeNextVersionDocs: Joi.bool().default(
DEFAULT_OPTIONS.excludeNextVersionDocs,
),

View file

@ -8,6 +8,8 @@
/* eslint-disable camelcase */
declare module '@docusaurus/plugin-content-docs-types' {
import type {VersionBanner} from './types';
export type PermalinkToSidebar = {
[permalink: string]: string;
};
@ -16,6 +18,7 @@ declare module '@docusaurus/plugin-content-docs-types' {
pluginId: string;
version: string;
label: string;
banner: VersionBanner;
isLast: boolean;
docsSidebars: PropSidebars;
permalinkToSidebar: PermalinkToSidebar;
@ -83,6 +86,7 @@ declare module '@theme/DocItem' {
export type Props = {
readonly route: DocumentRoute;
readonly versionMetadata: PropVersionMetadata;
readonly content: {
readonly frontMatter: FrontMatter;
readonly metadata: Metadata;
@ -96,6 +100,17 @@ declare module '@theme/DocItem' {
export default DocItem;
}
declare module '@theme/DocVersionBanner' {
import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
export type Props = {
readonly versionMetadata: PropVersionMetadata;
};
const DocVersionBanner: (props: Props) => JSX.Element;
export default DocVersionBanner;
}
declare module '@theme/DocPage' {
import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs-types';
import type {DocumentRoute} from '@theme/DocItem';

View file

@ -74,6 +74,7 @@ export function toVersionMetadataProp(
pluginId,
version: loadedVersion.versionName,
label: loadedVersion.versionLabel,
banner: loadedVersion.versionBanner,
isLast: loadedVersion.isLast,
docsSidebars: toSidebarsProp(loadedVersion),
permalinkToSidebar: loadedVersion.permalinkToSidebar,

View file

@ -30,6 +30,7 @@ export type VersionMetadata = ContentPaths & {
versionPath: string; // /baseUrl/docs/1.0.0
versionEditUrl?: string | undefined;
versionEditUrlLocalized?: string | undefined;
versionBanner: VersionBanner;
isLast: boolean;
sidebarFilePath: string | false | undefined; // versioned_sidebars/1.0.0.json
routePriority: number | undefined; // -1 for the latest docs
@ -59,9 +60,13 @@ export type PathOptions = {
sidebarPath?: string | false | undefined;
};
// TODO support custom version banner? {type: "error", content: "html content"}
export type VersionBanner = 'none' | 'unreleased' | 'unmaintained';
export type VersionOptions = {
path?: string;
label?: string;
banner?: VersionBanner;
};
export type VersionsOptions = {

View file

@ -9,6 +9,7 @@ import path from 'path';
import fs from 'fs-extra';
import {
PluginOptions,
VersionBanner,
VersionMetadata,
VersionOptions,
VersionsOptions,
@ -255,14 +256,64 @@ function getVersionEditUrls({
};
}
function getDefaultVersionBanner({
versionName,
versionNames,
lastVersionName,
}: {
versionName: string;
versionNames: string[];
lastVersionName: string;
}): VersionBanner {
// Current version: good, no banner
if (versionName === lastVersionName) {
return 'none';
}
// Upcoming versions: unreleased banner
else if (
versionNames.indexOf(versionName) < versionNames.indexOf(lastVersionName)
) {
return 'unreleased';
}
// Older versions: display unmaintained banner
else {
return 'unmaintained';
}
}
function getVersionBanner({
versionName,
versionNames,
lastVersionName,
options,
}: {
versionName: string;
versionNames: string[];
lastVersionName: string;
options: Pick<PluginOptions, 'versions'>;
}): VersionBanner {
const versionOptionBanner = options.versions[versionName]?.banner;
return (
versionOptionBanner ??
getDefaultVersionBanner({
versionName,
versionNames,
lastVersionName,
})
);
}
function createVersionMetadata({
versionName,
isLast,
versionNames,
lastVersionName,
context,
options,
}: {
versionName: string;
isLast: boolean;
versionNames: string[];
lastVersionName: string;
context: Pick<LoadContext, 'siteDir' | 'baseUrl' | 'i18n'>;
options: Pick<
PluginOptions,
@ -285,6 +336,8 @@ function createVersionMetadata({
options,
});
const isLast = versionName === lastVersionName;
// retro-compatible values
const defaultVersionLabel =
versionName === CURRENT_VERSION_NAME ? 'Next' : versionName;
@ -321,6 +374,12 @@ function createVersionMetadata({
versionPath,
versionEditUrl: versionEditUrls?.versionEditUrl,
versionEditUrlLocalized: versionEditUrls?.versionEditUrlLocalized,
versionBanner: getVersionBanner({
versionName,
versionNames,
lastVersionName,
options,
}),
isLast,
routePriority,
sidebarFilePath,
@ -486,7 +545,8 @@ export function readVersionsMetadata({
const versionsMetadata = versionNames.map((versionName) =>
createVersionMetadata({
versionName,
isLast: versionName === lastVersionName,
versionNames,
lastVersionName,
context,
options,
}),

View file

@ -7,7 +7,7 @@
import React from 'react';
import DocPaginator from '@theme/DocPaginator';
import DocVersionSuggestions from '@theme/DocVersionSuggestions';
import DocVersionBanner from '@theme/DocVersionBanner';
import Seo from '@theme/Seo';
import LastUpdated from '@theme/LastUpdated';
import type {Props} from '@theme/DocItem';
@ -17,14 +17,10 @@ import {MainHeading} from '@theme/Heading';
import clsx from 'clsx';
import styles from './styles.module.css';
import {
useActivePlugin,
useVersions,
useActiveVersion,
} from '@theme/hooks/useDocs';
import {useActivePlugin, useVersions} from '@theme/hooks/useDocs';
function DocItem(props: Props): JSX.Element {
const {content: DocContent} = props;
const {content: DocContent, versionMetadata} = props;
const {metadata, frontMatter} = DocContent;
const {
image,
@ -43,7 +39,6 @@ function DocItem(props: Props): JSX.Element {
const {pluginId} = useActivePlugin({failfast: true});
const versions = useVersions(pluginId);
const version = useActiveVersion(pluginId);
// If site is not versioned or only one version is included
// we don't show the version badge
@ -65,12 +60,12 @@ function DocItem(props: Props): JSX.Element {
className={clsx('col', {
[styles.docItemCol]: !hideTableOfContents,
})}>
<DocVersionSuggestions />
<DocVersionBanner versionMetadata={versionMetadata} />
<div className={styles.docItemContainer}>
<article>
{showVersionBadge && (
<span className="badge badge--secondary">
Version: {version.label}
Version: {versionMetadata.label}
</span>
)}

View file

@ -174,7 +174,7 @@ function DocPage(props: Props): JSX.Element {
<DocPageContent
currentDocRoute={currentDocRoute}
versionMetadata={versionMetadata}>
{renderRoutes(docRoutes)}
{renderRoutes(docRoutes, {versionMetadata})}
</DocPageContent>
);
}

View file

@ -5,31 +5,31 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {ComponentType} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import {
useActivePlugin,
useActiveVersion,
useDocVersionSuggestions,
} from '@theme/hooks/useDocs';
import {useActivePlugin, useDocVersionSuggestions} from '@theme/hooks/useDocs';
import {useDocsPreferredVersion} from '@docusaurus/theme-common';
import type {Props} from '@theme/DocVersionBanner';
type BannerLabelComponentProps = {
siteTitle: string;
versionMetadata: Props['versionMetadata'];
};
function UnreleasedVersionLabel({
siteTitle,
versionLabel,
}: {
siteTitle: string;
versionLabel: string;
}) {
versionMetadata,
}: BannerLabelComponentProps) {
return (
<Translate
id="theme.docs.versions.unreleasedVersionLabel"
description="The label used to tell the user that he's browsing an unreleased doc version"
values={{
siteTitle,
versionLabel: <b>{versionLabel}</b>,
versionLabel: <b>{versionMetadata.label}</b>,
}}>
{
'This is unreleased documentation for {siteTitle} {versionLabel} version.'
@ -40,18 +40,15 @@ function UnreleasedVersionLabel({
function UnmaintainedVersionLabel({
siteTitle,
versionLabel,
}: {
siteTitle: string;
versionLabel: string;
}) {
versionMetadata,
}: BannerLabelComponentProps) {
return (
<Translate
id="theme.docs.versions.unmaintainedVersionLabel"
description="The label used to tell the user that he's browsing an unmaintained doc version"
values={{
siteTitle,
versionLabel: <b>{versionLabel}</b>,
versionLabel: <b>{versionMetadata.label}</b>,
}}>
{
'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
@ -60,6 +57,20 @@ function UnmaintainedVersionLabel({
);
}
const BannerLabelComponents: Record<
Props['versionMetadata']['banner'],
ComponentType<BannerLabelComponentProps>
> = {
unreleased: UnreleasedVersionLabel,
unmaintained: UnmaintainedVersionLabel,
};
function BannerLabel(props: BannerLabelComponentProps) {
const BannerLabelComponent =
BannerLabelComponents[props.versionMetadata.banner];
return <BannerLabelComponent {...props} />;
}
function LatestVersionSuggestionLabel({
versionLabel,
to,
@ -72,7 +83,7 @@ function LatestVersionSuggestionLabel({
return (
<Translate
id="theme.docs.versions.latestVersionSuggestionLabel"
description="The label userd to tell the user that he's browsing an unmaintained doc version"
description="The label used to tell the user to check the latest version"
values={{
versionLabel,
latestVersionLink: (
@ -94,28 +105,22 @@ function LatestVersionSuggestionLabel({
);
}
const getVersionMainDoc = (version) =>
version.docs.find((doc) => doc.id === version.mainDocId);
function DocVersionSuggestions(): JSX.Element {
function DocVersionBannerEnabled({versionMetadata}: Props): JSX.Element {
const {
siteConfig: {title: siteTitle},
} = useDocusaurusContext();
const {pluginId} = useActivePlugin({failfast: true});
const getVersionMainDoc = (version) =>
version.docs.find((doc) => doc.id === version.mainDocId);
const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);
const activeVersion = useActiveVersion(pluginId);
const {
latestDocSuggestion,
latestVersionSuggestion,
} = useDocVersionSuggestions(pluginId);
// No suggestion to be made
if (!latestVersionSuggestion) {
return <></>;
}
// try to link to same doc in latest version (not always possible)
// fallback to main doc of latest version
const latestVersionSuggestedDoc =
@ -124,17 +129,7 @@ function DocVersionSuggestions(): JSX.Element {
return (
<div className="alert alert--warning margin-bottom--md" role="alert">
<div>
{activeVersion.name === 'current' ? (
<UnreleasedVersionLabel
siteTitle={siteTitle}
versionLabel={activeVersion.label}
/>
) : (
<UnmaintainedVersionLabel
siteTitle={siteTitle}
versionLabel={activeVersion.label}
/>
)}
<BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
</div>
<div className="margin-top--md">
<LatestVersionSuggestionLabel
@ -147,4 +142,12 @@ function DocVersionSuggestions(): JSX.Element {
);
}
export default DocVersionSuggestions;
function DocVersionBanner({versionMetadata}: Props): JSX.Element {
if (versionMetadata.banner === 'none') {
return <></>;
} else {
return <DocVersionBannerEnabled versionMetadata={versionMetadata} />;
}
}
export default DocVersionBanner;

View file

@ -145,14 +145,14 @@ module.exports = {
/**
* By default, versioning is enabled on versioned sites.
* This is a way to explicitly disable the versioning feature.
* This will only include the "current" version (the `/docs` directory)
*/
disableVersioning: false,
/**
* Skip the next release docs when versioning is enabled.
* This will not generate HTML files in the production build for documents
* in `/docs/next` directory, only versioned docs.
* Include the "current" version of your docs (the `/docs` directory)
* Tip: turn it off if the current version is a work-in-progress, not ready to be published
*/
excludeNextVersionDocs: false,
includeCurrentVersion: true,
/**
* The last version is the one we navigate to in priority on versioned sites
* It is the one displayed by default in docs navbar items
@ -164,8 +164,10 @@ module.exports = {
lastVersion: undefined,
/**
* The docusaurus versioning defaults don't make sense for all projects
* This gives the ability customize the label and path of each version
* You may not like that default version
* This gives the ability customize the properties of each version independantly
* - label: the label of the version
* - path: the route path of the version
* - banner: the banner to show at the top of a doc of that version: "none" | "unreleased" | "unmaintained"
*/
versions: {
/*
@ -173,10 +175,12 @@ module.exports = {
current: {
label: 'Android SDK v2.0.0 (WIP)',
path: 'android-2.0.0',
banner: 'none',
},
'1.0.0': {
label: 'Android SDK v1.0.0',
path: 'android-1.0.0',
banner: 'unmaintained',
},
*/
},