benjamin-chavez.com/mdx-components.tsx at master · benjamin-chavez/benjamin-chavez.com · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import type { MDXComponents } from 'mdx/types';
import Image from 'next/image';
import { cx } from 'cva.config';
import CodeBlockTitle from '@/components/code-block-title';
import CodeCopyButton from '@/components/code-copy-button';

export function useMDXComponents(): MDXComponents {
  return {
    h2: ({ className, ...props }: any) => (
      <h2
        className={cx(
          'mb-6 scroll-m-16 font-normal uppercase',
          'text-xl tracking-[.1rem] text-[#141414]',
          ' [&:not(:first-child)]:mt-16',
          className,
        )}
        {...props}
      />
    ),
    h3: ({ className, ...props }: any) => (
      <h3
        className={cx(
          'scroll-m-16 font-dosis font-normal',
          'text-lg uppercase text-[#141414]',
          className,
        )}
        {...props}
      />
    ),
    a: ({ className, href, ...props }: any) => {
      const isExternal = href?.startsWith('http');
      const isNoFollowLink = href?.startsWith('http://localhost:');

      return (
        <a
          href={href}
          className={cx(
            'font-light text-neutral-900 underline transition-all hover:text-[#008000]',
            className,
          )}
          target={isExternal ? '_blank' : '_self'}
          rel={
            isNoFollowLink
              ? 'nofollow'
              : isExternal
              ? 'noopener noreferrer'
              : undefined
          }
          {...props}
        />
      );
    },
    strong: ({ className, ...props }: any) => (
      <strong
        className={cx(
          'font-open-sans text-[0.94rem] font-normal text-neutral-600',
          className,
        )}
        {...props}
      />
    ),
    p: ({ className, ...props }: any) => (
      <p
        className={cx(
          'font-open-sans text-[0.94rem] font-light text-[#777777] ',
          className,
        )}
        {...props}
      />
    ),
    ul: ({ className, ...props }: any) => (
      <ul
        className={cx(
          'list-disc font-open-sans text-[0.94rem] text-[#777777]',
          className,
        )}
        {...props}
      />
    ),
    ol: ({ className, ...props }: any) => (
      <ol
        className={cx(
          'list-decimal font-open-sans text-[0.94rem] text-[#777777]',
          className,
        )}
        {...props}
      />
    ),
    li: ({ className, ...props }: any) => (
      <li
        className={cx(
          'mt-2 font-open-sans text-[0.94rem] font-light text-[#777777]',
          className,
        )}
        {...props}
      />
    ),
    Callout: (props: any) => (
      <div className="my-8 flex items-center rounded border border-gray-200 bg-[#F8F9FA] px-4 py-2 text-sm text-[#777777]">
        {props.emoji && (
          <div className="mr-4 flex w-4 items-center">{props.emoji}</div>
        )}
        <div className="w-full">{props.children}</div>
      </div>
    ),
    pre: (props: any) => (
      <pre
        className={cx(
          'px-0',
          'group relative m-0 overflow-x-auto rounded-md py-4',
          props.className,
        )}
        {...props}
      >
        <CodeCopyButton text={props.__rawstring__} />
        {props.children}
      </pre>
    ),
    code: ({ className, ...props }: any) => (
      <code className={cx('font-mono text-sm', className)} {...props} />
    ),
    Image: (props: any) => (
      <div className="flex w-full justify-center">
        <Image alt={props.alt} className="rounded-md" {...props} quality={100} />
      </div>
    ),
    CodeBlockTitle,
  };
}