HTML document, ASCII text
1
<x-hbox style="align-items: center;">
2
<h1 style="display: flex; align-items: center; text-overflow: ellipsis; overflow: hidden;" title="{{ basename }}"><iconify-icon icon="{{ icon }}"></iconify-icon> {{ basename }}</h1>
3
<div class="flexible-space"></div>
4
<x-buttonbox>
5
<a href="{{ file }}" class="button">{% trans %}View raw{% endtrans %}</a>
6
<a href="{{ file }}" download class="button">{% trans %}Download{% endtrans %}</a>
7
</x-buttonbox>
8
</x-hbox>
9
{{ mimetype }} • {{ size[0] }} {{ size[1] }}
10
<br>
11
{{ detailedtype }}
12
<style>
14
.code-view {
15
white-space: normal;
16
padding: 0;
17
}
18
.code-view::before {
19
counter-reset: line-number;
20
}
21
.code-view > code {
22
white-space: pre-wrap;
23
font: inherit;
24
color: inherit;
25
background: inherit;
26
display: block;
27
padding: 0;
28
margin: 0;
29
counter-increment: line-number;
30
}
31
.code-view > code::before {
32
display: inline-block;
33
width: var(--line-chars) * 1ch;
34
background: var(--color-callout);
35
content: counter(line-number);
36
padding: 0 1ch;
37
text-align: end;
38
margin-right: 1ch;
39
}
40
.code-view > code:first-child::before {
41
padding-top: 1em;
42
}
43
.code-view > code:last-child::before {
44
padding-bottom: 1em;
45
}
46
</style>
47
{% if (mode == "text" and extension == ".md") or mimetype == "text/markdown" %}
49
<x-notebook>
50
<label><input type="radio" name="tabs-example" checked>Rendered</label>
51
<x-tab>
52
<x-frame style="padding-top: 1em;">
53
<article>
54
{{ contents | markdown }}
55
</article>
56
</x-frame>
57
</x-tab>
58
<label><input type="radio" name="tabs-example">Raw</label>
59
<x-tab>
60
<pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}">
61
{% for i in contents | split("\n") %}
62
<code>{{ i }}</code>
63
{% endfor %}
64
</pre>
65
</x-tab>
66
</x-notebook>
67
{% elif mode == "text" %}
68
<pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}">
69
{% for i in contents | split("\n") %}
70
<code>{{ i }}</code>
71
{% endfor %}
72
</pre>
73
{% elif mode == "image" %}
74
<img src="{{ file }}">
75
{% elif mode == "audio" %}
76
<audio controls src="{{ file }}" style="width: 100%;">
77
{% trans %}Your browser does not support HTML5 multimedia.{% endtrans %}
78
<a href="{{ file }}">{% trans %}Download file{% endtrans %}</a>
79
</audio>
80
{% elif mode == "video" %}
81
<video controls src="{{ file }}" style="width: 100%;">
82
{% trans %}Your browser does not support HTML5 multimedia.{% endtrans %}
83
<a href="{{ file }}">{% trans %}Download file{% endtrans %}</a>
84
</video>
85
{% endif %}