Merge main & update to bikkelhart/internet-nl@87f11734

    git fetch bikkelhart
    git fetch internetnl
    git merge -X theirs internetnl/main
    git checkout --no-overlay bikkelhart/bikkelhart-redesign -- frontend interface/templates interface/static translations
    git checkout --no-overlay main -- interface/static/question@internet.nl_0x45028563.asc
    convert -resize 48x48 interface/static/favicon.{png,ico}
    git add interface/static/favicon.ico
    git rm package{,-lock}.json
    # manual merge of docker/Dockerfile and docker/compose.development.yaml and fix .gitignore, note: changed *.js copy and base template
    git commit --amend -m "Merge main & update to bikkelhart/internet-nl@$(git rev-parse bikkelhart/bikkelhart-redesign | cut -c1-8)"

Author: bwbroersma

.gitignore

@@ -83,4 +83,4 @@ config-compose-*
 
 # Frontend
 frontend/node_modules
-frontend/build
+frontend/dist

checks/tasks/update.py

@@ -76,7 +76,7 @@ def _populate_HOF(hof, model, entry_creation):
     previousscore = 0
     previoustimestamp = None
     previousreportid = None
-    for report in model.objects.all().order_by("domain", "timestamp"):
+    for report in model.objects.only("id", "domain", "timestamp", "score").order_by("domain", "timestamp").iterator():
         if previousname != report.domain and previousname is not None:
             if previousscore >= 100:
                 entry_creation(hof, previousname, previousreportid, previoustimestamp)

docker/Dockerfile

@@ -134,16 +134,17 @@ USER unbound
 
 ENTRYPOINT ["/entrypoint.sh"]
 
-FROM debian:bullseye-20241111-slim AS frontend
+# build frontend image target
+FROM --platform=linux/amd64 debian:bullseye-20241111-slim AS frontend
 
 # install npm from official image
-COPY --from=node:20-slim /usr/local/bin/ /usr/local/bin/
-COPY --from=node:20-slim /usr/local/lib/node_modules /usr/local/lib/node_modules
+COPY --from=node:22-slim /usr/local/bin/ /usr/local/bin/
+COPY --from=node:22-slim /usr/local/lib/node_modules /usr/local/lib/node_modules
 
 ADD frontend/ /app/frontend
 WORKDIR /app/frontend
 RUN npm install
-RUN npm run css:build
+RUN npm run docker:build
 
 # build main application image target
 FROM --platform=linux/amd64 debian:bullseye-20241111-slim AS build-app
@@ -216,22 +217,14 @@ RUN install -d -m 0755 -o nobody -g nogroup /app/batch_results
 # some js/css files use a separate script to generate minimized versions
 # storage these in a place for django to find
 RUN mkdir -p /app/static_frontend
-# minimize JS files
-RUN python3 bin/frontend.py js
-# copy build/minimized CSS files from frontand stage
+# copy build/minimized CSS files from frontend stage
 COPY --from=frontend --chown=nobody:nogroup /app/static_frontend/css/*.css /app/static_frontend/css/
+# copy build/minimized JS files from frontend stage
+COPY --from=frontend --chown=nobody:nogroup /app/static_frontend/js/ /app/static_frontend/js/
 
 # generate language files
 RUN python3 bin/pofiles.py to_django
 
-# copy dependencies to rebuild CSS (postcss)
-COPY --from=frontend /usr/local/bin/ /usr/local/bin/
-COPY --from=frontend /usr/local/lib/node_modules /usr/local/lib/node_modules
-COPY --from=frontend /app/frontend/node_modules /app/frontend/node_modules
-
-# copy browser reload module
-COPY --from=linttest-deps /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload
-
 # use fake version to prevent building the next steps when only the version changes
 ENV SETUPTOOLS_SCM_PRETEND_VERSION=0.0.0-build0
 
@@ -249,6 +242,19 @@ ENV SETUPTOOLS_SCM_PRETEND_VERSION=$RELEASE
 ENTRYPOINT [ "python3", "./manage.py"]
 CMD ["runserver", "0.0.0.0:8080"]
 
+# app image with development tools for better live reloading
+FROM app AS app-dev
+
+# required for compose `develop` mode file sync/copy
+USER root
+
+# copy dependencies to rebuild CSS (postcss)
+COPY --from=frontend /usr/local/bin/ /usr/local/bin/
+COPY --from=frontend /usr/local/lib/node_modules /usr/local/lib/node_modules
+
+# copy browser reload module
+COPY --from=linttest-deps /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload /usr/local/lib/python${PYTHON_VERSION}/dist-packages/django_browser_reload
+
 # supplement application with unittest, lint dependencies
 FROM build-app AS linttest
 ARG PYTHON_VERSION

docker/compose.development.yaml

@@ -17,35 +17,21 @@ services:
     environment:
       - INTERNETNL_DOMAINNAME
 
-  webserver:
-    build:
-      context: ..
-      dockerfile: docker/webserver.Dockerfile
-    develop:
-      watch:
-        # auto rebuild/reload when config files change
-        - path: ./webserver/
-          action: rebuild
-
   app:
-    develop:
-      watch:
-        # auto rebuild/reload when CSS/JS changes
-        - path: ../frontend/js
-          action: sync+exec
-          target: /app/frontend/js
-          exec:
-            command: python3 bin/frontend.py js
+    build:
+      target: app-dev
     # use Django runserver for better debug abilities during development
     entrypoint: ["/bin/bash"]
     # run CSS auto rebuild in the background and start devserver
     command:
       - "-c"
       - >
         if [ "$INTERNETNL_AUTORELOAD" = "True" ]; then
-          # watch CSS files for rebuild
+          # install npm dependencies and watch CSS and JS files for rebuild
           cd /app/frontend;
-          npm run css:build:watch &
+          # It's needed to install the rollup linux dependency
+          npm install;
+          npm run docker:watch &
           cd /app;
           # start development server with auto reloading
           ./manage.py runserver 0.0.0.0:8080
@@ -60,8 +46,8 @@ services:
       - ../checks:/app/checks
       - ../interface:/app/interface
       - ../internetnl:/app/internetnl
-      # mount CSS files so `css:build:watch` can detect changes an rebuild
-      - ../frontend/css:/app/frontend/css
+      # mount frontend files so build tools can detect changes and rebuild
+      - ../frontend/src:/app/frontend/src
 
   worker:
     volumes:

frontend/.stylelintrc.json

@@ -1 +1,12 @@
-{ "extends": ["stylelint-config-standard"] }
+{
+    "extends": [
+        "stylelint-config-standard"
+    ],
+    "rules": {
+        "selector-type-no-unknown": null,
+        "selector-pseudo-element-no-unknown": null,
+        "selector-pseudo-class-no-unknown": null,
+        "declaration-property-value-no-unknown": null,
+        "no-descending-specificity": null
+    }
+}