Add GitHub star count to navbar and update documentation

Author: nikoscham

README.md

@@ -17,12 +17,14 @@ npm run serve    # serve the production build locally
 
 - Pages are Markdown/MDX files under `docs/`; the sidebar is defined in `sidebars.js`.
 - Math is supported with KaTeX: inline `$T$` and block `$$ ... $$`.
-- `docs/` always holds the **unreleased** docs ("Next" in the version dropdown).
+- `docs/` always holds the **unreleased** docs ("0.3.0-RC (dev)" in the version dropdown).
 
 ## Appearance
 
 The theme follows the design tokens of [feascript.com](https://feascript.com): cream "engineering paper" with a blueprint grid, charcoal ink, gold accent, a floating pill navbar, always-dark code blocks, and Roboto / Roboto Mono, with a matching dark mode. The footer uses the website's footer color (`#f6efd9`, `#222222` in dark mode). Colors and component styling live in `src/css/custom.css`; fonts and the code theme are set in `docusaurus.config.js`.
 
+The navbar's GitHub pill matches the website and fetches the FEAScript-core star count from the public GitHub API in the browser. If the request fails, the link remains usable without a count and the error is logged to the browser console.
+
 ## Versioning
 
 When a new FEAScript-core version is released, snapshot the current docs:
@@ -33,6 +35,8 @@ npm run version -- 0.3.0
 
 This copies `docs/` to `versioned_docs/version-0.3.0/`, the sidebar to `versioned_sidebars/`, and records the version in `versions.json`. Released docs are then available at `docs.feascript.com/0.3.0/...` and appear in the version dropdown.
 
+Versions appear inside that dropdown, not as separate links across the navbar. The space between the logo and the right-hand controls is flexible layout spacing.
+
 After the first release, edit `docusaurus.config.js`: remove `lastVersion: "current"` so the newest released version becomes the default (unversioned URLs). Fixes to an old version are made directly in its `versioned_docs/version-x.y.z/` folder.
 
 ## Deployment

docusaurus.config.js

@@ -48,7 +48,7 @@ const config = {
           // "current" holds the unreleased docs; released versions are snapshots (see README)
           lastVersion: "current",
           versions: {
-            current: { label: "Next (0.3.0-RC)" },
+            current: { label: "0.3.0-RC (dev)" },
           },
         },
         blog: false,
@@ -97,12 +97,9 @@ const config = {
       navbar: {
         items: [
           { type: "docsVersionDropdown", position: "right" },
-          { href: "https://feascript.com", label: "Website", position: "right" },
           {
-            type: "html",
+            type: "custom-github",
             position: "right",
-            value:
-              '<a class="nav-icon" href="https://github.com/FEAScript/FEAScript-core" target="_blank" rel="noopener noreferrer" aria-label="FEAScript on GitHub" title="FEAScript on GitHub"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>',
           },
         ],
       },
@@ -113,7 +110,7 @@ const config = {
             title: "FEAScript",
             items: [
               { label: "Website", href: "https://feascript.com" },
-              { label: "FEAScript Studio", href: "https://studio.feascript.com" },
+              { label: "FEAScript Studio", href: "https://feascript.com/studio.html" },
               { label: "Blog", href: "https://blog.feascript.com" },
             ],
           },

src/css/custom.css

@@ -255,6 +255,22 @@ body {
   height: 1rem;
 }
 
+.nav-github {
+  width: auto;
+  padding: 0 0.85rem;
+  text-decoration: none;
+}
+
+.nav-github:hover {
+  text-decoration: none;
+}
+
+.nav-github-stars {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
 .theme-toggle {
   position: relative;
   flex-direction: row-reverse;

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from "@theme-original/NavbarItem/ComponentTypes";
+import GitHubNavbarItem from "./GitHubNavbarItem";
+
+export default {
+  ...ComponentTypes,
+  "custom-github": GitHubNavbarItem,
+};

src/theme/NavbarItem/GitHubNavbarItem.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState } from "react";
+
+export default function GitHubNavbarItem({ mobile = false }) {
+  const [stars, setStars] = useState(null);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function loadStars() {
+      try {
+        const response = await fetch("https://api.github.com/repos/FEAScript/FEAScript-core", {
+          signal: controller.signal,
+        });
+        if (!response.ok) {
+          throw new Error(`GitHub API returned ${response.status}`);
+        }
+        const data = await response.json();
+        if (!Number.isInteger(data.stargazers_count) || data.stargazers_count < 0) {
+          throw new Error("GitHub API returned an invalid star count");
+        }
+        setStars(data.stargazers_count);
+      } catch (error) {
+        if (!controller.signal.aborted) {
+          console.error("Error fetching GitHub stars:", error);
+        }
+      }
+    }
+
+    loadStars();
+    return () => controller.abort();
+  }, []);
+
+  return (
+    <div className={mobile ? "menu__list-item" : "navbar__item"}>
+      <a
+        className="nav-icon nav-github"
+        href="https://github.com/FEAScript/FEAScript-core"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="FEAScript on GitHub"
+        title="FEAScript on GitHub"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+        <span className="nav-github-stars">{stars === null ? "" : `\u2605 ${stars}`}</span>
+      </a>
+    </div>
+  );
+}