docs: add version label to navbar (#186)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

docs/docusaurus.config.ts

@@ -47,6 +47,12 @@ const config: Config = {
         src: "img/pocket-id.png",
       },
       items: [
+        // Version gets replaced by the version-label.ts script
+        {
+          to: "#version",
+          label: " ",
+          position: "right",
+        },
         {
           href: "https://github.com/stonith404/pocket-id",
           label: "GitHub",
@@ -59,6 +65,9 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
-};
 
+  clientModules: [
+    require.resolve('./src/version-label.ts'),
+],
+};
 export default config;

docs/src/version-label.ts

@@ -0,0 +1,23 @@
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+
+if (ExecutionEnvironment.canUseDOM) {
+  function readVersionFile() {
+    return fetch(
+      "https://raw.githubusercontent.com/stonith404/pocket-id/refs/heads/main/.version"
+    )
+      .then((response) => response.text())
+      .catch((error) => `Error reading version file: ${error}`);
+  }
+
+  function getVersion() {
+    readVersionFile()
+      .then((version) => {
+        const versionLabels = document.querySelectorAll('[href="#version"]');
+        versionLabels.forEach((label) => {
+          (label as HTMLElement).innerText = `v${version}`;
+        });
+      })
+      .catch((error) => console.error("Error fetching version:", error));
+  }
+  window.addEventListener("load", getVersion);
+}