Merge pull request #33 from ethereum/codeSnippet

Code snippet
pull/26459/head^2
Nicolás Quiroz 2 years ago committed by GitHub
commit 5364cb731e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      src/components/MDXComponents.tsx
  2. 38
      src/components/UI/docs/Code.tsx
  3. 1
      src/components/UI/docs/index.tsx
  4. 14
      src/theme/foundations/textStyles.ts
  5. 3
      src/theme/index.ts
  6. 7
      src/utils/getProgrammingLanguageName.ts
  7. 1
      src/utils/index.ts

@ -1,7 +1,8 @@
import { Heading, Link, Stack, Text } from '@chakra-ui/react';
import NextLink from 'next/link';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { nightOwl } 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';
@ -26,8 +27,6 @@ SyntaxHighlighter.registerLanguage('sh', sh);
SyntaxHighlighter.registerLanguage('solidity', solidity);
SyntaxHighlighter.registerLanguage('swift', swift);
import { getProgrammingLanguageName } from '../utils';
const MDXComponents = {
// paragraphs
p: ({ children }: any) => {
@ -86,10 +85,12 @@ const MDXComponents = {
<pre>{children}</pre>
</Stack>
);
}
},
// code
// code: (code: any) => {
// const language = getProgrammingLanguageName(code);
code: (code: any) => {
return (
<Code code={code} />
)
// return !!code.inline ? (
// <Text
@ -109,7 +110,7 @@ const MDXComponents = {
// {code.children[0]}
// </Stack>
// );
// }
}
};
export default MDXComponents;

@ -0,0 +1,38 @@
// Libraries
import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
interface Props {
code: any;
}
export const Code: FC<Props> = ({ code }) => {
return (
!!code.inline ?
(
<Text
as='span'
background='code-bg'
textStyle='inline-code-snippet'
pb={2}
mb={-2}
>
{code.children[0]}
</Text>
)
:
(
<Stack>
<ChakraCode
overflow='auto'
p={6}
background='code-bg-contrast'
textStyle='code-block'
color='code-text'
>
{code.children[0]}
</ChakraCode>
</Stack>
)
);
};

@ -0,0 +1 @@
export * from './Code';

@ -90,6 +90,20 @@ export const textStyles = {
textAlign: 'center',
fontSize: 'sm'
},
'inline-code-snippet': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: 'md',
lineHeight: 4,
letterSpacing: '1%'
},
'code-block': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: 'md',
lineHeight: '21.12px',
letterSpacing: '1%'
},
// TODO: refactor w/ semantic tokens for light/dark mode
'link-light': {},
// TODO: refactor w/ semantic tokens for light/dark mode

@ -29,7 +29,8 @@ const overrides = {
body: { _light: 'gray.800', _dark: 'yellow.50' },
'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' },
bg: { _light: 'yellow.50', _dark: 'gray.800' }
'code-text': { _light: 'green.50', _dark: 'green.50' },
bg: { _light: 'yellow.50', _dark: 'gray.800' },
}
}
};

@ -1,7 +0,0 @@
// WIP
export const getProgrammingLanguageName = (code: any) => {
// const hasLanguageNameProperty = Object.keys(code.node.properties).length > 0;
console.log({ code });
// return hasLanguageNameProperty ? code.node.properties.className[0].split('-')[1] : 'bash';
};

@ -1 +0,0 @@
export * from './getProgrammingLanguageName';
Loading…
Cancel
Save