feat: show cursor on terminal prompts

src/components/Terminal/CommandLine.js

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Prompt from './Prompt';
 import { css } from '@emotion/core';
+import Cursor from './Cursor';
 
-const CommandLine = ({ line, prompt, getTokenProps }) => (
+const CommandLine = ({ cursor, line, prompt, getTokenProps }) => (
   <div
     css={css`
       display: grid;
       grid-template-columns: 1ch 1fr;
       grid-gap: 1ch;
+      align-items: center;
     `}
   >
     <Prompt character={prompt} />
@@ -22,11 +24,13 @@ const CommandLine = ({ line, prompt, getTokenProps }) => (
         // eslint-disable-next-line react/jsx-key
         <span {...getTokenProps({ token, key })} />
       ))}
+      {cursor && <Cursor />}
     </div>
   </div>
 );
 
 CommandLine.propTypes = {
+  cursor: PropTypes.bool,
   line: PropTypes.arrayOf(PropTypes.object).isRequired,
   getTokenProps: PropTypes.func.isRequired,
   prompt: PropTypes.oneOf(['$', '>']),

src/components/Terminal/Cursor.js

@@ -18,6 +18,7 @@ const Cursor = () => (
       width: 1ch;
       height: 1.25em;
       animation: ${blink} 1s infinite;
+      vertical-align: middle;
     `}
   />
 );

src/components/Terminal/Shell.js

@@ -1,11 +1,22 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
 import Command from './Command';
+import CommandLine from './CommandLine';
 import theme from './theme';
 import rollupIntoCommands from './rollupIntoCommands';
+import { useTimeout } from '@newrelic/gatsby-theme-newrelic';
 
 const Shell = ({ highlight, code }) => {
+  const [step, setStep] = useState(0);
+  const { tokens, getTokenProps } = highlight;
+  const commands = rollupIntoCommands(tokens, code);
+  const shownCommands = commands.slice(0, step);
+
+  useTimeout(() => {
+    setStep((step) => step + 1);
+  }, 3000);
+
   return (
     <pre
       css={css`
@@ -40,21 +51,21 @@ const Shell = ({ highlight, code }) => {
       `}
     >
       <code>
-        {rollupIntoCommands(highlight.tokens, code).map((command, idx) => (
-          <Command
-            key={idx}
-            command={command}
-            getTokenProps={highlight.getTokenProps}
-          />
+        {shownCommands.map((command, idx) => (
+          <Command key={idx} command={command} getTokenProps={getTokenProps} />
         ))}
+        <CommandLine cursor line={[]} prompt="$" />
       </code>
     </pre>
   );
 };
 
 Shell.propTypes = {
   code: PropTypes.string.isRequired,
-  highlight: PropTypes.object,
+  highlight: PropTypes.shape({
+    tokens: PropTypes.array.isRequired,
+    getTokenProps: PropTypes.func.isRequired,
+  }),
 };
 
 export default Shell;