(docs) add exec buttons to the terminal

jcubic · Sep 22, 2024 · 54e80b6 · 54e80b6
1 parent a3c4974
commit 54e80b6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/docs/src/components/Terminal/index.tsx b/docs/src/components/Terminal/index.tsx
@@ -1,5 +1,5 @@
-import { useLayoutEffect, useRef } from 'react';
-import type { JQueryStatic } from 'jquery.terminal';
+import { useLayoutEffect, useRef, useState, RefObject } from 'react';
+import type { JQueryTerminal, JQueryStatic } from 'jquery.terminal';
 import clsx from 'clsx';
 
 import useIsBrowser from '@docusaurus/useIsBrowser';
@@ -16,17 +16,20 @@ const replReady = () => {
 
 import { initTerminal, destroyTerminal } from './terminal';
 
-type InterpreterProps = {
-  className?: string;
-};
-
 const terminal_scripts = [
   'https://cdn.jsdelivr.net/npm/jquery',
   'https://cdn.jsdelivr.net/combine/gh/jcubic/jquery.terminal@devel/js/jquery.terminal.min.js,npm/js-polyfills/keyboard.js,npm/jquery.terminal/js/less.js'
-]
+];
 
-export default function Interpreter({ className }: InterpreterProps): JSX.Element {
+function command(term: RefObject<JQueryTerminal>) {
+  const options = { typing: true, delay: 100 };
+  return (command: string) => () => term.current.exec(command, options);
+}
+
+export default function Interpreter(): JSX.Element {
+  const [show_commands, set_show_commands] = useState<boolean>(false);
   const ref = useRef<HTMLDivElement>();
+  const term = useRef<JQueryTerminal>(null);
 
   const jQuery = (globalThis as any).jQuery as JQueryStatic;
 
@@ -36,10 +39,13 @@ export default function Interpreter({ className }: InterpreterProps): JSX.Elemen
 
   useScripts(!jQuery && terminal_scripts);
 
+  const exec = command(term);
+
   useLayoutEffect(() => {
     (function loop() {
       if (replReady() && styleReady()) {
-        initTerminal();
+        term.current = initTerminal();
+        set_show_commands(true);
       } else {
         setTimeout(loop, 100);
       }
@@ -62,7 +68,22 @@ export default function Interpreter({ className }: InterpreterProps): JSX.Elemen
         })}
       </Head>
       <div className={clsx('terminal', styles.marker)} ref={ref}></div>
-      <div className={clsx(styles.term, className)}/>
+      <div className={styles.term}/>
+      {show_commands && (
+        <div className={styles.commands}>
+          <p>Commands:</p>
+          <ul>
+            <li>
+              <button onClick={exec('source')}>source</button>
+            </li>
+            <li>
+              <button onClick={exec('github -u jcubic -r jquery.terminal')}>
+                github
+              </button>
+            </li>
+           </ul>
+        </div>
+      )}
     </>
   );
 };
diff --git a/docs/src/components/Terminal/styles.module.css b/docs/src/components/Terminal/styles.module.css
@@ -1,6 +1,6 @@
 .term {
     --background: white;
-    --color:#14232d;
+    --color: #14232d;
     --size: 1.2;
     --rows: 18;
     border-radius: 5px;
@@ -14,6 +14,18 @@
     --color: white;
 }
 
+.commands p {
+    margin: 0;
+}
+
+.commands ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 5px;
+}
+
 .marker {
     position: absolute;
     left: -9999999999px;

diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css
@@ -18,7 +18,7 @@
 .heroText {
     width: 40%;
 }
-.terminal {
+.terminal_container {
     width: 60%;
 }
 
@@ -36,7 +36,7 @@
     .container {
         flex-direction: column;
     }
-    .heroText, .terminal {
+    .heroText, .terminal_container {
         width: 100%;
     }
 }
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -21,7 +21,9 @@ function HomepageHeader() {
           a debugging tool, or creating interactive portfolio websites that resemble a terminal from
           GNU/Linux, macOS, or Windows WSL.</p>
         </aside>
-        <Terminal className={styles.terminal}/>
+        <div className={styles.terminal_container}>
+          <Terminal />
+        </div>
       </div>
     </header>
   );