fix: fix h4,h5 styling #315
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
There was a problem hiding this comment.
Pull request overview
This PR adds custom styling and anchor link functionality for h4 and h5 heading elements in the documentation content renderer, completing the heading hierarchy that was previously only implemented for h1, h2, and h3.
- Added h4 component renderer with styling and anchor link support
- Added h5 component renderer with styling and anchor link support
| return ( | ||
| <h4 | ||
| {...props} | ||
| className="text-md font-bold text-gray-900 mb-2 mt-5 group relative scroll-mt-20 transition-colors" |
There was a problem hiding this comment.
The className uses "text-md" which is not a valid Tailwind CSS class. Consider using "text-base" (16px) or "text-lg" (18px) instead. Tailwind's text size classes are: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc.
| className="text-md font-bold text-gray-900 mb-2 mt-5 group relative scroll-mt-20 transition-colors" | |
| className="text-lg font-bold text-gray-900 mb-2 mt-5 group relative scroll-mt-20 transition-colors" |
| h4: ({ node, children, ...props }) => { | ||
| const id = props.id || ''; | ||
| return ( | ||
| <h4 | ||
| {...props} | ||
| className="text-md font-bold text-gray-900 mb-2 mt-5 group relative scroll-mt-20 transition-colors" | ||
| > | ||
| <a | ||
| href={`#${id}`} | ||
| className="absolute -left-8 top-0.5 opacity-0 group-hover:opacity-100 transition-opacity" | ||
| onClick={(e) => handleAnchorClick(e, id)} | ||
| title="Copy link to section" | ||
| > | ||
| <LinkIcon className="h-4 w-4 text-gray-400 hover:text-gray-600" /> | ||
| </a> | ||
| {children} | ||
| </h4> | ||
| ); | ||
| }, | ||
| h5: ({ node, children, ...props }) => { | ||
| const id = props.id || ''; | ||
| return ( | ||
| <h5 | ||
| {...props} | ||
| className="text-[15px] font-bold text-gray-900 mb-2 mt-5 group relative scroll-mt-20 transition-colors" | ||
| > | ||
| <a | ||
| href={`#${id}`} | ||
| className="absolute -left-8 top-0.5 opacity-0 group-hover:opacity-100 transition-opacity" | ||
| onClick={(e) => handleAnchorClick(e, id)} | ||
| title="Copy link to section" | ||
| > | ||
| <LinkIcon className="h-4 w-4 text-gray-400 hover:text-gray-600" /> | ||
| </a> | ||
| {children} | ||
| </h5> | ||
| ); | ||
| }, |
There was a problem hiding this comment.
The h4 and h5 heading components contain significant code duplication with h1, h2, and h3 components. The structure is nearly identical except for the text size and spacing values. Consider extracting this into a reusable heading component that accepts level, textSize, margin, and iconSize as parameters to reduce duplication and improve maintainability.
1 participant
No description provided.