add versioning plugin support

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

docs/docusaurus.config.js

@@ -5,6 +5,7 @@ const path = require('path');
 const {themes} = require('prism-react-renderer');
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
+const shouldShowBanner = true;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -55,12 +56,25 @@ const config = {
       {
         indexBlog: false,
       },
-    ]
+    ],
+    [
+      path.join(__dirname, "plugins", "versioning"),
+      {},
+    ],
   ],
 
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      announcementBar: shouldShowBanner
+      ? {
+        id: 'announcement_banner',
+        content: 'Go to our latest Stable release',
+        backgroundColor: '#ffcc00',
+        textColor: '#000',
+        isCloseable: true,
+      }
+      : undefined,
       docs: {
         sidebar: {
           hideable: true,
@@ -80,6 +94,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 }) {
+        },
+        // Aliasing the NavbarItem type for custom mapping
+        configureWebpack() {
+            return {
+                resolve: {
+                    alias: {
+                        '@theme/NavbarItem/ComponentTypes': path.resolve(
+                            __dirname,
+                            './ui/components/NavbarItemTypes'
+                        ),
+                    },
+                },
+            };
+        },
+    };
+};

docs/plugins/versioning/src/index.ts

@@ -0,0 +1,21 @@
+import { LoadContext, Plugin } from '@docusaurus/types';
+import * as path from 'path';
+
+export default function versioningPlugin(context: LoadContext): Plugin {
+  return {
+    name: 'versioning',
+    async loadContent() {
+      return { };
+    },
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+    getClientModules() {
+      return [path.resolve(__dirname, './theme/NavbarItem/VersionSwitcher')];
+    }
+  };
+}

docs/plugins/versioning/src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,18 @@
+import { ComponentTypes } from '@theme-original/NavbarItem/ComponentTypes';
+import VersionSwitcher from './VersionSwitcher';
+import ComponentTypesObject from '@theme-original/NavbarItem/ComponentTypesObject';
+const ComponentTypes: ComponentTypesObject = {
+    'custom-myAwesomeNavbarItem': VersionSwitcher,
+  };
+
+  export default ComponentTypes;'custom-myAwesomeNavbarItem': VersionDropdown,
+// };
+
+import { ComponentTypes } from '@theme-original/NavbarItem/ComponentTypes';
+import VersionSwitcher from './VersionSwitcher';
+import ComponentTypesObject from '@theme/NavbarItem/ComponentTypesObject';
+const ComponentTypes: ComponentTypesObject = {
+    'custom-myAwesomeNavbarItem': VersionSwitcher,
+  };
+
+  export default ComponentTypes;

docs/plugins/versioning/src/theme/NavbarItem/VersionSwitcher.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+interface Branch {
+  name: string;
+}
+
+interface Version {
+  version: string;
+  url: string;
+}
+
+const GITHUB_API = 'https://api.github.com/repos/akuity/kargo/branches';
+const CACHE_KEY = 'kargo-docs-versions';
+const CACHE_DURATION = 1000 * 60 * 60; // 1 hour
+
+const VersionDropdown: React.FC = () => {
+  const [versions, setVersions] = useState<Version[]>([]);
+  const [currentVersion, setCurrentVersion] = useState<string>('current');
+
+  const parseVersionFromHostname = (hostname: string): string => {
+    const match = hostname.match(/^release-(\d+-\d+)\.docs\.kargo\.io$/);
+    if (match) {
+      return match[1].replace('-', '.');
+    }
+    if (hostname === 'docs.kargo.io') {
+      return 'current';
+    }
+    return 'unknown';
+  };
+
+  const fetchVersions = async () => {
+    try {
+      const cachedData = localStorage.getItem(CACHE_KEY);
+      if (cachedData) {
+        const { data, timestamp } = JSON.parse(cachedData);
+        if (Date.now() - timestamp < CACHE_DURATION) {
+          setVersions(data);
+          return;
+        }
+      }
+
+      const response = await fetch(GITHUB_API);
+      const branches: Branch[] = await response.json();
+
+      const versionData = branches
+        .map(branch => {
+          const match = branch.name.match(/^release-(\d+\.\d+)$/);
+          if (match) {
+            const version = match[1];
+            return {
+              version,
+              url: `https://release-${version.replace('.', '-')}.docs.kargo.io`
+            };
+          }
+          return null;
+        })
+        .filter((v): v is Version => v !== null)
+        .sort((a, b) => b.version.localeCompare(a.version, undefined, { numeric: true }));
+
+      localStorage.setItem(CACHE_KEY, JSON.stringify({
+        data: versionData,
+        timestamp: Date.now()
+      }));
+
+      setVersions(versionData);
+    } catch (error) {
+      console.error('Failed to fetch versions:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchVersions();
+    setCurrentVersion(parseVersionFromHostname(window.location.hostname));
+  }, []);
+
+  const handleVersionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedVersion = event.target.value;
+    if (selectedVersion === 'current') {
+      window.location.href = 'https://docs.kargo.io';
+    } else {
+      const version = versions.find(v => v.version === selectedVersion);
+      if (version) {
+        window.location.href = version.url;
+      }
+    }
+  };
+
+  return (
+    <div>
+      {/* Version dropdown implementation can go here */}
+    </div>
+  );
+};
+
+export default VersionDropdown;

