Skip to content

Commit a6d5330

Browse files
gansheergansheer
committed
feat: Add documentation links on camel variants
1 parent 47c8796 commit a6d5330

File tree

4 files changed

+298
-20
lines changed

4 files changed

+298
-20
lines changed

‎src/main/resources/web/redhat-camel-app/header/company-header.jsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {CompanyHeader as LibCompanyHeader} from '../../lib';
44
import {createLinkTracker, useAnalytics} from '../../lib';
55
import {FaAngleLeft} from 'react-icons/fa';
66
import rhLogo from '../media/redhat-logo.svg';
7+
import {ResourcesNav} from './resources-nav';
78

89
export function CompanyHeader(props) {
910
const analytics = useAnalytics();
@@ -13,27 +14,34 @@ export function CompanyHeader(props) {
1314
};
1415
const linkTracker = createLinkTracker(analytics, 'UX', 'Header');
1516
const isCodeQuarkusReferrer = document.referrer.includes("code.quarkus.io");
16-
return (
1717

18-
<LibCompanyHeader {...props} brand={(
19-
<>
20-
<a className="logo" href="https://www.redhat.com" onClick={linkClick}>
21-
<img className="logo" alt="Red Hat Logo"
22-
src={rhLogo}/>
23-
Red Hat
24-
</a>
25-
<div className="build">
26-
&nbsp;build of&nbsp;<a href="https://camel.apache.org/" onClick={linkClick}>Apache Camel</a>&nbsp;for Quarkus
27-
</div>
28-
</>
29-
)}>
30-
<>
31-
{isCodeQuarkusReferrer && (
32-
<div className="nav-container">
33-
<a href="https://code.quarkus.io" onClick={linkTracker}><FaAngleLeft/> Back to code.quarkus.io</a>
18+
// Extract platform stream key from streamProps
19+
// The streamKey is passed via props.streamProps.streamKey
20+
const platformStream = props.streamProps?.streamKey;
21+
22+
return (
23+
<>
24+
<LibCompanyHeader {...props} brand={(
25+
<>
26+
<a className="logo" href="https://www.redhat.com" onClick={linkClick}>
27+
<img className="logo" alt="Red Hat Logo"
28+
src={rhLogo}/>
29+
Red Hat
30+
</a>
31+
<div className="build">
32+
&nbsp;build of&nbsp;<a href="https://camel.apache.org/" onClick={linkClick}>Apache Camel</a>&nbsp;for Quarkus
3433
</div>
35-
)}
36-
</>
37-
</LibCompanyHeader>
34+
</>
35+
)}>
36+
<>
37+
{isCodeQuarkusReferrer && (
38+
<div className="nav-container">
39+
<a href="https://code.quarkus.io" onClick={linkTracker}><FaAngleLeft/> Back to code.quarkus.io</a>
40+
</div>
41+
)}
42+
</>
43+
</LibCompanyHeader>
44+
<ResourcesNav analytics={analytics} platformStream={platformStream} />
45+
</>
3846
);
3947
}

‎src/main/resources/web/redhat-camel-app/header/resources-nav.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import './resources-nav.scss';
3+
import { Dropdown } from 'react-bootstrap';
4+
import {FaAngleDown} from 'react-icons/fa';
5+
import { getVersionFromStream, getLinksForVersion, VERSION_LINKS } from './version-links';
6+
7+
export function ResourcesNav({ analytics, platformStream }) {
8+
// Check if this specific platform stream has configured links
9+
// Don't render if no links are configured for this version
10+
if (platformStream && !VERSION_LINKS[platformStream]) {
11+
return null;
12+
}
13+
14+
// Get the version and corresponding links based on the platform stream
15+
const version = getVersionFromStream(platformStream);
16+
const links = getLinksForVersion(version);
17+
18+
const handleLinkClick = (label, url) => {
19+
if (analytics) {
20+
analytics.event('UX', 'Click on resources link', `${label}: ${url}`);
21+
}
22+
};
23+
24+
return (
25+
<div className="resources-nav">
26+
<div className="resources-nav-container">
27+
<Dropdown className="resources-nav-item">
28+
<Dropdown.Toggle variant="link" className="resources-nav-link" id="documentation-dropdown">
29+
Documentation&nbsp;&nbsp;<FaAngleDown />
30+
</Dropdown.Toggle>
31+
<Dropdown.Menu>
32+
{Object.entries(links.documentation).map(([key, link]) => (
33+
<Dropdown.Item
34+
key={key}
35+
href={link.url}
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
onClick={() => handleLinkClick(link.label, link.url)}
39+
>
40+
{link.label}
41+
</Dropdown.Item>
42+
))}
43+
</Dropdown.Menu>
44+
</Dropdown>
45+
<div className="resources-nav-item">
46+
<a
47+
className="resources-nav-link"
48+
href={links.examples.url}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
onClick={() => handleLinkClick(links.examples.label, links.examples.url)}
52+
>
53+
Examples
54+
</a>
55+
</div>
56+
</div>
57+
</div>
58+
);
59+
}

‎src/main/resources/web/redhat-camel-app/header/resources-nav.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.resources-nav {
2+
background-color: var(--background2);
3+
border-bottom: 1px solid #ddd;
4+
padding: 0;
5+
6+
.resources-nav-container {
7+
max-width: 1200px;
8+
margin: 0 auto;
9+
display: flex;
10+
align-items: center;
11+
gap: 2rem;
12+
padding: 0 0px;
13+
height: 50px;
14+
}
15+
16+
.resources-nav-item {
17+
// Override react-bootstrap dropdown styles
18+
&.dropdown {
19+
position: static; // Allow dropdown menu to position relative to container
20+
21+
.dropdown-toggle {
22+
color: var(--textColor);
23+
text-decoration: none;
24+
font-weight: 500;
25+
font-size: 1rem;
26+
padding: 0;
27+
border: none;
28+
background: none;
29+
display: inline-flex;
30+
align-items: center;
31+
32+
&:hover, &:focus, &:active {
33+
color: var(--linkTextColor);
34+
text-decoration: none;
35+
background: none !important;
36+
border: none;
37+
box-shadow: none !important;
38+
}
39+
40+
&::after {
41+
margin-left: 0.5rem;
42+
}
43+
}
44+
45+
.dropdown-menu {
46+
background-color: var(--dropdownMenuBg);
47+
box-shadow: var(--dropdownMenuShadow);
48+
border-radius: 4px;
49+
min-width: 280px;
50+
border: none;
51+
padding: 0.5rem 0;
52+
z-index: 1000;
53+
margin-top: 0.5rem;
54+
55+
&.show {
56+
display: block;
57+
}
58+
59+
.dropdown-item {
60+
display: block;
61+
padding: 0.75rem 1.25rem;
62+
color: var(--dropdownMenuTextColor);
63+
font-size: 0.95rem;
64+
transition: background-color 0.2s;
65+
background: none;
66+
border: none;
67+
width: 100%;
68+
text-align: left;
69+
70+
&:hover, &:focus {
71+
background-color: var(--secondary) !important;
72+
color: white !important;
73+
text-decoration: none;
74+
}
75+
76+
&:active {
77+
background-color: var(--secondary) !important;
78+
color: white !important;
79+
}
80+
}
81+
}
82+
}
83+
}
84+
85+
.resources-nav-link {
86+
color: var(--textColor);
87+
text-decoration: none;
88+
font-weight: 500;
89+
font-size: 1rem;
90+
transition: color 0.2s;
91+
92+
&:hover {
93+
color: var(--linkTextColor);
94+
}
95+
96+
&:focus {
97+
outline: 2px solid var(--secondary);
98+
outline-offset: 2px;
99+
}
100+
}
101+
102+
@media screen and (max-width: 900px) {
103+
.resources-nav-container {
104+
max-width: 900px;
105+
gap: 1rem;
106+
padding: 0 10px;
107+
height: auto;
108+
min-height: 50px;
109+
flex-wrap: wrap;
110+
}
111+
112+
.resources-nav-item {
113+
&.dropdown {
114+
.dropdown-toggle {
115+
font-size: 0.9rem;
116+
}
117+
118+
.dropdown-menu {
119+
min-width: 240px;
120+
}
121+
}
122+
}
123+
124+
.resources-nav-link {
125+
font-size: 0.9rem;
126+
}
127+
}
128+
129+
@media screen and (max-width: 768px) {
130+
.resources-nav-container {
131+
max-width: 100%;
132+
}
133+
}
134+
}

‎src/main/resources/web/redhat-camel-app/header/version-links.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* Version-specific links configuration for Red Hat Build of Apache Camel.
3+
*
4+
* This file contains all external resource links organized by platform stream ID.
5+
* Each stream includes documentation links and examples repository links.
6+
*
7+
* Structure:
8+
* - documentation: Links shown in the Documentation dropdown menu
9+
* - examples: Direct link to examples shown in the Examples nav item
10+
*
11+
* To add a new version:
12+
* 1. Add a new entry to VERSION_LINKS with the platform stream ID as key
13+
* 2. Include all required documentation links
14+
* 3. Verify all URLs are accessible
15+
*/
16+
17+
export const VERSION_LINKS = {
18+
'com.redhat.quarkus.platform:3.27': {
19+
documentation: {
20+
main: {
21+
label: 'Red Hat Build of Apache Camel',
22+
url: 'https://docs.redhat.com/en/documentation/red_hat_build_of_apache_camel/4.14'
23+
},
24+
lifecycle: {
25+
label: 'Product Life Cycle',
26+
url: 'https://access.redhat.com/support/policy/updates/jboss_notes#p_rhbocamel'
27+
},
28+
configuration: {
29+
label: 'Supported Configuration',
30+
url: 'https://access.redhat.com/articles/6507531#camel-414-ga'
31+
},
32+
schedule: {
33+
label: 'Release Schedule',
34+
url: 'https://access.redhat.com/articles/7021827'
35+
}
36+
},
37+
examples: {
38+
label: 'Camel Quarkus Examples',
39+
url: 'https://github.com/apache/camel-quarkus-examples/tree/3.27.x'
40+
}
41+
}
42+
};
43+
44+
/**
45+
* Default platform stream to use when no version is selected or matched.
46+
*/
47+
export const DEFAULT_VERSION = 'com.redhat.quarkus.platform:3.27';
48+
49+
/**
50+
* Gets the platform stream key from a platform stream identifier.
51+
*
52+
* @param {string} platformStream - The platform stream ID from the registry
53+
* @returns {string} The platform stream key to use for looking up links
54+
*/
55+
export function getVersionFromStream(platformStream) {
56+
if (!platformStream) {
57+
return DEFAULT_VERSION;
58+
}
59+
60+
// Check if we have links for this exact platform stream
61+
if (VERSION_LINKS[platformStream]) {
62+
return platformStream;
63+
}
64+
65+
// Fallback to default
66+
return DEFAULT_VERSION;
67+
}
68+
69+
/**
70+
* Gets all resource links for a specific platform stream.
71+
*
72+
* @param {string} platformStream - The platform stream key
73+
* @returns {object} Object containing documentation and examples links
74+
*/
75+
export function getLinksForVersion(platformStream) {
76+
return VERSION_LINKS[platformStream] || VERSION_LINKS[DEFAULT_VERSION];
77+
}

0 commit comments

Comments
 (0)