feat: no-css/js preview mode, fix: locales, choose alert, no-css/js formatting, /download->/ redirect, chrore: update/cleanup packages (#17)

- add flask preview command to check site without CSS/JS
- fix help alert breaking on apostrophes
- add missing JS line-continuations for UK locale
- straighten backtick/typographic apostrophes (FR/IT/NL)
- fix mistakes in IT locale
- redirect bare /download to localized download page
- strip underlined whitespace inside WebView links
- replace icon CSS margins with literal spaces
- trim link whitespace at render time, keep templates clean
- upgrade htmlmin, drop unused sass nix package

---------

Co-authored-by: Sweetbread <risdeveau@lair.moe>
Reviewed-on: #17
Reviewed-by: Gleb Zaharov <risdeveau@lair.moe>

app.py

@@ -1,8 +1,11 @@
+import os
 import re
 import datetime
 
+import click
 from sass import compile as compile_sass
 from flask import Flask, redirect, request, url_for, g, Response
+from flask.cli import run_command
 
 from modules import autobuild, locales, helpers
 
@@ -90,6 +93,11 @@ def home():
     return redirect(url_for("index", lang=helpers.get_best_lang()))
 
 
+@app.route("/download", strict_slashes=False)
+def download_home():
+    return redirect(url_for("download", lang=helpers.get_best_lang()))
+
+
 @app.route("/<lang>", strict_slashes=False)
 def index(lang):
     return helpers.render_localized_template(lang, "index.html")
@@ -141,6 +149,24 @@ def sitemap_xml():
     return Response("\n".join(xml_lines), mimetype="application/xml")
 
 
+# ---------- CLI -------------------------------------------------------------
+
+
+@app.cli.command("preview")
+@click.option("--nocss", is_flag=True, help="Render pages without CSS")
+@click.option("--nojs", is_flag=True, help="Render pages without JS")
+@click.pass_context
+def preview(ctx, nocss, nojs):
+    """Run the dev server without CSS/JS to preview the KolibriOS WebView look."""
+    app.config["NOCSS"] = nocss
+    app.config["NOJS"] = nojs
+    # Delegate to the built-in `flask run` instead of app.run() (which the
+    # Flask CLI ignores). FLASK_DEBUG enables the reloader/debugger so the
+    # command behaves like `flask run --debug`.
+    os.environ["FLASK_DEBUG"] = "1"
+    ctx.invoke(run_command, host="0.0.0.0")
+
+
 # ---------- APP ENTRY -------------------------------------------------------
 
 

locales/fr.ini

@@ -20,32 +20,32 @@ text = Consultez les détails du programme et nos idées de projets
 alt = GSoC
 
 [article]
-p1 = {kolibrios} est un système d`exploitation minuscule, mais incroyablement
+p1 = {kolibrios} est un système d'exploitation minuscule, mais incroyablement
     puissant et rapide, pour les PC compatibles x86. Il nécessite seulement
-    quelques mégaoctets d`espace disque, un processeur i586 et 12 Mo de RAM.
-    Malgré sa petite taille, il comprend une large gamme d`applications telles
-    qu`un éditeur de texte, un visionneur d`images, un éditeur graphique, un
+    quelques mégaoctets d'espace disque, un processeur i586 et 12 Mo de RAM.
+    Malgré sa petite taille, il comprend une large gamme d'applications telles
+    qu'un éditeur de texte, un visionneur d'images, un éditeur graphique, un
     navigateur web, et plus de 30 jeux captivants. Il prend en charge pleinement
     les systèmes de fichiers FAT12/16/32, permet la lecture seule de NTFS,
     exFAT, ISO9660 et Ext2/3/4, et offre un vaste ensemble de {drivers} pour les
     cartes son, réseau et graphiques populaires.
 drivers = pilotes
 
-p2 = Avez-vous déjà rêvé d`un système qui démarre en quelques secondes, de la
-    mise sous tension jusqu`à une interface graphique opérationnelle ? Des
+p2 = Avez-vous déjà rêvé d'un système qui démarre en quelques secondes, de la
+    mise sous tension jusqu'à une interface graphique opérationnelle ? Des
     applications qui se lancent instantanément, immédiatement après avoir cliqué
     sur une icône, sans ces pointeurs sabliers agaçants ? Cette rapidité est
     obtenue car les parties essentielles de {kolibrios} (noyau et pilotes) sont
     entièrement écrites en langage assembleur {fasm}. Essayez {kolibrios} et
     comparez-le à des poids lourds tels que Windows et Linux.
 
-p3 = {kolibrios} s`est séparé de MenuetOS en 2004 et est développé de manière
+p3 = {kolibrios} s'est séparé de MenuetOS en 2004 et est développé de manière
     indépendante depuis lors. Vos {feedback} sont grandement appréciés, et votre
     {help} est encore plus bienvenue.
 feedback = retours
 help = aide
 
-p_subscription = Nous espérons que vous l`apprécierez !
+p_subscription = Nous espérons que vous l'apprécierez !
 
 [downloads]
 header = Téléchargements
@@ -65,26 +65,26 @@ all_rev = Toutes les constructions nocturnes
 download_choice = Que choisir ?
 download_help = Pour un débutant, le LiveCD est le meilleur.\n\
     \n\
-    Par rapport à un LiveCD, l`avantage d`une image universelle est que vous \
+    Par rapport à un LiveCD, l'avantage d'une image universelle est que vous \
     pouvez sauvegarder les changements effectués dans KolibriOS.\n\
     \n\
-    L`image hybride inclut le support de la technologie UEFI, qui est utilisée \
+    L'image hybride inclut le support de la technologie UEFI, qui est utilisée \
     pour démarrer le système sur les nouveaux ordinateurs et portables.
 
 download_description = Sur cette page, vous pouvez télécharger la distribution
-    des builds nocturnes, ce qui signifie qu`ils contiennent toujours les
+    des builds nocturnes, ce qui signifie qu'ils contiennent toujours les
     modifications les plus récentes du système et peuvent donc être instables.
     Tous les fichiers sont compressés avec {zip}. {kolibrios} est distribué sous
     licence {gpl} et son code source est disponible sur notre {git}.
 git-server = serveur Git
 
-download_warn = Il arrive que certains antivirus signalent à tort l’image
-    {kolibrios} comme une menace. Il s’agit d’un faux positif. {kolibrios} est
+download_warn = Il arrive que certains antivirus signalent à tort l'image
+    {kolibrios} comme une menace. Il s'agit d'un faux positif. {kolibrios} est
     entièrement open source et vous pouvez toujours le compiler vous-même pour
-    vous assurer qu’il est totalement sûr.
+    vous assurer qu'il est totalement sûr.
 
 [screenshots]
-header = Captures d`écran
+header = Captures d'écran
 
 1 = Bureau KolibriOS
 2 = Démos
@@ -94,4 +94,4 @@ header = Captures d`écran
 6 = Outils de développement et de débogage
 
 [footer]
-team = L`équipe de KolibriOS
+team = L'équipe de KolibriOS

locales/it.ini

@@ -30,9 +30,9 @@ p1 = {kolibrios} è un sistema operativo minuscolo, ma incredibilmente potente e
     ampio set di {drivers} per schede audio, di rete e grafiche più diffuse.
 drivers = driver
 
-p2 = Hai mai sognato un sistema che si avvia in pochi secondi, dall`accensione
+p2 = Hai mai sognato un sistema che si avvia in pochi secondi, dall'accensione
     fino a una GUI funzionante? Applicazioni che partono immediatamente, subito
-    dopo aver cliccato su un`icona, senza quei fastidiosi cursori a clessidra?
+    dopo aver cliccato su un'icona, senza quei fastidiosi cursori a clessidra?
     Questa velocità si ottiene poiché le parti fondamentali di {kolibrios}
     (kernel e driver) sono scritte interamente in linguaggio assembly {fasm}.
     Prova {kolibrios} e confrontalo con colossi come Windows e Linux.
@@ -63,10 +63,10 @@ all_rev = Tutte le build notturne
 download_choice = Quale scegliere?
 download_help = Per un principiante, il LiveCD è la soluzione migliore.\n\
     \n\
-    Rispetto a un LiveCD, il vantaggio di un`immagine universale è che è \
+    Rispetto a un LiveCD, il vantaggio di un'immagine universale è che è \
     possibile salvare le modifiche apportate in KolibriOS.\n\
     \n\
-    L`immagine ibrida include il supporto per la tecnologia UEFI, utilizzata \
+    L'immagine ibrida include il supporto per la tecnologia UEFI, utilizzata \
     per avviare il sistema su nuovi computer e portatili.
 
 download_description = In questa pagina puoi scaricare la distribuzione delle
@@ -77,12 +77,12 @@ download_description = In questa pagina puoi scaricare la distribuzione delle
 git-server = server Git
 
 download_warn = Occasionalmente, alcuni software antivirus potrebbero segnalare
-    erroneamente l’immagine di {kolibrios} come una minaccia. Si tratta di un
+    erroneamente l'immagine di {kolibrios} come una minaccia. Si tratta di un
     falso positivo. {kolibrios} è completamente open source e puoi sempre
     compilarlo tu stesso per essere certo che è del tutto sicuro.
 
 [screenshots]
-header = Captures d`écran
+header = Schermate
 
 1 = Il desktop di KolibriOS
 2 = Demo

locales/nl.ini

@@ -21,7 +21,7 @@ alt = GSoC
 
 [article]
 p1 = {kolibrios} is een klein maar ongelooflijk krachtig en snel
-    besturingssysteem voor x86-compatibele PC`s. Het heeft slechts enkele
+    besturingssysteem voor x86-compatibele PC's. Het heeft slechts enkele
     megabytes aan schijfruimte, een i586-processor en 12 MB RAM. Maar beschikt
     over een rijk scala aan toepassingen, waaronder een tekstverwerker,
     afbeeldingsviewer, grafische editor, webbrowser en meer dan 30 spannende
@@ -78,7 +78,7 @@ download_description = Op deze pagina kunt u de nightly builds-distributie
     broncode is beschikbaar op onze {git}.
 git-server = Git-server
 
-download_warn = Af en toe kunnen sommige antivirusprogramma’s het
+download_warn = Af en toe kunnen sommige antivirusprogramma's het
     {kolibrios}-image ten onrechte als een bedreiging aanmerken.
     Dit is een vals-positief. {kolibrios} is volledig open-source en je kunt
     het altijd zelf bouwen om er zeker van te zijn dat het volledig veilig is.
@@ -89,7 +89,7 @@ header = Schermafbeeldingen
 1 = KolibriOS bureaublad
 2 = Demos
 3 = Bestandsbeheerders
-4 = Netwerk programma`s
+4 = Netwerk programma's
 5 = Spelletjes
 6 = Ontwikkel- en debugtools
 

locales/uk.ini

@@ -64,10 +64,10 @@ all_rev = Усі нічні збірки
 download_choice = Який обрати?
 download_help = Для новачка найкраще підійде LiveCD.\n \
     \n\
-    У порівнянні з LiveCD перевага універсального образу полягає в тому, що ви
-    можете зберегти зміни, зроблені в KolibriOS.\n
+    У порівнянні з LiveCD перевага універсального образу полягає в тому, що ви \
+    можете зберегти зміни, зроблені в KolibriOS.\n\
     \n\
-    Гібридний образ містить підтримку технології UEFI, яка використовується
+    Гібридний образ містить підтримку технології UEFI, яка використовується \
     для завантаження системи на нових комп'ютерах та ноутбуках.
 
 download_description = На цій сторінці ви можете завантажити нічні збірки

modules/helpers.py

@@ -1,10 +1,14 @@
 from datetime import date
+from re import compile as re_compile
 
 from flask import redirect, render_template, request, url_for
 from htmlmin import minify as minify_html
 
 from modules import locales
 
+_A_OPEN_WS = re_compile(r"(<a\b[^>]*>)\s+")
+_A_CLOSE_WS = re_compile(r"\s+(</a>)")
+
 
 def get_best_lang():
     return request.accept_languages.best_match(locales.locales_code) or "en"
@@ -14,10 +18,8 @@ def render_localized_template(lang, template_name):
     if lang not in locales.locales_code:
         return redirect(url_for("index", lang=get_best_lang()))
 
-    return minify_html(
-        render_template(
-            template_name,
-            year=date.today().year,
-        ),
-        remove_empty_space=False,
-    )
+    html = render_template(template_name, year=date.today().year)
+    html = _A_OPEN_WS.sub(r"\1", html)
+    html = _A_CLOSE_WS.sub(r"\1", html)
+
+    return minify_html(html, remove_empty_space=False)

requirements.txt

@@ -2,7 +2,7 @@ blinker==1.9.0
 click==8.1.8
 colorama==0.4.6
 Flask==3.1.0
-htmlmin==0.1.12
+htmlmin2
 itsdangerous==2.2.0
 Jinja2==3.1.6
 libsass==0.23.0

shell.nix

@@ -6,7 +6,6 @@ in pkgs.mkShell {
   buildInputs = with pypkgs; [
     python
     virtualenv
-    pkgs.nodePackages.sass
   ];
 
   shellHook = ''

static/style.scss

@@ -259,7 +259,6 @@ p {
 
         img {
             height: 1em;
-            margin-right: 0.5em;
             margin-bottom: -0.15em;
         }
     }
@@ -271,7 +270,6 @@ p {
     &-warn {
         img {
             margin-bottom: -2px;
-            margin-right: 0.25em;
         }
     }
 }
@@ -356,12 +354,6 @@ td {
             margin-left: 1em;
         }
     }
-
-    &-info {
-        img {
-            margin-right: 0.25em;
-        }
-    }
 }
 
 hr {

templates/download.html

@@ -65,7 +65,8 @@
                             <img src="{{ url_for('static', filename='img/flags/ru.png') }}" alt="{{ lang }}">
                         {% elif l == 'es_ES' %}
                             <img src="{{ url_for('static', filename='img/flags/es.png') }}" alt="{{ lang }}">
-                        {% endif %}</a>
+                        {% endif %}
+                    </a>
                     {% endfor %}
                 </td>
             </tr>
@@ -80,9 +81,8 @@
             <tr class="tr-margin-top">
                 <td class="td-description td-info" colspan="2">
                     <div role="button" class="help-button"
-                         onclick="alert('{{ _('downloads:download_help') }}');">
-                        <img src="{{ url_for('static', filename='img/icons/i_info.png') }}" alt="Info">
-                        <u>{{ _('downloads:download_choice') }}</u>
+                         onclick="alert('{{ _('downloads:download_help') | replace("'", "\\'") }}');">
+                        <img src="{{ url_for('static', filename='img/icons/i_info.png') }}" alt="Info">&nbsp;<u>{{ _('downloads:download_choice') }}</u>
                     </div>
                 </td>
                 <td class="td-languages">
@@ -107,7 +107,7 @@
         </p>
 
         <p class="p-warn">
-            <img src="{{ url_for('static', filename='img/icons/i_warn.png') }}" alt="Warn">{{ _(
+            <img src="{{ url_for('static', filename='img/icons/i_warn.png') }}" alt="Warn">&nbsp;{{ _(
                 'downloads:download_warn',
                 kolibrios="<b>{0}</b>".format(_('title:index'))
             ) | safe }}

templates/index.html

@@ -20,4 +20,4 @@
     {% include 'tmpl/_footer.htm' %}
 </body>
 
-</html>
+</html>

templates/tmpl/_footer.htm

@@ -4,4 +4,4 @@
         &copy; 2004 - {{ year }} <br />
         {{ _('footer:team') }}
     </p>
-</div>
+</div>

templates/tmpl/_header.htm

@@ -6,6 +6,6 @@
     <meta name="keywords"
         content="kolibri, kolibrios, colibri, colibrios, колибри, колибриос, калибри, калибриос, operating system, assembler, fasm, alternate, open source">
     <meta name="viewport" content="width=device-width">
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
-    <script src="{{ url_for('static', filename='script.min.js') }}"></script>
+    {% if not config.NOCSS %}<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">{% endif %}
+    {% if not config.NOJS %}<script src="{{ url_for('static', filename='script.min.js') }}"></script>{% endif %}
 </head>

templates/tmpl/_lang-dropdown.htm

@@ -1,8 +1,8 @@
 <div id="lang-dropdown">
     <div>
-    {%- for lang_code in g.locales_name.keys() %}
+    {% for lang_code in g.locales_name.keys() %}
         {% set lang_name = g.locales_name[lang_code] %}
-        {%- if request.view_args["lang"] == lang_code %}
+        {% if request.view_args["lang"] == lang_code %}
             <font bg=#FF9800>
                 <a class="a-sel" href="{{ url_for(request.url_rule.endpoint, lang=lang_code) }}">
                     <img 
@@ -12,7 +12,7 @@
                     {{ lang_name }}
                 </a>
             </font>
-        {%- else %}
+        {% else %}
             <a href="{{ url_for(request.url_rule.endpoint, lang=lang_code) }}">
                 <img 
                     src="{{ url_for('static', filename='img/flags/%s.png' % lang_code) }}" 
@@ -20,7 +20,7 @@
                 >
                 {{ lang_name }}
             </a>
-        {%- endif %}
-    {%- endfor %}
+        {% endif %}
+    {% endfor %}
     </div>
-</div>
+</div>

templates/tmpl/_socials.htm

@@ -1,27 +1,33 @@
 <p class="p-socials">
     <a href="https://t.me/kolibrios_news" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_telegram.png') }}" alt="Telegram">Telegram
+        <img src="{{ url_for('static', filename='img/icons/i_telegram.png') }}" alt="Telegram">
+        Telegram
     </a>
     <br />
     <a href="https://discord.com/invite/FeB2NvE6bF" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_discord.png') }}" alt="Discord">Discord
+        <img src="{{ url_for('static', filename='img/icons/i_discord.png') }}" alt="Discord">
+        Discord
     </a>
     <br />
     <a href="https://facebook.com/groups/kolibrios/" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_facebook.png') }}" alt="Facebook">Facebook
+        <img src="{{ url_for('static', filename='img/icons/i_facebook.png') }}" alt="Facebook">
+        Facebook
     </a>
     <br />
     <a href="https://reddit.com/r/KolibriOS/" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_reddit.png') }}" alt="Reddit">Reddit
+        <img src="{{ url_for('static', filename='img/icons/i_reddit.png') }}" alt="Reddit">
+        Reddit
     </a>
 </p>
 
 <p class="p-socials">
     <a href="https://matrix.to/#/#kolibrios:lair.moe" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_matrix.png') }}" alt="Matrix">Matrix
+        <img src="{{ url_for('static', filename='img/icons/i_matrix.png') }}" alt="Matrix">
+        Matrix
     </a>
     <br />
     <a href="irc://kolibrios.org" target="_blank">
-        <img src="{{ url_for('static', filename='img/icons/i_irc.png') }}" alt="IRC">IRC
+        <img src="{{ url_for('static', filename='img/icons/i_irc.png') }}" alt="IRC">
+        IRC
     </a>
 </p>