style: Add .editorconfig to ease editing & indentation in html

This commit is contained in:
Dendy 2025-09-06 10:02:18 +02:00
parent 93a54f323c
commit 8ae1107529
5 changed files with 291 additions and 266 deletions

12
.editorconfig Normal file
View File

@ -0,0 +1,12 @@
root = true
[*]
indent_style = space
end_of_line = lf
charset = utf-8
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.{html.twig,html}]
indent_size = 2

View File

@ -4,19 +4,19 @@
{% block body %}
<div class="example-wrapper">
<h1>hello</h1>
<span>total {{ notes|length }}</span>
{% for note in notes %}
<div style="
border: 1px solid black;
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
">
{{ note.fields.SentKanji }}
<br>
<a href="{{ path('app_anki_get_note', {nid: note.id}) }}">view</a>
</div>
{% endfor %}
<h1>hello</h1>
<span>total {{ notes|length }}</span>
{% for note in notes %}
<div style="
border: 1px solid black;
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
">
{{ note.fields.SentKanji }}
<br>
<a href="{{ path('app_anki_get_note', {nid: note.id}) }}">view</a>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -1,79 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
{% block stylesheets %}
{% endblock %}
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
{% block stylesheets %}
{% endblock %}
{% block javascripts %}
{% block importmap %}{{ importmap('app') }}{% endblock %}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
{% block importmap %}{{ importmap('app') }}{% endblock %}
{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
<div
class="modal fade modal-xl"
id="baseModal"
tabindex="-1"
aria-labelledby="baseModalLabel"
aria-hidden="true"
hx-indicator="#baseModalIndicator"
<div
class="modal fade modal-xl"
id="baseModal"
tabindex="-1"
aria-labelledby="baseModalLabel"
aria-hidden="true"
hx-indicator="#baseModalIndicator"
>
<div class="modal-dialog" style="position: relative;">
<div
class="modal-content"
id="baseModalContent"
style="min-height: 400px;"
hx-swap="innerHTML"
hx-indicator="#baseModalIndicator"
>
<div class="modal-header">
<h1
class="modal-title fs-5"
id="baseModalLabel"
>
<div class="modal-dialog" style="position: relative;">
Modal
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
>
</button>
</div>
<div class="modal-body" style="min-height: 350px;"></div>
</div>
<div
class="modal-content"
id="baseModalContent"
style="min-height: 400px;"
{#<div
id="baseModalIndicator"
class="display-indicator"
style="
background-color: rgba(255,255,255,0.75);
display: block !important;
position: absolute;
z-index: 999;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
"
>
<div class="d-flex flex-column align-items-center justify-content-center h-100 gap-3">
<div style="width: 3rem; height: 3rem;" class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div>Loading...</div>
</div>
</div>#}
hx-swap="innerHTML"
hx-indicator="#baseModalIndicator"
>
<div class="modal-header">
<h1
class="modal-title fs-5"
id="baseModalLabel"
>
Modal
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
>
</button>
</div>
<div class="modal-body" style="min-height: 350px;"></div>
</div>
</div>
</div> <!-- modal -->
{#<div
id="baseModalIndicator"
class="display-indicator"
style="
background-color: rgba(255,255,255,0.75);
display: block !important;
position: absolute;
z-index: 999;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
"
>
<div class="d-flex flex-column align-items-center justify-content-center h-100 gap-3">
<div style="width: 3rem; height: 3rem;" class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div>Loading...</div>
</div>
</div>#}
</div>
</div> <!-- modal -->
</body>
</body>
</html>

View File

@ -4,101 +4,114 @@
{% block body %}
<style>
.taiwan > .kanji-card { background-color: hsl(300, 100%, 80%); color: black; }
.taiwan > .kanji-card { background-color: hsl(300, 100%, 80%); color: black; }
.zhcn-n1 > .kanji-card { background-color: hsl(220, 100%, 90%); color: black; }
.zhcn-n2 > .kanji-card { background-color: hsl(220, 100%, 80%); color: black; }
.zhcn-n3 > .kanji-card { background-color: hsl(220, 100%, 60%); color: black; }
.zhcn-n1 > .kanji-card { background-color: hsl(220, 100%, 90%); color: black; }
.zhcn-n2 > .kanji-card { background-color: hsl(220, 100%, 80%); color: black; }
.zhcn-n3 > .kanji-card { background-color: hsl(220, 100%, 60%); color: black; }
.hsk-n1 > .kanji-card { background-color: hsl(180, 100%, 90%); color: black; }
.hsk-n2 > .kanji-card { background-color: hsl(180, 100%, 85%); color: black; }
.hsk-n3 > .kanji-card { background-color: hsl(180, 100%, 80%); color: black; }
.hsk-n4 > .kanji-card { background-color: hsl(180, 100%, 75%); color: black; }
.hsk-n5 > .kanji-card { background-color: hsl(180, 100%, 70%); color: black; }
.hsk-n6 > .kanji-card { background-color: hsl(180, 100%, 65%); color: black; }
.hsk-n7_9 > .kanji-card { background-color: hsl(180, 100%, 40%); color: black; }
.hsk-n1 > .kanji-card { background-color: hsl(180, 100%, 90%); color: black; }
.hsk-n2 > .kanji-card { background-color: hsl(180, 100%, 85%); color: black; }
.hsk-n3 > .kanji-card { background-color: hsl(180, 100%, 80%); color: black; }
.hsk-n4 > .kanji-card { background-color: hsl(180, 100%, 75%); color: black; }
.hsk-n5 > .kanji-card { background-color: hsl(180, 100%, 70%); color: black; }
.hsk-n6 > .kanji-card { background-color: hsl(180, 100%, 65%); color: black; }
.hsk-n7_9 > .kanji-card { background-color: hsl(180, 100%, 40%); color: black; }
.kanken-n10 > .kanji-card { background-color: hsl( 0, 100%, 90%); color: black; }
.kanken-n9 > .kanji-card { background-color: hsl( 0, 100%, 80%); color: black; }
.kanken-n8 > .kanji-card { background-color: hsl( 0, 100%, 70%); color: black; }
.kanken-n7 > .kanji-card { background-color: hsl( 0, 100%, 60%); color: black; }
.kanken-n6 > .kanji-card { background-color: hsl( 0, 100%, 50%); color: black; }
.kanken-n5 > .kanji-card { background-color: hsl( 0, 100%, 40%); color: black; }
.kanken-n4 > .kanji-card { background-color: hsl( 0, 100%, 30%); color: white; }
.kanken-n3 > .kanji-card { background-color: hsl( 0, 100%, 20%); color: white; }
.kanken-np2 > .kanji-card { background-color: hsl( 85, 100%, 70%); color: black; }
.kanken-n2 > .kanji-card { background-color: hsl( 80, 100%, 50%); color: black; }
.kanken-np1 > .kanji-card { background-color: hsl( 60, 100%, 90%); color: black; }
.kanken-np1n1 > .kanji-card { background-color: hsl( 55, 100%, 70%); color: black; }
.kanken-n1 > .kanji-card { background-color: hsl( 50, 100%, 50%); color: black; }
.kanken-n10 > .kanji-card { background-color: hsl( 0, 100%, 90%); color: black; }
.kanken-n9 > .kanji-card { background-color: hsl( 0, 100%, 80%); color: black; }
.kanken-n8 > .kanji-card { background-color: hsl( 0, 100%, 70%); color: black; }
.kanken-n7 > .kanji-card { background-color: hsl( 0, 100%, 60%); color: black; }
.kanken-n6 > .kanji-card { background-color: hsl( 0, 100%, 50%); color: black; }
.kanken-n5 > .kanji-card { background-color: hsl( 0, 100%, 40%); color: black; }
.kanken-n4 > .kanji-card { background-color: hsl( 0, 100%, 30%); color: white; }
.kanken-n3 > .kanji-card { background-color: hsl( 0, 100%, 20%); color: white; }
.kanken-np2 > .kanji-card { background-color: hsl( 85, 100%, 70%); color: black; }
.kanken-n2 > .kanji-card { background-color: hsl( 80, 100%, 50%); color: black; }
.kanken-np1 > .kanji-card { background-color: hsl( 60, 100%, 90%); color: black; }
.kanken-np1n1 > .kanji-card { background-color: hsl( 55, 100%, 70%); color: black; }
.kanken-n1 > .kanji-card { background-color: hsl( 50, 100%, 50%); color: black; }
.bushu > .kanji-card { background-color: hsl( 45, 100%, 0%); color: white; }
.kyuujitai > .kanji-card { background-color: hsl( 45, 100%, 30%); color: white; }
.kyoyou > .kanji-card { background-color: hsl( 45, 0%, 50%); color: white; }
.bushu > .kanji-card { background-color: hsl( 45, 100%, 0%); color: white; }
.kyuujitai > .kanji-card { background-color: hsl( 45, 100%, 30%); color: white; }
.kyoyou > .kanji-card { background-color: hsl( 45, 0%, 50%); color: white; }
.unicode { border: 3px solid green !important; }
.sn { border-bottom: 3px solid var(--bs-danger) !important; }
.sln { border-bottom: 3px solid var(--bs-warning) !important; }
.ebook { border-top: 3px solid deeppink !important; }
.jimaku { border-top: 3px solid lightgray !important; }
.unicode { border: 3px solid green !important; }
.sn { border-bottom: 3px solid var(--bs-danger) !important; }
.sln { border-bottom: 3px solid var(--bs-warning) !important; }
.ebook { border-top: 3px solid deeppink !important; }
.jimaku { border-top: 3px solid lightgray !important; }
.none { opacity: 0.25; }
</style>
<div class="example-wrapper">
<div>
<h1 class="text-center p-2 mb-2">{{ block('title') }}</h1>
<div
class="d-flex flex-wrap m-2"
hx-target="#baseModalContent"
hx-swap="innerHTML"
>
{% for char in characters %}
<div style="width: calc(100% / 16);">
<div
class="border text-center rounded {{ char.lists|keys|join(' ') }}"
style="
margin: 2px;
overflow: hidden;
"
title="{{ char.lists|keys|join("\n") }}"
>
<div
class="kanji-card border-bottom fs-1 pb-1"
hx-get="{{ path('app_kanji_view', { char: char.codepoint }) }}"
data-bs-toggle="modal"
data-bs-target="#baseModal"
>
{#{% if char.jiten_href != null %}
<a
target="_blank"
href="{{- char.jiten_href -}}"
class="border-bottom"
>
{{- char.str -}}
</a>
{% else %}#}
{{- char.str -}}
{#{% endif %}#}
</div>
<div style="padding-bottom: 2px;">
{% if char.lists.unicode is not defined %}
<a
target="_blank"
href="{{ path('app_kanji_register', {
codepoint: char.codepoint
}) }}"
>
{{ char.codepoint }}
</a>
{% else %}
{{ char.codepoint }}
{% endif %}
</div>
</div>
</div>
{% endfor %}
<div>
<input>
</div>
</div>
<div
class="d-flex flex-wrap m-2"
hx-target="#baseModalContent"
hx-swap="innerHTML"
>
{% for char in characters %}
<div style="width: calc(100% / 16);">
<div
class="
border text-center rounded
{{ char.lists|length == 0
? 'none'
: char.lists|keys|join(' ')
}}
"
style="
margin: 2px;
overflow: hidden;
"
title="{{ char.lists|keys|join("\n") }}"
>
<div
class="kanji-card border-bottom fs-1 pb-1"
hx-get="{{ path('app_kanji_view', { char: char.codepoint }) }}"
data-bs-toggle="modal"
data-bs-target="#baseModal"
>
{#{% if char.jiten_href != null %}
<a
target="_blank"
href="{{- char.jiten_href -}}"
class="border-bottom"
>
{{- char.str -}}
</a>
{% else %}#}
{{- char.str -}}
{#{% endif %}#}
</div>
<div style="padding-bottom: 2px;">
{% if char.lists.unicode is not defined %}
<a
target="_blank"
href="{{ path('app_kanji_register', {
codepoint: char.codepoint
}) }}"
>
{{ char.codepoint }}
</a>
{% else %}
{{ char.codepoint }}
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}

