diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 6f3c9ef0c..2eb7bd315 100644 --- a/docs/docusaurus.config.js +++ b/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', diff --git a/docs/plugins/versioning/index.js b/docs/plugins/versioning/index.js new file mode 100644 index 000000000..b5c848754 --- /dev/null +++ b/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' + ), + }, + }, + }; + }, + }; +}; diff --git a/docs/plugins/versioning/ui/components/NavbarDropdown.js b/docs/plugins/versioning/ui/components/NavbarDropdown.js new file mode 100644 index 000000000..4a4302fd1 --- /dev/null +++ b/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 ( +