term-transcript 0.3.0-beta.1

Snapshotting and snapshot testing for CLI / REPL applications
Documentation 
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

{{!
  Example of a custom Handlebars template for use with `term-transcript`.
  This template renders an HTML document with collapsible interaction sections.
}}
{{! CSS definitions: colors. This is taken verbatim from the default template. }}
{{~#*inline "styles_colors"}}
:root {
  {{~#each palette.colors}}

  --{{@key}}: {{this}}; --i-{{@key}}: {{lookup ../palette.intense_colors @key}};
  {{~/each}}

  --hl-black: rgba(255, 255, 255, 0.1);
}
.fg0 { color: var(--black); } .bg0 { background: var(--black); }
.fg1 { color: var(--red); } .bg1 { background: var(--red); }
.fg2 { color: var(--green); } .bg2 { background: var(--green); }
.fg3 { color: var(--yellow); } .bg3 { background: var(--yellow); }
.fg4 { color: var(--blue); } .bg4 { background: var(--blue); }
.fg5 { color: var(--magenta); } .bg5 { background: var(--magenta); }
.fg6 { color: var(--cyan); } .bg6 { background: var(--cyan); }
.fg7 { color: var(--white); } .bg7 { background: var(--white); }
.fg8 { color: var(--i-black); } .bg8 { background: var(--i-black); }
.fg9 { color: var(--i-red); } .bg9 { background: var(--i-red); }
.fg10 { color: var(--i-green); } .bg10 { background: var(--i-green); }
.fg11 { color: var(--i-yellow); } .bg11 { background: var(--i-yellow); }
.fg12 { color: var(--i-blue); } .bg12 { background: var(--i-blue); }
.fg13 { color: var(--i-magenta); } .bg13 { background: var(--i-magenta); }
.fg14 { color: var(--i-cyan); } .bg14 { background: var(--i-cyan); }
.fg15 { color: var(--i-white); } .bg15 { background: var(--i-white); }
{{/inline~}}

{{! CSS definitions }}
{{~#*inline "styles"}}
    <style>
    {{>styles_colors}}
    .term-wrapper {
      color: var(--white);
      background-color: var(--black);
    }
    .term-output {
      line-height: 1.25;
    }
    .content {
      max-width: {{add width 100}}px;
      margin: 0 auto;
      padding: .75rem;
    }
    main {
      max-width: {{add width 40}}px;
      margin: 0 auto;
      padding: .75rem;
    }
    main .accordion-button {
      margin: 0 -.75rem;
      padding: .75rem;
      width: calc(100% + 1.5rem);
      border-radius: 0 !important;
    }
    .white-space-pre {
      white-space: pre;
    }
    </style>
{{/inline~}}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="language" content="en">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    {{~>styles}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Terminal transcript</title>
  </head>
  <body>
    <header>
      <div class="content">
        <h1 class="display-3 mb-4 text-center">Terminal Transcript</h1>
        <p class="lead">This example demonstrates using <code>term-transcript</code> with a custom template.</p>
        <p>Templating allows changing the output format completely; in this case, it is changed to HTML instead of default SVG. The template source and docs can be found in the <a href="{{creator.repo}}">project repository</a>.</p>
      </div>
    </header>
    <main class="term-wrapper rounded">
      <div class="accordion accordion-flush">
      {{~#each interactions}}
        <div class="accordion-item bg-transparent{{#if (not @last)}} mb-2{{/if}}">
          <h2 class="accordion-header" id="user-input-{{@index}}">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#term-output-{{@index}}" aria-expanded="true" aria-controls="term-output-{{@index}}">
              <span class="font-monospace small white-space-pre">{{input.text}}</span>
            </button>
          </h2>
          <div id="term-output-{{@index}}" class="accordion-collapse collapse show" aria-labelledby="user-input-{{@index}}">
            <div class="accordion-body p-0 pt-2">
              <pre class="term-output mb-0">{{{output_html}}}</pre>
            </div>
          </div>
        </div>
      {{~/each}}
      </div>
    </main>
    <footer class="my-4 text-center">
      <p><em class="small text-muted">Created with <a href="{{creator.repo}}">{{creator.name}} v{{creator.version}}</a></em></p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  </body>
</html>