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

// A terminal window: lines starting with "$ " are commands, the rest output.
export default function Terminal({ title, source }: { title?: string; source: string }) {
  const text = source.replace(/^```[^\n]*\n/, "").replace(/\n```\s*$/, "");
  return (
    <figure className="terminal">
      <figcaption>{title ?? "Terminal"}</figcaption>
      <pre>
        {text.split("\n").map((line) =>
          line.startsWith("$ ") ? (
            <div className="terminal-command"><span className="terminal-prompt">$ </span>{line.slice(2)}</div>
          ) : (
            <div className="terminal-output">{line}</div>
          ),
        )}
      </pre>
    </figure>
  );
}