View File

@ -1,100 +1,100 @@
<div class="d-flex flex-column gap-2 p-3 align-items-start">
<div class="d-flex gap-2 w-100">
<div class="card">
<div class="card-body">
<div style="font-size: 6em;">{{ char }}</div>
</div>
<div class="card-footer text-center">
{{ codepoint }}
</div>
</div>
<div class="flex-grow-1">
<h2>Lists</h2>
<ul>
{% for list in info|keys %}
<li>{{ list }}</li>
{% endfor %}
</ul>
</div>
<div class="flex-grow-1">
<h2>Links</h2>
<ul>
{% if jiten_href is not null %}
<li><a class="text-primary" href="{{ jiten_href }}">漢字辞典</a></li>
{% else %}
<li class="text-muted">漢字辞典</li>
{% endif %}
<li>
<a
class="text-primary"
href="{{ 'https://en.wiktionary.org/wiki/' ~ char|url_encode }}"
>
Wiktionary EN
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://ja.wiktionary.org/wiki/' ~ char|url_encode }}"
>
Wiktionary JA
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://forvo.com/word/' ~ char|url_encode ~ '/#zh' }}"
>
Forvo
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.unicode.org/cgi-bin/GetUnihanData.pl?codepoint=' ~ codepoint }}"
>
Unihan Database
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.mdbg.net/chinese/dictionary?' ~ {
page: 'worddict',
wdrst: 0,
wdqb: 'c:*' ~ char ~ '*'
}|url_encode }}"
>
MDBG Simplified Chinese words
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.mdbg.net/chinese/dictionary?' ~ {
page: 'worddict',
wdrst: 1,
wdqb: 'c:*' ~ char ~ '*'
}|url_encode }}"
>
MDBG Traditional Chinese words
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.chise.org/est/view/character/' ~ char|url_encode }}"
>
CHISE
</a>
</li>
</ul>
</div>
<div class="d-flex gap-2 w-100">
<div class="card">
<div class="card-body">
<div style="font-size: 6em;">{{ char }}</div>
</div>
<div class="card-footer text-center">
{{ codepoint }}
</div>
</div>
<div class="d-flex flex-column">
<h2>Appeareances</h2>
{% for refname, refcount in ref %}
<div>{{ refname|basename }}: {{ refcount }}</div>
{% endfor %}
<div class="flex-grow-1">
<h2>Lists</h2>
<ul>
{% for list in info|keys %}
<li>{{ list }}</li>
{% endfor %}
</ul>
</div>
<div class="flex-grow-1">
<h2>Links</h2>
<ul>
{% if jiten_href is not null %}
<li><a class="text-primary" href="{{ jiten_href }}">漢字辞典</a></li>
{% else %}
<li class="text-muted">漢字辞典</li>
{% endif %}
<li>
<a
class="text-primary"
href="{{ 'https://en.wiktionary.org/wiki/' ~ char|url_encode }}"
>
Wiktionary EN
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://ja.wiktionary.org/wiki/' ~ char|url_encode }}"
>
Wiktionary JA
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://forvo.com/word/' ~ char|url_encode ~ '/#zh' }}"
>
Forvo
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.unicode.org/cgi-bin/GetUnihanData.pl?codepoint=' ~ codepoint }}"
>
Unihan Database
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.mdbg.net/chinese/dictionary?' ~ {
page: 'worddict',
wdrst: 0,
wdqb: 'c:*' ~ char ~ '*'
}|url_encode }}"
>
MDBG Simplified Chinese words
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.mdbg.net/chinese/dictionary?' ~ {
page: 'worddict',
wdrst: 1,
wdqb: 'c:*' ~ char ~ '*'
}|url_encode }}"
>
MDBG Traditional Chinese words
</a>
</li>
<li>
<a
class="text-primary"
href="{{ 'https://www.chise.org/est/view/character/' ~ char|url_encode }}"
>
CHISE
</a>
</li>
</ul>
</div>
</div>
<div class="d-flex flex-column">
<h2>Appeareances</h2>
{% for refname, refcount in ref %}
<div>{{ refname|basename }}: {{ refcount }}</div>
{% endfor %}
</div>
</div>