create-slide-deck 0.1.0

package/template-minimal/src/reveal/core/types.ts

@@ -0,0 +1,114 @@
+import type { ComponentType } from "react";
+
+export interface SlideComponentProps {
+  Reveal: RevealInstance;
+  anime?: typeof import("animejs");
+}
+
+export interface RevealInstance {
+  initialize(): Promise<void>;
+  on(event: string, callback: (e: any) => void): void;
+  off(event: string, callback: (e: any) => void): void;
+  getCurrentSlide(): HTMLElement | null;
+  getState(): { indexh: number; indexf: number };
+}
+
+export interface Slide {
+  className?: string;
+  attrs?: Record<string, string | number>;
+  html: string;
+  notes: string;
+}
+
+export type LayerName = "background" | "connector" | "content" | "overlay" | "chrome";
+
+export interface BlockOptions {
+  id?: string;
+  kind?: "html" | "svg" | "image" | "mount";
+  html?: string;
+  src?: string;
+  alt?: string;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  layer?: LayerName;
+  fragment?: boolean | number | null;
+  animation?: string;
+  className?: string;
+  attrs?: Record<string, string | number | boolean>;
+  css?: Record<string, string | number>;
+  styleText?: string;
+  flow?: boolean;
+  mount?: MountSpec | null;
+}
+
+export interface Block extends Required<Pick<BlockOptions, "kind" | "html" | "alt" | "layer" | "animation" | "className" | "flow">> {
+  id?: string;
+  src?: string;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  fragment: boolean | number | null;
+  attrs: Record<string, string | number | boolean>;
+  css: Record<string, string | number>;
+  styleText: string;
+  mount: MountSpec | null;
+}
+
+export interface MountSpec {
+  library: string;
+  exportName?: string;
+  props?: Record<string, unknown>;
+}
+
+export interface StepNote {
+  step: string;
+  visible: string;
+  say: string;
+  why?: string;
+  next?: string;
+}
+
+export interface SlideOptions {
+  className?: string;
+  attrs?: Record<string, string | number>;
+  html?: string;
+  blocks?: (Block | string)[];
+  notes?: string | (string | StepNote)[];
+}
+
+export interface ReactSlideOptions<C extends string = string> {
+  title?: string;
+  component: C;
+  steps?: number;
+  notes?: string;
+  page?: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+}
+
+export interface BlockSlideOptions {
+  title?: string;
+  blocks?: (Block | string)[];
+  page?: number;
+  notes?: string;
+  html?: string;
+  className?: string;
+  attrs?: Record<string, string | number>;
+}
+
+export type ComponentRegistry = Record<string, ComponentType<SlideComponentProps>>;
+
+export interface MountContext {
+  Reveal: RevealInstance;
+  anime: typeof import("animejs");
+}
+
+export interface DeckConfig<C extends ComponentRegistry = ComponentRegistry> {
+  buildSlides: (() => Promise<Slide[]> | Slide[]) | Slide[];
+  components: C;
+}

package/template-minimal/src/reveal/decks/my-deck/components/example-component.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+export default function ExampleComponent({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={1200} H={560}>{(step, instant) => <>
+      <g style={vis(step, -1, instant)}>
+        <text x={600} y={200} textAnchor="middle" fontSize={40} fontWeight={800} fill="#313131" fontFamily={CANVAS.fontFamily}>
+          Hello, Slides!
+        </text>
+        <text x={600} y={260} textAnchor="middle" fontSize={20} fontWeight={600} fill="#767676" fontFamily={CANVAS.fontFamily}>
+          Edit components/ to build your presentation
+        </text>
+      </g>
+      <g style={vis(step, 0, instant)}>
+        <text x={600} y={360} textAnchor="middle" fontSize={20} fontWeight={700} fill="#4361ee" fontFamily={CANVAS.fontFamily}>
+          Step 1: This appears on first click
+        </text>
+      </g>
+      <g style={vis(step, 1, instant)}>
+        <text x={600} y={420} textAnchor="middle" fontSize={20} fontWeight={700} fill="#7c3aed" fontFamily={CANVAS.fontFamily}>
+          Step 2: This appears on second click
+        </text>
+      </g>
+    </>}</SlideCanvas>
+  );
+}

package/template-minimal/src/reveal/decks/my-deck/components/registry.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import ExampleComponent from "./example-component.tsx";
+
+export const components = {
+  ExampleComponent,
+} satisfies Record<string, ComponentType<SlideComponentProps>>;
+
+export type ComponentName = keyof typeof components;

package/template-minimal/src/reveal/decks/my-deck/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{PROJECT_NAME}}</title>
+</head>
+<body>
+  <div class="reveal">
+    <div class="slides"></div>
+  </div>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>

package/template-minimal/src/reveal/decks/my-deck/main.ts

@@ -0,0 +1,5 @@
+import { components } from "./components/registry.ts";
+import { buildSlides } from "./slides.ts";
+import { initDeck } from "../../core/deck-init.ts";
+
+initDeck({ buildSlides, components });

package/template-minimal/src/reveal/decks/my-deck/slides.ts

@@ -0,0 +1,34 @@
+import { blockSlide, reactSlide } from "../../core/layout.ts";
+import type { ComponentName } from "./components/registry.ts";
+import type { Slide } from "../../core/types.ts";
+
+function cover(): Slide {
+  return blockSlide({
+    html: `
+      <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%">
+        <h1 style="font-size:48px;font-weight:800;color:#313131;margin:0">{{PROJECT_NAME}}</h1>
+        <p style="font-size:20px;color:#767676;margin-top:16px">Your Name</p>
+      </div>
+    `,
+    notes: "Cover slide.",
+  });
+}
+
+function example(): Slide {
+  return reactSlide<ComponentName>({
+    title: "Example Slide",
+    component: "ExampleComponent",
+    steps: 2,
+    notes: "An example React component slide.",
+  });
+}
+
+export function buildSlides(): Slide[] {
+  const builders = [cover, example];
+  const slides = builders.map((b) => b());
+  slides.forEach((slide, i) => {
+    const pageDiv = `\n<div class="page-no">${String(i + 1).padStart(2, "0")}</div>`;
+    if (!slide.html.includes('class="page-no"')) slide.html += pageDiv;
+  });
+  return slides;
+}

package/template-minimal/src/reveal/env.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="vite/client" />
+
+declare module "reveal.js" {
+  export default class Reveal {
+    constructor(config: Record<string, any>);
+    initialize(): Promise<void>;
+    on(event: string, callback: (e: any) => void): void;
+    off(event: string, callback: (e: any) => void): void;
+    getCurrentSlide(): HTMLElement | null;
+    getState(): { indexh: number; indexf: number };
+  }
+}
+
+declare module "reveal.js/plugin/notes" {
+  const RevealNotes: any;
+  export default RevealNotes;
+}
+
+declare module "*.css" {}
+
+declare module "roughjs" {
+  export function svg(el: SVGSVGElement): any;
+}
+
+declare module "roughjs/bundled/rough.esm.js" {
+  const rough: {
+    svg(el: SVGSVGElement): any;
+  };
+  export default rough;
+}
+
+declare module "prismjs" {
+  const Prism: {
+    highlight(code: string, grammar: any, language: string): string;
+    languages: Record<string, any>;
+  };
+  export default Prism;
+}