(docs) add live demo for Embeding REPL

Author: jcubic

docs/docs/lips/embeding-repl.md renamed to docs/docs/lips/embedding-repl.mdx

@@ -3,6 +3,8 @@ sidebar_position: 9
 description: "Embedding the LIPS Scheme REPL"
 ---
 
+import CodePen from '@site/src/CodePen';
+
 # Embedding LIPS REPL
 
 To embed the LIPS REPL you need on your website you need:
@@ -132,4 +134,4 @@ term.echo(intro.replace(/(\((?:env|dir|help|apropos)[^)]*\))/g, function(code) {
 
 ## Working Demo
 
-Here is a working [Codepen REPL Demo](https://codepen.io/jcubic/pen/OJepZbd).
+<CodePen id="OJepZbd" height={400} title="LIPS REPL Demo" />

docs/src/CodePen.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+
+type CodePenProps = {
+  id: string;
+  title: string;
+  height: number;
+};
+
+export default function CodePen({ id, title, height = 300 }: CodePenProps) {
+  useEffect(() => {
+    globalThis.__codepen_loaded__ ??= 0;
+    globalThis.__codepen_loaded__ += 1;
+    const count = globalThis.__codepen_loaded__;
+    if (count === 1) {
+      const script = document.createElement('script');
+      script.className = 'codepen';
+      script.dataset.id = count;
+      script.src = 'https://cpwebassets.codepen.io/assets/embed/ei.js';
+      script.async = true;
+      document.body.appendChild(script);
+    }
+    return () => {
+      globalThis.__codepen_loaded__ -= 1;
+      const script = document.querySelector(`script.codepen[data-id="${count}"]`);
+      script?.remove();
+    };
+  }, []);
+  return (
+    <p className="codepen"
+       data-height={height}
+       data-default-tab="result"
+       data-slug-hash={id}
+       data-pen-title={title}
+       data-user="jcubic"
+       style={{
+         height: 300,
+         boxSizing: 'border-box',
+         display: 'flex',
+         alignItems: 'center',
+         justifyContent: 'center',
+         border: '2px solid',
+         margin: '1em 0',
+         padding: '1em'
+       }}>
+      <span>See the Pen <a href={`https://codepen.io/jcubic/pen/${id}`}>
+        {title}</a> by Jakub T. Jankiewicz (<a href="https://codepen.io/jcubic">@jcubic</a>)
+        {' '}on <a href="https://codepen.io">CodePen</a>.</span>
+    </p>
+  );
+}