docs/plugins/versioning/src/theme/NavbarItem/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import NavbarItem from '@theme-original/NavbarItem';
+import ComponentTypes from './ComponentTypes';
+
+export default function NavbarItemWrapper(props) {
+  return <NavbarItem {...props} componentTypes={ComponentTypes} />;
+}

docs/plugins/versioning/src/theme/VersionDropdown/index.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+
+interface Branch {
+  name: string;
+}
+
+interface Version {
+  version: string;
+  url: string;
+}
+
+const GITHUB_API = 'https://api.github.com/repos/akuity/kargo/branches';
+const CACHE_KEY = 'kargo-docs-versions';
+const CACHE_DURATION = 1000 * 60 * 60; // 1 hour
+
+const VersionDropdown: React.FC = () => {
+  const [versions, setVersions] = useState<Version[]>([]);
+  const [currentVersion, setCurrentVersion] = useState<string>('current');
+
+  const parseVersionFromHostname = (hostname: string): string => {
+    const match = hostname.match(/^release-(\d+-\d+)\.docs\.kargo\.io$/);
+    if (match) {
+      return match[1].replace('-', '.');
+    }
+    if (hostname === 'docs.kargo.io') {
+      return 'current';
+    }
+    return 'unknown';
+  };
+
+  const fetchVersions = async () => {
+    try {
+      const cachedData = localStorage.getItem(CACHE_KEY);
+      if (cachedData) {
+        const { data, timestamp } = JSON.parse(cachedData);
+        if (Date.now() - timestamp < CACHE_DURATION) {
+          setVersions(data);
+          return;
+        }
+      }
+
+      const response = await fetch(GITHUB_API);
+      const branches: Branch[] = await response.json();
+
+      const versionData = branches
+        .map(branch => {
+          const match = branch.name.match(/^release-(\d+\.\d+)$/);
+          if (match) {
+            const version = match[1];
+            return {
+              version,
+              url: `https://release-${version.replace('.', '-')}.docs.kargo.io`
+            };
+          }
+          return null;
+        })
+        .filter((v): v is Version => v !== null)
+        .sort((a, b) => b.version.localeCompare(a.version, undefined, { numeric: true }));
+
+      localStorage.setItem(CACHE_KEY, JSON.stringify({
+        data: versionData,
+        timestamp: Date.now()
+      }));
+
+      setVersions(versionData);
+    } catch (error) {
+      console.error('Failed to fetch versions:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchVersions();
+    setCurrentVersion(parseVersionFromHostname(window.location.hostname));
+  }, []);
+
+  const handleVersionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedVersion = event.target.value;
+    if (selectedVersion === 'current') {
+      window.location.href = 'https://docs.kargo.io';
+    } else {
+      const version = versions.find(v => v.version === selectedVersion);
+      if (version) {
+        window.location.href = version.url;
+      }
+    }
+  };
+
+  return (
+    <div>
+      {/* Version dropdown implementation can go here */}
+    </div>
+  );
+};
+
+export default VersionDropdown;

docs/plugins/versioning/src/theme/styles.css

@@ -0,0 +1,21 @@
+.version-dropdown-container {
+    margin-left: auto;
+    padding: 0 1rem;
+  }
+
+  .version-select {
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: 1px solid var(--ifm-color-emphasis-300);
+    background-color: var(--ifm-background-color);
+    color: var(--ifm-color-content);
+    font-size: 0.9rem;
+  }
+
+  .version-banner {
+    background-color: var(--ifm-color-primary);
+    color: white;
+    text-align: center;
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }