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>;
+}

src/components/PresentationEmbed/styles.module.css

@@ -0,0 +1,12 @@
+.stage {border: 1px solid var(--ifm-color-emphasis-300); background: #1f1f29;}
+.frame {display: block; width: 100%; aspect-ratio: 1200 / 720; border: 0; background: #1f1f29;}
+.actions {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #101014; color: #fff; font-size: .875rem;}
+.actions a {color: #ffc950;}
+.actions button {font: inherit; color: #fff; background: transparent; border: 1px solid #62616b; padding: 8px 12px; cursor: pointer;}
+.actions :focus-visible, .frame:focus-visible {outline: 3px solid #ffc950; outline-offset: -3px;}
+.error {padding: 12px; margin: 0; color: #fff;}
+/* Reuse the deck's portrait composition on phones; don't shrink its landscape text. */
+@media (max-width: 600px) {.frame {aspect-ratio: 600 / 1100;}}
+.stage:fullscreen {width: 100%; height: 100%; display: flex; flex-direction: column; border: 0;}
+.stage:fullscreen .frame {flex: 1; min-height: 0; aspect-ratio: auto;}
+.stage:fullscreen .actions {flex: none;}

src/pages/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import PresentationEmbed from '../components/PresentationEmbed';
 
 export default function Home(): React.ReactElement {
   return <Layout title="Eldorado Powered By AI" description="Strategy and direction for an AI-powered Eldorado.">
@@ -31,11 +32,8 @@ export default function Home(): React.ReactElement {
         <aside className="scope-note"><span className="scope-symbol" aria-hidden="true">✦</span><div><strong>Shaping the direction.</strong><p>This space is dedicated to AI strategy and direction for Eldorado. Specific initiatives, priorities, and the roadmap remain to be defined.</p></div></aside>
       </section>
       <section className="start-section container" aria-labelledby="presentation-title">
-        <p className="eyebrow">THE AI ARCHITECT’S FIRST SIX MONTHS</p>
-        <h2 id="presentation-title">Less Prompting, More Shipping</h2>
-        <p>A practical conversation about improving accepted engineering work: one willing team, a bounded experiment, honest measurement and an evidence-led next step.</p>
-        <p>35-minute presentation · 15-minute discussion · proposed strategy, not company results.</p>
-        <a className="button button--primary" href="./presentations/less-prompting-more-shipping/">Open presentation <span aria-hidden="true">↗</span></a>
+        <div className="section-heading"><div><h2 id="presentation-title">Understand In Speed</h2></div></div>
+        <PresentationEmbed title="Less Prompting, More Shipping" path="/presentations/less-prompting-more-shipping/"/>
       </section>
     </main>
   </Layout>;