Add categories and favicon

* Reorganize resource directories (templates, less, static) * Show categories on index * Add favicon
2024-12-22 08:43:33 +01:00 · 2020-12-25 21:49:59 +01:00 · 2020-12-25 21:49:59 +01:00 · 3eaed2eaa8
commit 3eaed2eaa8
parent 7e517112f7
17 changed files with 180 additions and 64 deletions
--- a/25
+++ b/25
@ -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_JS := $(patsubst res/%.js,public/%.js,$(wildcard res/*.js))
-ALL_SVG := $(patsubst res/%.svg,public/%.svg,$(wildcard res/*.svg))
-ALL_TEMPLATES := $(wildcard res/html/*.html)
+ALL_STATIC := $(patsubst res/static/%,public/%,$(wildcard res/static/*))
+ALL_LESS := $(patsubst res/less/%.less,public/%.css,$(wildcard res/less/*.less))
+ALL_TEMPLATES := $(wildcard res/templates/*.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)
-
-js: $(ALL_JS)
-
-svg: $(ALL_SVG)
+static: $(ALL_LESS) $(ALL_STATIC)

 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

 public/audios: audios public
 	rm -f public/audios
 	ln -s ../audios public/audios

-public/%.css: res/%.less
+public/%.css: res/less/%.less
 	lessc $< $@

-public/%: res/%
+public/%: res/static/%
 	cp $< $@

 clean:
--- a/res/html/index.html
+++ b/res/html/index.html
@ -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>
--- a/res/less/colors.less
+++ b/res/less/colors.less
--- a/res/less/index.less
+++ b/res/less/index.less
@ -30,6 +30,14 @@
        }
    }
 }
+ul.songs {
+    width: 100%;
+    margin: 1em auto;
+    li {
+        display: inline-block;
+        margin: .2em;
+    }
+}
 span.noChords {
    background-color: @nochordscolor;
    padding: 0.3em 0.4em;
--- a/res/less/main.less
+++ b/res/less/main.less
--- a/res/less/song.less
+++ b/res/less/song.less
--- a/res/static/favicon.svg
+++ b/res/static/favicon.svg
@ -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>
--- a/res/static/repeat-sign.svg
+++ b/res/static/repeat-sign.svg
--- a/res/static/sizes.js
+++ b/res/static/sizes.js
--- a/res/static/transpose.js
+++ b/res/static/transpose.js
@ -31,7 +31,12 @@ function setTransposeSelector(n) {
    while (n < -6) {
        n += 12
    }
-    document.getElementById("transposeSelect").value = n
+    ts = document.getElementById("transposeSelect")
+    if (n > 0) {
+        ts.value = "+" + n
+    } else {
+        ts.value = n
+    }
 }

 function getTranspose() {
--- a/res/templates/footer.html
+++ b/res/templates/footer.html
--- a/res/templates/head.html
+++ b/res/templates/head.html
@ -1,7 +1,8 @@
 <meta charset="UTF-8">
 <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"/>
 {% if specific_css %}
 <link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/{{ specific_css|urlencode }}"/>
-{% endif %}
+{% endif %}
--- a/res/templates/header.html
+++ b/res/templates/header.html
--- a/res/templates/index.html
+++ b/res/templates/index.html
@ -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>
--- a/res/templates/song.html
+++ b/res/templates/song.html
@ -10,11 +10,12 @@
        {% include "header.html" with path=".." %}
        <div class="song">
            <h2>{{ song.name}}</h2>
+            <a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
            {% if song.author %}
-            <div>Autor: {{ song.author }}</div>
+            <span>por <strong>{{ song.author }}</strong></span>
            {% endif %}
            {% if song.origin %}
-            <div>Basada en: {{ song.origin }}</div>
+            <span>basada en: <strong>{{ song.origin }}</strong></span>
            {% endif %}
            <h3>Ajustes</h3>
            <div>
@ -29,19 +30,19 @@
                <button class="small" onclick="transposeAdd(-2)">-2</button>
                <button class="small" onclick="transposeAdd(-1)">-1</button>
                <select id="transposeSelect" disabled>
-                    <option onclick="transpose(-6)">-6</option>
-                    <option onclick="transpose(-5)">-5</option>
-                    <option onclick="transpose(-4)">-4</option>
-                    <option onclick="transpose(-3)">-3</option>
-                    <option onclick="transpose(-2)">-2</option>
-                    <option onclick="transpose(-1)">-1</option>
-                    <option onclick="transpose(0)" selected="selected">0</option>
-                    <option onclick="transpose(1)">1</option>
-                    <option onclick="transpose(2)">2</option>
-                    <option onclick="transpose(3)">3</option>
-                    <option onclick="transpose(4)">4</option>
-                    <option onclick="transpose(5)">5</option>
-                    <option onclick="transpose(6)">6</option>
+                    <option>-6</option>
+                    <option>-5</option>
+                    <option>-4</option>
+                    <option>-3</option>
+                    <option>-2</option>
+                    <option>-1</option>
+                    <option selected="selected">0</option>
+                    <option>+1</option>
+                    <option>+2</option>
+                    <option>+3</option>
+                    <option>+4</option>
+                    <option>+5</option>
+                    <option>+6</option>
                </select>
                <button class="small" onclick="transposeAdd(1)">+1</button>
                <button class="small" onclick="transposeAdd(2)">+2</button>
@ -104,7 +105,8 @@
            {% 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="../"><span>Índice</span></a>
+            <a href="../#{{ song.category|slugify }}"><span>Categoría: {{ song.category|title }}</span></a>
        </div>
        {% include "footer.html" %}
    </body>
-</html>
+</html>
--- a/res/templates/song_redir.html
+++ b/res/templates/song_redir.html
--- a/src/latex_scanner.py
+++ b/src/latex_scanner.py
@ -38,9 +38,8 @@ class SongLoader:
        self.category = None
        self.categories = []
        self.songs = []
-        self.scan(latex_file)
-        self.memory = {}
        self.audio_dir = audio_dir
+        self.scan(latex_file)

    def scan(self, latex_file):
        main_file = open(latex_file, 'r')
@ -228,9 +227,16 @@ class SongLoader:
                continue
            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):
-        songs = sorted(self.songs, key=lambda s: s.number)
-        html = dj_engine.get_template("index.html").render(Context({'songs': songs}))
+        context = Context({'sorted_categories': self.sort_categories()})
+        html = dj_engine.get_template("index.html").render(context)
        with open(index_file, 'w') as f:
            f.write(html)

@ -264,5 +270,5 @@ if __name__ == '__main__':
    args = parse_args()
    loader = SongLoader(args.latex[0], args.audios[0])
    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)