|
|
|
|
@ -1,37 +1,26 @@ |
|
|
|
|
import { Heading, Link, Stack, Text } from '@chakra-ui/react'; |
|
|
|
|
import { |
|
|
|
|
Flex, |
|
|
|
|
Heading, |
|
|
|
|
Link, |
|
|
|
|
ListItem, |
|
|
|
|
OrderedList, |
|
|
|
|
Stack, |
|
|
|
|
Table, |
|
|
|
|
Text, |
|
|
|
|
UnorderedList |
|
|
|
|
} from '@chakra-ui/react'; |
|
|
|
|
import NextLink from 'next/link'; |
|
|
|
|
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; |
|
|
|
|
|
|
|
|
|
import { Code } from './UI/docs' |
|
|
|
|
import { Code } from './UI/docs'; |
|
|
|
|
import { textStyles } from '../theme/foundations'; |
|
|
|
|
|
|
|
|
|
import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash'; |
|
|
|
|
import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go'; |
|
|
|
|
import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql'; |
|
|
|
|
import java from 'react-syntax-highlighter/dist/cjs/languages/prism/java'; |
|
|
|
|
import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript'; |
|
|
|
|
import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json'; |
|
|
|
|
import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python'; |
|
|
|
|
import sh from 'react-syntax-highlighter/dist/cjs/languages/prism/shell-session'; |
|
|
|
|
import solidity from 'react-syntax-highlighter/dist/cjs/languages/prism/solidity'; |
|
|
|
|
import swift from 'react-syntax-highlighter/dist/cjs/languages/prism/swift'; |
|
|
|
|
|
|
|
|
|
// syntax highlighting languages supported
|
|
|
|
|
SyntaxHighlighter.registerLanguage('bash', bash); |
|
|
|
|
SyntaxHighlighter.registerLanguage('go', go); |
|
|
|
|
SyntaxHighlighter.registerLanguage('graphql', graphql); |
|
|
|
|
SyntaxHighlighter.registerLanguage('java', java); |
|
|
|
|
SyntaxHighlighter.registerLanguage('javascript', javascript); |
|
|
|
|
SyntaxHighlighter.registerLanguage('json', json); |
|
|
|
|
SyntaxHighlighter.registerLanguage('python', python); |
|
|
|
|
SyntaxHighlighter.registerLanguage('sh', sh); |
|
|
|
|
SyntaxHighlighter.registerLanguage('solidity', solidity); |
|
|
|
|
SyntaxHighlighter.registerLanguage('swift', swift); |
|
|
|
|
const { header1, header2, header3, header4 } = textStyles; |
|
|
|
|
|
|
|
|
|
const MDXComponents = { |
|
|
|
|
// paragraphs
|
|
|
|
|
p: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Text mb={7} _last={{ mb: 0 }} size='sm' lineHeight={1.5}> |
|
|
|
|
<Text mb={7} lineHeight={1.5}> |
|
|
|
|
{children} |
|
|
|
|
</Text> |
|
|
|
|
); |
|
|
|
|
@ -42,7 +31,7 @@ const MDXComponents = { |
|
|
|
|
<NextLink href={href} passHref> |
|
|
|
|
<Link |
|
|
|
|
isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')} |
|
|
|
|
color='primary' |
|
|
|
|
variant='light' |
|
|
|
|
> |
|
|
|
|
{children} |
|
|
|
|
</Link> |
|
|
|
|
@ -52,64 +41,65 @@ const MDXComponents = { |
|
|
|
|
// headings
|
|
|
|
|
h1: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Heading as='h1' textAlign='start' fontSize='4xl' mb={5}> |
|
|
|
|
<Heading as='h1' textAlign='start' mb={5} {...header1}> |
|
|
|
|
{children} |
|
|
|
|
</Heading> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
h2: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Heading as='h2' textAlign='start' fontSize='3xl' mb={4}> |
|
|
|
|
<Heading as='h2' textAlign='start' mt='16 !important' mb={4} {...header2}> |
|
|
|
|
{children} |
|
|
|
|
</Heading> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
h3: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Heading as='h3' fontSize='2xl' mt={5} mb={2.5}> |
|
|
|
|
<Heading as='h3' mt={5} mb={2.5} {...header3}> |
|
|
|
|
{children} |
|
|
|
|
</Heading> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
h4: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Heading as='h4' fontSize='lg' mb={2.5}> |
|
|
|
|
<Heading as='h4' mb={2.5} {...header4}> |
|
|
|
|
{children} |
|
|
|
|
</Heading> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
// tables
|
|
|
|
|
table: ({ children }: any) => ( |
|
|
|
|
<Flex maxW='min(100%, 100vw)' overflowX='scroll'> |
|
|
|
|
<Table |
|
|
|
|
variant='striped' |
|
|
|
|
colorScheme='greenAlpha' |
|
|
|
|
border='1px' |
|
|
|
|
borderColor='blackAlpha.50' |
|
|
|
|
my={6} |
|
|
|
|
size={{ base: 'sm', lg: 'md' }} |
|
|
|
|
w='auto' |
|
|
|
|
> |
|
|
|
|
{children} |
|
|
|
|
</Table> |
|
|
|
|
</Flex> |
|
|
|
|
), |
|
|
|
|
// pre
|
|
|
|
|
pre: ({ children }: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Stack mb={5}> |
|
|
|
|
<pre>{children}</pre> |
|
|
|
|
</Stack> |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
pre: ({ children }: any) => ( |
|
|
|
|
<Stack mb={5}> |
|
|
|
|
<pre>{children}</pre> |
|
|
|
|
</Stack> |
|
|
|
|
), |
|
|
|
|
// code
|
|
|
|
|
code: (code: any) => { |
|
|
|
|
return ( |
|
|
|
|
<Code code={code} /> |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
// return !!code.inline ? (
|
|
|
|
|
// <Text
|
|
|
|
|
// as={'span'}
|
|
|
|
|
// padding='0.125em 0.25em'
|
|
|
|
|
// color='red.300'
|
|
|
|
|
// background='code-bg-contrast'
|
|
|
|
|
// borderRadius='0.25em'
|
|
|
|
|
// fontFamily='code'
|
|
|
|
|
// fontSize='sm'
|
|
|
|
|
// overflowY='scroll'
|
|
|
|
|
// >
|
|
|
|
|
// {code.children[0]}
|
|
|
|
|
// </Text>
|
|
|
|
|
// ) : (
|
|
|
|
|
// <Stack style={nightOwl}>
|
|
|
|
|
// {code.children[0]}
|
|
|
|
|
// </Stack>
|
|
|
|
|
// );
|
|
|
|
|
code: ({ children, ...props }: any) => <Code {...props}>{children}</Code>, |
|
|
|
|
// list
|
|
|
|
|
ul: ({children}: any) => { |
|
|
|
|
return <UnorderedList mb={7} px={4}>{children}</UnorderedList> |
|
|
|
|
}, |
|
|
|
|
ol: ({children}: any) => { |
|
|
|
|
return <OrderedList mb={7} px={4}>{children}</OrderedList> |
|
|
|
|
}, |
|
|
|
|
li: ({ children }: any) => { |
|
|
|
|
return <ListItem color='primary'>{children}</ListItem> |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
Corwin Smith
2 years ago
committed by
GitHub