From f09d02aecdebe64bcf9b63f5643eb92f38937de0 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 23 Nov 2022 12:53:08 -0500 Subject: [PATCH] extract and merge Code component Merges "Code" component from within MDXComponents to recently added UI/docs/Code.tsx, merging and cleaning up conflicts. Moves all syntax highlighter logic to this component. --- src/components/MDXComponents.tsx | 65 +-------------------- src/components/UI/docs/Code.tsx | 96 +++++++++++++++++++++++--------- 2 files changed, 72 insertions(+), 89 deletions(-) diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx index e5296c99fa..1694ad0889 100644 --- a/src/components/MDXComponents.tsx +++ b/src/components/MDXComponents.tsx @@ -1,72 +1,11 @@ -import { Flex, Heading, Link, Stack, Table, Text, useColorMode } from '@chakra-ui/react'; +import { Flex, Heading, Link, Stack, Table, Text } from '@chakra-ui/react'; import NextLink from 'next/link'; -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism'; - -// import { Code } from './UI/docs' - -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'; +import { Code } from './UI/docs' import { textStyles } from '../theme/foundations'; -import { getProgrammingLanguageName } from '../utils'; - -// syntax highlighting languages supported -SyntaxHighlighter.registerLanguage('bash', bash); -SyntaxHighlighter.registerLanguage('terminal', 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 Code = ({ className, children, ...code }: any) => { - const { colorMode } = useColorMode(); - const isDark = colorMode === 'dark'; - const isTerminal = className?.includes('terminal') ; - if (code.inline) - return ( - - {children[0]} - - ); - if (className?.startsWith('language-')) { - return ( - - {children} - - ); - } - return {children[0]}; -}; - const MDXComponents = { // paragraphs p: ({ children }: any) => { diff --git a/src/components/UI/docs/Code.tsx b/src/components/UI/docs/Code.tsx index 7be53c6ac6..1ccb3a671e 100644 --- a/src/components/UI/docs/Code.tsx +++ b/src/components/UI/docs/Code.tsx @@ -1,38 +1,82 @@ // Libraries -import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react'; -import { FC } from 'react'; +import { Code as ChakraCode, Stack, Text, useColorMode } from '@chakra-ui/react'; +import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism'; +import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; + +// Constants, utilities +import { CLASSNAME_PREFIX } from '../../../constants'; +import { getProgrammingLanguageName } from '../../../utils'; + +// Programming lang syntax highlighters +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('terminal', 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); + interface Props { - code: any; + className: string + children: React.ReactNode + [key: string]: any } - -export const Code: FC = ({ code }) => { - return ( - !!code.inline ? - ( - - {code.children[0]} - - ) - : - ( +export const Code: React.FC = ({ className, children, ...code }: any) => { + const { colorMode } = useColorMode(); + const isDark = colorMode === 'dark'; + const isTerminal = className?.includes('terminal') ; + if (code.inline) + return ( + + {children[0]} + + ); + if (isTerminal) + return ( - {code.children[0]} + {children[0]} - ) - ); + ); + if (className?.startsWith(CLASSNAME_PREFIX)) + return ( + + {children} + + ); + return {children[0]}; };