devpage 0.2.2

Live documents from a repository: sites, docs and slides from Markdown, and UI designs drawn from code — with comments, link checking and PDF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// This talk as files: the deck's folder, and the one command that turns it
// into a video.
import { Window, framesCss } from "./frames";

export const css = framesCss + `
  .tf { display: flex; align-items: center; gap: 56px; }
  .tf-list { font-family: var(--font-mono); font-size: 30px; line-height: 1.75; }
  .tf-list .dim { color: var(--muted); }
  .tf-cmd { font-family: var(--font-mono); font-size: 36px; line-height: 1.7; white-space: nowrap; }
  .tf-cmd .out { color: #98989d; }
`;

export default function TalkFiles() {
  return (
    <div className="tf">
      <Window title="docs/talks/devpage/" style={{ width: "620px" }}>
        <div className="tf-list">
          <div>devpage.yml</div>
          <div>title.md</div>
          <div>agents-write.md</div>
          <div>one-command.md</div>
          <div className="dim">… 9 more</div>
        </div>
      </Window>
      <span className="arrow">→</span>
      <Window title="my-app" dark style={{ width: "820px" }}>
        <div className="tf-cmd">$ devpage video docs/talks/devpage<div className="out">devpage.mp4</div></div>
      </Window>
    </div>
  );
}