From 5750e9fda50c908b2cfa5d7f7a768d18b09dc2cb Mon Sep 17 00:00:00 2001 From: Yash Date: Thu, 30 Jul 2026 09:35:29 -0400 Subject: [PATCH] feat(navbar): add version badge and synchronize kmeshVersion in config Signed-off-by: Yash --- .github/workflows/versioning.yml | 6 ++ docusaurus.config.js | 4 + src/components/VersionBadge/index.js | 26 ++++++ src/components/VersionBadge/styles.module.css | 48 +++++++++++ src/theme/Navbar/Content/index.js | 80 +++++++++++++++++++ src/theme/Navbar/Content/styles.module.css | 15 ++++ 6 files changed, 179 insertions(+) create mode 100644 src/components/VersionBadge/index.js create mode 100644 src/components/VersionBadge/styles.module.css create mode 100644 src/theme/Navbar/Content/index.js create mode 100644 src/theme/Navbar/Content/styles.module.css diff --git a/.github/workflows/versioning.yml b/.github/workflows/versioning.yml index bfa480956..cce819d02 100644 --- a/.github/workflows/versioning.yml +++ b/.github/workflows/versioning.yml @@ -32,6 +32,12 @@ jobs: - name: Run Docusaurus versioning run: npx docusaurus docs:version ${{ steps.extract_version.outputs.version }} + - name: Update navbar version badge + run: | + VERSION="${{ steps.extract_version.outputs.version }}" + # Keep customFields.kmeshVersion in sync with the latest tagged release. + sed -i -E "s/(kmeshVersion:[[:space:]]*\")v?[0-9]+\.[0-9]+\.[0-9]+([^\"]*)(\")/\1v${VERSION}\3/" docusaurus.config.js + - name: Create branch and commit changes run: | git config --global user.name "GitHub Actions" diff --git a/docusaurus.config.js b/docusaurus.config.js index 5393e2996..ca17afe48 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -16,6 +16,10 @@ const config = { // For GitHub pages deployment, it is often '//' baseUrl: "/", + customFields: { + kmeshVersion: "v1.2.0", + }, + // ===== SEO: Head tags ===== headTags: [ { diff --git a/src/components/VersionBadge/index.js b/src/components/VersionBadge/index.js new file mode 100644 index 000000000..314d2797e --- /dev/null +++ b/src/components/VersionBadge/index.js @@ -0,0 +1,26 @@ +import React from "react"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import styles from "./styles.module.css"; + +export default function VersionBadge() { + const { siteConfig } = useDocusaurusContext(); + const version = siteConfig.customFields?.kmeshVersion; + + if (!version) { + return null; + } + + return ( + + + ); +} diff --git a/src/components/VersionBadge/styles.module.css b/src/components/VersionBadge/styles.module.css new file mode 100644 index 000000000..461dea53d --- /dev/null +++ b/src/components/VersionBadge/styles.module.css @@ -0,0 +1,48 @@ +.versionBadge { + display: inline-flex; + align-items: center; + gap: 0.4rem; + margin-right: 0.5rem; + padding: 0.15rem 0.65rem; + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: 999px; + color: var(--ifm-navbar-link-color); + font-size: 0.8rem; + font-weight: 600; + line-height: 1.4; + text-decoration: none; + white-space: nowrap; + transition: border-color 0.15s ease, color 0.15s ease, + background-color 0.15s ease; +} + +.versionBadge:hover { + color: var(--ifm-color-primary); + border-color: var(--ifm-color-primary); + text-decoration: none; +} + +.dot { + flex-shrink: 0; + width: 0.45rem; + height: 0.45rem; + border-radius: 50%; + background-color: var(--ifm-color-primary); +} + +.label { + font-family: var(--ifm-font-family-monospace); + font-size: 0.78rem; +} + +@media (max-width: 996px) { + .versionBadge { + margin-right: 0.25rem; + padding: 0.1rem 0.5rem; + font-size: 0.72rem; + } + + .label { + font-size: 0.72rem; + } +} diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js new file mode 100644 index 000000000..9d16003d3 --- /dev/null +++ b/src/theme/Navbar/Content/index.js @@ -0,0 +1,80 @@ +import React from "react"; +import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common"; +import { + splitNavbarItems, + useNavbarMobileSidebar, +} from "@docusaurus/theme-common/internal"; +import NavbarItem from "@theme/NavbarItem"; +import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle"; +import SearchBar from "@theme/SearchBar"; +import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle"; +import NavbarLogo from "@theme/Navbar/Logo"; +import NavbarSearch from "@theme/Navbar/Search"; +import VersionBadge from "@site/src/components/VersionBadge"; +import styles from "./styles.module.css"; + +function useNavbarItems() { + return useThemeConfig().navbar.items; +} + +function NavbarItems({ items }) { + return ( + <> + {items.map((item, i) => ( + + new Error( + `A theme navbar item failed to render. +Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config: +${JSON.stringify(item, null, 2)}`, + { cause: error }, + ) + } + > + + + ))} + + ); +} + +function NavbarContentLayout({ left, right }) { + return ( +
+
{left}
+
{right}
+
+ ); +} + +export default function NavbarContent() { + const mobileSidebar = useNavbarMobileSidebar(); + const items = useNavbarItems(); + const [leftItems, rightItems] = splitNavbarItems(items); + const searchBarItem = items.find((item) => item.type === "search"); + + return ( + + {!mobileSidebar.disabled && } + + + + } + right={ + <> + + + + {!searchBarItem && ( + + + + )} + + } + /> + ); +} diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css new file mode 100644 index 000000000..3cbe701f2 --- /dev/null +++ b/src/theme/Navbar/Content/styles.module.css @@ -0,0 +1,15 @@ +/** + * 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. + */ + +/* +Hide color mode toggle in small viewports + */ +@media (max-width: 996px) { + .colorModeToggle { + display: none; + } +}