(docs) add theme command

docs/src/components/Terminal/index.tsx

@@ -20,17 +20,18 @@ import github from './github';
 import echo from './echo';
 import source from './source';
 import record from './record';
+import theme from './theme';
 
 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,gh/jcubic/jquery.terminal@99526e255/js/less.js,npm/jquery.terminal/js/xml_formatting.js'
 ];
 
 function command(term: RefObject<JQueryTerminal>) {
-  const options = { typing: true, delay: 100 };
-  return (command: string) => () => {
+  const options = { typing: true, delay: 50 };
+  return (command: string, silent: boolean = false) => () => {
       setTimeout(() => {
-          term.current.focus().exec(command, options);
+          term.current.focus().exec(command, { ...options, silent });
       }, 0);
   };
 }
@@ -57,6 +58,7 @@ export default function Interpreter(): JSX.Element {
           github,
           source,
           echo,
+          theme,
           record,
           size(num: string) {
             this.css('--size', num);
@@ -102,7 +104,7 @@ export default function Interpreter(): JSX.Element {
               </button>
             </li>
             <li>
-              <button onClick={exec('size 1')}>size</button>
+              <button onClick={exec('theme', true)}>theme</button>
             </li>
            </ul>
         </div>

docs/src/components/Terminal/theme.ts

@@ -0,0 +1,14 @@
+import type { JQueryTerminal } from 'jquery.terminal';
+import themes from '@site/themes.json';
+import { shuffle } from '@site/src/utils';
+
+let index = 0;
+shuffle(themes);
+
+export default function theme(this: JQueryTerminal) {
+  const { background, foreground } = themes[index++ % themes.length];
+  this.css({
+    '--background': background,
+    '--color': foreground
+  });
+}

docs/src/utils.ts

@@ -4,3 +4,16 @@ export function omap<T extends unknown, U extends unknown>(object: Record<string
   });
   return Object.fromEntries(entries);
 }
+
+// ref: https://rosettacode.org/wiki/Knuth_shuffle#JavaScript
+export function shuffle<T>(arr: T[]) {
+  let rand: number, temp: T;
+
+    for (let i = arr.length - 1; i > 0; i -= 1) {
+        rand = Math.floor((i + 1) * Math.random());//get random between zero and i (inclusive)
+        temp = arr[rand];
+        arr[rand] = arr[i]; //swap i (last element) with random element.
+        arr[i] = temp;
+    }
+    return arr;
+}