Skip to content

Commit 8961077

Browse files
zferguszfergus
committed
Added darkmode to doc generator
1 parent 791bc51 commit 8961077

File tree

3 files changed

+129
-34
lines changed

3 files changed

+129
-34
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ __pycache__
66
*.vtu
77
*.vtm
88
bin*
9-
build*
9+
build*
10+
docs/index.html
11+
docs/out.html

‎docs/main.mako‎

Lines changed: 108 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,78 @@
11
## _*_ coding: utf-8 _*_
22
<!DOCTYPE HTML>
33

4-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
4+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
55
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
66
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
77
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
88

9+
<style>
10+
.row > * {
11+
width: auto !important;
12+
}
13+
body.dark {
14+
--bs-body-bg: var(--bs-dark);
15+
--bs-body-color: var(--bs-light);
16+
}
17+
body.dark .card {
18+
--bs-card-bg: var(--bs-gray-900);
19+
--bs-card-border-color: var(--bs-gray-700);
20+
--bs-card-cap-bg: var(--bs-gray-800);
21+
}
22+
body.dark .card-header {
23+
--bs-card-header-bg: var(--bs-dark);
24+
--bs-card-header-color: var(--bs-light);
25+
}
26+
body.dark button.btn {
27+
--bs-btn-color: var(--bs-light);
28+
}
29+
30+
body.dark button.btn.btn-link {
31+
--bs-btn-color: var(--bs-link-color);
32+
}
33+
34+
header {
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
}
39+
}
40+
41+
#darkmode, #lightmode {
42+
float: right;
43+
}
44+
body.dark #lightmode {
45+
display: none;
46+
}
47+
body:not(.dark) #darkmode {
48+
display: none;
49+
}
50+
51+
span.todo {
52+
color: var(--bs-red);
53+
}
54+
55+
p.text-primary {
56+
margin-bottom: 0;
57+
}
58+
</style>
59+
60+
<script>
61+
function initDarkMode() {
62+
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
63+
if (prefersDarkScheme.matches) {
64+
document.body.classList.add("dark");
65+
} else {
66+
document.body.classList.remove("dark");
67+
}
68+
}
69+
70+
function toggleDarkMode() {
71+
var element = document.body;
72+
element.classList.toggle("dark");
73+
}
74+
</script>
75+
976
<%def name="clip_button(clip_text)">
1077
<button class="btn" onclick="navigator.clipboard.writeText('${clip_text}');">
1178
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
@@ -45,6 +112,7 @@
45112
</button>
46113
Multiple Types
47114
</h5>
115+
## ${rs[0].get('doc', 'TODO').replace("TODO", '<span class="todo">TODO</span>')}
48116
</div>
49117
<div id="collapse${local_count}" class="collapse hide" aria-labelledby="heading${local_count}" data-parent="#accordion${local_count}">
50118
% for rule in rs:
@@ -61,7 +129,9 @@
61129
attributes['count'] = attributes['count'] + 1
62130
local_count = attributes['count']
63131
if not 'doc' in r:
64-
r['doc'] = 'FIXME: Missing documentation in the specification'
132+
r['doc'] = '<span class="todo">FIXME:</span> Missing documentation in the specification'
133+
if r["doc"] == "TODO":
134+
r["doc"] = '<span class="todo">TODO</span>'
65135
r['pointer_last'] = r['pointer'].rsplit('/', 1)[-1]
66136
if r['pointer_last'] == '*':
67137
tmp = r['pointer'].replace('/*','')
@@ -72,11 +142,9 @@
72142
<div id="accordion${local_count}">
73143
<div class="card">
74144
<div class="card-header" id="heading${local_count}">
75-
76-
77145
<div class="container">
78146
<h5>
79-
<div class="row align-items-start">
147+
<div class="row align-items-center">
80148
<div class="auto">
81149
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse${local_count}" aria-expanded="true" aria-controls="collapse${local_count}">
82150
<h4>${r['pointer_short']}</h4>
@@ -98,11 +166,11 @@
98166
${r['doc']}
99167
</div>
100168
<div id="collapse${local_count}" class="collapse hide" aria-labelledby="heading${local_count}" data-parent="#accordion${local_count}">
101-
169+
102170
% if 'required' in r:
103-
171+
104172
<div class="container">
105-
173+
106174
<div class="row">
107175
<h5 class=".text-success">Required</h5>
108176
<div class="col-1">
@@ -117,11 +185,11 @@
117185
% endif
118186
% if 'optional' in r:
119187
<div class="container">
120-
188+
121189
<div class="row">
122190
<h5>Optional</h5>
123191
<div class="col-1">
124-
192+
125193
</div>
126194
<div class="col-11">
127195
% for fname in r['optional']:
@@ -144,14 +212,14 @@
144212
<div class="card-header">
145213
<div class="container">
146214
<h5>
147-
<div class="row align-items-start">
215+
<div class="row align-items-center">
148216
<div class="auto">
149217
<p class="text-primary">${r['pointer_short']}</p>
150218
</div>
151219
<div class="col-sm">
152220
<code>Float</code>
153221
% if "min" in r or "max" in r:
154-
(${r["min"] if "min" in r else "-inf"}, ${r["max"] if "max" in r else "inf"})
222+
(${r.get("min", "-inf")}, ${r.get("max", "inf")})
155223
% endif
156224
% if "default" in r:
157225
= ${r["default"]}
@@ -174,14 +242,14 @@
174242
<div class="card-header">
175243
<div class="container">
176244
<h5>
177-
<div class="row align-items-start">
245+
<div class="row align-items-center">
178246
<div class="auto">
179247
<p class="text-primary">${r['pointer_short']}</p>
180248
</div>
181249
<div class="col-sm">
182250
<code>Integer</code>
183251
% if "min" in r or "max" in r:
184-
(${r["min"] if "min" in r else "-inf"}, ${r["max"] if "max" in r else "inf"})
252+
(${r.get("min", "-inf")}, ${r.get("max", "inf")})
185253
% endif
186254
% if "default" in r:
187255
= ${r["default"]}
@@ -204,15 +272,15 @@
204272
<div class="card-header">
205273
<div class="container">
206274
<h5>
207-
<div class="row align-items-start">
275+
<div class="row align-items-center">
208276
<div class="auto">
209277
<p class="text-primary">${r['pointer_short']}</p>
210278
</div>
211279
<div class="col-sm">
212-
<code>File</code>
280+
<code>File</code>
213281
% if "extensions" in r:
214-
(${r["extensions"]})
215-
% endif
282+
(${r["extensions"]})
283+
% endif
216284
% if "default" in r:
217285
= "${r["default"]}"
218286
% endif
@@ -235,12 +303,12 @@
235303
<div class="card-header">
236304
<div class="container">
237305
<h5>
238-
<div class="row align-items-start">
306+
<div class="row align-items-center">
239307
<div class="auto">
240308
<p class="text-primary">${r['pointer_short']}</p>
241309
</div>
242310
<div class="col-sm">
243-
<code>Folder</code>
311+
<code>Folder</code>
244312
% if "default" in r:
245313
= "${r["default"]}"
246314
% endif
@@ -262,12 +330,12 @@
262330
<div class="card-header">
263331
<div class="container">
264332
<h5>
265-
<div class="row align-items-start">
333+
<div class="row align-items-center">
266334
<div class="auto">
267335
<p class="text-primary">${r['pointer_short']}</p>
268336
</div>
269337
<div class="col-sm">
270-
<code>Boolean</code>
338+
<code>Boolean</code>
271339
% if "default" in r:
272340
= ${r["default"]}
273341
% endif
@@ -289,7 +357,7 @@
289357
<div class="card-header">
290358
<div class="container">
291359
<h5>
292-
<div class="row align-items-start">
360+
<div class="row align-items-center">
293361
<div class="auto">
294362
<p class="text-primary">${r['pointer_short']}</p>
295363
</div>
@@ -317,7 +385,23 @@
317385
</%def>
318386

