Slides を作成する

OpenPress の slide workspace は、直接編集できる slide source で構成します。各 slide が composition を持ち、再利用する deck UI と theme CSS はその Press 内に置きます。

Slide、Frame、Text、Line、MediaObject などの core objects を直接組み合わせます。視覚スタイルは theme CSS、編集可能な文字は Text children、固定配置は box、フロー配置は Frame layout に置きます。

Step 1: Workspace を初期化する

npm create @open-press@latest <project-name> -- --type slides

これは 16:9 page geometry の slide Press を作成します。OpenPress の slide coordinates は 1920 x 1080 の base canvas を使います。

Step 2: press.tsx は slide 登録に集中させる

press/<slug>/press.tsx はシンプルに保ちます。Deck の順序を記述し、各 slide の実際の layout は slide source file に置きます。

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
      <Slide id="statement" />
    </Press>
  );
}

Step 3: blank slide source を追加する

node packages/core/engine/cli.mjs slide . add intro --press slide

この command は slides/intro/slide.tsx を作成し、Press registration を更新します。最小の placeholder を、実際の slide composition に置き換えてください。

press/slide/
  press.tsx
  theme/default.css
  slides/
    intro/slide.tsx

同じ content-free visual primitive が別の slide にも実在する場合だけ、この Press の ui/ または components/ に置きます。一度しか使わない composition と content は slide source に残します。

Step 4: Core objects で slide source を書く

Slide source は core objects を直接使います。編集可能な内容を抽象 wrapper の props に隠さないでください。

import { Frame, Line, Slide, Text } from "@open-press/core";

export default function CoverSlide() {
  return (
    <Slide id="cover" className="op-source-deck-slide">
      <Frame frameKey="canvas" chrome={false} className="op-source-deck-canvas">
        <Text as="p" label="date" box={{ x: 100, y: 80 }} className="op-source-deck-date">
          26 JUNE 2024
        </Text>
        <Text as="h1" label="title" box={{ x: 100, y: 360, w: 1155 }} className="op-source-deck-title">
          A line is length without breadth.
        </Text>
        <Line label="red-rule" box={{ x: 100, y: 774, w: 270, h: 4 }} className="op-source-deck-red-rule" />
      </Frame>
    </Slide>
  );
}

Step 5: 検証する

npm run build

ローカルで preview する場合：

npm run dev:workspace

Object identity、label、box、Frame layout の規則は Core Object API を参照してください。