Fix links

Author: MartinBraquet

web/components/links.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export const CustomLink = ({href, children}: { href?: string; children: React.ReactNode }) => {
+  if (!href) return <>{children}</>
+
+  // If href is internal, use Next.js Link
+  if (href.startsWith('/')) {
+    return <Link href={href}>{children}</Link>
+  }
+
+  // For external links, fall back to <a>
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  )
+}

web/components/markdown.tsx

@@ -1,36 +1,19 @@
 import {PageBase} from "web/components/page-base";
 import {Col} from "web/components/layout/col";
 import ReactMarkdown from "react-markdown";
-
-import Link from "next/link";
 import {SEO} from "web/components/SEO";
 import {capitalize} from "lodash";
+import {CustomLink} from "web/components/links";
 
 type Props = {
   content: string;
   filename: string;
 };
 
-const MarkdownLink = ({href, children}: { href?: string; children: React.ReactNode }) => {
-  if (!href) return <>{children}</>
-
-  // If href is internal, use Next.js Link
-  if (href.startsWith('/')) {
-    return <Link href={href}>{children}</Link>
-  }
-
-  // For external links, fall back to <a>
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer">
-      {children}
-    </a>
-  )
-}
-
-export const CompassMarkdown = ({children}: { children: string }) => {
+export const CustomMarkdown = ({children}: { children: string }) => {
   return <ReactMarkdown
     components={{
-      a: ({node: _node, children, ...props}) => <MarkdownLink {...props}>{children}</MarkdownLink>
+      a: ({node: _node, children, ...props}) => <CustomLink {...props}>{children}</CustomLink>
     }}
   >
     {children}
@@ -48,7 +31,7 @@ export default function MarkdownPage({content, filename}: Props) {
       />
       <Col className="items-center mb-8">
         <Col className='w-full rounded px-3 py-4 sm:px-6 space-y-4 custom-link'>
-          <CompassMarkdown>{content}</CompassMarkdown>
+          <CustomMarkdown>{content}</CustomMarkdown>
         </Col>
       </Col>
     </PageBase>

web/pages/news.tsx

@@ -4,10 +4,10 @@ import {PageBase} from "web/components/page-base"
 import {SEO} from "web/components/SEO"
 import {Col} from "web/components/layout/col"
 import {Title} from "web/components/widgets/title"
-import Link from "next/link"
 import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator"
 import {githubRepoSlug} from "common/constants";
-import {CompassMarkdown} from "web/components/markdown";
+import {CustomMarkdown} from "web/components/markdown";
+import {CustomLink} from "web/components/links";
 
 type Release = {
   id: number
@@ -66,11 +66,11 @@ export default function WhatsNew() {
                   </span>
                 </div>
                 <div className="mt-4 mb-4 prose prose-neutral dark:prose-invert text-ink-1000">
-                  <CompassMarkdown>
+                  <CustomMarkdown>
                     {formatPullLinks(release.body || "_No release notes provided._")}
-                  </CompassMarkdown>
+                  </CustomMarkdown>
                 </div>
-                <Link href={release.html_url}>View on GitHub</Link>
+                <CustomLink href={release.html_url}>View on GitHub</CustomLink>
               </div>
             ))}
           </Col>