Add categories and favicon

* Reorganize resource directories (templates, less, static)
* Show categories on index
* Add favicon
This commit is contained in:
Carlos Galindo 2020-12-25 21:49:59 +01:00
parent 7e517112f7
commit 3eaed2eaa8
17 changed files with 180 additions and 64 deletions

View file

@ -1,34 +1,29 @@
.PHONY=static all clean svg js css .PHONY=static all clean
ALL_CSS := $(patsubst res/%.less,public/%.css,$(wildcard res/*.less)) ALL_STATIC := $(patsubst res/static/%,public/%,$(wildcard res/static/*))
ALL_JS := $(patsubst res/%.js,public/%.js,$(wildcard res/*.js)) ALL_LESS := $(patsubst res/less/%.less,public/%.css,$(wildcard res/less/*.less))
ALL_SVG := $(patsubst res/%.svg,public/%.svg,$(wildcard res/*.svg)) ALL_TEMPLATES := $(wildcard res/templates/*.html)
ALL_TEMPLATES := $(wildcard res/html/*.html) PY_SRC := $(wildcard src/**.py)
all: public/index.html
static: css js svg all: public public/audios public/index.html static
css: $(ALL_CSS) static: $(ALL_LESS) $(ALL_STATIC)
js: $(ALL_JS)
svg: $(ALL_SVG)
public: public:
mkdir public mkdir public
public/index.html: static public public/audios $(ALL_TEMPLATES) public/index.html: $(ALL_TEMPLATES) $(PY_SRC)
python3 src/latex_scanner.py --latex latex/cancionero.tex --audios audios python3 src/latex_scanner.py --latex latex/cancionero.tex --audios audios
public/audios: audios public public/audios: audios public
rm -f public/audios rm -f public/audios
ln -s ../audios public/audios ln -s ../audios public/audios
public/%.css: res/%.less public/%.css: res/less/%.less
lessc $< $@ lessc $< $@
public/%: res/% public/%: res/static/%
cp $< $@ cp $< $@
clean: clean:

View file

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path="." only %}
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
{% include "header.html" with path="." %}
<h2>Índice</h2>
Las canciones sin acordes están marcadas en <span class="noChords">rojo</span>.
<ol class="songs">
{% for song in songs %}
<a href="{{ song.url }}">
<li {% if not song.chorded %}class="noChords"{% endif %}>
<span class="number">{{ song.number }}.</span>
{{ song.name }}
{% if song.author %} por {{ song.author }} {% endif %}
{% if song.origin %} basado en {{ song.origin }} {% endif %}
</li>
</a>
{% endfor %}
</ol>
{% include "footer.html" %}
</body>
</html>

View file

@ -30,6 +30,14 @@
} }
} }
} }
ul.songs {
width: 100%;
margin: 1em auto;
li {
display: inline-block;
margin: .2em;
}
}
span.noChords { span.noChords {
background-color: @nochordscolor; background-color: @nochordscolor;
padding: 0.3em 0.4em; padding: 0.3em 0.4em;

89
res/static/favicon.svg Normal file
View file

@ -0,0 +1,89 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
data-v-fde0c5aa=""
viewBox="0 0 300 300"
class="iconAbove"
version="1.1"
id="svg18"
sodipodi:docname="favicon.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
<metadata
id="metadata22">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="956"
inkscape:window-height="1041"
id="namedview20"
showgrid="false"
inkscape:zoom="0.86620581"
inkscape:cx="180.22708"
inkscape:cy="192.64261"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="0"
inkscape:current-layer="svg18"
inkscape:document-rotation="0" />
<!---->
<defs
data-v-fde0c5aa=""
id="defs2">
<!---->
</defs>
<rect
data-v-fde0c5aa=""
fill="#f3eea8"
x="0"
y="0"
width="300"
height="300"
class="logo-background-square"
id="rect4"
style="stroke-width:1" />
<defs
data-v-fde0c5aa=""
id="defs6">
<!---->
</defs>
<defs
data-v-fde0c5aa=""
id="defs11">
<!---->
</defs>
<g
data-v-fde0c5aa=""
id="69d3071f-d543-44f2-8f59-52c9a11420f9"
stroke="none"
fill="#933547"
transform="matrix(3.0327786,0,0,3.0327786,-1.6389288,8.1593111)">
<path
d="M 95,8.539 53,22.986 V 73.27 c -1.832,-0.864 -4.27,-1.001 -6.694,-0.193 -4.192,1.397 -6.74,5.078 -5.692,8.222 1.048,3.144 5.295,4.559 9.487,3.162 3.742,-1.247 6.166,-4.314 5.899,-7.195 V 32 L 92,19.603 v 32.681 c -1.835,-0.876 -4.286,-1.019 -6.722,-0.207 -4.192,1.397 -6.74,5.078 -5.692,8.222 1.048,3.144 5.295,4.559 9.487,3.162 3.525,-1.175 5.878,-3.965 5.918,-6.692 H 95 Z M 19,9 v 43 c -1.869,-0.892 -4.481,-0.971 -6.963,-0.143 -4.269,1.423 -6.865,5.172 -5.798,8.374 1.067,3.202 5.393,4.644 9.663,3.221 3.59,-1.197 6.047,-4.038 6.087,-6.816 H 22 V 23 c 0,0 12.926,3.741 17,18 C 39,24.704 25,22 19,9 Z M 37.423,79 H 2 v 2 h 35.476 a 7.751,7.751 0 0 1 -0.053,-2 z"
id="path13" />
<path
d="M 98,81 V 79 H 58.9 a 8.662,8.662 0 0 1 -0.591,2 z M 5.078,64 H 2 v 2 H 7.87 A 8.874,8.874 0 0 1 5.078,64 Z M 98,66 v -2 h -3.769 a 13.016,13.016 0 0 1 -3.377,2 z M 78.401,64 H 59 v 2 H 81.155 A 8.74,8.74 0 0 1 78.401,64 Z M 21.09,64 a 13.4,13.4 0 0 1 -3.433,2 H 50 V 64 Z M 25,49 h 25 v 2 H 25 Z M 11.125,49 H 2 v 2 h 5.25 a 13.625,13.625 0 0 1 3.839,-1.99 z M 59,51 h 21.822 a 13.5,13.5 0 0 1 3.507,-1.769 c 0.264,-0.088 0.53,-0.16 0.796,-0.231 H 59 Z M 32.25,34 H 25 v 2 h 8.595 A 22.994,22.994 0 0 0 32.25,34 Z M 2,34 h 14 v 2 H 2 Z m 57,2 H 89 V 34 H 59.406 L 59,34.14 Z M 41.551,36 H 50 v -2 h -8.898 c 0.175,0.642 0.323,1.311 0.449,2 z M 32.734,21 h 18.028 a 2.991,2.991 0 0 1 1.263,-0.851 L 55.366,19 h -24.68 l 0.011,0.011 c 0.68,0.657 1.362,1.317 2.037,1.989 z M 2,19 h 14 v 2 H 2 Z"
id="path15" />
</g>
<!---->
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View file

Before

Width:  |  Height:  |  Size: 201 B

After

Width:  |  Height:  |  Size: 201 B

View file

@ -31,7 +31,12 @@ function setTransposeSelector(n) {
while (n < -6) { while (n < -6) {
n += 12 n += 12
} }
document.getElementById("transposeSelect").value = n ts = document.getElementById("transposeSelect")
if (n > 0) {
ts.value = "+" + n
} else {
ts.value = n
}
} }
function getTranspose() { function getTranspose() {

View file

@ -1,7 +1,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Cancionero - Parroquia San Leandro</title> <title>Cancionero - Parroquia San Leandro</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/svg+xml" href="{{ path|urlencode }}/favicon.svg"/>
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/main.css"/> <link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/main.css"/>
{% if specific_css %} {% if specific_css %}
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/{{ specific_css|urlencode }}"/> <link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/{{ specific_css|urlencode }}"/>
{% endif %} {% endif %}

35
res/templates/index.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="es">
<head>
{% include "head.html" with path="." only %}
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
{% include "header.html" with path="." %}
<h2>Índice</h2>
<ul class="songs">
{% for category in sorted_categories %}
<a href="#{{ category|slugify }}">
<li>{{ category|title }}</li>
</a>
{% endfor %}
</ul>
Las canciones sin acordes están marcadas en <span class="noChords">rojo</span>.
<ol class="songs">
{% for category, songs in sorted_categories.items %}
<h3 id="{{ category|slugify }}">{{ category|title }}</h3>
{% for song in songs %}
<a href="{{ song.url }}">
<li {% if not song.chorded %}class="noChords"{% endif %}>
<span class="number">{{ song.number }}.</span>
{{ song.name }}
{% if song.author %} por {{ song.author }} {% endif %}
{% if song.origin %} basada en {{ song.origin }} {% endif %}
</li>
</a>
{% endfor %}
{% endfor %}
</ol>
{% include "footer.html" %}
</body>
</html>

View file

@ -10,11 +10,12 @@
{% include "header.html" with path=".." %} {% include "header.html" with path=".." %}
<div class="song"> <div class="song">
<h2>{{ song.name}}</h2> <h2>{{ song.name}}</h2>
<a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
{% if song.author %} {% if song.author %}
<div>Autor: {{ song.author }}</div> <span>por <strong>{{ song.author }}</strong></span>
{% endif %} {% endif %}
{% if song.origin %} {% if song.origin %}
<div>Basada en: {{ song.origin }}</div> <span>basada en: <strong>{{ song.origin }}</strong></span>
{% endif %} {% endif %}
<h3>Ajustes</h3> <h3>Ajustes</h3>
<div> <div>
@ -29,19 +30,19 @@
<button class="small" onclick="transposeAdd(-2)">-2</button> <button class="small" onclick="transposeAdd(-2)">-2</button>
<button class="small" onclick="transposeAdd(-1)">-1</button> <button class="small" onclick="transposeAdd(-1)">-1</button>
<select id="transposeSelect" disabled> <select id="transposeSelect" disabled>
<option onclick="transpose(-6)">-6</option> <option>-6</option>
<option onclick="transpose(-5)">-5</option> <option>-5</option>
<option onclick="transpose(-4)">-4</option> <option>-4</option>
<option onclick="transpose(-3)">-3</option> <option>-3</option>
<option onclick="transpose(-2)">-2</option> <option>-2</option>
<option onclick="transpose(-1)">-1</option> <option>-1</option>
<option onclick="transpose(0)" selected="selected">0</option> <option selected="selected">0</option>
<option onclick="transpose(1)">1</option> <option>+1</option>
<option onclick="transpose(2)">2</option> <option>+2</option>
<option onclick="transpose(3)">3</option> <option>+3</option>
<option onclick="transpose(4)">4</option> <option>+4</option>
<option onclick="transpose(5)">5</option> <option>+5</option>
<option onclick="transpose(6)">6</option> <option>+6</option>
</select> </select>
<button class="small" onclick="transposeAdd(1)">+1</button> <button class="small" onclick="transposeAdd(1)">+1</button>
<button class="small" onclick="transposeAdd(2)">+2</button> <button class="small" onclick="transposeAdd(2)">+2</button>
@ -104,7 +105,8 @@
{% endfor %} {% endfor %}
<a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/{{ song.latex_file|urlencode }}"><span>Ver archivo original (LaTeX)</span></a> <a href="https://gitlab.com/parroquia-san-leandro/cancionero-25/blob/master/{{ song.latex_file|urlencode }}"><span>Ver archivo original (LaTeX)</span></a>
<a href="../"><span>Índice</span></a> <a href="../"><span>Índice</span></a>
<a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
</div> </div>
{% include "footer.html" %} {% include "footer.html" %}
</body> </body>
</html> </html>

View file

@ -38,9 +38,8 @@ class SongLoader:
self.category = None self.category = None
self.categories = [] self.categories = []
self.songs = [] self.songs = []
self.scan(latex_file)
self.memory = {}
self.audio_dir = audio_dir self.audio_dir = audio_dir
self.scan(latex_file)
def scan(self, latex_file): def scan(self, latex_file):
main_file = open(latex_file, 'r') main_file = open(latex_file, 'r')
@ -228,9 +227,16 @@ class SongLoader:
continue continue
current_verse.add_line(Line(text, extras)) current_verse.add_line(Line(text, extras))
def sort_categories(self):
result = {}
for c in self.categories:
result[c] = sorted([s for s in self.songs if s.category == c],
key=lambda s: s.number)
return result
def print_index(self, index_file, dj_engine): def print_index(self, index_file, dj_engine):
songs = sorted(self.songs, key=lambda s: s.number) context = Context({'sorted_categories': self.sort_categories()})
html = dj_engine.get_template("index.html").render(Context({'songs': songs})) html = dj_engine.get_template("index.html").render(context)
with open(index_file, 'w') as f: with open(index_file, 'w') as f:
f.write(html) f.write(html)
@ -264,5 +270,5 @@ if __name__ == '__main__':
args = parse_args() args = parse_args()
loader = SongLoader(args.latex[0], args.audios[0]) loader = SongLoader(args.latex[0], args.audios[0])
settings.configure(USE_TZ=False, USE_I18N=False) settings.configure(USE_TZ=False, USE_I18N=False)
e = Engine(dirs=["res/html/"]) e = Engine(dirs=["res/templates/"])
loader.generate_html(args.output_dir[0], e) loader.generate_html(args.output_dir[0], e)