Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 28 additions & 20 deletions src/main/resources/web/redhat-camel-app/header/company-header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -13,27 +14,34 @@ export function CompanyHeader(props) {
};
const linkTracker = createLinkTracker(analytics, 'UX', 'Header');
const isCodeQuarkusReferrer = document.referrer.includes("code.quarkus.io");
return (

<LibCompanyHeader {...props} brand={(
<>
<a className="logo" href="https://www.redhat.com" onClick={linkClick}>
<img className="logo" alt="Red Hat Logo"
src={rhLogo}/>
Red Hat
</a>
<div className="build">
&nbsp;build of&nbsp;<a href="https://camel.apache.org/" onClick={linkClick}>Apache Camel</a>&nbsp;for Quarkus
</div>
</>
)}>
<>
{isCodeQuarkusReferrer && (
<div className="nav-container">
<a href="https://code.quarkus.io" onClick={linkTracker}><FaAngleLeft/> Back to code.quarkus.io</a>
// Extract platform stream key from streamProps
// The streamKey is passed via props.streamProps.streamKey
const platformStream = props.streamProps?.streamKey;

return (
<>
<LibCompanyHeader {...props} brand={(
<>
<a className="logo" href="https://www.redhat.com" onClick={linkClick}>
<img className="logo" alt="Red Hat Logo"
src={rhLogo}/>
Red Hat
</a>
<div className="build">
&nbsp;build of&nbsp;<a href="https://camel.apache.org/" onClick={linkClick}>Apache Camel</a>&nbsp;for Quarkus
</div>
)}
</>
</LibCompanyHeader>
</>
)}>
<>
{isCodeQuarkusReferrer && (
<div className="nav-container">
<a href="https://code.quarkus.io" onClick={linkTracker}><FaAngleLeft/> Back to code.quarkus.io</a>
</div>
)}
</>
</LibCompanyHeader>
<ResourcesNav analytics={analytics} platformStream={platformStream} />
</>
);
}
59 changes: 59 additions & 0 deletions src/main/resources/web/redhat-camel-app/header/resources-nav.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="resources-nav">
<div className="resources-nav-container">
<Dropdown className="resources-nav-item">
<Dropdown.Toggle variant="link" className="resources-nav-link" id="documentation-dropdown">
Documentation&nbsp;&nbsp;<FaAngleDown />
</Dropdown.Toggle>
<Dropdown.Menu>
{Object.entries(links.documentation).map(([key, link]) => (
<Dropdown.Item
key={key}
href={link.url}
target="_blank"
rel="noopener noreferrer"
onClick={() => handleLinkClick(link.label, link.url)}
>
{link.label}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
<div className="resources-nav-item">
<a
className="resources-nav-link"
href={links.examples.url}
target="_blank"
rel="noopener noreferrer"
onClick={() => handleLinkClick(links.examples.label, links.examples.url)}
>
Examples
</a>
</div>
</div>
</div>
);
}
134 changes: 134 additions & 0 deletions src/main/resources/web/redhat-camel-app/header/resources-nav.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}
77 changes: 77 additions & 0 deletions src/main/resources/web/redhat-camel-app/header/version-links.js
Original file line number Diff line number Diff line change
@@ -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 = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fmongiar here is where each version will define it's own documentations

'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];
}
Loading