Skip to content

Commit 8c938c0

Browse files
laike9mlaike9m
committed
Use djhtml as the formatter for jinja template files, close laike9m#25 
1 parent ef34d78 commit 8c938c0

File tree

8 files changed

+239
-125
lines changed

8 files changed

+239
-125
lines changed

‎.pre-commit-config.yaml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
repos:
2+
- repo: https://github.com/rtts/djhtml
3+
rev: '3.0.6'
4+
hooks:
5+
- id: djhtml
6+
entry: djhtml --tabwidth 2 templates

‎pdm.lock

+105-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pyproject.toml

+4
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,17 @@ license = {text = "MIT"}
1818
plugins = ["pdm-autoexport"]
1919

2020
[tool.pdm.scripts]
21+
post_install = "pdm install --plugins; pre-commit install"
2122
devserver = "flask --app app run --debug"
2223
activate = "eval $(pdm venv activate)"
2324
test = "pytest"
25+
format = "djhtml --tabwidth 2 templates"
2426

2527
[tool.pdm.dev-dependencies]
2628
dev = [
2729
"pytest>=7.4.3",
30+
"djhtml>=3.0.6",
31+
"pre-commit>=3.5.0",
2832
]
2933

3034
[[tool.pdm.autoexport]]

‎templates/base.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<!DOCTYPE html>
22
<html lang="en" data-theme="light">
3-
<head>
3+
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
77
<style type="text/css">
88
/* override some style in picocss */
9-
h1, h2, h3, h4, h5, h6,
10-
p {
9+
h1, h2, h3, h4, h5, h6,
10+
p {
1111
margin-bottom: 0;
12-
}
12+
}
1313
</style>
1414
{% block head %}{% endblock %}
15-
</head>
15+
</head>
1616

17-
<body>
17+
<body>
1818
{% include 'components/github_ribbon.html' %}
1919
{% block content %}{% endblock %}
20-
</body>
20+
</body>
2121

2222
</html>

‎templates/challenge.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
}
6363

6464
.challenge-header__exerpt {
65-
margin-bottom: 1.5rem;
66-
line-height: 1.5;
65+
margin-bottom: 1.5rem;
66+
line-height: 1.5;
6767
}
6868

6969
.challenge-main {
@@ -186,11 +186,11 @@
186186
{%include 'components/badge.html' with context %}
187187
</div>
188188
<p class="challenge-header__exerpt">
189-
Complete code on the left side following the instructions.<br>
190-
Right side is test code, lines followed by <code># expect-type-error</code>
191-
should fail type check, others should pass.<br>
192-
Hit the "▶️ Run" button to see result.
193-
</p>
189+
Complete code on the left side following the instructions.<br>
190+
Right side is test code, lines followed by <code># expect-type-error</code>
191+
should fail type check, others should pass.<br>
192+
Hit the "▶️ Run" button to see result.
193+
</p>
194194
</div>
195195

196196
<div class="challenge-main">
@@ -199,7 +199,7 @@
199199
<div id="editor"></div>
200200
<div class="editor-actions">
201201
<button id="reset-button" class="secondary">
202-
Reset
202+
Reset
203203
</button>
204204
<button id="run-button">
205205
▶️ Run

‎templates/components/badge.html

+37-37
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11

22
<head>
3-
<style type="text/css">
4-
.badge {
5-
display: flex;
6-
align-items: center;
7-
justify-content: center;
8-
padding: 2px 4px;
9-
margin-right: 4px;
10-
height: 30px;
11-
border-radius: 5px;
12-
background-color: #6cb8d4;
13-
color: white;
14-
font-size: 14px;
15-
font-weight: bold;
16-
}
3+
<style type="text/css">
4+
.badge {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
padding: 2px 4px;
9+
margin-right: 4px;
10+
height: 30px;
11+
border-radius: 5px;
12+
background-color: #6cb8d4;
13+
color: white;
14+
font-size: 14px;
15+
font-weight: bold;
16+
}
1717

18-
.badge a {
19-
color: white;
20-
}
18+
.badge a {
19+
color: white;
20+
}
2121

22-
.badge span:nth-child(2),
23-
.badge span a {
24-
font-weight: lighter;
25-
}
22+
.badge span:nth-child(2),
23+
.badge span a {
24+
font-weight: lighter;
25+
}
2626

27-
.badge span:nth-child(1) svg {
28-
width: 16px;
29-
height: 16px;
30-
margin-right: 5px;
31-
}
32-
</style>
27+
.badge span:nth-child(1) svg {
28+
width: 16px;
29+
height: 16px;
30+
margin-right: 5px;
31+
}
32+
</style>
3333
</head>
3434

3535

3636
<div class="badge">
37-
<span>
38-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 255"><defs><linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%"><stop offset="0%" stop-color="#387EB8"/><stop offset="100%" stop-color="#366994"/></linearGradient><linearGradient id="logosPython1" x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%"><stop offset="0%" stop-color="#FFE052"/><stop offset="100%" stop-color="#FFC331"/></linearGradient></defs><path fill="url(#logosPython0)" d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072ZM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13Z"/><path fill="url(#logosPython1)" d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897Zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13Z"/></svg>
39-
</span>
40-
<span>{{ python_info }}</span>
41-
</div>
42-
<div class="badge">
43-
<span>type checker:&nbsp;<span>
4437
<span>
45-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/microsoft/pyright">
46-
pyright
47-
</a>
38+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 255"><defs><linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%"><stop offset="0%" stop-color="#387EB8"/><stop offset="100%" stop-color="#366994"/></linearGradient><linearGradient id="logosPython1" x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%"><stop offset="0%" stop-color="#FFE052"/><stop offset="100%" stop-color="#FFC331"/></linearGradient></defs><path fill="url(#logosPython0)" d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072ZM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13Z"/><path fill="url(#logosPython1)" d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897Zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13Z"/></svg>
4839
</span>
40+
<span>{{ python_info }}</span>
4941
</div>
42+
<div class="badge">
43+
<span>type checker:&nbsp;<span>
44+
<span>
45+
<a target="_blank" rel="noopener noreferrer" href="https://github.com/microsoft/pyright">
46+
pyright
47+
</a>
48+
</span>
49+
</div>

0 commit comments

Comments
 (0)