From 390aee8f6f1a28e7c3f0d9505e904a1bb3410ed3 Mon Sep 17 00:00:00 2001
From: Cecilia Sanare <admin@cecilias.me>
Date: Sun, 20 Aug 2023 21:09:51 -0500
Subject: [PATCH] feat: added support for commands and going back in history

---
 app/components/common/Prism.tsx              |  31 +++
 app/components/common/Typography.tsx         |   2 +-
 app/components/terminal/WSH.module.scss      |   1 +
 app/components/terminal/WSH.tsx              |   7 +-
 app/components/terminal/WSHInput.module.scss |  37 +++
 app/components/terminal/WSHInput.tsx         |  65 ++++++
 app/components/web-osx/Window.module.scss    |  10 +
 app/components/web-osx/Window.tsx            |  42 ++--
 app/components/web-osx/WindowResizer.tsx     |  13 +-
 app/services/history.ts                      |  71 ++++++
 app/services/storage.ts                      |  25 ++
 app/utils/guards.ts                          |   9 +
 package.json                                 |   4 +-
 tsconfig.json                                |   2 +-
 yarn.lock                                    | 232 +++++++++++++++++++
 15 files changed, 525 insertions(+), 26 deletions(-)
 create mode 100644 app/components/common/Prism.tsx
 create mode 100644 app/components/terminal/WSHInput.module.scss
 create mode 100644 app/components/terminal/WSHInput.tsx
 create mode 100644 app/services/history.ts
 create mode 100644 app/services/storage.ts
 create mode 100644 app/utils/guards.ts