319387
<html>
320-
<body>
388+
<body onload="initDarkMode()">
389+
390+
<header>
391+
<h2>${title}</h2>
392+
<button onclick="toggleDarkMode()" class="btn" id="lightmode">
393+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-brightness-low" viewBox="0 0 24 24">
394+
<path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"></path>
395+
</svg>
396+
</button>
397+
<button onclick="toggleDarkMode()" class="btn" id="darkmode">
398+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-brightness-low" viewBox="0 0 24 24">
399+
<path d="M12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12c0-2.42-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6a6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"></path>
400+
</svg>
401+
</button>
402+
</header>
403+
321404
${render_pointer(pointer_name='/')}
405+
322406
</body>
323407
</html>

‎docs/spec2html.py‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1+
import pathlib
2+
import argparse
3+
import json
4+
15
from unittest import skip
26
from mako.template import Template
37
from mako.lookup import TemplateLookup
4-
import argparse
5-
import json
8+
69

710
class json_navigator:
8-
def __init__(self,ijson):
11+
def __init__(self, ijson):
912
self.ijson = ijson
1013

11-
def rules_from_pointer(self,pointer):
14+
def rules_from_pointer(self, pointer):
1215
return [x for x in self.ijson if x['pointer'] == pointer]
1316

17+
1418
if __name__ == "__main__":
1519
parser = argparse.ArgumentParser()
16-
parser.add_argument("--input", help="Path to the input specification", required=True)
17-
parser.add_argument("--output", help="Path to the output html file", required=True)
20+
parser.add_argument(
21+
"--input", "-i", help="Path to the input specification", required=True)
22+
parser.add_argument(
23+
"--output", "-o", help="Path to the output html file", required=True)
24+
parser.add_argument(
25+
"--title", "-t", help="Title", default="JSON Specification")
1826
args = parser.parse_args()
1927

2028
# Template Lookup
@@ -27,10 +35,11 @@ def rules_from_pointer(self,pointer):
2735
# print(input)
2836

2937
print("02 - Templating")
30-
mako_template = Template(filename='docs/main.mako')
31-
body = mako_template.render(ijson=json_navigator(input),attributes={"count":0})
38+
mako_file = pathlib.Path(__file__).parent.absolute() / "main.mako"
39+
mako_template = Template(filename=str(mako_file))
40+
body = mako_template.render(
41+
title=args.title, ijson=json_navigator(input), attributes={"count": 0})
3242

3343
print("03 - Writing to output")
3444
with open(args.output, 'w') as f:
3545
f.write(body)
36-

0 commit comments

Comments
 (0)