feat(islands): add StudyDeck component and markdown decks for algorithms

islands/StudyDeck.tsx

@@ -0,0 +1,46 @@
+// reveal.js touches window/document at init — render on the client only.
+export const client = "only";
+
+import { Deck, Markdown } from "@revealjs/react";
+import RevealHighlight from "reveal.js/plugin/highlight";
+import "reveal.js/reveal.css";
+import "reveal.js/theme/black.css";
+import "reveal.js/plugin/highlight/monokai.css";
+
+import { decks, type DeckName } from "./decks";
+
+/**
+ * An embedded reveal.js slide deck for drilling a DS/algorithms topic.
+ * Usage in any MDX page: `<StudyDeck deck="two-pointers" />`.
+ */
+export default function StudyDeck({ deck }: { deck: DeckName }) {
+  const markdown = decks[deck];
+  if (!markdown) {
+    return (
+      <p>
+        Unknown study deck "{deck}". Available: {Object.keys(decks).join(", ")}.
+      </p>
+    );
+  }
+  return (
+    <div style={{ aspectRatio: "16 / 9", width: "100%", margin: "1.5rem 0" }}>
+      <Deck
+        style={{ width: "100%", height: "100%", borderRadius: "0.5rem", overflow: "hidden" }}
+        config={{
+          embedded: true,
+          hash: false,
+          // Only capture arrow keys while the deck has focus, so it
+          // doesn't hijack page scrolling.
+          keyboardCondition: "focused",
+          slideNumber: "c/t",
+          controlsTutorial: false,
+          width: 1280,
+          height: 720,
+        }}
+        plugins={[RevealHighlight]}
+      >
+        <Markdown options={{ animateLists: true }}>{markdown}</Markdown>
+      </Deck>
+    </div>
+  );
+}