From a6d5330f97d1a4dce174a714ae2677c8b56b47ed Mon Sep 17 00:00:00 2001 From: Gaelle Fournier Date: Mon, 24 Nov 2025 11:17:27 +0100 Subject: [PATCH] feat: Add documentation links on camel variants --- .../header/company-header.jsx | 48 ++++--- .../redhat-camel-app/header/resources-nav.jsx | 59 ++++++++ .../header/resources-nav.scss | 134 ++++++++++++++++++ .../redhat-camel-app/header/version-links.js | 77 ++++++++++ 4 files changed, 298 insertions(+), 20 deletions(-) create mode 100644 src/main/resources/web/redhat-camel-app/header/resources-nav.jsx create mode 100644 src/main/resources/web/redhat-camel-app/header/resources-nav.scss create mode 100644 src/main/resources/web/redhat-camel-app/header/version-links.js diff --git a/src/main/resources/web/redhat-camel-app/header/company-header.jsx b/src/main/resources/web/redhat-camel-app/header/company-header.jsx index 0349785..530b1a1 100644 --- a/src/main/resources/web/redhat-camel-app/header/company-header.jsx +++ b/src/main/resources/web/redhat-camel-app/header/company-header.jsx @@ -4,6 +4,7 @@ import {CompanyHeader as LibCompanyHeader} from '../../lib'; import {createLinkTracker, useAnalytics} from '../../lib'; import {FaAngleLeft} from 'react-icons/fa'; import rhLogo from '../media/redhat-logo.svg'; +import {ResourcesNav} from './resources-nav'; export function CompanyHeader(props) { const analytics = useAnalytics(); @@ -13,27 +14,34 @@ export function CompanyHeader(props) { }; const linkTracker = createLinkTracker(analytics, 'UX', 'Header'); const isCodeQuarkusReferrer = document.referrer.includes("code.quarkus.io"); - return ( - - - Red Hat Logo - Red Hat - -
-  build of Apache Camel for Quarkus -
- - )}> - <> - {isCodeQuarkusReferrer && ( -
- Back to code.quarkus.io + // Extract platform stream key from streamProps + // The streamKey is passed via props.streamProps.streamKey + const platformStream = props.streamProps?.streamKey; + + return ( + <> + + + Red Hat Logo + Red Hat + +
+  build of Apache Camel for Quarkus
- )} - - + + )}> + <> + {isCodeQuarkusReferrer && ( +
+ Back to code.quarkus.io +
+ )} + + + + ); } \ No newline at end of file diff --git a/src/main/resources/web/redhat-camel-app/header/resources-nav.jsx b/src/main/resources/web/redhat-camel-app/header/resources-nav.jsx new file mode 100644 index 0000000..031f938 --- /dev/null +++ b/src/main/resources/web/redhat-camel-app/header/resources-nav.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import './resources-nav.scss'; +import { Dropdown } from 'react-bootstrap'; +import {FaAngleDown} from 'react-icons/fa'; +import { getVersionFromStream, getLinksForVersion, VERSION_LINKS } from './version-links'; + +export function ResourcesNav({ analytics, platformStream }) { + // Check if this specific platform stream has configured links + // Don't render if no links are configured for this version + if (platformStream && !VERSION_LINKS[platformStream]) { + return null; + } + + // Get the version and corresponding links based on the platform stream + const version = getVersionFromStream(platformStream); + const links = getLinksForVersion(version); + + const handleLinkClick = (label, url) => { + if (analytics) { + analytics.event('UX', 'Click on resources link', `${label}: ${url}`); + } + }; + + return ( +
+
+ + + Documentation   + + + {Object.entries(links.documentation).map(([key, link]) => ( + handleLinkClick(link.label, link.url)} + > + {link.label} + + ))} + + + +
+
+ ); +} diff --git a/src/main/resources/web/redhat-camel-app/header/resources-nav.scss b/src/main/resources/web/redhat-camel-app/header/resources-nav.scss new file mode 100644 index 0000000..5afe89f --- /dev/null +++ b/src/main/resources/web/redhat-camel-app/header/resources-nav.scss @@ -0,0 +1,134 @@ +.resources-nav { + background-color: var(--background2); + border-bottom: 1px solid #ddd; + padding: 0; + + .resources-nav-container { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + gap: 2rem; + padding: 0 0px; + height: 50px; + } + + .resources-nav-item { + // Override react-bootstrap dropdown styles + &.dropdown { + position: static; // Allow dropdown menu to position relative to container + + .dropdown-toggle { + color: var(--textColor); + text-decoration: none; + font-weight: 500; + font-size: 1rem; + padding: 0; + border: none; + background: none; + display: inline-flex; + align-items: center; + + &:hover, &:focus, &:active { + color: var(--linkTextColor); + text-decoration: none; + background: none !important; + border: none; + box-shadow: none !important; + } + + &::after { + margin-left: 0.5rem; + } + } + + .dropdown-menu { + background-color: var(--dropdownMenuBg); + box-shadow: var(--dropdownMenuShadow); + border-radius: 4px; + min-width: 280px; + border: none; + padding: 0.5rem 0; + z-index: 1000; + margin-top: 0.5rem; + + &.show { + display: block; + } + + .dropdown-item { + display: block; + padding: 0.75rem 1.25rem; + color: var(--dropdownMenuTextColor); + font-size: 0.95rem; + transition: background-color 0.2s; + background: none; + border: none; + width: 100%; + text-align: left; + + &:hover, &:focus { + background-color: var(--secondary) !important; + color: white !important; + text-decoration: none; + } + + &:active { + background-color: var(--secondary) !important; + color: white !important; + } + } + } + } + } + + .resources-nav-link { + color: var(--textColor); + text-decoration: none; + font-weight: 500; + font-size: 1rem; + transition: color 0.2s; + + &:hover { + color: var(--linkTextColor); + } + + &:focus { + outline: 2px solid var(--secondary); + outline-offset: 2px; + } + } + + @media screen and (max-width: 900px) { + .resources-nav-container { + max-width: 900px; + gap: 1rem; + padding: 0 10px; + height: auto; + min-height: 50px; + flex-wrap: wrap; + } + + .resources-nav-item { + &.dropdown { + .dropdown-toggle { + font-size: 0.9rem; + } + + .dropdown-menu { + min-width: 240px; + } + } + } + + .resources-nav-link { + font-size: 0.9rem; + } + } + + @media screen and (max-width: 768px) { + .resources-nav-container { + max-width: 100%; + } + } +} diff --git a/src/main/resources/web/redhat-camel-app/header/version-links.js b/src/main/resources/web/redhat-camel-app/header/version-links.js new file mode 100644 index 0000000..5be5513 --- /dev/null +++ b/src/main/resources/web/redhat-camel-app/header/version-links.js @@ -0,0 +1,77 @@ +/** + * Version-specific links configuration for Red Hat Build of Apache Camel. + * + * This file contains all external resource links organized by platform stream ID. + * Each stream includes documentation links and examples repository links. + * + * Structure: + * - documentation: Links shown in the Documentation dropdown menu + * - examples: Direct link to examples shown in the Examples nav item + * + * To add a new version: + * 1. Add a new entry to VERSION_LINKS with the platform stream ID as key + * 2. Include all required documentation links + * 3. Verify all URLs are accessible + */ + +export const VERSION_LINKS = { + 'com.redhat.quarkus.platform:3.27': { + documentation: { + main: { + label: 'Red Hat Build of Apache Camel', + url: 'https://docs.redhat.com/en/documentation/red_hat_build_of_apache_camel/4.14' + }, + lifecycle: { + label: 'Product Life Cycle', + url: 'https://access.redhat.com/support/policy/updates/jboss_notes#p_rhbocamel' + }, + configuration: { + label: 'Supported Configuration', + url: 'https://access.redhat.com/articles/6507531#camel-414-ga' + }, + schedule: { + label: 'Release Schedule', + url: 'https://access.redhat.com/articles/7021827' + } + }, + examples: { + label: 'Camel Quarkus Examples', + url: 'https://github.com/apache/camel-quarkus-examples/tree/3.27.x' + } + } +}; + +/** + * Default platform stream to use when no version is selected or matched. + */ +export const DEFAULT_VERSION = 'com.redhat.quarkus.platform:3.27'; + +/** + * Gets the platform stream key from a platform stream identifier. + * + * @param {string} platformStream - The platform stream ID from the registry + * @returns {string} The platform stream key to use for looking up links + */ +export function getVersionFromStream(platformStream) { + if (!platformStream) { + return DEFAULT_VERSION; + } + + // Check if we have links for this exact platform stream + if (VERSION_LINKS[platformStream]) { + return platformStream; + } + + // Fallback to default + return DEFAULT_VERSION; +} + +/** + * Gets all resource links for a specific platform stream. + * + * @param {string} platformStream - The platform stream key + * @returns {object} Object containing documentation and examples links + */ +export function getLinksForVersion(platformStream) { + return VERSION_LINKS[platformStream] || VERSION_LINKS[DEFAULT_VERSION]; +}