CometCode/root-wrapper.js at master · CometCode-io/CometCode · 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
import { MDXProvider } from '@mdx-js/react';
import React from 'react';
import Code from './src/components/code';
import styled from '@emotion/styled';

const InlineCode = styled.code`
  background-color: rgb(1, 22, 39);
  color: rgb(214, 222, 235);
  padding: 0.2rem 0.3rem;
  font-family: 'Berlin Rounded', sans-serif;
  border-radius: 4px;
  font-size: 14px !important;
  font-weight: bold;
`;

const StyledImage = styled.img`
  max-width: 100%;
  display: block;
`;

const StyledText = styled.text`
  font-size: 16px;
`;

const StyledP = styled.p`
  font-weight: 400;
`;

const components = {
  pre: ({ children: { props } }) => {
    if (props.mdxType === 'code') {
      return (
        <Code
          fileName={props.metastring}
          codeString={props.children.trim()}
          language={props.className && props.className.replace('language-', '')}
          {...props}
        />
      );
    }
  },
  // eslint-disable-next-line react/display-name
  inlineCode: (a) => {
    return <InlineCode {...a} />;
  },
  // eslint-disable-next-line react/display-name
  img: (props) => <StyledImage {...props} />,
  // eslint-disable-next-line react/display-name
  text: (props) => <StyledText {...props} />,
  // eslint-disable-next-line react/display-name
  p: (props) => <StyledP {...props} />,
};

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>{element}</MDXProvider>
);