Merge pull request WATonomous#52 from WATonomous/feat/51-use-react-markdown

fix(WATonomous#51): Convert server instructions to markdown

Author: jimmyygit

components/Check.js

@@ -4,38 +4,27 @@ import { PauseIcon } from '@heroicons/react/outline';
 import { ExclamationCircleIcon } from '@heroicons/react/outline';
 import { ClockIcon } from '@heroicons/react/solid';
 import { Modal, Button } from 'react-bootstrap';
-import { CopyBlock, atomOneLight } from 'react-code-blocks';
 import moment from 'moment';
 import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import CodeBlock from '../components/CodeBlock';
 
 const getInstructionBody = (name, machineName) => {
-  if (name === 'Bastion') {
-    return (
-      <>
-        <CopyBlock
-          text={`ssh <username>@bastion.watonomous.ca`}
-          language="shell"
-          theme={atomOneLight}
-          showLineNumbers={false}
-          codeBlock
-        />
-      </>
-    );
-  } else {
-    return (
-      <>
-        <div>
-          <CopyBlock
-            text={`ssh -i </path/to/ssh_key> -J <username>@bastion.watonomous.ca <username>@${machineName}`}
-            language="shell"
-            theme={atomOneLight}
-            showLineNumbers={false}
-            codeBlock
-          />
-        </div>
-      </>
-    );
-  }
+  const sshInstructions =
+    name === 'Bastion'
+      ? `ssh <username>@bastion.watonomous.ca`
+      : `ssh -i </path/to/ssh_key> -J <username>@bastion.watonomous.ca <username>@${machineName}`;
+  const instructionBody = `
+  Access ${name}${
+    name !== 'Bastion'
+      ? ' by using Bastion as an [SSH jumphost](https://www.tecmint.com/access-linux-server-using-a-jump-host/)'
+      : ''
+  }:
+  ~~~shell
+  ${sshInstructions}
+  ~~~
+  `;
+  return instructionBody;
 };
 
 const Check = ({ name, checksData, FQDN, machineName }) => {
@@ -121,15 +110,9 @@ const Check = ({ name, checksData, FQDN, machineName }) => {
             <Modal.Title>{name}</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            Access {name} by using Bastion as an{' '}
-            <a
-              className="text-blue-500"
-              href="https://www.tecmint.com/access-linux-server-using-a-jump-host/"
-            >
-              SSH jumphost
-            </a>
-            : <br /> <br />
-            {getInstructionBody(name, machineName)}
+            <ReactMarkdown components={{ code: CodeBlock }}>
+              {getInstructionBody(name, machineName)}
+            </ReactMarkdown>
           </Modal.Body>
           <Modal.Footer>
             <Button variant="secondary" onClick={handleClose}>

components/CodeBlock.js

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { ClipboardListIcon } from '@heroicons/react/outline';
+import { ClipboardCheckIcon } from '@heroicons/react/solid';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+function CodeBlock({ node, inline, className, children, ...props }) {
+  const [copied, setCopied] = useState(false);
+  const match = /language-(\w+)/.exec(className || '');
+  const code = String(children).replace(/\n$/, '');
+  const codeBlock =
+    !inline && match ? (
+      <SyntaxHighlighter style={prism} language={match[1]} {...props}>
+        {code}
+      </SyntaxHighlighter>
+    ) : (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    );
+
+  return (
+    <div className="relative">
+      {codeBlock}
+      <button
+        className="absolute top-2.5 right-1 p-2 bg-gray-100 rounded"
+        onClick={() => {
+          navigator.clipboard.writeText(code);
+          setCopied(true);
+        }}
+      >
+        {copied ? (
+          <ClipboardCheckIcon className="h-5 w-5 text-green-500" />
+        ) : (
+          <ClipboardListIcon className="h-5 w-5 text-black" />
+        )}
+      </button>
+    </div>
+  );
+}
+
+export default CodeBlock;