add tailwind build process

README.md

@@ -12,7 +12,7 @@ You can also get the [raw data](https://heisse-preise.io/api/index). The raw dat
 -   `quantity`: quantity the product is sold at for the given price
 -   `bio`: whether this product is classified as organic/"Bio"
 
-The project consists of a trivial NodeJS Express server responsible for fetching the product data, massaging it, and serving it to the front end (see `index.js`). The front end is a least-effort vanilla HTML/JS search form (see sources in `site/`).
+The project consists of a trivial NodeJS Express server responsible for fetching the product data, massaging it, and serving it to the front end (see `server.js`). The front end is a least-effort vanilla HTML/JS search form (see sources in `site/`).
 
 ## Run via NodeJS
 
@@ -22,7 +22,7 @@ Install NodeJS, then run this in a shell of your choice.
 git clone https://github.com/badlogic/heissepreise
 cd heissepreise
 npm install
-node index.js
+node server.js
 ```
 
 The first time you run this, the data needs to be fetched from the stores. You should see log out put like this.
@@ -40,7 +40,7 @@ Example app listening on port 3000
 ```
 
 Once the app is listening per default on port 3000, open <http://localhost:3000> in your browser.\
-**Note**: If you want to start on a different port add it as the third parameter, e.g. `node index.js 3001` will map to port `3001`.
+**Note**: If you want to start on a different port add it as the third parameter, e.g. `node server.js 3001` will map to port `3001`.
 
 Subsequent starts will fetch the data asynchronously, so you can start working immediately.
 

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "prepare": "husky install",
     "dev": "DEV=true nodemon --watch server.js --inspect-brk=0.0.0.0:9230 server.js",
-    "format": "npx prettier --write ."
+    "format": "npx prettier --write .",
+    "build": "npx tailwindcss -o site/style.css --minify"
   },
   "repository": {
     "type": "git",
@@ -29,8 +30,11 @@
     "socket.io": "^4.6.2"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
     "husky": "^8.0.3",
+    "postcss": "^8.4.24",
     "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3"
+    "pretty-quick": "^3.1.3",
+    "tailwindcss": "^3.3.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

site/_templates/_header.html

@@ -9,21 +9,6 @@
             rel="icon"
             href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2210 0 100 100%22><text y=%22.90em%22 font-size=%2290%22>🔥</text></svg>"
         />
-        <script src="https://cdn.tailwindcss.com"></script>
-        <script>
-            tailwind.config = {
-                theme: {
-                    extend: {
-                        colors: {
-                            primary: '#c9543a',
-                        },
-                        scale: {
-                            flip: '-1',
-                        },
-                    }
-                }
-            }
-        </script>
         <link rel="stylesheet" type="text/css" href="style.css" />
     </head>
 

site/tailwind.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+canvas.hidden {
+    display: none !important;
+}

tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./site/**/*.{html,js}"],
+    safelist: [
+        {
+            pattern: /(bg|border|text)-(yellow|green|purple|pink|rose|orange|blue|purple|teal|stone)-(200)/,
+            variants: ["md", "lg", "hover"],
+        },
+    ],
+    theme: {
+        extend: {
+            colors: {
+                primary: "#c9543a",
+            },
+            scale: {
+                flip: "-1",
+            },
+        },
+    },
+    plugins: [],
+};