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 ( +
+ +
+ ); +} + +export default NavbarDropdown; diff --git a/docs/plugins/versioning/ui/components/NavbarDropdown.module.css b/docs/plugins/versioning/ui/components/NavbarDropdown.module.css new file mode 100644 index 000000000..50fd27e17 --- /dev/null +++ b/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; +} diff --git a/docs/plugins/versioning/ui/components/NavbarItemTypes.js b/docs/plugins/versioning/ui/components/NavbarItemTypes.js new file mode 100644 index 000000000..3b41dd929 --- /dev/null +++ b/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, +};