Skip to content

Commit 422ccfc

Browse files
nehagupnehagup
committed
feat: improve toc, page colors, headings and other formattings
Signed-off-by: Neha Gupta <gneha21@yahoo.in>
1 parent 5f4f6c2 commit 422ccfc

9 files changed

Lines changed: 2372 additions & 33 deletions

File tree

‎src/components/DocHeaderChips.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import React from 'react';
2+
import { FaLock, FaUnlock, FaCloud, FaServer, FaFlask, FaStar } from 'react-icons/fa';
3+
4+
/**
5+
* DocHeaderChips - Display tier/offering badges at the top of doc pages
6+
* Replaces the old gray "Tier/Offering" box with a modern badge row
7+
*
8+
* Usage in MDX:
9+
* import DocHeaderChips from '@site/src/components/DocHeaderChips';
10+
* <DocHeaderChips chips={['enterprise', 'cloud']} />
11+
*
12+
* Available chip types: 'enterprise', 'oss', 'cloud', 'selfhosted', 'dedicated', 'beta', 'new'
13+
*/
14+
15+
const chipConfig = {
16+
enterprise: {
17+
label: 'Enterprise',
18+
icon: FaLock,
19+
bg: 'linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)',
20+
color: '#fff',
21+
borderColor: 'transparent',
22+
},
23+
oss: {
24+
label: 'Open Source',
25+
icon: FaUnlock,
26+
bg: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
27+
color: '#fff',
28+
borderColor: 'transparent',
29+
},
30+
cloud: {
31+
label: 'Cloud',
32+
icon: FaCloud,
33+
bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
34+
color: '#fff',
35+
borderColor: 'transparent',
36+
},
37+
selfhosted: {
38+
label: 'Self-hosted',
39+
icon: FaServer,
40+
bg: 'rgba(16, 185, 129, 0.1)',
41+
color: '#059669',
42+
borderColor: '#10b981',
43+
},
44+
dedicated: {
45+
label: 'Dedicated',
46+
icon: FaServer,
47+
bg: 'rgba(59, 130, 246, 0.1)',
48+
color: '#2563eb',
49+
borderColor: '#3b82f6',
50+
},
51+
beta: {
52+
label: 'Beta',
53+
icon: FaFlask,
54+
bg: 'rgba(245, 158, 11, 0.1)',
55+
color: '#d97706',
56+
borderColor: '#f59e0b',
57+
},
58+
new: {
59+
label: 'New',
60+
icon: FaStar,
61+
bg: 'rgba(236, 72, 153, 0.1)',
62+
color: '#db2777',
63+
borderColor: '#ec4899',
64+
},
65+
};
66+
67+
export default function DocHeaderChips({ chips = [] }) {
68+
if (!chips || chips.length === 0) return null;
69+
70+
return (
71+
<div className="doc-chips-container">
72+
{chips.map((chip) => {
73+
const config = chipConfig[chip.toLowerCase()];
74+
if (!config) return null;
75+
const Icon = config.icon;
76+
const isPrimary = ['enterprise', 'oss', 'cloud'].includes(chip.toLowerCase());
77+
78+
return (
79+
<span
80+
key={chip}
81+
className={`doc-chip ${isPrimary ? 'doc-chip--primary' : 'doc-chip--secondary'}`}
82+
style={{
83+
background: config.bg,
84+
color: config.color,
85+
border: isPrimary ? 'none' : `1px solid ${config.borderColor}`,
86+
}}
87+
>
88+
<Icon size={12} />
89+
{config.label}
90+
</span>
91+
);
92+
})}
93+
<style>{`
94+
.doc-chips-container {
95+
display: flex;
96+
flex-wrap: wrap;
97+
gap: 0.5rem;
98+
margin-bottom: 1.5rem;
99+
margin-top: -0.5rem;
100+
}
101+
.doc-chip {
102+
display: inline-flex;
103+
align-items: center;
104+
gap: 0.375rem;
105+
padding: 0.375rem 0.75rem;
106+
font-size: 0.75rem;
107+
font-weight: 600;
108+
text-transform: uppercase;
109+
letter-spacing: 0.04em;
110+
border-radius: 6px;
111+
white-space: nowrap;
112+
}
113+
.doc-chip--primary {
114+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
115+
}
116+
.doc-chip--secondary {
117+
background: transparent !important;
118+
}
119+
html[data-theme="dark"] .doc-chip--secondary {
120+
border-color: currentColor !important;
121+
opacity: 0.9;
122+
}
123+
`}</style>
124+
</div>
125+
);
126+
}
127+

