Skip to content

Commit 641b6c1

Browse files
ia3andyia3andy
authored
Merge pull request #262 from gansheer/feat/217-camel-second-header
feat: Add documentation links on camel variants
2 parents 9f602dd + 0ac8616 commit 641b6c1

4 files changed

Lines changed: 216 additions & 20 deletions

File tree

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export function getCamelIntegration(extensions) {
2+
if (!extensions) return null;
3+
for (const ext of extensions) {
4+
const integrates = ext.integrates;
5+
if (!Array.isArray(integrates)) continue;
6+
const camel = integrates.find(i => i.name === 'Camel');
7+
if (camel) return camel;
8+
}
9+
return null;
10+
}
11+
12+
export function buildResourceLinks(camelVersion, streamKey) {
13+
const parts = camelVersion.split('.');
14+
const docsVersion = parts.slice(0, 2).join('.');
15+
const configAnchorVersion = parts.slice(0, 2).join('');
16+
const streamId = streamKey?.split(':')[1];
17+
18+
return {
19+
documentation: [
20+
{ label: 'Red Hat Build of Apache Camel', url: `https://docs.redhat.com/en/documentation/red_hat_build_of_apache_camel/${docsVersion}` },
21+
{ label: 'Product Life Cycle', url: 'https://access.redhat.com/support/policy/updates/jboss_notes#p_rhbocamel' },
22+
{ label: 'Supported Configuration', url: `https://access.redhat.com/articles/6507531#camel-${configAnchorVersion}-ga` },
23+
{ label: 'Release Schedule', url: 'https://access.redhat.com/articles/7021827' },
24+
],
25+
examples: { label: 'Camel Quarkus Examples', url: `https://github.com/apache/camel-quarkus-examples/tree/${streamId}.x` },
26+
};
27+
}

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

Lines changed: 27 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();
@@ -14,26 +15,32 @@ export function CompanyHeader(props) {
1415
const linkTracker = createLinkTracker(analytics, 'UX', 'Header');
1516
const isCodeQuarkusReferrer = document.referrer.includes("code.quarkus.io");
1617
return (
17-
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+
<>
19+
<LibCompanyHeader {...props} brand={(
20+
<>
21+
<a className="logo" href="https://www.redhat.com" onClick={linkClick}>
22+
<img className="logo" alt="Red Hat Logo"
23+
src={rhLogo}/>
24+
Red Hat
25+
</a>
26+
<div className="build">
27+
&nbsp;build of&nbsp;<a href="https://camel.apache.org/" onClick={linkClick}>Apache Camel</a>&nbsp;for Quarkus
3428
</div>
35-
)}
36-
</>
37-
</LibCompanyHeader>
29+
</>
30+
)}>
31+
<>
32+
{isCodeQuarkusReferrer && (
33+
<div className="nav-container">
34+
<a href="https://code.quarkus.io" onClick={linkTracker}><FaAngleLeft/> Back to code.quarkus.io</a>
35+
</div>
36+
)}
37+
</>
38+
</LibCompanyHeader>
39+
<ResourcesNav
40+
extensions={props.streamProps?.platform?.extensions}
41+
streamKey={props.streamProps?.streamKey ?? props.streamProps?.platform?.streams?.find(s => s.recommended)?.key}
42+
analytics={analytics}
43+
/>
44+
</>
3845
);
3946
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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 { getCamelIntegration, buildResourceLinks } from './camel-version-utils';
6+
import { createLinkTracker } from '../../lib';
7+
8+
export function ResourcesNav({ extensions, streamKey, analytics }) {
9+
const integration = getCamelIntegration(extensions);
10+
if (!integration) return null;
11+
12+
const links = buildResourceLinks(integration.version, streamKey);
13+
const linkTracker = createLinkTracker(analytics, 'UX', 'Resources');
14+
15+
return (
16+
<div className="resources-nav">
17+
<div className="resources-nav-container">
18+
<Dropdown className="resources-nav-item">
19+
<Dropdown.Toggle variant="link" className="resources-nav-link" id="documentation-dropdown">
20+
Documentation&nbsp;&nbsp;<FaAngleDown />
21+
</Dropdown.Toggle>
22+
<Dropdown.Menu>
23+
{links.documentation.map((link, i) => (
24+
<Dropdown.Item
25+
key={i}
26+
href={link.url}
27+
target="_blank"
28+
rel="noopener noreferrer"
29+
onClick={linkTracker}
30+
>
31+
{link.label}
32+
</Dropdown.Item>
33+
))}
34+
</Dropdown.Menu>
35+
</Dropdown>
36+
<div className="resources-nav-item">
37+
<a
38+
className="resources-nav-link"
39+
href={links.examples.url}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
onClick={linkTracker}
43+
>
44+
Examples
45+
</a>
46+
</div>
47+
</div>
48+
</div>
49+
);
50+
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
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;
13+
height: 50px;
14+
}
15+
16+
.resources-nav-item {
17+
&.dropdown {
18+
position: static;
19+
20+
.dropdown-toggle {
21+
color: var(--textColor);
22+
text-decoration: none;
23+
font-weight: 500;
24+
font-size: 1rem;
25+
padding: 0;
26+
border: none;
27+
background: none;
28+
display: inline-flex;
29+
align-items: center;
30+
31+
&:hover, &:focus, &:active {
32+
color: var(--linkTextColor);
33+
text-decoration: none;
34+
background: none !important;
35+
border: none;
36+
box-shadow: none !important;
37+
}
38+
39+
&::after {
40+
margin-left: 0.5rem;
41+
}
42+
}
43+
44+
.dropdown-menu {
45+
background-color: var(--dropdownMenuBg);
46+
box-shadow: var(--dropdownMenuShadow);
47+
border-radius: 4px;
48+
min-width: 280px;
49+
border: none;
50+
padding: 0.5rem 0;
51+
z-index: 1000;
52+
margin-top: 0.5rem;
53+
54+
&.show {
55+
display: block;
56+
}
57+
58+
.dropdown-item {
59+
display: block;
60+
padding: 0.75rem 1.25rem;
61+
color: var(--dropdownMenuTextColor);
62+
font-size: 0.95rem;
63+
transition: background-color 0.2s;
64+
background: none;
65+
border: none;
66+
width: 100%;
67+
text-align: left;
68+
69+
&:hover, &:focus {
70+
background-color: var(--secondary) !important;
71+
color: white !important;
72+
text-decoration: none;
73+
}
74+
75+
&:active {
76+
background-color: var(--secondary) !important;
77+
color: white !important;
78+
}
79+
}
80+
}
81+
}
82+
}
83+
84+
.resources-nav-link {
85+
color: var(--textColor);
86+
text-decoration: none;
87+
font-weight: 500;
88+
font-size: 1rem;
89+
transition: color 0.2s;
90+
91+
&:hover {
92+
color: var(--linkTextColor);
93+
}
94+
95+
&:focus {
96+
outline: 2px solid var(--secondary);
97+
outline-offset: 2px;
98+
}
99+
}
100+
101+
@media screen and (max-width: 900px) {
102+
.resources-nav-container {
103+
gap: 1rem;
104+
padding: 0 10px;
105+
}
106+
107+
.resources-nav-item.dropdown .dropdown-toggle,
108+
.resources-nav-link {
109+
font-size: 0.9rem;
110+
}
111+
}
112+
}

0 commit comments

Comments
 (0)