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
{% if (mode == "text" and extension == ".md") or mimetype == "text/markdown" %}
14
<x-notebook>
15
<label><input type="radio" name="tabs-example" checked>Rendered</label>
16
<x-tab>
17
<x-frame style="padding-top: 1em;">
18
<article>
19
{{ contents | markdown }}
20
</article>
21
</x-frame>
22
</x-tab>
23
<label><input type="radio" name="tabs-example">Raw</label>
24
<x-tab>
25
<pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}">
26
{% for i in contents | split("\n") %}
27
<div class="line-number">{{ loop.index0 + 1 }}</div>
28
<x-codeline>{{ i }}</x-codeline>
29
{% endfor %}
30
</pre>
31
</x-tab>
32
</x-notebook>
33
{% elif mode == "text" %}
34
<pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}">
35
{% for i in contents | split("\n") %}
36
<code>{{ i }}</code>
37
{% endfor %}
38
</pre>
39
{% elif mode == "image" %}
40
<img src="{{ file }}">
41
{% elif mode == "audio" %}
42
<audio controls src="{{ file }}" style="width: 100%;">
43
{% trans %}Your browser does not support HTML5 multimedia.{% endtrans %}
44
<a href="{{ file }}">{% trans %}Download file{% endtrans %}</a>
45
</audio>
46
{% elif mode == "video" %}
47
<video controls src="{{ file }}" style="width: 100%;">
48
{% trans %}Your browser does not support HTML5 multimedia.{% endtrans %}
49
<a href="{{ file }}">{% trans %}Download file{% endtrans %}</a>
50
</video>
51
{% endif %}