@vantagecompute/docusaurus-theme 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vantagecompute/docusaurus-theme",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Shared Vantage Compute Docusaurus theme — design system, brand assets, and common theme overrides for all vantagecompute documentation sites.",
   "license": "MIT",
   "main": "lib/index.cjs",
@@ -45,6 +45,6 @@
     "documentation"
   ],
   "engines": {
-    "node": ">=22.0"
+    "node": ">=24.0"
   }
 }

package/src/css/custom.css

@@ -1881,11 +1881,39 @@ article {
 }
 
 
-/* ── Navbar version badge ──────────────────────────────────────────── */
-.navbar__brand-with-version {
+/* ── Navbar centered title + version badge ─────────────────────────── */
+
+/* Anchor for the absolutely-centered title below. */
+.navbar__inner {
+  position: relative;
+}
+
+/* theme-classic renders the title inside the brand <a>, beside the logo.
+   Hide it there and let Navbar/Logo re-render it centered, so the version
+   badge can sit immediately to its right. The brand link stays reachable
+   via the logo image's alt text. */
+.navbar__brand .navbar__title {
+  display: none;
+}
+
+.navbar__center-title {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
-  align-items: center;
-  gap: 0;
+  align-items: baseline;
+  gap: 6px;
+  white-space: nowrap;
+  z-index: 1;
+  /* Never swallow clicks meant for the brand link or navbar items. */
+  pointer-events: none;
+}
+
+.navbar__center-title-text {
+  font-weight: 600;
+  font-size: 1.2rem;
+  color: var(--vantage-navbar-text);
 }
 
 .navbar__version-badge {
@@ -1895,7 +1923,18 @@ article {
   color: var(--vantage-navbar-text);
   white-space: nowrap;
   letter-spacing: 0.01em;
-  padding-left: 6px;
+}
+
+/* On narrow screens the centered title would collide with the hamburger
+   and the right-hand items, so drop it and restore the in-brand title. */
+@media (max-width: 996px) {
+  .navbar__center-title {
+    display: none;
+  }
+
+  .navbar__brand .navbar__title {
+    display: revert;
+  }
 }
 
 /* Chat sidebar  -  push layout (navbar excluded) */

package/src/theme/Navbar/Logo/index.jsx

@@ -7,18 +7,36 @@ import React from 'react';
 import Logo from '@theme-init/Navbar/Logo';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
+/**
+ * Brand logo on the left, plus a centered title with the project version
+ * immediately to its right.
+ *
+ * The title cannot just be centered in place: theme-classic renders it inside
+ * the brand <a>, beside the logo, so centering it would drag the logo along.
+ * Instead the in-brand title is hidden by CSS and re-rendered here as its own
+ * absolutely-centered element, which lets the version badge sit next to it.
+ */
 export default function LogoWrapper(props) {
   const {siteConfig} = useDocusaurusContext();
-  const version = siteConfig.customFields?.projectVersion;
+
+  const raw = siteConfig.customFields?.projectVersion;
+  const version = raw
+    ? String(raw).startsWith('v')
+      ? String(raw)
+      : `v${raw}`
+    : null;
+
+  const title = siteConfig.themeConfig?.navbar?.title;
 
   return (
-    <div className="navbar__brand-with-version">
+    <>
       <Logo {...props} />
-      {version && (
-        <span className="navbar__version-badge">
-          {String(version).startsWith('v') ? version : `v${version}`}
-        </span>
+      {(title || version) && (
+        <div className="navbar__center-title">
+          {title && <span className="navbar__center-title-text">{title}</span>}
+          {version && <span className="navbar__version-badge">{version}</span>}
+        </div>
       )}
-    </div>
+    </>
   );
 }