Merge pull request #33 from ethereum/codeSnippet

Code snippet

src/components/MDXComponents.tsx

@@ -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;

src/components/UI/docs/Code.tsx

@@ -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>
+      )
+  );
+};

src/components/UI/docs/index.tsx

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

src/theme/foundations/textStyles.ts

@@ -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

src/theme/index.ts

@@ -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' },
     }
   }
 };

src/utils/getProgrammingLanguageName.ts

@@ -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';
-};

src/utils/index.ts

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