store: misc tweaks to simplify code and development (#2309)

store/app.py

@@ -61,9 +61,7 @@ for key in mandatory_config_keys:
         print(f"Missing key in config.toml: {key}")
         sys.exit(1)
 
-if config.get("DEBUG"):
+if app.config.get("DEBUG"):
-    app.debug = True
-    app.config["DEBUG"] = True
     app.config["TEMPLATES_AUTO_RELOAD"] = True
 
 # This is the secret key used for session signing
@@ -86,11 +84,16 @@ def localize(d):
 
 @app.context_processor
 def utils():
-    return {
+    d = {
         "user": session.get("user", {}),
         "locale": get_locale(),
     }
 
+    if app.config.get("DEBUG"):
+        d["tailwind_local"] = open("assets/tailwind-local.css").read()
+
+    return d
+
 
 ###############################################################################
 

store/assets/fetch_assets

@@ -1,13 +1,19 @@
-# Download standalone tailwind to compile what we need
+
+# Production -> download standalone tailwind to compile only what we need
 wget https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-linux-x64
 chmod +x tailwindcss-linux-x64 
 ./tailwindcss-linux-x64 --input tailwind-local.css --output tailwind.css --minify
 
+# Development -> we use the JS magic thingy
+curl -L https://cdn.tailwindcss.com?plugins=forms > tailwind-css.js
+
+# Forkawesome
 curl https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css > fork-awesome.min.css
 sed -i 's@../fonts/@@g' ./fork-awesome.min.css
 curl https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/fonts/forkawesome-webfont.woff2?v=1.2.0 > forkawesome-webfont.woff2
 curl https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/fonts/forkawesome-webfont.woff?v=1.2.0 > forkawesome-webfont.woff
 curl https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/fonts/forkawesome-webfont.ttf?v=1.2.0 > forkawesome-webfont.ttf
 
+# Logos
 curl https://raw.githubusercontent.com/YunoHost/doc/master/images/logo_roundcorner.png > ynh_logo_roundcorner.png
 curl https://raw.githubusercontent.com/YunoHost/doc/master/images/ynh_logo_black.svg > ynh_logo_black.svg

store/assets/tailwind-local.css

@@ -3,6 +3,9 @@
 @tailwind utilities;
 
 @layer utilities {
+  body {
+      @apply text-gray-800;
+  }
   .btn {
       @apply text-sm font-medium rounded-md px-4 py-2 transition;
   }

store/requirements.txt

@@ -1,10 +1,32 @@
-Flask==2.3.2
+Babel==2.14.0
-python-slugify
+blinker==1.8.1
-PyGithub
+certifi==2024.2.2
-toml
+cffi==1.16.0
-tomlkit
+charset-normalizer==3.3.2
-pycmarkgfm
+click==8.1.7
-gunicorn
+cryptography==42.0.5
-emoji
+Deprecated==1.2.14
-Babel
+emoji==2.11.1
-Flask-Babel
+Flask==3.0.3
+flask-babel==4.0.0
+gunicorn==22.0.0
+idna==3.7
+itsdangerous==2.2.0
+Jinja2==3.1.3
+MarkupSafe==2.1.5
+packaging==24.0
+pycmarkgfm==1.2.1
+pycparser==2.22
+PyGithub==2.3.0
+PyJWT==2.8.0
+PyNaCl==1.5.0
+python-slugify==8.0.4
+pytz==2024.1
+requests==2.31.0
+text-unidecode==1.3
+toml==0.10.2
+tomlkit==0.12.4
+typing_extensions==4.11.0
+urllib3==2.2.1
+Werkzeug==3.0.2
+wrapt==1.16.0

store/templates/app.html

@@ -16,7 +16,7 @@
                  loading="lazy"
                  class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
             >
-            <h1 class="flex-0 pl-2 pt-3 {% if infos["manifest"]["name"]|length > 12 %}text-2xl{% else %}text-3xl{% endif %} font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h1>
+            <h1 class="flex-0 pl-2 pt-3 {% if infos["manifest"]["name"]|length > 12 %}text-2xl{% else %}text-3xl{% endif %} font-bold">{{ infos["manifest"]["name"] }}</h1>
 
             {% if infos['category'] %}
             <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-600 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">

store/templates/base.html

@@ -6,7 +6,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome.min.css') }}">
+    {% if config.DEBUG %}
+    <script src="{{ url_for('static', filename='tailwind-css.js') }}"></script>
+    <style type="text/tailwindcss">
+        {{ tailwind_local }}
+    </style>
+    {% else %}
     <link rel="stylesheet" href="{{ url_for('static', filename='tailwind.css') }}">
+    {% endif %}
   </head>
 
   <body>
@@ -23,13 +30,13 @@
               <nav class="hidden md:block">
                 <ul class="flex items-center gap-6 text-sm">
                   <li>
-                    <a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_catalog') }}">
+                    <a class="font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_catalog') }}">
                         {{ _("Catalog") }} 
                     </a>
                   </li>
 
                   <li>
-                    <a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_wishlist') }}">
+                    <a class="font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_wishlist') }}">
                         {{ _("Wishlist") }} 
                     </a>
                   </li>
@@ -80,7 +87,7 @@
                         <div class="p-2">
                           <a
                             href="/logout"
-                            class="block rounded-md px-4 py-2 text-sm text-gray-800 hover:bg-gray-50 hover:text-gray-700"
+                            class="block rounded-md px-4 py-2 text-sm hover:bg-gray-50 hover:text-gray-700"
                             role="menuitem"
                           >
                             {{ _("Logout") }} 
@@ -101,7 +108,7 @@
                     </button>
                     <div
                       id="menu"
-                      class="hidden absolute end-0 z-10 mt-2 p-2 w-64 rounded-md border border-gray-100 text-gray-800 bg-white shadow-lg"
+                      class="hidden absolute end-0 z-10 mt-2 p-2 w-64 rounded-md border border-gray-100 bg-white shadow-lg"
                       role="menu"
                     >
                       <div class="px-2 py-0.5">

store/templates/catalog.html

@@ -32,7 +32,7 @@
             </div>
             <div class="w-full">
                 <span class="flex">
-                    <h3 class="grow text-md font-bold text-gray-900">
+                    <h3 class="grow text-md font-bold">
                         {{ infos['manifest']['name'] }}
                     </h3>
                     <span class="text-xs">
@@ -76,7 +76,7 @@
 {% endblock %}
 {% block main %}
 <div class="mt-5 text-center">
-    <h1 class="text-2xl font-bold text-gray-900">
+    <h1 class="text-2xl font-bold">
         {{ _("Application Catalog") }} 
     </h1>
 </div>
@@ -151,10 +151,10 @@
 
 
 <div id="noResultFound" class="text-center pt-5 hidden">
-    <p class="text-lg font-bold text-gray-900 mb-5">
+    <p class="text-lg font-bold mb-5">
         {{ _("No results found.") }} 
     </p>
-    <p class="text-md text-gray-900">
+    <p class="text-md">
         {{ _("Not finding what you are looking for?") }}<br/>
         {{ _("Checkout the wishlist!") }} 
     </p>
@@ -162,7 +162,7 @@
 
 
 <div id="lowQualityAppTitle" class="text-center pt-10 mx-4 md:mx-0">
-    <h2 class="text-lg font-bold text-gray-900">
+    <h2 class="text-lg font-bold">
         {{ _("Applications currently flagged as broken") }} 
     </h2>
     <p class="text-sm">
@@ -180,7 +180,7 @@
 </div>
 
 <div id="deprecatedAppTitle" class="text-center pt-10 mx-4 md:mx-0">
-    <h2 class="text-lg font-bold text-gray-900">
+    <h2 class="text-lg font-bold">
         {{ _("Deprecated applications") }} 
     </h2>
     <p class="text-sm">

store/templates/index.html

@@ -6,7 +6,7 @@
 
 <div class="mx-auto w-full text-center p-8">
     <img alt="YunoHost logo" src="{{ url_for('static', filename='ynh_logo_black.svg') }}" class="w-32 mx-auto">
-    <h1 class="text-2xl font-bold text-gray-900">
+    <h1 class="text-2xl font-bold">
         {{ _("Application Store") }} 
     </h1>
 </div>
@@ -17,7 +17,7 @@
             href="{{ url_for('browse_catalog') }}"
             class="h-full relative block overflow-hidden hover:bg-gray-200 pt-12"
             >
-            <h2 class="text-md font-bold text-gray-900">
+            <h2 class="text-md font-bold">
                 {{ _("Browse all applications") }}
             </h2>
         </a>
@@ -28,7 +28,7 @@
             href="{{ url_for('browse_catalog', category=id) }}"
             class="h-full relative block overflow-hidden hover:bg-gray-200 pt-10"
             >
-            <h2 class="text-md font-bold text-gray-900">
+            <h2 class="text-md font-bold">
                 <i class="fa fa-{{ category['icon'] }}" aria-hidden="true"></i>
                 {{ category['title']|localize }}
             </h2>

store/templates/wishlist.html

@@ -4,7 +4,7 @@
 {% endblock %}
 {% block main %}
 <div class="text-center max-w-screen-md mx-auto mt-5 mx-2">
-    <h1 class="text-2xl font-bold text-gray-900">
+    <h1 class="text-2xl font-bold">
         {{ _("Application Wishlist") }}
     </h1>
     <p class="text-sm text-gray-700 mx-10 mt-2">{{ _("The wishlist is the place where people can collectively suggest and vote for apps that they would like to see packaged and made available in YunoHost's official apps catalog. Nevertheless, the fact that apps are listed here should by no mean be interpreted as a fact that the YunoHost project plans to integrate it, and is merely a source of inspiration for packaging volunteers.") }}</p>
@@ -67,15 +67,15 @@
   <table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
     <thead>
       <tr>
-        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900">
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium">
             {{ _("Name") }}
         </th>
-        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900">
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium">
             {{ _("Description") }}
         </th>
         <th class="hidden sm:table-cell py-2"></th>
         <th class="hidden sm:table-cell py-2"></th>
-        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900 max-w-[5em]">{{ _("Popularity") }}</th>
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium max-w-[5em]">{{ _("Popularity") }}</th>
       </tr>
     </thead>
 
@@ -92,7 +92,7 @@
              data-stars="{{ this_app_stars }}"
              data-starred="{{ user_starred_this_app }}"
         >
-            <td class="inline-block sm:table-cell px-4 py-2 font-bold text-gray-900 sm:max-w-[10em]">
+            <td class="inline-block sm:table-cell px-4 py-2 font-bold sm:max-w-[10em]">
                 {{ infos['name'] }}
             </td>
             <td class="block sm:table-cell px-4 py-0 sm:py-2 text-gray-700 max-w-md">{{ infos['description'] }}</td>
@@ -150,7 +150,7 @@
   </table>
 
   <div id="noResultFound" class="text-center pt-5 hidden">
-      <p class="text-lg font-bold text-gray-900 mb-5">
+      <p class="text-lg font-bold mb-5">
           {{ _("No results found.") }}
       </p>
   </div>

store/templates/wishlist_add.html

@@ -4,7 +4,7 @@
 {% endblock %}
 {% block main %}
 <div class="mt-5 text-center px-3 sm:px-0">
-    <h1 class="text-2xl font-bold text-gray-900">
+    <h1 class="text-2xl font-bold">
         {{ _("Suggest an application to be added to YunoHost's catalog") }}
     </h1>
 </div>