From ca27f28979c770459ee97d70dc70d63406acfd7b Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 14 Oct 2020 15:14:15 -0700
Subject: [PATCH] feat: create custom code block that renders a terminal for
 shell languages

---
 .../components/CodeBlock.js                    | 18 ++++++++++++++++++
 src/utils/codeBlock.js                         |  4 +++-
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js

diff --git a/src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js b/src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js
new file mode 100644
index 000000000..e10310918
--- /dev/null
+++ b/src/@newrelic/gatsby-theme-newrelic/components/CodeBlock.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import CodeBlock from '@newrelic/gatsby-theme-newrelic/src/components/CodeBlock';
+import Terminal from '../../../components/Terminal';
+import { isShellLanguage } from '../../../utils/codeBlock';
+
+const CustomCodeBlock = ({ language, children, ...props }) => {
+  return isShellLanguage(language) ? (
+    <Terminal>{children}</Terminal>
+  ) : (
+    <CodeBlock language={language} {...props}>
+      {children}
+    </CodeBlock>
+  );
+};
+
+CustomCodeBlock.propTypes = CodeBlock.propTypes;
+
+export default CustomCodeBlock;
diff --git a/src/utils/codeBlock.js b/src/utils/codeBlock.js
index 8360d4f4a..3e0e092b7 100644
--- a/src/utils/codeBlock.js
+++ b/src/utils/codeBlock.js
@@ -6,6 +6,8 @@ export const isCodeBlock = (element) =>
 
 export const isShellCommand = (element) =>
   isCodeBlock(element) &&
-  SHELL_LANGUAGES.includes(
+  isShellLanguage(
     element.props?.children?.props?.className?.replace('language-', '')
   );
+
+export const isShellLanguage = (language) => SHELL_LANGUAGES.includes(language);