Skip to content

Commit

Permalink
fix: text in doc version banner (#105)
Browse files Browse the repository at this point in the history
Uses `see the Current version` text over `latest version` to refer to
Fluvio Stable.

<img width="1512" alt="Screenshot 2024-07-18 at 7 37 00 PM"
src="https://github.com/user-attachments/assets/79a7bf44-d27b-4288-88bf-a8f0d40711c7">
  • Loading branch information
EstebanBorai authored Jul 19, 2024
1 parent ff7c7df commit 3259959
Showing 1 changed file with 171 additions and 0 deletions.
171 changes: 171 additions & 0 deletions src/theme/DocVersionBanner/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
import React, {type ComponentType} from 'react';
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Link from '@docusaurus/Link';
import Translate from '@docusaurus/Translate';
import {
useActivePlugin,
useDocVersionSuggestions,
type GlobalVersion,
} from '@docusaurus/plugin-content-docs/client';
import {ThemeClassNames} from '@docusaurus/theme-common';
import {
useDocsPreferredVersion,
useDocsVersion,
} from '@docusaurus/theme-common/internal';
import type {Props} from '@theme/DocVersionBanner';
import type {
VersionBanner,
PropVersionMetadata,
} from '@docusaurus/plugin-content-docs';

type BannerLabelComponentProps = {
siteTitle: string;
versionMetadata: PropVersionMetadata;
};

function UnreleasedVersionLabel({
siteTitle,
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>{versionMetadata.label}</b>,
}}>
{
'This is unreleased documentation for {siteTitle} {versionLabel} version.'
}
</Translate>
);
}

function UnmaintainedVersionLabel({
siteTitle,
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>{versionMetadata.label}</b>,
}}>
{
'This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.'
}
</Translate>
);
}

const BannerLabelComponents: {
[banner in VersionBanner]: ComponentType<BannerLabelComponentProps>;
} = {
unreleased: UnreleasedVersionLabel,
unmaintained: UnmaintainedVersionLabel,
};

function BannerLabel(props: BannerLabelComponentProps) {
const BannerLabelComponent =
BannerLabelComponents[props.versionMetadata.banner!];
return <BannerLabelComponent {...props} />;
}

function LatestVersionSuggestionLabel({
versionLabel,
to,
onClick,
}: {
to: string;
onClick: () => void;
versionLabel: string;
}) {
return (
<Translate
id="theme.docs.versions.latestVersionSuggestionLabel"
description="The label used to tell the user to check the latest version"
values={{
versionLabel,
latestVersionLink: (
<b>
<Link to={to} onClick={onClick}>
<Translate
id="theme.docs.versions.latestVersionLinkLabel"
description="The label used for the latest version suggestion link label">
see the Current version
</Translate>
</Link>
</b>
),
}}>
{
'For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).'
}
</Translate>
);
}

function DocVersionBannerEnabled({
className,
versionMetadata,
}: Props & {
versionMetadata: PropVersionMetadata;
}): JSX.Element {
const {
siteConfig: {title: siteTitle},
} = useDocusaurusContext();
const {pluginId} = useActivePlugin({failfast: true})!;

const getVersionMainDoc = (version: GlobalVersion) =>
version.docs.find((doc) => doc.id === version.mainDocId)!;

const {savePreferredVersionName} = useDocsPreferredVersion(pluginId);

const {latestDocSuggestion, latestVersionSuggestion} =
useDocVersionSuggestions(pluginId);

// Try to link to same doc in latest version (not always possible), falling
// back to main doc of latest version
const latestVersionSuggestedDoc =
latestDocSuggestion ?? getVersionMainDoc(latestVersionSuggestion);

return (
<div
className={clsx(
className,
ThemeClassNames.docs.docVersionBanner,
'alert alert--warning margin-bottom--md',
)}
role="alert">
<div>
<BannerLabel siteTitle={siteTitle} versionMetadata={versionMetadata} />
</div>
<div className="margin-top--md">
<LatestVersionSuggestionLabel
versionLabel={latestVersionSuggestion.label}
to={latestVersionSuggestedDoc.path}
onClick={() => savePreferredVersionName(latestVersionSuggestion.name)}
/>
</div>
</div>
);
}

export default function DocVersionBanner({
className,
}: Props): JSX.Element | null {
const versionMetadata = useDocsVersion();
if (versionMetadata.banner) {
return (
<DocVersionBannerEnabled
className={className}
versionMetadata={versionMetadata}
/>
);
}
return null;
}

0 comments on commit 3259959

Please sign in to comment.