-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcustom.html.handlebars
108 lines (103 loc) · 4.39 KB
/
custom.html.handlebars
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>