[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"
/>

Author: jpg619

src/components/link.js

@@ -26,14 +26,19 @@ const GatsbyLinkWithoutSxProps = React.forwardRef(function GatsbyLinkWithoutSxPr
   return <GatsbyLink ref={ref} {...omit(props, 'sx', 'underline', 'hoverColor', 'muted')} />
 })
 
-const Link = React.forwardRef(function Link({to, href, ...props}, ref) {
+const Link = React.forwardRef(function Link({to, href, showUnderline = false, sx, ...props}, ref) {
   const localPath = getLocalPath(href)
 
+  const linkStyles = {
+    ...sx,
+    ...(showUnderline && {textDecoration: 'underline'}),
+  }
+
   if (to || localPath !== null) {
-    return <PrimerLink ref={ref} as={GatsbyLinkWithoutSxProps} to={to || localPath} {...props} />
+    return <PrimerLink ref={ref} as={GatsbyLinkWithoutSxProps} to={to || localPath} sx={linkStyles} {...props} />
   }
 
-  return <PrimerLink ref={ref} href={href} {...props} />
+  return <PrimerLink ref={ref} href={href} sx={linkStyles} {...props} />
 })
 
 export const LinkNoUnderline = React.forwardRef(function LinkNoUnderline({sx, ...props}, ref) {

src/components/page-footer.js

@@ -46,8 +46,14 @@ const Contributors = ({contributors = [], latestCommit}) => {
       </Box>
       {latestCommit ? (
         <Text sx={{fontSize: 1, mt: 1}}>
-          Last edited by <Link href={`https://github.com/${latestCommit.login}`}>{latestCommit.login}</Link> on{' '}
-          <Link href={latestCommit.url}>{format(new Date(latestCommit.date))}</Link>
+          Last edited by{' '}
+          <Link href={`https://github.com/${latestCommit.login}`} showUnderline={true}>
+            {latestCommit.login}
+          </Link>{' '}
+          on{' '}
+          <Link href={latestCommit.url} showUnderline={true}>
+            {format(new Date(latestCommit.date))}
+          </Link>
         </Text>
       ) : null}
     </>

src/components/table-of-contents.js

@@ -26,7 +26,14 @@ const TableOfContentsItems = ({items, depth}) => (
 )
 
 const TableOfContents = ({'aria-labelledby': ariaLabelledBy, items, depth = 1, ...props}) => (
-  <NavList aria-labelledby={ariaLabelledBy} {...props}>
+  <NavList
+    aria-labelledby={ariaLabelledBy}
+    {...props}
+    sx={{
+      textDecoration: 'underline',
+      ...props.sx,
+    }}
+  >
     <TableOfContentsItems items={items} depth={depth} />
   </NavList>
 )