@cryptotaxi247 / documentation-1 / commits / caa3cf4

[Fix]: Enhance link component to support underline styling and improvement (#1739)

### File Changes (3 files modified): 1. `link.js` - Enhanced Link component with configurable underline styling support 2. `src/components/contributors.js` - Applied underline styling to contributor and commit links for better accessibility 3. `table-of-contents.js` - Added underline styling to table of contents navigation links ### Summary: Enhanced the Link component to support optional underline styling through a showUnderline prop and applied underline styling to key navigation elements across the documentation site to improve link visibility and accessibility compliance. ### Changes Overview: - Added showUnderline prop to Link component for configurable text decoration - Applied underlines to contributor profile links and commit date links - Enhanced table of contents with underlined navigation links - Maintained backward compatibility with existing link styling ### Before <img width="359" height="408" alt="image" src="https://github.com/user-attachments/assets/8c953dbf-d57e-45ef-a392-dd5cd4cd63dc" /> <img width="307" height="358" alt="image" src="https://github.com/user-attachments/assets/d0df60bd-ab6a-4d5d-85ec-a1cbca23ac2f" /> ### After <img width="340" height="404" alt="image" src="https://github.com/user-attachments/assets/f5cb22d2-5791-4b37-a7b6-153db79f4d3c" /> <img width="307" height="358" alt="image" src="https://github.com/user-attachments/assets/1e360b38-1974-4b0a-b04e-90586d6692e4" />

Jithin Prabhakaran Girija committed Oct 8, 2025 at 13:17 UTC caa3cf4c857ac0e5d34fdfe83eea25b6ae16a455
3 files changed +24 -6
src/components/link.js
+8 -3
@@ -26,14 +26,19 @@ const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxPr
26 return <GatsbyLink ref={ref} {...omit(props, 'sx', 'underline', 'hoverColor', 'muted')} />
27 })
28
29 -const Link = React.forwardRef(function Link({to, href, ...props}, ref) {
29 +const Link = React.forwardRef(function Link({to, href, showUnderline = false, sx, ...props}, ref) {
30 const localPath = getLocalPath(href)
31
32 + const linkStyles = {
33 + ...sx,
34 + ...(showUnderline && {textDecoration: 'underline'}),
35 + }
36 +
37 if (to || localPath !== null) {
33 - return <PrimerLink ref={ref} as={GatsbyLinkWithoutSxProps} to={to || localPath} {...props} />
38 + return <PrimerLink ref={ref} as={GatsbyLinkWithoutSxProps} to={to || localPath} sx={linkStyles} {...props} />
39 }
40
36 - return <PrimerLink ref={ref} href={href} {...props} />
41 + return <PrimerLink ref={ref} href={href} sx={linkStyles} {...props} />
42 })
43
44 export const LinkNoUnderline = React.forwardRef(function LinkNoUnderline({sx, ...props}, ref) {
src/components/page-footer.js
+8 -2
@@ -46,8 +46,14 @@ const Contributors = ({contributors = [], latestCommit}) => {
46 </Box>
47 {latestCommit ? (
48 <Text sx={{fontSize: 1, mt: 1}}>
49 - Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
50 - <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
49 + Last edited by{' '}
50 + <Link href={`https://github.com/${latestCommit.login}`} showUnderline={true}>
51 + {latestCommit.login}
52 + </Link>{' '}
53 + on{' '}
54 + <Link href={latestCommit.url} showUnderline={true}>
55 + {format(new Date(latestCommit.date))}
56 + </Link>
57 </Text>
58 ) : null}
59 </>
src/components/table-of-contents.js
+8 -1
@@ -26,7 +26,14 @@ const TableOfContentsItems = ({items, depth}) => (
26 )
27
28 const TableOfContents = ({'aria-labelledby': ariaLabelledBy, items, depth = 1, ...props}) => (
29 - <NavList aria-labelledby={ariaLabelledBy} {...props}>
29 + <NavList
30 + aria-labelledby={ariaLabelledBy}
31 + {...props}
32 + sx={{
33 + textDecoration: 'underline',
34 + ...props.sx,
35 + }}
36 + >
37 <TableOfContentsItems items={items} depth={depth} />
38 </NavList>
39 )