‎src/components/SidebarBadge.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import { FaLock, FaUnlock, FaCloud } from 'react-icons/fa';
3+
4+
/**
5+
* SidebarBadge - Small badge/chip for sidebar labels with clear Enterprise vs OSS distinction
6+
*
7+
* Usage in sidebar label customization or MDX:
8+
* <SidebarBadge type="oss" />
9+
* <SidebarBadge type="enterprise" />
10+
* <SidebarBadge type="cloud" />
11+
*/
12+
13+
const badgeTypes = {
14+
oss: {
15+
label: 'OSS',
16+
icon: FaUnlock,
17+
bg: '#10b981',
18+
color: '#fff',
19+
},
20+
enterprise: {
21+
label: 'Enterprise',
22+
icon: FaLock,
23+
bg: '#7c3aed',
24+
color: '#fff',
25+
},
26+
cloud: {
27+
label: 'Cloud',
28+
icon: FaCloud,
29+
bg: '#3b82f6',
30+
color: '#fff',
31+
},
32+
beta: {
33+
label: 'Beta',
34+
icon: null,
35+
bg: 'rgba(245, 158, 11, 0.15)',
36+
color: '#d97706',
37+
},
38+
new: {
39+
label: 'New',
40+
icon: null,
41+
bg: 'rgba(236, 72, 153, 0.15)',
42+
color: '#db2777',
43+
},
44+
};
45+
46+
export default function SidebarBadge({ type = 'oss', showIcon = true }) {
47+
const config = badgeTypes[type.toLowerCase()];
48+
if (!config) return null;
49+
const Icon = config.icon;
50+
const isPrimary = ['oss', 'enterprise', 'cloud'].includes(type.toLowerCase());
51+
52+
return (
53+
<span
54+
className="sidebar-badge-v2"
55+
style={{
56+
background: config.bg,
57+
color: config.color,
58+
padding: isPrimary ? '0.125rem 0.4rem' : '0.1rem 0.35rem',
59+
fontSize: '0.625rem',
60+
fontWeight: 600,
61+
textTransform: 'uppercase',
62+
letterSpacing: '0.03em',
63+
borderRadius: '4px',
64+
display: 'inline-flex',
65+
alignItems: 'center',
66+
gap: '0.2rem',
67+
marginLeft: '0.4rem',
68+
verticalAlign: 'middle',
69+
lineHeight: 1,
70+
boxShadow: isPrimary ? '0 1px 2px rgba(0,0,0,0.1)' : 'none',
71+
}}
72+
>
73+
{showIcon && Icon && <Icon size={8} />}
74+
{config.label}
75+
</span>
76+
);
77+
}
78+

‎src/components/SidebarCategoryIcon.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import {
3+
FaBook,
4+
FaRocket,
5+
FaCloud,
6+
FaCode,
7+
FaCog,
8+
FaShieldAlt,
9+
FaPlug,
10+
FaDatabase,
11+
FaServer,
12+
FaTerminal,
13+
FaLightbulb,
14+
FaGraduationCap,
15+
FaTools,
16+
FaLayerGroup,
17+
FaProjectDiagram,
18+
FaChartLine,
19+
FaLock,
20+
} from 'react-icons/fa';
21+
import {
22+
SiKubernetes,
23+
SiDocker,
24+
SiGithubactions
25+
} from 'react-icons/si';
26+
27+
/**
28+
* SidebarCategoryIcon - Icon component for sidebar top-level categories
29+
*
30+
* Usage: Import and use in custom sidebar item components
31+
*
32+
* @param {string} category - The category identifier
33+
*/
34+
35+
const categoryIcons = {
36+
// Main categories
37+
'integration-testing': FaPlug,
38+
'api-testing': FaRocket,
39+
'keploy-cloud': FaCloud,
40+
'quickstart': FaRocket,
41+
'quickstarts': FaRocket,
42+
'concepts': FaLightbulb,
43+
'explanation': FaBook,
44+
'installation': FaTerminal,
45+
'configuration': FaCog,
46+
'running-keploy': FaTerminal,
47+
'ci-cd': SiGithubactions,
48+
'security': FaShieldAlt,
49+
'operation': FaTools,
50+
51+
// Language/Framework categories
52+
'java': FaCode,
53+
'golang': FaCode,
54+
'python': FaCode,
55+
'javascript': FaCode,
56+
'typescript': FaCode,
57+
58+
// Infrastructure
59+
'docker': SiDocker,
60+
'kubernetes': SiKubernetes,
61+
'k8s': SiKubernetes,
62+
63+
// Features
64+
'mocking': FaDatabase,
65+
'mock-registry': FaLayerGroup,
66+
'deduplication': FaProjectDiagram,
67+
'test-generation': FaChartLine,
68+
69+
// Other
70+
'server': FaServer,
71+
'gsoc': FaGraduationCap,
72+
'hacktoberfest': FaGraduationCap,
73+
'enterprise': FaLock,
74+
'dependencies': FaLayerGroup,
75+
};
76+
77+
export function getCategoryIcon(categoryLabel) {
78+
const key = categoryLabel.toLowerCase().replace(/\s+/g, '-');
79+
return categoryIcons[key] || null;
80+
}
81+
82+
export default function SidebarCategoryIcon({ category, size = 16, className = '' }) {
83+
const Icon = getCategoryIcon(category);
84+
85+
if (!Icon) return null;
86+
87+
return (
88+
<span
89+
className={`sidebar-category-icon ${className}`}
90+
style={{
91+
display: 'inline-flex',
92+
alignItems: 'center',
93+
justifyContent: 'center',
94+
width: '24px',
95+
height: '24px',
96+
marginRight: '0.5rem',
97+
borderRadius: '6px',
98+
background: 'rgba(139, 92, 246, 0.1)',
99+
color: '#7c3aed',
100+
flexShrink: 0,
101+
}}
102+
>
103+
<Icon size={size} />
104+
<style>{`
105+
html[data-theme="dark"] .sidebar-category-icon {
106+
background: rgba(139, 92, 246, 0.15);
107+
color: #a78bfa;
108+
}
109+
`}</style>
110+
</span>
111+
);
112+
}
113+
114+
// Export icon mapping for use in sidebar configuration
115+
export { categoryIcons };
116+

0 commit comments

Comments
 (0)