feat(navbar): add version badge and synchronize kmeshVersion in config

.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"

docusaurus.config.js

@@ -16,6 +16,10 @@ const config = {
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: "/",
 
+  customFields: {
+    kmeshVersion: "v1.2.0",
+  },
+
   // ===== SEO: Head tags =====
   headTags: [
     {

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 (
+    <a
+      className={styles.versionBadge}
+      href="https://github.com/kmesh-net/kmesh/releases"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label={`Kmesh version ${version}`}
+      title={`Kmesh ${version}`}
+    >
+      <span className={styles.dot} aria-hidden="true" />
+      <span className={styles.label}>{version}</span>
+    </a>
+  );
+}

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;
+  }
+}

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) => (
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            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 },
+            )
+          }
+        >
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
+      ))}
+    </>
+  );
+}
+
+function NavbarContentLayout({ left, right }) {
+  return (
+    <div className="navbar__inner">
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
+    </div>
+  );
+}
+
+export default function NavbarContent() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const searchBarItem = items.find((item) => item.type === "search");
+
+  return (
+    <NavbarContentLayout
+      left={
+        <>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          <VersionBadge />
+          {!searchBarItem && (
+            <NavbarSearch>
+              <SearchBar />
+            </NavbarSearch>
+          )}
+        </>
+      }
+    />
+  );
+}

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;
+  }
+}