forked from
standard.site/standard.site
Standard.site landing page built in Next.js
Use Next.js Link for internal MDX links and add page menu to h1
+24
-9
+24
-9
mdx-components.tsx
+24
-9
mdx-components.tsx
···
1
1
import type { MDXComponents } from 'mdx/types'
2
+
import Link from 'next/link'
2
3
import { ClickableHeading } from '@/app/components/docs/ClickableHeading'
4
+
import { DocsPageMenu } from '@/app/components/docs/DocsPageMenu'
3
5
4
6
export function useMDXComponents(components: MDXComponents): MDXComponents {
5
7
return {
6
8
h1: ({ children }) => (
7
-
<ClickableHeading level={1}>{children}</ClickableHeading>
9
+
<div className="flex items-start justify-between gap-2">
10
+
<ClickableHeading level={1}>{children}</ClickableHeading>
11
+
<DocsPageMenu />
12
+
</div>
8
13
),
9
14
h2: ({ children }) => (
10
15
<ClickableHeading level={2}>{children}</ClickableHeading>
···
20
25
{children}
21
26
</p>
22
27
),
23
-
a: ({ href, children }) => (
24
-
<a
25
-
href={href}
26
-
className="text-base-content underline underline-offset-2 hover:text-muted transition-colors"
27
-
>
28
-
{children}
29
-
</a>
30
-
),
28
+
a: ({ href, children }) => {
29
+
const isInternal = href && (href.startsWith('/') || href.startsWith('#'))
30
+
const className = "text-base-content underline underline-offset-2 hover:text-muted transition-colors"
31
+
32
+
if (isInternal) {
33
+
return (
34
+
<Link href={href} className={className}>
35
+
{children}
36
+
</Link>
37
+
)
38
+
}
39
+
40
+
return (
41
+
<a href={href} className={className} target="_blank" rel="noopener noreferrer">
42
+
{children}
43
+
</a>
44
+
)
45
+
},
31
46
strong: ({ children }) => (
32
47
<strong className="font-medium text-base-content">{children}</strong>
33
48
),