diff --git a/app/components/common/Prism.tsx b/app/components/common/Prism.tsx
new file mode 100644
index 0000000..ceabed3
--- /dev/null
+++ b/app/components/common/Prism.tsx
@@ -0,0 +1,31 @@
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export type PrismProps = {
+  className?: string;
+  children: string | string[];
+};
+
+export function Prism({ className, children }: PrismProps) {
+  return (
+    <div className={className}>
+      <SyntaxHighlighter
+        language="shell"
+        style={tomorrow}
+        customStyle={{ backgroundColor: 'transparent', padding: 0, margin: 0, font: 'inherit', fontSize: 'inherit' }}
+        codeTagProps={{
+          style: {
+            font: 'inherit',
+          },
+        }}
+        lineProps={{
+          style: {
+            font: 'inherit',
+          },
+        }}
+      >
+        {children}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
diff --git a/app/components/common/Typography.tsx b/app/components/common/Typography.tsx
index 0169411..362c1fd 100644
--- a/app/components/common/Typography.tsx
+++ b/app/components/common/Typography.tsx
@@ -25,7 +25,7 @@ export function Typography<
   const Element: React.ElementType = as ?? type ?? TypographyDefaultElement;
 
   const className = useReadOnlyCachedState(() => {
-    return classnames(styles.typography, styles[type], externalClassName);
+    return classnames(styles.typography, styles[type as string], externalClassName);
   }, [type, externalClassName]);
 
   return (
diff --git a/app/components/terminal/WSH.module.scss b/app/components/terminal/WSH.module.scss
index 989ce29..8c09359 100644
--- a/app/components/terminal/WSH.module.scss
+++ b/app/components/terminal/WSH.module.scss
@@ -1,2 +1,3 @@
 .shell {
+  font-family: 'Roboto Mono', monospace;
 }
diff --git a/app/components/terminal/WSH.tsx b/app/components/terminal/WSH.tsx
index bc20854..90e48b2 100644
--- a/app/components/terminal/WSH.tsx
+++ b/app/components/terminal/WSH.tsx
@@ -1,9 +1,14 @@
 import { Window } from '../web-osx/Window';
+import { WSHInput } from './WSHInput';
 
 export type WSHProps = {
   demo?: boolean;
 };
 
 export function WSH({ demo }: WSHProps) {
-  return <Window preventEvents={demo} />;
+  return (
+    <Window preventEvents={demo}>
+      <WSHInput />
+    </Window>
+  );
 }
diff --git a/app/components/terminal/WSHInput.module.scss b/app/components/terminal/WSHInput.module.scss
new file mode 100644
index 0000000..1dfc6e9
--- /dev/null
+++ b/app/components/terminal/WSHInput.module.scss
@@ -0,0 +1,37 @@
+.container {
+  position: relative;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 16px;
+  margin-left: 20px;
+  line-height: 1.5;
+
+  .prism {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  &:before {
+    content: '$';
+    user-select: none;
+    position: absolute;
+    top: 0;
+    left: -20px;
+  }
+
+  .input {
+    color: transparent;
+    caret-color: white;
+    background: transparent;
+    padding: 0;
+    border: none;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    font: inherit;
+    resize: none;
+  }
+}
diff --git a/app/components/terminal/WSHInput.tsx b/app/components/terminal/WSHInput.tsx
new file mode 100644
index 0000000..fdc9be1
--- /dev/null
+++ b/app/components/terminal/WSHInput.tsx
@@ -0,0 +1,65 @@
+import { KeyboardEvent, useCallback, useState } from 'react';
+import * as styles from './WSHInput.module.scss';
+import { History } from '../../services/history';
+import { Prism } from '../common/Prism';
+
+export type WSHInputProps = {
+  onSubmit?: (value: string) => void;
+};
+
+export function WSHInput({ onSubmit }: WSHInputProps) {
+  const [value, setValue] = useState('');
+
+  const onSubmitInternal = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>, value: string, ignore: boolean = false) => {
+      e.preventDefault();
+
+      if (!ignore) {
+        History.add(value);
+      }
+
+      onSubmit?.(value);
+      setValue('');
+    },
+    [onSubmit]
+  );
+
+  return (
+    <div className={styles.container}>
+      <Prism className={styles.prism}>{value}</Prism>
+      <textarea
+        className={styles.input}
+        spellCheck={false}
+        value={value}
+        onChange={({ target }) => setValue(target.value)}
+        onKeyDown={(e) => {
+          const { metaKey, ctrlKey, key } = e;
+
+          if (metaKey && key === 'k') {
+            // CMD + K - Clears out the terminal window
+            onSubmitInternal(e, 'clear', true);
+          } else if (ctrlKey && key === 'u') {
+            // Ctrl + U - Clears out the current line
+            e.preventDefault();
+
+            setValue('');
+          } else if (key === 'ArrowUp') {
+            // Up - Navigates to the prior history
+            e.preventDefault();
+
+            setValue(History.next());
+          } else if (key === 'ArrowDown') {
+            // Up - Navigates to more current history
+            e.preventDefault();
+
+            setValue(History.previous() ?? '');
+          } else if (key === 'Enter') {
+            // Enter - Submits the current input
+
+            onSubmitInternal(e, value);
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/app/components/web-osx/Window.module.scss b/app/components/web-osx/Window.module.scss
index 13b0289..cdc4783 100644
--- a/app/components/web-osx/Window.module.scss
+++ b/app/components/web-osx/Window.module.scss
@@ -8,9 +8,19 @@
 }
 
 .window {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   border-radius: 6px;
   background-color: rgb(27, 29, 35);
   box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px;
   z-index: 9999;
 }
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 15px;
+}
diff --git a/app/components/web-osx/Window.tsx b/app/components/web-osx/Window.tsx
index b211803..1d1dc41 100644
--- a/app/components/web-osx/Window.tsx
+++ b/app/components/web-osx/Window.tsx
@@ -4,6 +4,7 @@ import * as styles from './Window.module.scss';
 import { Menu } from './Menu';
 import classNames from 'classnames';
 import { WindowResizer } from './WindowResizer';
+import { isNullable } from '../../utils/guards';
 
 export type WindowProps = {
   children?: ReactNode;
@@ -11,8 +12,8 @@ export type WindowProps = {
 };
 
 export function Window({ children, preventEvents }: WindowProps) {
-  const containerRef = useRef<HTMLDivElement>();
-  const windowRef = useRef<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const windowRef = useRef<HTMLDivElement>(null);
   const [zoom, setZoom] = useState(false);
 
   const className = useReadOnlyCachedState(() => {
@@ -20,13 +21,18 @@ export function Window({ children, preventEvents }: WindowProps) {
   }, [preventEvents]);
 
   useDidUpdateEffect(() => {
-    const { top, left, right, bottom } = containerRef.current.getBoundingClientRect();
+    if (isNullable(containerRef.current) || isNullable(windowRef.current)) return;
+
+    const containerElement = containerRef.current;
+    const windowElement = windowRef.current;
+
+    const { top, left, right, bottom } = containerElement.getBoundingClientRect();
 
     if (zoom) {
-      windowRef.current.style.position = 'fixed';
+      windowElement.style.position = 'fixed';
     }
 
-    windowRef.current
+    windowElement
       .animate(
         [
           {
@@ -52,27 +58,27 @@ export function Window({ children, preventEvents }: WindowProps) {
       )
       .finished.then(() => {
         if (zoom) {
-          windowRef.current.style.borderRadius = '0';
-          windowRef.current.style.top = '0';
-          windowRef.current.style.left = '0';
-          windowRef.current.style.right = '0';
-          windowRef.current.style.bottom = '0';
+          windowElement.style.borderRadius = '0';
+          windowElement.style.top = '0';
+          windowElement.style.left = '0';
+          windowElement.style.right = '0';
+          windowElement.style.bottom = '0';
         } else {
-          windowRef.current.style.borderRadius = '';
-          windowRef.current.style.position = '';
-          windowRef.current.style.top = '';
-          windowRef.current.style.left = '';
-          windowRef.current.style.right = '';
-          windowRef.current.style.bottom = '';
+          windowElement.style.borderRadius = '';
+          windowElement.style.position = '';
+          windowElement.style.top = '';
+          windowElement.style.left = '';
+          windowElement.style.right = '';
+          windowElement.style.bottom = '';
         }
       });
-  }, [zoom]);
+  }, [zoom, containerRef, windowRef]);
 
   return (
     <WindowResizer className={className} ref={containerRef} debug>
       <div className={styles.window} ref={windowRef}>
         <Menu onZoom={() => setZoom(!zoom)} />
-        {children}
+        <div className={styles.content}>{children}</div>
       </div>
     </WindowResizer>
   );
diff --git a/app/components/web-osx/WindowResizer.tsx b/app/components/web-osx/WindowResizer.tsx
index 8acabd6..5e9b793 100644
--- a/app/components/web-osx/WindowResizer.tsx
+++ b/app/components/web-osx/WindowResizer.tsx
@@ -1,7 +1,8 @@
-import React, { ReactNode, useState, ComponentProps, useRef, useEffect, forwardRef } from 'react';
+import React, { ReactNode, useState, ComponentProps, useRef, useEffect, forwardRef, ForwardedRef } from 'react';
 import { useCachedState, useReadOnlyCachedState } from '@rain-cafe/react-utils';
 import * as styles from './WindowResizer.module.scss';
 import classNames from 'classnames';
+import { isNullable } from '../../utils/guards';
 
 export type WindowResizerProps = {
   children: ReactNode;
@@ -20,7 +21,7 @@ export const WindowResizer = forwardRef(function WindowResizer(
     height: externalHeight,
     ...props
   }: WindowResizerProps,
-  externalRef: React.MutableRefObject<HTMLDivElement>
+  externalRef: ForwardedRef<HTMLDivElement>
 ) {
   const className = useReadOnlyCachedState(() => {
     return classNames(styles.container, externalClassName);
@@ -28,10 +29,14 @@ export const WindowResizer = forwardRef(function WindowResizer(
   const [height, setHeight] = useCachedState(() => externalHeight, [externalHeight]);
   const [width, setWidth] = useCachedState(() => externalWidth, [externalWidth]);
   const [resizer, setResizer] = useState<HTMLDivElement | null>(null);
-  const containerRef: React.MutableRefObject<HTMLDivElement> = externalRef || useRef<HTMLDivElement>();
+  const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    typeof externalRef === 'function' ? null : externalRef
+  );
 
   useEffect(() => {
     const onResize = (e: MouseEvent) => {
+      if (isNullable(resizer) || isNullable(containerRef.current)) return;
+
       if (resizer.classList.contains(styles.right) || resizer.classList.contains(styles.corner)) {
         setWidth(e.clientX - containerRef.current.getBoundingClientRect().left);
       }
@@ -52,7 +57,7 @@ export const WindowResizer = forwardRef(function WindowResizer(
     return () => window.removeEventListener('mousemove', onResize);
   }, [resizer]);
 
-  const onBeginResize = (e) => {
+  const onBeginResize = (e: React.MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
     setResizer(e.currentTarget);
 
diff --git a/app/services/history.ts b/app/services/history.ts
new file mode 100644
index 0000000..3149331
--- /dev/null
+++ b/app/services/history.ts
@@ -0,0 +1,71 @@
+import { ScopedStorage } from './storage';
+// import { Bubbles } from '../dynamic/utils-bubbles.js';
+
+export class ScopedHistory<T extends string> {
+  private storage: ScopedStorage<T>;
+  index: number | null = null;
+  private _list: string[];
+
+  constructor(scope: T) {
+    this.storage = new ScopedStorage(scope);
+    this._list = [];
+  }
+
+  add(command: string): void {
+    this.list.unshift(command);
+    this.store(this.list);
+    this.reset();
+  }
+
+  next(): string {
+    if (this.index === null) {
+      this.index = 0;
+    } else if (this.index >= this.list.length - 1) {
+      this.index = this.list.length - 1;
+      // Bubbles.Instance.add({
+      //   message: `We've hit the edge of the universe, nothing to see here...`,
+      // });
+    } else {
+      this.index = this.index + 1;
+    }
+
+    return this.list[this.index];
+  }
+
+  previous(): string | undefined {
+    if (this.index === null || this.index <= -1) {
+      this.index = -1;
+      // Bubbles.Instance.add({
+      //   message: `We'll you've got to start somewhere!`,
+      // });
+    } else {
+      this.index = this.index - 1;
+    }
+
+    return this.list[this.index];
+  }
+
+  reset(): void {
+    this.index = null;
+  }
+
+  clear(): void {
+    this._list = [];
+    this.store(this._list);
+  }
+
+  store(history: string[]): void {
+    this.storage.set('history', JSON.stringify(history));
+  }
+
+  get list(): string[] {
+    if (!this._list) {
+      this._list = JSON.parse(this.storage.get('history') || '[]');
+      this.store(this._list);
+    }
+
+    return this._list;
+  }
+}
+
+export const History = new ScopedHistory('utils.rains.cafe');
diff --git a/app/services/storage.ts b/app/services/storage.ts
new file mode 100644
index 0000000..2e8a23e
--- /dev/null
+++ b/app/services/storage.ts
@@ -0,0 +1,25 @@
+import { isNonNullable } from '../utils/guards';
+
+export class ScopedStorage<T extends string> {
+  private scope: T;
+
+  constructor(scope: T) {
+    this.scope = scope;
+  }
+
+  set(key: string, value?: string | null) {
+    if (isNonNullable(value)) {
+      localStorage.setItem(this.key(key), value);
+    } else {
+      localStorage.removeItem(this.key(key));
+    }
+  }
+
+  get(key: string): string | null {
+    return localStorage.getItem(this.key(key));
+  }
+
+  key<K extends string>(key: K): `${T}:${K}` {
+    return `${this.scope}:${key}`;
+  }
+}
diff --git a/app/utils/guards.ts b/app/utils/guards.ts
new file mode 100644
index 0000000..ac92363
--- /dev/null
+++ b/app/utils/guards.ts
@@ -0,0 +1,9 @@
+export type Nullable<T> = Extract<T, null | undefined>;
+
+export function isNullable<T>(value: T): value is Nullable<T> {
+  return value === undefined || value === null;
+}
+
+export function isNonNullable<T>(value: T): value is NonNullable<T> {
+  return !isNullable(value);
+}
diff --git a/package.json b/package.json
index d8cdc14..4ed2385 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "react-dom": "^18.2.0",
     "react-polymorphic-types": "^2.0.0",
     "react-router": "^6.14.2",
-    "react-router-dom": "^6.14.2"
+    "react-router-dom": "^6.14.2",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@parcel/packager-raw-url": "2.9.3",
@@ -28,6 +29,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.17",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
     "eslint": "^8.46.0",
diff --git a/tsconfig.json b/tsconfig.json
index 36cd6ae..0566185 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "incremental": true,
diff --git a/yarn.lock b/yarn.lock
index 53500c6..39ea874 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -385,6 +385,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.3.1":
+  version: 7.22.10
+  resolution: "@babel/runtime@npm:7.22.10"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 524d41517e68953dbc73a4f3616b8475e5813f64e28ba89ff5fca2c044d535c2ea1a3f310df1e5bb06162e1f0b401b5c4af73fe6e2519ca2450d9d8c44cf268d
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
   version: 7.22.5
   resolution: "@babel/template@npm:7.22.5"
@@ -1855,6 +1864,7 @@ __metadata:
     "@testing-library/user-event": ^14.4.3
     "@types/jest": ^29.5.3
     "@types/react": ^18.2.17
+    "@types/react-syntax-highlighter": ^15.5.7
     "@typescript-eslint/eslint-plugin": ^6.2.1
     "@typescript-eslint/parser": ^6.2.1
     "@uiw/github-corners": ^1.5.15
@@ -1873,6 +1883,7 @@ __metadata:
     react-polymorphic-types: ^2.0.0
     react-router: ^6.14.2
     react-router-dom: ^6.14.2
+    react-syntax-highlighter: ^15.5.0
     ts-jest: ^29.1.1
     ts-node: ^10.9.1
     typescript: ^5.1.6
@@ -2189,6 +2200,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^2.0.0":
+  version: 2.3.5
+  resolution: "@types/hast@npm:2.3.5"
+  dependencies:
+    "@types/unist": ^2
+  checksum: e435e9fbf6afc616ade377d2246a632fb75f4064be4bfd619b67a1ba0d9935d75968a18fbdb66535dfb5e77ef81f4b9b56fd8f35c1cffa34b48ddb0287fec91e
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -2265,6 +2285,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-syntax-highlighter@npm:^15.5.7":
+  version: 15.5.7
+  resolution: "@types/react-syntax-highlighter@npm:15.5.7"
+  dependencies:
+    "@types/react": "*"
+  checksum: 1918d01baaa9bf485093fb04167d0dc87131be708bd68d32d3f614c0e7dba05de765fc62df139fa1972836b13e27983a2d89552eda5b5a38691a4ec300949648
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:^18.2.17":
   version: 18.2.18
   resolution: "@types/react@npm:18.2.18"
@@ -2313,6 +2342,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/unist@npm:^2":
+  version: 2.0.7
+  resolution: "@types/unist@npm:2.0.7"
+  checksum: b97a219554e83431f19a93ff113306bf0512909292815e8f32964e47d041c505af1aaa2a381c23e137c4c0b962fad58d4ce9c5c3256642921a466be43c1fc715
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.0
   resolution: "@types/yargs-parser@npm:21.0.0"
@@ -3044,6 +3080,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-legacy@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-entities-legacy@npm:1.1.4"
+  checksum: fe03a82c154414da3a0c8ab3188e4237ec68006cbcd681cf23c7cfb9502a0e76cd30ab69a2e50857ca10d984d57de3b307680fff5328ccd427f400e559c3a811
+  languageName: node
+  linkType: hard
+
+"character-entities@npm:^1.0.0":
+  version: 1.2.4
+  resolution: "character-entities@npm:1.2.4"
+  checksum: e1545716571ead57beac008433c1ff69517cd8ca5b336889321c5b8ff4a99c29b65589a701e9c086cda8a5e346a67295e2684f6c7ea96819fe85cbf49bf8686d
+  languageName: node
+  linkType: hard
+
+"character-reference-invalid@npm:^1.0.0":
+  version: 1.1.4
+  resolution: "character-reference-invalid@npm:1.1.4"
+  checksum: 20274574c70e05e2f81135f3b93285536bc8ff70f37f0809b0d17791a832838f1e49938382899ed4cb444e5bbd4314ca1415231344ba29f4222ce2ccf24fea0b
+  languageName: node
+  linkType: hard
+
 "chokidar@npm:>=3.0.0 <4.0.0":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
@@ -3187,6 +3244,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^1.0.0":
+  version: 1.0.8
+  resolution: "comma-separated-tokens@npm:1.0.8"
+  checksum: 0adcb07174fa4d08cf0f5c8e3aec40a36b5ff0c2c720e5e23f50fe02e6789d1d00a67036c80e0c1e1539f41d3e7f0101b074039dd833b4e4a59031b659d6ca0d
+  languageName: node
+  linkType: hard
+
 "commander@npm:^7.0.0, commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -4072,6 +4136,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fault@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "fault@npm:1.0.4"
+  dependencies:
+    format: ^0.2.0
+  checksum: 5ac610d8b09424e0f2fa8cf913064372f2ee7140a203a79957f73ed557c0e79b1a3d096064d7f40bde8132a69204c1fe25ec23634c05c6da2da2039cff26c4e7
+  languageName: node
+  linkType: hard
+
 "fb-watchman@npm:^2.0.0":
   version: 2.0.2
   resolution: "fb-watchman@npm:2.0.2"
@@ -4166,6 +4239,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"format@npm:^0.2.0":
+  version: 0.2.2
+  resolution: "format@npm:0.2.2"
+  checksum: 646a60e1336250d802509cf24fb801e43bd4a70a07510c816fa133aa42cdbc9c21e66e9cc0801bb183c5b031c9d68be62e7fbb6877756e52357850f92aa28799
+  languageName: node
+  linkType: hard
+
 "fs-minipass@npm:^2.0.0":
   version: 2.1.0
   resolution: "fs-minipass@npm:2.1.0"
@@ -4487,6 +4567,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-parse-selector@npm:^2.0.0":
+  version: 2.2.5
+  resolution: "hast-util-parse-selector@npm:2.2.5"
+  checksum: 22ee4afbd11754562144cb3c4f3ec52524dafba4d90ee52512902d17cf11066d83b38f7bdf6ca571bbc2541f07ba30db0d234657b6ecb8ca4631587466459605
+  languageName: node
+  linkType: hard
+
+"hastscript@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "hastscript@npm:6.0.0"
+  dependencies:
+    "@types/hast": ^2.0.0
+    comma-separated-tokens: ^1.0.0
+    hast-util-parse-selector: ^2.0.0
+    property-information: ^5.0.0
+    space-separated-tokens: ^1.0.0
+  checksum: 5e50b85af0d2cb7c17979cb1ddca75d6b96b53019dd999b39e7833192c9004201c3cee6445065620ea05d0087d9ae147a4844e582d64868be5bc6b0232dfe52d
+  languageName: node
+  linkType: hard
+
+"highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
+  version: 10.7.3
+  resolution: "highlight.js@npm:10.7.3"
+  checksum: defeafcd546b535d710d8efb8e650af9e3b369ef53e28c3dc7893eacfe263200bba4c5fcf43524ae66d5c0c296b1af0870523ceae3e3104d24b7abf6374a4fea
+  languageName: node
+  linkType: hard
+
 "html-encoding-sniffer@npm:^3.0.0":
   version: 3.0.0
   resolution: "html-encoding-sniffer@npm:3.0.0"
@@ -4690,6 +4797,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-alphabetical@npm:1.0.4"
+  checksum: 6508cce44fd348f06705d377b260974f4ce68c74000e7da4045f0d919e568226dc3ce9685c5a2af272195384df6930f748ce9213fc9f399b5d31b362c66312cb
+  languageName: node
+  linkType: hard
+
+"is-alphanumerical@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-alphanumerical@npm:1.0.4"
+  dependencies:
+    is-alphabetical: ^1.0.0
+    is-decimal: ^1.0.0
+  checksum: e2e491acc16fcf5b363f7c726f666a9538dba0a043665740feb45bba1652457a73441e7c5179c6768a638ed396db3437e9905f403644ec7c468fb41f4813d03f
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -4771,6 +4895,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-decimal@npm:1.0.4"
+  checksum: ed483a387517856dc395c68403a10201fddcc1b63dc56513fbe2fe86ab38766120090ecdbfed89223d84ca8b1cd28b0641b93cb6597b6e8f4c097a7c24e3fb96
+  languageName: node
+  linkType: hard
+
 "is-extglob@npm:^2.1.1":
   version: 2.1.1
   resolution: "is-extglob@npm:2.1.1"
@@ -4801,6 +4932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^1.0.0":
+  version: 1.0.4
+  resolution: "is-hexadecimal@npm:1.0.4"
+  checksum: a452e047587b6069332d83130f54d30da4faf2f2ebaa2ce6d073c27b5703d030d58ed9e0b729c8e4e5b52c6f1dab26781bb77b7bc6c7805f14f320e328ff8cd5
+  languageName: node
+  linkType: hard
+
 "is-json@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-json@npm:2.0.1"
@@ -5810,6 +5948,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lowlight@npm:^1.17.0":
+  version: 1.20.0
+  resolution: "lowlight@npm:1.20.0"
+  dependencies:
+    fault: ^1.0.0
+    highlight.js: ~10.7.0
+  checksum: 14a1815d6bae202ddee313fc60f06d46e5235c02fa483a77950b401d85b4c1e12290145ccd17a716b07f9328bd5864aa2d402b6a819ff3be7c833d9748ff8ba7
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^5.1.1":
   version: 5.1.1
   resolution: "lru-cache@npm:5.1.1"
@@ -6508,6 +6656,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "parse-entities@npm:2.0.0"
+  dependencies:
+    character-entities: ^1.0.0
+    character-entities-legacy: ^1.0.0
+    character-reference-invalid: ^1.0.0
+    is-alphanumerical: ^1.0.0
+    is-decimal: ^1.0.0
+    is-hexadecimal: ^1.0.0
+  checksum: 7addfd3e7d747521afac33c8121a5f23043c6973809756920d37e806639b4898385d386fcf4b3c8e2ecf1bc28aac5ae97df0b112d5042034efbe80f44081ebce
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -6677,6 +6839,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prismjs@npm:^1.27.0":
+  version: 1.29.0
+  resolution: "prismjs@npm:1.29.0"
+  checksum: 007a8869d4456ff8049dc59404e32d5666a07d99c3b0e30a18bd3b7676dfa07d1daae9d0f407f20983865fd8da56de91d09cb08e6aa61f5bc420a27c0beeaf93
+  languageName: node
+  linkType: hard
+
+"prismjs@npm:~1.27.0":
+  version: 1.27.0
+  resolution: "prismjs@npm:1.27.0"
+  checksum: 85c7f4a3e999073502cc9e1882af01e3709706369ec254b60bff1149eda701f40d02512acab956012dc7e61cfd61743a3a34c1bd0737e8dbacd79141e5698bbc
+  languageName: node
+  linkType: hard
+
 "process@npm:^0.11.10":
   version: 0.11.10
   resolution: "process@npm:0.11.10"
@@ -6715,6 +6891,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^5.0.0":
+  version: 5.6.0
+  resolution: "property-information@npm:5.6.0"
+  dependencies:
+    xtend: ^4.0.0
+  checksum: fcf87c6542e59a8bbe31ca0b3255a4a63ac1059b01b04469680288998bcfa97f341ca989566adbb63975f4d85339030b82320c324a511532d390910d1c583893
+  languageName: node
+  linkType: hard
+
 "psl@npm:^1.1.33":
   version: 1.9.0
   resolution: "psl@npm:1.9.0"
@@ -6830,6 +7015,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-syntax-highlighter@npm:^15.5.0":
+  version: 15.5.0
+  resolution: "react-syntax-highlighter@npm:15.5.0"
+  dependencies:
+    "@babel/runtime": ^7.3.1
+    highlight.js: ^10.4.1
+    lowlight: ^1.17.0
+    prismjs: ^1.27.0
+    refractor: ^3.6.0
+  peerDependencies:
+    react: ">= 0.14.0"
+  checksum: c082b48f30f8ba8d0c55ed1d761910630860077c7ff5793c4c912adcb5760df06436ed0ad62be0de28113aac9ad2af55eccd995f8eee98df53382e4ced2072fb
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"
@@ -6869,6 +7069,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"refractor@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "refractor@npm:3.6.0"
+  dependencies:
+    hastscript: ^6.0.0
+    parse-entities: ^2.0.0
+    prismjs: ~1.27.0
+  checksum: 39b01c4168c77c5c8486f9bf8907bbb05f257f15026057ba5728535815a2d90eed620468a4bfbb2b8ceefbb3ce3931a1be8b17152dbdbc8b0eef92450ff750a2
+  languageName: node
+  linkType: hard
+
 "regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.7":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
@@ -6876,6 +7087,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "regenerator-runtime@npm:0.14.0"
+  checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+  languageName: node
+  linkType: hard
+
 "regexp.prototype.flags@npm:^1.4.3, regexp.prototype.flags@npm:^1.5.0":
   version: 1.5.0
   resolution: "regexp.prototype.flags@npm:1.5.0"
@@ -7219,6 +7437,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^1.0.0":
+  version: 1.1.5
+  resolution: "space-separated-tokens@npm:1.1.5"
+  checksum: 8ef68f1cfa8ccad316b7f8d0df0919d0f1f6d32101e8faeee34ea3a923ce8509c1ad562f57388585ee4951e92d27afa211ed0a077d3d5995b5ba9180331be708
+  languageName: node
+  linkType: hard
+
 "sprintf-js@npm:~1.0.2":
   version: 1.0.3
   resolution: "sprintf-js@npm:1.0.3"
@@ -8023,6 +8248,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xtend@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "xtend@npm:4.0.2"
+  checksum: ac5dfa738b21f6e7f0dd6e65e1b3155036d68104e67e5d5d1bde74892e327d7e5636a076f625599dc394330a731861e87343ff184b0047fef1360a7ec0a5a36a
+  languageName: node
+  linkType: hard
+
 "xxhash-wasm@npm:^0.4.2":
   version: 0.4.2
   resolution: "xxhash-wasm@npm:0.4.2"