feat: render catalog in a html page

This commit is contained in:
setop 2024-06-12 11:17:04 +02:00
parent 4334ffb6b2
commit 6e98bd6a47
2 changed files with 74 additions and 0 deletions

34
catalog.html.j2 Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Cliget Catalog</title>
<style>
{% include 'styles.css' %}
</style>
</head>
<body>
<p>{{get_context()|length}} entries</p>
<table>
<thead>
<tr><th>name</th><th>repo</th><th>description</th></tr>
<thead>
<tbody>
{% for k,o in get_context().items()%}
<tr>
<td>
<a id="{{k}}" href="#{{k}}">&nbsp;</a>
{%if "website" in o%}<a href="{{o.website}}">{{k}}</a>{%else%}{{k}}{%endif%}
</td>
<td>
{%if "github" in o%}<a href="https://github.com/{{o.github}}">x</a>{%else%}&nbsp;{%endif%}
</td>
<td><p>{{o.desc}}</p></td>
</tr>
{% endfor %}
</tbody>
<table>
<p>{{get_context()|length}} entries</p>
</body>
</html>

40
styles.css Normal file
View File

@ -0,0 +1,40 @@
:root {
--accent-bg: #F5F7FF;
--border: #D8DAE1;
--main-foreground: #5b4636;
--main-background: #f4f4f4;
}
body{max-width:80ch;padding:2ch;margin:auto;
color:var(--main-foreground);
background-color:var(--main-background);
}
a:link{text-decoration:none}
/* Format tables */
table {
border-collapse: collapse;
width: 100%
}
td,
th {
border: 1px solid var(--border);
text-align: left;
}
th {
background: var(--accent-bg);
font-weight: bold;
text-align: center;
}
table td:nth-child(2) {
text-align: center;
}
tr:nth-child(even) {
/* Set every other cell slightly darker. Improves readability. */
background: var(--accent-bg);
}