fix(mdx-Code): add more languages alias to Code

issue #699
sabertazimi · Apr 30, 2022 · a907a7d · a907a7d
1 parent bd9ac7d
commit a907a7d
Show file tree

Hide file tree

Showing 3 changed files with 263 additions and 24 deletions.
diff --git a/components/CodeBlocks/Code.tsx b/components/CodeBlocks/Code.tsx
@@ -4,27 +4,35 @@ import styles from './Code.module.css';
 
 interface Props extends HTMLProps<HTMLPreElement> {}
 
-const alias = {
-  md: 'Markdown',
-  markdown: 'Markdown',
-  js: 'JavaScript',
-  jsx: 'React',
-  javascript: 'JavaScript',
-  ts: 'TypeScript',
-  tsx: 'React',
-  typescript: 'TypeScript',
-  vue: 'Vue',
+const getAlias = (language: string) => {
+  switch (language) {
+    case 'html':
+      return 'HTML';
+    case 'css':
+      return 'CSS';
+    case 'json':
+      return 'JSON';
+    case 'md':
+    case 'markdown':
+      return 'Markdown';
+    case 'js':
+    case 'javascript':
+      return 'JavaScript';
+    case 'ts':
+    case 'typescript':
+      return 'TypeScript';
+    case 'jsx':
+    case 'tsx':
+      return 'React';
+    default:
+      return language?.charAt(0)?.toUpperCase() + language?.slice(1) || 'Code';
+  }
 };
 
-type AliasKey = keyof typeof alias;
-
-const getAlias = (language: string) =>
-  alias[language.toLowerCase() as AliasKey] ?? language;
-
 const Code = ({ children, className, ...props }: Props): JSX.Element => {
   const childrenElement = children as ReactElement;
   const language = getAlias(
-    (childrenElement?.props?.className as string)?.replace('language-', '') || 'Code'
+    (childrenElement?.props?.className as string)?.replace('language-', '')
   );
 
   return (

diff --git a/components/CodeBlocks/CodeBlocks.test.tsx b/components/CodeBlocks/CodeBlocks.test.tsx
@@ -25,6 +25,24 @@ describe('InlineCode', () => {
 });
 
 describe('Code', () => {
+  const languages = [
+    'html',
+    'css',
+    'json',
+    'md',
+    'markdown',
+    'js',
+    'javascript',
+    'ts',
+    'typescript',
+    'jsx',
+    'tsx',
+    'vue',
+    'go',
+    'java',
+    'rust',
+  ];
+
   test('should render correctly (snapshot)', () => {
     const { container } = render(<Code />);
 
@@ -41,13 +59,16 @@ describe('Code', () => {
     expect(container).toMatchSnapshot();
   });
 
-  test('should render language correctly (snapshot)', () => {
-    const { container } = render(
-      <Code>
-        <code className="language-ts">Code</code>
-      </Code>
-    );
+  test.each(languages)(
+    'should render language correctly (snapshot)',
+    language => {
+      const { container } = render(
+        <Code>
+          <code className={`language-${language}`}>Code</code>
+        </Code>
+      );
 
-    expect(container).toMatchSnapshot();
-  });
+      expect(container).toMatchSnapshot();
+    }
+  );
 });
diff --git a/components/CodeBlocks/__snapshots__/CodeBlocks.test.tsx.snap b/components/CodeBlocks/__snapshots__/CodeBlocks.test.tsx.snap
@@ -23,6 +23,111 @@ exports[`Code should render correctly (snapshot) 1`] = `
 `;
 
 exports[`Code should render language correctly (snapshot) 1`] = `
+<div>
+  <pre
+    class="code"
+    data-language="HTML"
+  >
+    <code
+      class="language-html"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 2`] = `
+<div>
+  <pre
+    class="code"
+    data-language="CSS"
+  >
+    <code
+      class="language-css"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 3`] = `
+<div>
+  <pre
+    class="code"
+    data-language="JSON"
+  >
+    <code
+      class="language-json"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 4`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Markdown"
+  >
+    <code
+      class="language-md"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 5`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Markdown"
+  >
+    <code
+      class="language-markdown"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 6`] = `
+<div>
+  <pre
+    class="code"
+    data-language="JavaScript"
+  >
+    <code
+      class="language-js"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 7`] = `
+<div>
+  <pre
+    class="code"
+    data-language="JavaScript"
+  >
+    <code
+      class="language-javascript"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 8`] = `
 <div>
   <pre
     class="code"
@@ -37,6 +142,111 @@ exports[`Code should render language correctly (snapshot) 1`] = `
 </div>
 `;
 
+exports[`Code should render language correctly (snapshot) 9`] = `
+<div>
+  <pre
+    class="code"
+    data-language="TypeScript"
+  >
+    <code
+      class="language-typescript"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 10`] = `
+<div>
+  <pre
+    class="code"
+    data-language="React"
+  >
+    <code
+      class="language-jsx"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 11`] = `
+<div>
+  <pre
+    class="code"
+    data-language="React"
+  >
+    <code
+      class="language-tsx"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 12`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Vue"
+  >
+    <code
+      class="language-vue"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 13`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Go"
+  >
+    <code
+      class="language-go"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 14`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Java"
+  >
+    <code
+      class="language-java"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
+exports[`Code should render language correctly (snapshot) 15`] = `
+<div>
+  <pre
+    class="code"
+    data-language="Rust"
+  >
+    <code
+      class="language-rust"
+    >
+      Code
+    </code>
+  </pre>
+</div>
+`;
+
 exports[`InlineCode should render children correctly (snapshot) 1`] = `
 <div>
   <code