This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch developer_portal
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 15b12850de7620b9689ae432bfea29c56270329f
Author: Evan Rusackas <e...@rusackas.com>
AuthorDate: Wed Apr 2 14:17:12 2025 -0600
Better version switcher
---
.../{DocVersionBanner => DocVersionBadge}/index.js | 39 ++++-----
docs/src/theme/DocVersionBadge/styles.module.css | 42 ++++++++++
docs/src/theme/DocVersionBanner/index.js | 96 +---------------------
3 files changed, 62 insertions(+), 115 deletions(-)
diff --git a/docs/src/theme/DocVersionBanner/index.js
b/docs/src/theme/DocVersionBadge/index.js
similarity index 79%
copy from docs/src/theme/DocVersionBanner/index.js
copy to docs/src/theme/DocVersionBadge/index.js
index a454c589fa..8e4048a30f 100644
--- a/docs/src/theme/DocVersionBanner/index.js
+++ b/docs/src/theme/DocVersionBadge/index.js
@@ -17,8 +17,7 @@
* under the License.
*/
-import React, { useEffect, useState } from 'react';
-import DocVersionBanner from '@theme-original/DocVersionBanner';
+import React from 'react';
import {
useActivePlugin,
useDocsVersion,
@@ -31,11 +30,11 @@ import { DownOutlined } from '@ant-design/icons';
import styles from './styles.module.css';
-export default function DocVersionBannerWrapper(props) {
+export default function DocVersionBadge() {
const activePlugin = useActivePlugin();
const { pathname } = useLocation();
const pluginId = activePlugin?.pluginId;
- const [versionedPath, setVersionedPath] = useState('');
+ const [versionedPath, setVersionedPath] = React.useState('');
// Only show version selector for docs, components, and tutorials
const isVersioned = ['default', 'components',
'tutorials'].includes(pluginId);
@@ -45,7 +44,7 @@ export default function DocVersionBannerWrapper(props) {
const version = useDocsVersion();
// Extract the current page path relative to the version
- useEffect(() => {
+ React.useEffect(() => {
if (!pathname || !version || !pluginId) return;
let relativePath = '';
@@ -92,24 +91,18 @@ export default function DocVersionBannerWrapper(props) {
};
});
+ if (!isVersioned) {
+ return null;
+ }
+
return (
- <>
- <DocVersionBanner {...props} />
- {isVersioned && (
- <div className={styles.versionBanner}>
- <div className={styles.versionContainer}>
- <span className={styles.versionLabel}>Version:</span>
- <Dropdown menu={{ items }} trigger={['click']}>
- <a
- onClick={e => e.preventDefault()}
- className={styles.versionSelector}
- >
- {version.label} <DownOutlined />
- </a>
- </Dropdown>
- </div>
- </div>
- )}
- </>
+ <span className={styles.versionBadge}>
+ Version:{' '}
+ <Dropdown menu={{ items }} trigger={['click']}>
+ <a onClick={e => e.preventDefault()}
className={styles.versionSelector}>
+ {version.label} <DownOutlined />
+ </a>
+ </Dropdown>
+ </span>
);
}
diff --git a/docs/src/theme/DocVersionBadge/styles.module.css
b/docs/src/theme/DocVersionBadge/styles.module.css
new file mode 100644
index 0000000000..b67e5822f1
--- /dev/null
+++ b/docs/src/theme/DocVersionBadge/styles.module.css
@@ -0,0 +1,42 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.versionBadge {
+ display: inline-flex;
+ align-items: center;
+ font-size: 0.8rem;
+ font-weight: 500;
+ color: var(--ifm-color-emphasis-700);
+ background-color: var(--ifm-color-emphasis-200);
+ border-radius: 0.5rem;
+ padding: 0.2rem 0.5rem;
+ margin-right: 0.5rem;
+}
+
+.versionSelector {
+ cursor: pointer;
+ color: var(--ifm-color-primary);
+ font-weight: 500;
+ margin-left: 0.25rem;
+}
+
+.versionSelector:hover {
+ text-decoration: none;
+ color: var(--ifm-color-primary-darker);
+}
diff --git a/docs/src/theme/DocVersionBanner/index.js
b/docs/src/theme/DocVersionBanner/index.js
index a454c589fa..2702f41ff6 100644
--- a/docs/src/theme/DocVersionBanner/index.js
+++ b/docs/src/theme/DocVersionBanner/index.js
@@ -17,99 +17,11 @@
* under the License.
*/
-import React, { useEffect, useState } from 'react';
+import React from 'react';
import DocVersionBanner from '@theme-original/DocVersionBanner';
-import {
- useActivePlugin,
- useDocsVersion,
- useVersions,
-} from '@docusaurus/plugin-content-docs/client';
-import { useLocation } from '@docusaurus/router';
-import { useDocsPreferredVersion } from '@docusaurus/theme-common';
-import { Dropdown } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-
-import styles from './styles.module.css';
+// We're just passing through the original component
+// The version selector is now in DocVersionBadge
export default function DocVersionBannerWrapper(props) {
- const activePlugin = useActivePlugin();
- const { pathname } = useLocation();
- const pluginId = activePlugin?.pluginId;
- const [versionedPath, setVersionedPath] = useState('');
-
- // Only show version selector for docs, components, and tutorials
- const isVersioned = ['default', 'components',
'tutorials'].includes(pluginId);
-
- const { preferredVersion } = useDocsPreferredVersion(pluginId);
- const versions = useVersions(pluginId);
- const version = useDocsVersion();
-
- // Extract the current page path relative to the version
- useEffect(() => {
- if (!pathname || !version || !pluginId) return;
-
- let relativePath = '';
-
- // Handle different version path patterns
- if (pathname.includes(`/${pluginId}/`)) {
- // Extract the part after the version
- // Example: /components/1.1.0/ui-components/button ->
/ui-components/button
- const parts = pathname.split(`/${pluginId}/`);
- if (parts.length > 1) {
- const afterPluginId = parts[1];
- // Find where the version part ends
- const versionParts = afterPluginId.split('/');
- if (versionParts.length > 1) {
- // Remove the version part and join the rest
- relativePath = '/' + versionParts.slice(1).join('/');
- }
- }
- }
-
- setVersionedPath(relativePath);
- }, [pathname, version, pluginId]);
-
- // Create dropdown items for version selection
- const items = versions.map(v => {
- // Construct the URL for this version, preserving the current page
- // v.path is the version-specific path like "1.0.0" or "next"
- let versionUrl = v.path;
-
- if (versionedPath) {
- // Construct the full URL with the version and the current page path
- versionUrl = v.path + versionedPath;
- }
-
- return {
- key: v.name,
- label: (
- <a href={versionUrl}>
- {v.label}
- {v.name === version.name && ' (current)'}
- {v.name === preferredVersion?.name && ' (preferred)'}
- </a>
- ),
- };
- });
-
- return (
- <>
- <DocVersionBanner {...props} />
- {isVersioned && (
- <div className={styles.versionBanner}>
- <div className={styles.versionContainer}>
- <span className={styles.versionLabel}>Version:</span>
- <Dropdown menu={{ items }} trigger={['click']}>
- <a
- onClick={e => e.preventDefault()}
- className={styles.versionSelector}
- >
- {version.label} <DownOutlined />
- </a>
- </Dropdown>
- </div>
- </div>
- )}
- </>
- );
+ return <DocVersionBanner {...props} />;
}
