add syntax comparison slide

iclc2023/slides/package.json

@@ -12,14 +12,17 @@
     "@mdx-js/rollup": "^2.3.0",
     "@nanostores/persistent": "^0.7.0",
     "@nanostores/react": "^0.4.1",
+    "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/react": "workspace:*",
+    "@strudel.cycles/soundfonts": "workspace:*",
+    "@strudel.cycles/tonal": "workspace:*",
+    "@strudel.cycles/webaudio": "workspace:*",
+    "@uiw/codemirror-themes-all": "^4.19.8",
     "nanostores": "^0.7.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@strudel.cycles/react": "workspace:*",
-    "@strudel.cycles/core": "workspace:*",
-    "@strudel.cycles/tonal": "workspace:*",
-    "@strudel.cycles/webaudio": "workspace:*",
-    "@strudel.cycles/soundfonts": "workspace:*"
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.8",

iclc2023/slides/src/Highlight.jsx

@@ -0,0 +1,17 @@
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+Object.assign(atomOneDark.hljs, { padding: '10px' });
+
+function Highlight({ code, language }) {
+  console.log('atomOneDark', atomOneDark);
+  return (
+    <div className="mb-4 text-[32px] leading-10">
+      <SyntaxHighlighter language={language} style={atomOneDark}>
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
+export default Highlight;

iclc2023/slides/src/SlideRepl.jsx

@@ -2,8 +2,7 @@ import { evalScope, controls } from '@strudel.cycles/core';
 import { initAudioOnFirstClick } from '@strudel.cycles/webaudio';
 import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
 import { prebake } from './prebake';
-//import { themes } from '../repl/themes.mjs';
-// import { useSettings } from '../settings.mjs';
+import { atomone } from '@uiw/codemirror-themes-all';
 
 if (typeof window !== 'undefined') {
   await evalScope(
@@ -21,17 +20,19 @@ if (typeof window !== 'undefined') {
   prebake();
 }
 
-export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) {
+export function SlideRepl({ tune, drawTime, punchcard, canvasHeight = 100, hideHeader = false }) {
   // const { theme } = useSettings();
   return (
     <div className="mb-4">
       <_MiniRepl
+        hideHeader={hideHeader}
         tune={tune}
         hideOutsideView={true}
         drawTime={drawTime}
         punchcard={punchcard}
         canvasHeight={canvasHeight}
         fontSize={32}
+        theme={atomone}
         // theme={themes[theme]}
       />
     </div>

iclc2023/slides/src/Slides.jsx

@@ -16,7 +16,7 @@ const loadedMDXFiles = await Promise.all(
   }),
 );
 
-const order = ['01', '02'];
+const order = ['01', '02-0', '02-1', '02-2', '03'];
 
 const slideEntries = order.map((name) => loadedMDXFiles.find(([file]) => file === name));
 
@@ -39,13 +39,13 @@ function Slides() {
       next();
     }
   });
-  useEvent('keydown', (e) => {
+  /*useEvent('keydown', (e) => {
     if (e.key === 'Home') {
       prev();
     } else if (e.key === 'End') {
       next();
     }
-  });
+  });*/
 
   return (
     <div className="w-screen h-screen overflow-hidden relative">
@@ -58,7 +58,7 @@ function Slides() {
             i > activeIndex && 'translate-x-full',
           )}
         >
-          <div className="prose prose-invert select-none w-[800px] max-w-full">
+          <div className="prose prose-invert w-[1400px] max-w-full overflow-auto" style={{ fontSize: '2em' }}>
             <Slide />
           </div>
         </div>

iclc2023/slides/src/SyntaxComparison.jsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { SlideRepl } from './SlideRepl.jsx';
+import Highlight from './Highlight.jsx';
+
+const snippets = [
+  [`sound "bd ~ [sd cp]"`, [`sound("bd ~ [sd cp]")`], 'Mini Notation'], //
+  [`sound "bd ~ [sd cp]" # speed "1 2"`, [`sound("bd ~ [sd cp]").speed("1 2")`], 'Composing Patterns'],
+  [
+    `fast 2 $ sound "bd ~ [sd cp]"`,
+    [`fast(2, sound("bd ~ [sd cp]"))`, `sound("bd ~ [sd cp]").fast(2)`],
+    'Patterns Transformations',
+  ],
+  [
+    `speed "1 2 3" + "4 5" # s "bd"`,
+    ['speed("1 2 3".add("4 5")).s("bd")', '"1 2 3".add("4 5").speed().s("bd")'],
+    'Pattern Arithmetic',
+  ],
+  [
+    `jux rev 
+  $ every 3 (fast 2) 
+  $ sound "bd sd"`,
+    [
+      `sound("bd sd")
+  .every(3, fast(2))
+  .jux(rev)`,
+    ],
+  ],
+  [
+    `jux rev 
+  $ every "<3 5>" (fast "1 2") 
+  $ sound "bd sd cp mt"`,
+    [
+      `sound("bd sd cp mt")
+  .every("<3 5>", fast("1 2"))
+  .jux(rev)`,
+    ],
+  ],
+];
+
+function SyntaxComparison() {
+  const [step, setStep] = useState(1);
+  return (
+    <>
+      <div className=" not-prose justify-start items-start">
+        {/* <div className="grid grid-cols-2">
+          <div>Tidal</div>
+          <div>Strudel</div>
+        </div> */}
+        {snippets.slice(0, step).map(([hs, js, label], i) => (
+          <div key={i} className={`border-t border-gray-500 py-4`}>
+            <h3 className="pb-4">{label}</h3>
+            <div>
+              <div className="flex space-x-2">
+                <img src="./img/haskell.png" className="h-10 mt-1" />
+                <Highlight language="haskell" code={hs} />
+              </div>
+              <div>
+                {js.map((c) => (
+                  <div className="flex space-x-2">
+                    <img src="./img/js.jpg" className="h-10 mt-1" />
+                    <SlideRepl tune={c} hideHeader />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {step < snippets.length && <button onClick={() => setStep((r) => r + 1)}>next</button>}
+    </>
+  );
+}
+
+export default SyntaxComparison;

iclc2023/slides/src/prebake.mjs

@@ -15,6 +15,7 @@ export async function prebake() {
     }),
     samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }), */
     // samples('github:tidalcycles/Dirt-Samples/master'),
+    samples('github:tidalcycles/Dirt-Samples/master'),
   ]);
 }
 /*

iclc2023/slides/src/slides/01.mdx

@@ -1 +1,5 @@
+import { SlideRepl } from '../SlideRepl.jsx';
+
 # Strudel
+
+<SlideRepl tune={'note("c a f e")'} punchcard />

iclc2023/slides/src/slides/02-0.mdx

@@ -0,0 +1,6 @@
+# What is Strudel
+
+- a port of Tidal Cycles to JavaScript
+- a browser based editor for zero-install live coding: [strudel.tidalcycles.org](https://strudel.tidalcycles.org)
+- multiple outputs: Web Audio, OSC, MIDI, ...
+- "Strudel" = internationally known as delicious pastry, but also "swirl" / "whirlpool" in german (a tidal can cause a whirlpool!)

iclc2023/slides/src/slides/02-1.mdx

@@ -0,0 +1,3 @@
+# TidalCycles Port
+
+![ports](./img/ports.png)

iclc2023/slides/src/slides/02-2.mdx

@@ -0,0 +1,5 @@
+import SyntaxComparison from '../SyntaxComparison.jsx';
+
+# Syntax Comparison
+
+<SyntaxComparison />

iclc2023/slides/src/slides/02.mdx

@@ -1,5 +0,0 @@
-import { SlideRepl } from '../SlideRepl.jsx';
-
-# What is Strudel
-
-<SlideRepl tune={'note("c a f e")'} punchcard />

iclc2023/slides/src/slides/03.mdx

@@ -0,0 +1,3 @@
+# REPL
+
+![replflow](./img/strudelflow.png)

iclc2023/slides/vite.config.js

@@ -1,8 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import mdx from '@mdx-js/rollup';
+import gfm from 'remark-gfm';
+
+const options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [gfm],
+  rehypePlugins: [],
+};
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), mdx()],
+  plugins: [react(), mdx(options)],
 });

packages/react/src/components/MiniRepl.jsx

@@ -22,6 +22,7 @@ export function MiniRepl({
   punchcard,
   canvasHeight = 200,
   fontSize = 18,
+  hideHeader = false,
   theme,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
@@ -110,33 +111,35 @@ export function MiniRepl({
 
   return (
     <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
-      <div className="flex justify-between bg-lineHighlight">
-        <div className="flex">
-          <button
-            className={cx(
-              'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
-              started ? 'animate-pulse' : '',
-            )}
-            onClick={() => togglePlay()}
-          >
-            <Icon type={started ? 'stop' : 'play'} />
-          </button>
-          <button
-            className={cx(
-              'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
-              isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
-            )}
-            onClick={() => activateCode()}
-          >
-            <Icon type="refresh" />
-          </button>
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => togglePlay()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => activateCode()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
         </div>
-        {error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
-      </div>
+      )}
       <div className="overflow-auto relative">
         {show && (
           <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} fontSize={fontSize} />
         )}
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
       </div>
       {drawTime && (
         <canvas

pnpm-lock.yaml

@@ -64,12 +64,15 @@ importers:
       '@tailwindcss/typography': ^0.5.8
       '@types/react': ^18.0.28
       '@types/react-dom': ^18.0.11
+      '@uiw/codemirror-themes-all': ^4.19.8
       '@vitejs/plugin-react': ^3.1.0
       autoprefixer: ^10.4.14
       nanostores: ^0.7.4
       postcss: ^8.4.21
       react: ^18.2.0
       react-dom: ^18.2.0
+      react-syntax-highlighter: ^15.5.0
+      remark-gfm: ^3.0.1
       tailwindcss: ^3.2.7
       vite: ^4.2.0
     dependencies:
@@ -81,9 +84,12 @@ importers:
       '@strudel.cycles/soundfonts': link:../../packages/soundfonts
       '@strudel.cycles/tonal': link:../../packages/tonal
       '@strudel.cycles/webaudio': link:../../packages/webaudio
+      '@uiw/codemirror-themes-all': 4.19.8
       nanostores: 0.7.4
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
+      react-syntax-highlighter: 15.5.0_react@18.2.0
+      remark-gfm: 3.0.1
     devDependencies:
       '@tailwindcss/typography': 0.5.9_tailwindcss@3.2.7
       '@types/react': 18.0.28
@@ -382,7 +388,7 @@ importers:
     dependencies:
       '@strudel.cycles/core': link:../core
       '@strudel.cycles/webaudio': link:../webaudio
-      WebDirt: github.com/dktr0/WebDirt/8bdd7478ae05f74cbd5003936da23ce9bc6fc7c7
+      WebDirt: github.com/dktr0/WebDirt/d2ce441e82a11036455e93643af5938a844eee27
     devDependencies:
       vite: 3.2.5
       vitest: 0.25.8
@@ -5073,14 +5079,26 @@ packages:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
     dev: false
 
+  /character-entities-legacy/1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+    dev: false
+
   /character-entities-legacy/3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
     dev: false
 
+  /character-entities/1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+    dev: false
+
   /character-entities/2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
     dev: false
 
+  /character-reference-invalid/1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+    dev: false
+
   /character-reference-invalid/2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
     dev: false
@@ -5294,6 +5312,10 @@ packages:
     resolution: {integrity: sha512-+YbhUdNrpBZggBAHWcgQMLPLH1KDF3wJpeqrCKieWQ8RL7atmgsgTQko1XEBK6PsecfopWNntopJ+ByYG1lRaA==}
     dev: false
 
+  /comma-separated-tokens/1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+    dev: false
+
   /comma-separated-tokens/2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
@@ -6768,6 +6790,12 @@ packages:
     dependencies:
       reusify: 1.0.4
 
+  /fault/1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+    dependencies:
+      format: 0.2.2
+    dev: false
+
   /fault/2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
     dependencies:
@@ -7510,6 +7538,10 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /hast-util-parse-selector/2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+    dev: false
+
   /hast-util-parse-selector/3.1.1:
     resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
     dependencies:
@@ -7591,6 +7623,16 @@ packages:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
     dev: false
 
+  /hastscript/6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+    dependencies:
+      '@types/hast': 2.3.4
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+    dev: false
+
   /hastscript/7.2.0:
     resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
     dependencies:
@@ -7601,6 +7643,10 @@ packages:
       space-separated-tokens: 2.0.2
     dev: false
 
+  /highlight.js/10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: false
+
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -7821,10 +7867,21 @@ packages:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true
 
+  /is-alphabetical/1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+    dev: false
+
   /is-alphabetical/2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
     dev: false
 
+  /is-alphanumerical/1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+    dev: false
+
   /is-alphanumerical/2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
     dependencies:
@@ -7902,6 +7959,10 @@ packages:
       has-tostringtag: 1.0.0
     dev: true
 
+  /is-decimal/1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: false
+
   /is-decimal/2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
     dev: false
@@ -7942,6 +8003,10 @@ packages:
     dependencies:
       is-extglob: 2.1.1
 
+  /is-hexadecimal/1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: false
+
   /is-hexadecimal/2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
     dev: false
@@ -8721,6 +8786,13 @@ packages:
     dependencies:
       get-func-name: 2.0.0
 
+  /lowlight/1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+    dev: false
+
   /lru-cache/5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -10339,6 +10411,17 @@ packages:
       just-diff-apply: 5.5.0
     dev: true
 
+  /parse-entities/2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+    dev: false
+
   /parse-entities/4.0.0:
     resolution: {integrity: sha512-5nk9Fn03x3rEhGaX1FU6IDwG/k+GxLXlFAkgrbM1asuAFl3BhdQWvASaIsmwWypRNcZKHPYnIuOSfIWEyEQnPQ==}
     dependencies:
@@ -10785,6 +10868,11 @@ packages:
     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
     dev: false
 
+  /prismjs/1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /prismjs/1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
@@ -10842,6 +10930,12 @@ packages:
       read: 1.0.7
     dev: true
 
+  /property-information/5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+    dependencies:
+      xtend: 4.0.2
+    dev: false
+
   /property-information/6.2.0:
     resolution: {integrity: sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==}
     dev: false
@@ -10935,6 +11029,19 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /react-syntax-highlighter/15.5.0_react@18.2.0:
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+    dependencies:
+      '@babel/runtime': 7.20.13
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.2.0
+      refractor: 3.6.0
+    dev: false
+
   /react/18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -11094,6 +11201,14 @@ packages:
       test-value: 2.1.0
     dev: true
 
+  /refractor/3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+    dev: false
+
   /regenerate-unicode-properties/10.1.0:
     resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==}
     engines: {node: '>=4'}
@@ -11806,6 +11921,10 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /space-separated-tokens/1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+    dev: false
+
   /space-separated-tokens/2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
     dev: false
@@ -13758,8 +13877,8 @@ packages:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false
 
-  github.com/dktr0/WebDirt/8bdd7478ae05f74cbd5003936da23ce9bc6fc7c7:
-    resolution: {tarball: https://codeload.github.com/dktr0/WebDirt/tar.gz/8bdd7478ae05f74cbd5003936da23ce9bc6fc7c7}
+  github.com/dktr0/WebDirt/d2ce441e82a11036455e93643af5938a844eee27:
+    resolution: {tarball: https://codeload.github.com/dktr0/WebDirt/tar.gz/d2ce441e82a11036455e93643af5938a844eee27}
     name: webdirt
     version: 1.0.1
     dev: false