devpage 0.2.3

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

// One command on the left, the page it serves on the right.
import { Window, SyncPage, framesCss } from "./frames";

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

export default function CommandToPage() {
  return (
    <div className="ctp">
      <Window title="my-app" dark style={{ width: "600px" }}>
        <div className="ctp-cmd">$ devpage docs<div className="out">→ localhost:3030</div></div>
      </Window>
      <span className="arrow">→</span>
      <Window title="localhost:3030/docs/design/sync.md" style={{ width: "880px" }}>
        <SyncPage />
      </Window>
    </div>
  );
}