jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix User Guide TOC — add heading IDs and smooth scroll anchor links

Browse Source 
Headings now render with id attributes derived from their text so
TOC anchor links (#getting-started, etc.) have targets. Internal
anchor clicks use scrollIntoView with smooth behavior instead of
full page navigation.
This commit is contained in:
Jordan Ramos
2026-06-24 17:52:37 -06:00
parent 627d957c96
commit 7866a8577a
1 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/UserGuideModal.js
View File

@@ -145,9 +145,38 @@ export default function UserGuideModal({ isOpen, onClose }) {
) : (
<ReactMarkdown
components={{
h1: ({ children }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#F8FAFC', marginBottom: '1rem', borderBottom: '1px solid rgba(14,165,233,0.2)', paddingBottom: '0.5rem' }}>{children}</h1>,
h2: ({ children }) => <h2 style={{ fontSize: '1.2rem', fontWeight: 600, color: '#0EA5E9', marginTop: '2rem', marginBottom: '0.75rem' }}>{children}</h2>,
h3: ({ children }) => <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#7DD3FC', marginTop: '1.5rem', marginBottom: '0.5rem' }}>{children}</h3>,
h1: ({ children }) => {
const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
return <h1 id={id} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#F8FAFC', marginBottom: '1rem', borderBottom: '1px solid rgba(14,165,233,0.2)', paddingBottom: '0.5rem' }}>{children}</h1>;
},
h2: ({ children }) => {
const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
return <h2 id={id} style={{ fontSize: '1.2rem', fontWeight: 600, color: '#0EA5E9', marginTop: '2rem', marginBottom: '0.75rem' }}>{children}</h2>;
},
h3: ({ children }) => {
const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
return <h3 id={id} style={{ fontSize: '1rem', fontWeight: 600, color: '#7DD3FC', marginTop: '1.5rem', marginBottom: '0.5rem' }}>{children}</h3>;
},
a: ({ href, children }) => {
// Handle internal anchor links — scroll within the modal
if (href && href.startsWith('#')) {
return (
<a
href={href}
onClick={(e) => {
e.preventDefault();
const targetId = href.slice(1);
const el = document.getElementById(targetId);
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}}
style={{ color: '#7DD3FC', textDecoration: 'none', borderBottom: '1px solid rgba(125,211,252,0.3)' }}
>
{children}
</a>
);
}
return <a href={href} target="_blank" rel="noopener noreferrer" style={{ color: '#7DD3FC', textDecoration: 'none' }}>{children}</a>;
},
p: ({ children }) => <p style={{ color: '#CBD5E1', lineHeight: 1.7, marginBottom: '0.75rem', fontSize: '0.875rem' }}>{children}</p>,
li: ({ children }) => <li style={{ color: '#CBD5E1', marginBottom: '0.35rem', fontSize: '0.875rem', lineHeight: 1.6 }}>{children}</li>,
ul: ({ children }) => <ul style={{ paddingLeft: '1.25rem', marginBottom: '0.75rem' }}>{children}</ul>,