forked from
standard.site/standard.site
Standard.site landing page built in Next.js
1import type { MDXComponents } from 'mdx/types'
2import Link from 'next/link'
3import { ClickableHeading } from '@/app/components/docs/ClickableHeading'
4import { DocsPageMenu } from '@/app/components/docs/DocsPageMenu'
5
6export function useMDXComponents(components: MDXComponents): MDXComponents {
7 return {
8 h1: ({ children }) => (
9 <div className="flex items-start justify-between gap-2">
10 <ClickableHeading level={1}>{children}</ClickableHeading>
11 <DocsPageMenu />
12 </div>
13 ),
14 h2: ({ children }) => (
15 <ClickableHeading level={2}>{children}</ClickableHeading>
16 ),
17 h3: ({ children }) => (
18 <ClickableHeading level={3}>{children}</ClickableHeading>
19 ),
20 h4: ({ children }) => (
21 <ClickableHeading level={4}>{children}</ClickableHeading>
22 ),
23 p: ({ children }) => (
24 <p className="text-base sm:text-lg leading-relaxed tracking-tight text-muted mb-4">
25 {children}
26 </p>
27 ),
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 },
46 strong: ({ children }) => (
47 <strong className="font-medium text-base-content">{children}</strong>
48 ),
49 code: ({ children }) => (
50 <code className="font-mono text-sm bg-base-200 px-1.5 py-0.5 rounded text-base-content">
51 {children}
52 </code>
53 ),
54 pre: ({ children }) => (
55 <pre className="font-mono text-sm bg-base-200 border border-border rounded-xl p-4 overflow-x-auto mb-6">
56 {children}
57 </pre>
58 ),
59 ul: ({ children }) => (
60 <ul className="list-disc list-outside ml-5 text-muted mb-4 space-y-2">
61 {children}
62 </ul>
63 ),
64 ol: ({ children }) => (
65 <ol className="list-decimal list-outside ml-5 text-muted mb-4 space-y-2">
66 {children}
67 </ol>
68 ),
69 li: ({ children }) => (
70 <li className="text-base sm:text-lg leading-relaxed tracking-tight">
71 {children}
72 </li>
73 ),
74 blockquote: ({ children }) => (
75 <blockquote className="border-l-4 border-border pl-4 italic text-muted my-6">
76 {children}
77 </blockquote>
78 ),
79 hr: () => <hr className="h-px w-full bg-border my-8 border-0" />,
80 table: ({ children }) => (
81 <div className="overflow-x-auto mb-6">
82 <table className="w-full text-base border-collapse">
83 {children}
84 </table>
85 </div>
86 ),
87 thead: ({ children }) => (
88 <thead>{children}</thead>
89 ),
90 tbody: ({ children }) => (
91 <tbody>{children}</tbody>
92 ),
93 tr: ({ children }) => (
94 <tr>{children}</tr>
95 ),
96 th: ({ children }) => (
97 <th className="text-left font-medium text-base-content border-b border-border px-3 py-2">
98 {children}
99 </th>
100 ),
101 td: ({ children }) => (
102 <td className="text-muted border-b border-border px-3 py-2">
103 {children}
104 </td>
105 ),
106 ...components,
107 }
108}