You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pulsar.apache.org by ur...@apache.org on 2022/09/08 01:29:47 UTC
[pulsar-site] branch main updated: Version banner in docs pages (#204)
This is an automated email from the ASF dual-hosted git repository.
urfree pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new c6e0cff69a9 Version banner in docs pages (#204)
c6e0cff69a9 is described below
commit c6e0cff69a9892b45cb4665f87bec5f6103fd65c
Author: Li Li <ur...@apache.org>
AuthorDate: Thu Sep 8 09:29:42 2022 +0800
Version banner in docs pages (#204)
---
site2/website-next/src/css/custom.css | 5 +-
.../src/theme/DocVersionBanner/index.js | 148 +++++++++++++++++++++
2 files changed, 151 insertions(+), 2 deletions(-)
diff --git a/site2/website-next/src/css/custom.css b/site2/website-next/src/css/custom.css
index 4105c2703aa..a74d9b23f64 100644
--- a/site2/website-next/src/css/custom.css
+++ b/site2/website-next/src/css/custom.css
@@ -1179,9 +1179,10 @@ footer .row.footer__links {
min-width: 165px !important;
}
-.theme-doc-version-banner {
- display: none;
+.theme-doc-version-banner a {
+ cursor: pointer;
}
+
.theme-doc-version-badge {
display: none;
}
diff --git a/site2/website-next/src/theme/DocVersionBanner/index.js b/site2/website-next/src/theme/DocVersionBanner/index.js
new file mode 100644
index 00000000000..d1c52e42aa6
--- /dev/null
+++ b/site2/website-next/src/theme/DocVersionBanner/index.js
@@ -0,0 +1,148 @@
+import React from "react";
+import clsx from "clsx";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import {
+ useActivePlugin,
+ useDocVersionSuggestions,
+} from "@docusaurus/plugin-content-docs/client";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import {
+ useDocsPreferredVersion,
+ useDocsVersion,
+} from "@docusaurus/theme-common/internal";
+let versions = require("../../../versions.json");
+const _latestVersion = versions[0];
+function UnreleasedVersionLabel({ siteTitle, versionMetadata }) {
+ 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 }) {
+ 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 = {
+ unreleased: UnreleasedVersionLabel,
+ unmaintained: UnmaintainedVersionLabel,
+};
+function BannerLabel(props) {
+ let BannerLabelComponent = null;
+ if (props.versionMetadata.version == "current") {
+ BannerLabelComponent = BannerLabelComponents.unreleased;
+ } else if (props.versionMetadata.version != _latestVersion) {
+ BannerLabelComponent = BannerLabelComponents.unmaintained;
+ } else {
+ return <></>;
+ }
+ // const BannerLabelComponent =
+ // BannerLabelComponents[props.versionMetadata.banner];
+ return <BannerLabelComponent {...props} />;
+}
+function LatestVersionSuggestionLabel({ versionLabel, to, onClick }) {
+ 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"
+ >
+ latest version
+ </Translate>
+ </Link>
+ </b>
+ ),
+ }}
+ >
+ {
+ "For up-to-date documentation, see the {latestVersionLink} ({versionLabel})."
+ }
+ </Translate>
+ );
+}
+function DocVersionBannerEnabled({ className, versionMetadata }) {
+ 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 { 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);
+
+ let path = latestVersionSuggestedDoc.path;
+ let reg = new RegExp("/" + versionMetadata.version + "/");
+ path = path.replace(reg, "/");
+ 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={_latestVersion}
+ // versionLabel={latestVersionSuggestion.label}
+ // to={latestVersionSuggestedDoc.path}
+ onClick={() => {
+ savePreferredVersionName(latestVersionSuggestion.name);
+ window.location.href = path
+ }}
+ />
+ </div>
+ </div>
+ );
+}
+export default function DocVersionBanner({ className }) {
+ const versionMetadata = useDocsVersion();
+ if (versionMetadata.version != _latestVersion) {
+ return (
+ <DocVersionBannerEnabled
+ className={className}
+ versionMetadata={versionMetadata}
+ />
+ );
+ }
+ return null;
+}