feat: embed canonical presentation on homepage

src/components/PresentationEmbed/index.tsx

@@ -0,0 +1,39 @@
+import React, {useEffect, useRef, useState} from 'react';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+/** One canonical deck document, with chrome and URL ownership isolated from the portal. */
+export default function PresentationEmbed({title, path}: {title: string; path: string}): React.ReactElement {
+  const url = useBaseUrl(path);
+  const stage = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [error, setError] = useState('');
+  useEffect(() => {
+    const changed = () => {
+      const active = document.fullscreenElement === stage.current;
+      setFullscreen(active);
+      if (!active) button.current?.focus({preventScroll: true});
+    };
+    document.addEventListener('fullscreenchange', changed);
+    return () => document.removeEventListener('fullscreenchange', changed);
+  }, []);
+  async function toggleFullscreen() {
+    setError('');
+    try {
+      if (document.fullscreenElement === stage.current) await document.exitFullscreen();
+      else if (stage.current?.requestFullscreen) await stage.current.requestFullscreen();
+      else setError('Fullscreen is unavailable. Open presentation for a larger view.');
+    } catch {
+      setError('Fullscreen is unavailable. Open presentation for a larger view.');
+    }
+  }
+  return <div className={styles.stage} ref={stage}>
+    <iframe className={styles.frame} src={`${url}?embed`} title={`${title} — interactive presentation`} loading="lazy" allowFullScreen/>
+    <div className={styles.actions}>
+      <a href={url}>Open presentation <span aria-hidden="true">↗</span></a>
+      <button ref={button} type="button" onClick={toggleFullscreen} aria-pressed={fullscreen}>{fullscreen ? 'Exit fullscreen' : 'Fullscreen'}</button>
+    </div>
+    {error && <p role="status" className={styles.error}>{error}</p>}
+  </div>;
+}