compiling node modules

ht_booking/.gitignore

@@ -23,3 +23,7 @@ target/
 .env
 todo.md
 *report.html
+
+# npm — only the toolchain is ignored; the built assets/static/css/app.css IS
+# committed so deploys work without a Node step (rebuild with `npm run build:css`).
+node_modules/

ht_booking/README.md

@@ -49,6 +49,30 @@ compilation: debug
 listening on http://localhost:5150
 ```
 
+## Styling (CSS build)
+
+The UI uses Tailwind CSS + daisyUI. Rather than the render-blocking Tailwind
+Play CDN, the stylesheet is compiled ahead of time into a purged, minified
+bundle at `assets/static/css/app.css` (served at `/static/css/app.css`).
+
+One-time setup:
+
+```sh
+npm install
+```
+
+Rebuild the bundle after changing any class names in `assets/views/**/*.html`
+or the theme config:
+
+```sh
+npm run build:css       # one-off, minified
+npm run watch:css       # rebuild on save while developing templates
+```
+
+`assets/static/css/app.css` is committed, so a deploy needs no Node step — but
+remember to rebuild and commit it whenever the templates change. The Tailwind
+source lives in `assets/css/tailwind.css`; theme config is `tailwind.config.js`.
+
 ## Full Stack Serving
 
 You can check your [configuration](config/development.yaml) to pick either frontend setup or server-side rendered template, and activate the relevant configuration sections.

ht_booking/assets/css/tailwind.css

@@ -0,0 +1,6 @@
+/* Tailwind + daisyUI source. The Tailwind CLI compiles this into a purged,
+   minified bundle at assets/static/css/app.css (served at /static/css/app.css)
+   — see the `build:css` / `watch:css` scripts in package.json. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

ht_booking/assets/views/base.html

@@ -45,8 +45,9 @@
   <meta property="og:description" content="{{ t(key='meta-description', lang=lang) }}">
   <meta property="og:locale" content="{% if lang == 'en' %}en_US{% else %}sk_SK{% endif %}">
   <meta name="twitter:card" content="summary">
-  <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet" type="text/css" />
+  <!-- Tailwind + daisyUI, compiled and purged at build time — see
-  <script src="https://cdn.tailwindcss.com"></script>
+       `npm run build:css`. Replaces the render-blocking Tailwind Play CDN. -->
+  <link href="/static/css/app.css" rel="stylesheet" type="text/css" />
   <style>
     /* Keep buttons static — disable daisyUI's press-shrink animation. */
     .btn { --animation-btn: 0; --btn-focus-scale: 1; }

ht_booking/assets/views/calendar/week.html

@@ -97,9 +97,9 @@
   </h1>
   {% if has_courts %}
   <form method="get" action="{{ base_path }}" class="flex items-center gap-2">
-    <label class="text-sm font-medium opacity-70">{{ t(key="court-label", lang=lang) }}</label>
+    <label for="court-select" class="text-sm font-medium opacity-70">{{ t(key="court-label", lang=lang) }}</label>
     <input type="hidden" name="week" value="{{ week }}">
-    <select name="court" onchange="this.form.submit()" class="select select-bordered select-sm">
+    <select name="court" id="court-select" onchange="this.form.submit()" class="select select-bordered select-sm">
       {% for c in courts %}
       <option value="{{ c.id }}" {% if c.selected %}selected{% endif %}>{{ c.name }}</option>
       {% endfor %}
@@ -151,7 +151,7 @@
     </form>
     {% endif %}
   </div>
-  <div class="text-sm font-medium opacity-60">{{ court_name }} · {{ week_label }}</div>
+  <div class="text-sm font-medium opacity-70">{{ court_name }} · {{ week_label }}</div>
 </div>
 
 <div id="cal-daynav" class="mb-3 flex items-center gap-2 md:hidden">
@@ -240,7 +240,7 @@
 </div>
 {% else %}
 <div class="card border border-base-300 bg-base-100 shadow-sm">
-  <div class="card-body items-center text-center opacity-60">{{ t(key="no-courts", lang=lang) }}</div>
+  <div class="card-body items-center text-center opacity-70">{{ t(key="no-courts", lang=lang) }}</div>
 </div>
 {% endif %}
 {% endblock content %}

ht_booking/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ht_booking",
+  "version": "1.0.0",
+  "description": "Booking site for the tennis courts in Rajec. Visitors browse the weekly court calendar and an *About* page; the single admin manages courts, bookings and the About-page content.",
+  "main": "index.js",
+  "directories": {
+    "example": "examples",
+    "test": "tests"
+  },
+  "scripts": {
+    "build:css": "tailwindcss -i assets/css/tailwind.css -o assets/static/css/app.css --minify",
+    "watch:css": "tailwindcss -i assets/css/tailwind.css -o assets/static/css/app.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "daisyui": "^4.12.24",
+    "tailwindcss": "^3.4.19"
+  }
+}

ht_booking/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // Scanned for class names so only the utilities actually used in the
+  // templates end up in the built CSS.
+  content: ["./assets/views/**/*.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  // Only the two themes the UI exposes — the navbar theme switch toggles
+  // `data-theme` between these. Shipping all daisyUI themes would bloat the
+  // bundle. `light` is listed first, so it is the default.
+  daisyui: {
+    themes: ["light", "dark"],
+    logs: false,
+  },
+};