Use new a17t/Tailwind

Dockerfile

@@ -41,6 +41,10 @@ RUN apk --purge del .build-deps && \
 
 # Install Shynet
 COPY shynet .
+
+# Build Tailwind CSS and build static files
+COPY tailwind.config.js .
+RUN npx tailwindcss -i ./a17t/static/a17t/css/tailwind.css -o ./a17t/static/a17t/dist/tailwind.css --jit --minify
 RUN python manage.py collectstatic --noinput && \
 	python manage.py compilemessages
 

docker-compose.dev.yml

@@ -0,0 +1,46 @@
+version: '3'
+services:
+  shynet:
+    container_name: shynet_main
+    build: .
+    restart: unless-stopped
+    expose:
+      - 8080
+    env_file:
+      # Create a file called '.env' if it doesn't already exist.
+      # You can use `TEMPLATE.env` as a guide.
+      - .env
+    environment:
+      - DB_HOST=db
+    networks:
+      - internal
+    depends_on:
+      - db
+  db:
+    container_name: shynet_database
+    image: postgres
+    restart: always
+    environment:
+      - "POSTGRES_USER=${DB_USER}"
+      - "POSTGRES_PASSWORD=${DB_PASSWORD}"
+      - "POSTGRES_DB=${DB_NAME}"
+    volumes:
+      - shynet_db:/var/lib/postgresql/data
+    networks:
+      - internal
+  webserver:
+    container_name: shynet_webserver
+    image: nginx
+    restart: always
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf    
+    ports:
+      - 8080:80
+    depends_on:
+      - shynet
+    networks:
+      - internal
+volumes:
+  shynet_db:
+networks:
+  internal:

package.json

@@ -18,7 +18,8 @@
   "homepage": "https://github.com/milesmcc/shynet#readme",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "a17t": "^0.5.1",
+    "a17t": "^0.10.1",
+    "tailwindcss": "^3.0.1",
     "apexcharts": "^3.24.0",
     "datamaps": "^0.5.9",
     "flag-icon-css": "^3.5.0",

shynet/a17t/static/a17t/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

shynet/a17t/templates/a17t/includes/head.html

@@ -1,6 +1,5 @@
 {% load static %}
 
-<link rel="stylesheet" href="{% static 'a17t/dist/a17t.css' %}">
 <script async src="{% static '@fortawesome/fontawesome-free/js/all.min.js' %}" data-mutate-approach="sync"></script>
 <link href="{% static 'a17t/dist/tailwind.css' %}" rel="stylesheet">
 <link href="{% static 'inter-ui/Inter (web)/inter.css' %}" rel="stylesheet">

shynet/shynet/settings.py

@@ -306,15 +306,12 @@ DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 NPM_ROOT_PATH = "../"
 
 NPM_FILE_PATTERNS = {
-    "a17t": [os.path.join("dist", "a17t.css"), os.path.join("dist", "tailwind.css")],
     "apexcharts": [os.path.join("dist", "apexcharts.min.js")],
     "litepicker": [
         os.path.join("dist", "nocss", "litepicker.js"),
         os.path.join("dist", "css", "litepicker.css"),
         os.path.join("dist", "plugins", "ranges.js"),
     ],
-    "turbolinks": [os.path.join("dist", "turbolinks.js")],
-    "stimulus": [os.path.join("dist", "stimulus.umd.js")],
     "inter-ui": [os.path.join("Inter (web)", "*")],
     "@fortawesome": [os.path.join("fontawesome-free", "js", "all.min.js")],
     "datamaps": [os.path.join("dist", "datamaps.world.min.js")],

tailwind.config.js

@@ -0,0 +1,22 @@
+let colors = require("tailwindcss/colors")
+
+module.exports = {
+  content: ["./**/*.{html,py}"],
+  theme: {
+    extend: {
+      colors: {
+        neutral: colors.slate,
+        positive: colors.green,
+        urge: colors.violet,
+        warning: colors.yellow,
+        info: colors.blue,
+        critical: colors.red,
+        inf: "white",
+        zero: colors.slate[900]
+      }
+    },
+  },
+  plugins: [
+    require("a17t")
+  ],
+}