portfolio/mdx-components.tsx at main · bastianbeckeru/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { cn } from '@/lib/utils';
import { slugify } from '@/utils/strings';
import type { MDXComponents } from 'mdx/types';
import { type HTMLAttributes } from 'react';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    ...customComponents,
  };
}

const customComponents = {
  h1: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h1 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h1>
  ),
  h2: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h2 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h2>
  ),
  h3: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h3 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h3>
  ),
  h4: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h4 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h4>
  ),
  h5: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h5 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h5>
  ),
  h6: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLHeadingElement>) => (
    <h6 id={slugify(String(children))} className={className} {...props}>
      {children}
    </h6>
  ),
  table: ({
    children,
    className,
    ...props
  }: HTMLAttributes<HTMLTableElement>) => (
    <div className='overflow-x-auto'>
      <table className={cn('w-auto', className)} {...props}>
        {children}
      </table>
    </div>
  ),
};