add versioning plugin support

Signed-off-by: Faeka Ansari <[email protected]>

docs/docusaurus.config.js

@@ -55,7 +55,11 @@ const config = {
       {
         indexBlog: false,
       },
-    ]
+    ],
+    [
+      path.join(__dirname, "plugins", "versioning"),
+      {},
+    ],
   ],
 
   themeConfig:
@@ -80,6 +84,10 @@ const config = {
             label: 'Akuity.io',
             position: 'left',
           },
+          {
+            type: 'custom-navbar-dropdown',
+            position: 'right',
+          },
           {
             href: 'https://kargo.io/',
             label: 'Kargo.io',

docs/plugins/versioning/index.js

@@ -0,0 +1,25 @@
+import path from 'path'
+module.exports = function (context, options) {
+    console.log("Index.js called")
+    return {
+        name: 'my-custom-navbar-plugin',
+        getThemePath() {
+            return './ui/components';
+        },
+        contentLoaded({ actions }) {
+        },
+
+        configureWebpack() {
+            return {
+                resolve: {
+                    alias: {
+                        '@theme/NavbarItem/ComponentTypes': path.resolve(
+                            __dirname,
+                            './ui/components/NavbarItemTypes'
+                        ),
+                    },
+                },
+            };
+        },
+    };
+};

docs/plugins/versioning/ui/components/NavbarDropdown.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react';
+import styles from './NavbarDropdown.module.css';
+
+const CACHE_KEY = 'kargo-docs-versions';
+const CACHE_DURATION = 1000 * 60 * 30; // 30 minutes
+const githubApiUrl = 'https://api.github.com/repos/akuity/kargo/branches';
+
+function NavbarDropdown() {
+  console.log("Navbar dropdown initialized");
+  const [versions, setVersions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [currentVersion, setCurrentVersion] = useState("");
+
+  useEffect(() => {
+    fetchVersions();
+  }, []);
+
+  const fetchVersions = async () => {
+    try {
+      console.log("Before fetching versions")
+      const response = await fetch(githubApiUrl);
+      const branches = await response.json();
+      console.log("fetched branches are: ", branches);
+
+      const releaseBranches = branches
+        .map(branch => branch.name)
+        .filter(name => /^release-1/.test(name))
+        .map(name => {
+          const [major, minor] = name.split('.');
+          return {
+            version: `${major}-${minor}`,
+            url: `https://${major}-${minor}.docs.kargo.io${window.location.pathname}`
+          };
+        });
+        console.log("These are release branches before unshifting: ", releaseBranches)
+      // Add current version
+      releaseBranches.unshift({
+        version: 'current',
+        url: `https://docs.kargo.io${window.location.pathname}`
+      });
+      console.log("These are release branches: ", releaseBranches)
+
+      localStorage.setItem(CACHE_KEY, JSON.stringify({
+        versions: releaseBranches,
+        timestamp: Date.now()
+      }));
+
+      setVersions(releaseBranches);
+      setLoading(false);
+    } catch (error) {
+      console.error('Error fetching versions:', error);
+      setLoading(false);
+    }
+  };
+
+  const handleVersionChange = (event) => {
+    const selectedVersion = versions.find(v => v.version === event.target.value);
+    if (selectedVersion) {
+      window.location.href = selectedVersion.url;
+    }
+  };
+
+  if (loading) return null;
+
+  return (
+    <div className="navbar__item">
+      <select
+        className="navbar__link"
+        onChange={handleVersionChange}
+        style={{
+          backgroundColor: 'transparent',
+          border: 'none',
+          cursor: 'pointer',
+          padding: '0.5rem',
+          fontSize: '0.9rem'
+        }}
+      >
+        {versions.map(version => (
+          <option key={version.version} value={version.version}>
+            {version.version === 'current' ? 'Other Versions' : `${version.version}`}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+export default NavbarDropdown;

docs/plugins/versioning/ui/components/NavbarDropdown.module.css

@@ -0,0 +1,33 @@
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownButton {
+  background-color: #008cba;
+  color: white;
+  padding: 10px 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+.dropdownContent {
+  display: block;
+  position: absolute;
+  background-color: white;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+.dropdownContent a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdownContent a:hover {
+  background-color: #ddd;
+}

docs/plugins/versioning/ui/components/NavbarItemTypes.js

@@ -0,0 +1,7 @@
+import NavbarDropdown from './NavbarDropdown';
+import DefaultComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+
+export default {
+    ...DefaultComponentTypes,
+    'custom-navbar-dropdown': NavbarDropdown,
+};