updated docs

.docker-compose-files/compose.dev.yaml

@@ -1,18 +1,36 @@
+---
 services:
   web:
-    command: gunicorn --capture-output --enable-stdio-inheritance -b 0.0.0.0:8000 website.wsgi:application
+    command: python manage.py runserver 0.0.0.0:8000
-    volumes:
+    volumes: [./src:/src]
-      - ./src:/src
     env_file:
       - path: .env.template
         required: true
       - path: .env
         required: false
-
+    environment:
+      DJANGO_RELOAD: true
+      DEBUG: true
+      ALLOWED_HOSTS: localhost,127.0.0.1
+    ports: [127.0.0.1:8000:8000]
   db:
     env_file:
       - path: .env.template
         required: true
       - path: .env
         required: false
-
+  proxy:
+    restart: unless-stopped
+    ports: [127.0.0.1:80:80]
+    environment: [NGINX_HOSTNAME=localhost, NGINX_PORT=80]
+  tailwind:
+    image: python:3.14-slim
+    working_dir: /src
+    command: >
+      sh -c "apt-get update && apt-get install -y curl &&
+             curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
+             -o /usr/local/bin/tailwindcss &&
+            chmod +x /usr/local/bin/tailwindcss &&
+             tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch"
+    volumes: [.:/src]
+    networks: [frontend]

.docker-compose-files/compose.prod.yaml

@@ -1,10 +1,25 @@
+---
 services:
   web:
+    command: gunicorn website.wsgi:application
+    restart: unless-stopped
+    environment:
+      ALLOWED_HOSTS: ${NGINX_HOSTNAME}
+      DJANGO_SETTINGS_MODULE: ${DJANGO_SETTINGS_MODULE}
     env_file:
       - path: .env
         required: true
-
   db:
+    restart: unless-stopped
     env_file:
       - path: .env
         required: true
+  adminer:
+    restart: unless-stopped
+  proxy:
+    restart: unless-stopped
+    ports: [80:80, 443:443]
+    environment:
+      - NGINX_HOSTNAME=${NGINX_HOSTNAME}
+      - NGINX_PORT=80
+      - NGINX_SSL_PORT=443

.docker-compose-files/compose.test.yaml

@@ -1,14 +1,17 @@
+---
 services:
   web:
-    command: python manage.py check --deploy; python -Wa manage.py test --noinput --parallel
+    command: python manage.py check --deploy; python -Wa manage.py test --noinput
-    restart: "no"
+      --parallel
+    environment:
+      DEBUG: false
+      DJANGO_SETTINGS_MODULE: website.settings.test
     env_file:
       - path: .env.template
         required: true
-
-
   db:
+    # Tmpfs keeps tests fast and isolated — no persistent volume needed
+    tmpfs: [/var/lib/postgresql/data]
     env_file:
       - path: .env.template
         required: true
-

.env.template

@@ -4,8 +4,6 @@ NGINX_HOSTNAME=localhost
 # Django
 DJANGO_SETTINGS_MODULE=website.settings
 DJANGO_SECRET_KEY=CWHZCAZBNV57tDkwGHJwTUu3PCSnGG45
-DEBUG=TRUE
-#ALLOWED_HOSTS=localhost
 
 # Database (PostgreSQL)
 POSTGRES_USER=test_user
@@ -17,4 +15,4 @@ POSTGRES_DB=test_db
 
 # Gunicorn
 GUNICORN_WORKERS=3
-GUNICORN_TIMEOUT=120
+GUNICORN_TIMEOUT=120

.gitea/workflows/deploy.yml

@@ -1,38 +1,30 @@
+---
 name: Deploy to production
 run-name: deploy-${{ gitea.actor }}
-
 on:
   push:
-    branches:
+    branches: [main]
-      - main
-
 jobs:
   deploy:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v3
-
       - name: Setup SSH
         run: |
           mkdir -p ~/.ssh
           echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_rsa
           chmod 600 ~/.ssh/id_rsa
           ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
-
       - name: Deploy
-        run: |
+        run: |-
           ssh -i ~/.ssh/id_rsa ${{ secrets.DEPLOY_USER }}@${{ secrets.DEPLOY_HOST }} << 'EOF'
             cd ~/Quatsh-Website
-
             echo "Pulling latest code..."
             git pull origin main
-
             echo "Building containers..."
             make prod
-
             echo "Running Django deploy check"
             docker compose run --rm web python manage.py check --deploy
-
             echo "Deployment complete."
-          EOF
+          EOF
+

.gitea/workflows/test.yaml

@@ -1,18 +1,16 @@
+---
 name: Gitea Test.
 run-name: ${{ gitea.actor }}
 on:
   push:
-    branches:
+    branches: [main, pre-prod]
-      - main
-      - pre-prod
   pull_request:
-
 jobs:
   tests:
     runs-on: ubuntu-latest
-    
     steps:
       - uses: actions/checkout@v3
-
+      - name: lint
+        run: make lint
       - name: test
-        run: make test
+        run: make test

.gitignore

@@ -178,4 +178,5 @@ cython_debug/
 # gunicon webserver
 gunicorn.ctl
 
-
+# tailwind stuff
+output.css

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.14-alpine
+FROM python:3.14-slim
 
 ENV PYTHONDONTWRITEBYTECODE=1 \
 	PYTHONUNBUFFERED=1
@@ -12,4 +12,11 @@ RUN pip install --upgrade pip && \
 COPY gunicorn.conf.py /src/
 COPY ./src/ /src/
 
+RUN apt-get update && apt-get install -y --no-install-recommends curl && \
+    curl -sL https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64 -o /usr/local/bin/tailwindcss && \
+    chmod +x /usr/local/bin/tailwindcss && \
+    apt-get remove -y curl && apt-get autoremove -y && rm -rf /var/lib/apt/lists/*
+
+RUN tailwindcss build -i ./static/css/input.css -o ./static/css/output.css --minify
+
 CMD ["gunicorn", "website.wsgi:application"]

Makefile

@@ -1,14 +1,14 @@
 .SHELLFLAGS := -ec
 
 prod:
-	docker compose down
+	docker compose --env-file .env -f ./compose.yaml -f ./.docker-compose-files/compose.prod.yaml down 
 	docker compose --env-file .env -f ./compose.yaml -f ./.docker-compose-files/compose.prod.yaml up -d --build 
 	docker compose exec web python manage.py collectstatic --noinput
 	docker compose exec web python manage.py check --deploy
 	docker compose exec web python manage.py migrate
 
 dev:
-	docker compose down
+	docker compose -f ./compose.yaml -f ./.docker-compose-files/compose.dev.yaml down
 	docker compose -f ./compose.yaml -f ./.docker-compose-files/compose.dev.yaml up --build -d
 	docker compose exec web python manage.py collectstatic --noinput
 	docker compose exec -it web sh

README.md

@@ -43,6 +43,8 @@ To run the website 3 options have been provided
 For development purposes only as the src folder has been mounted in the container to allow for the making of changes without rebuilding the entire image.
 Properly utilising this also requires the DEBUG environment variable to be set to TRUE.
 
+Setup to allow live-reloading without manual intervention after normal file changes (i.e. updates to css, html and python functions).
+
 ```shell
 make dev
 ```

compose.yaml

@@ -2,16 +2,9 @@
 services:
   web:
     build: .
-    command: gunicorn website.wsgi:application
     depends_on:
       db:
         condition: service_healthy
-    environment:
-      ALLOWED_HOSTS: ${NGINX_HOSTNAME}
-      DJANGO_SETTINGS_MODULE: ${DJANGO_SETTINGS_MODULE}
-      # VIRTUAL_HOST: localhost
-      # VIRTUAL_PORT: 8000
-    restart: unless-stopped
     volumes: [static_volume:/app/static, media_volume:/app/media]
     networks: [frontend, backend]
   db:
@@ -21,32 +14,24 @@ services:
       POSTGRES_USER: ${POSTGRES_USER}
       POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
     volumes: [postgres_data:/var/lib/postgresql]
-    restart: unless-stopped
     healthcheck:
       test: [CMD-SHELL, 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DBNAME}']
       interval: 5s
       retries: 5
     networks: [backend]
-  adminer:
-    image: adminer
-    depends_on: [db]
-    restart: always
-    ports: [127.0.0.1:8080:8080]
-    networks: [backend]
   proxy:
     image: nginx:stable
     volumes:
       - ./.nginx/.templates:/etc/nginx/templates
       - static_volume:/app/static:ro
       - media_volume:/app/media:ro
-    restart: unless-stopped
-    ports: [80:80, 443:443]
-    environment:
-      - NGINX_HOSTNAME=${NGINX_HOSTNAME}
-      - NGINX_PORT=80
-      - NGINX_SSL_PORT=443
     depends_on: [web]
     networks: [frontend]
+  adminer:
+    image: adminer
+    depends_on: [db]
+    ports: [127.0.0.1:8080:8080]
+    networks: [backend]
 networks:
   frontend:
   backend:

docs/ROADMAP.md

@@ -2,23 +2,59 @@
 
 This document contains the wanted feature list and their current state.
 
-## Basic Pages
+## Basic Templates
+- [] Nav-bar ~ Adjust based on permission status
+- [] Low-bar ~ KVK etc.
+- [] Basic page layout
 
--[] Homepage
+## Pages
--[] Boards
--[] Committee page
--[] Contact page
--[] Donator page/Friends of Quatsh
--[] Membership page
 
-## Main Features
+### Must
 
--[] Signup form with email SMTP link.
+- [] Homepage
--[] Gallery
+- [] Signups 
--[] Login page
+- [] Contact
+- [] Contribution-Cost
+
+### Should
+- [] Login page
+- [] Gallery
+- [] Boards
+
+### Could
+- [] Committee page
+- [] Donator page/Friends of Quatsh
+
+## Features
+
+- [] Signup form with email SMTP link.
+- [] Gallery
+- [] Login page
+
+## Security 
+
+- [] SSL implementation
+- [] ACME SSL certificate
 
 ## Extra's
 
--[] Allow google-workspace login with SSO?
+- [] Allow google-workspace login with SSO?
--[] Add Redis for Caching
+- [] Add Redis for Caching
--[] Setup SMTP with automatic switching to in-mem email saving OR print to stdout when in DEBUG mode.
+- [] Add [Celery](https://docs.celeryq.dev/en/stable/index.html#) for async background-[task](https://docs.djangoproject.com/en/6.0/topics/tasks/) completion.
+- [] Setup SMTP with automatic switching to in-mem email saving OR print to stdout when in DEBUG mode.
+- [] Split-Storage setup for authenticated-only file access, such as private gallery pictures.
+
+## Priority List
+
+- [] General layout template
+- [] Nav-bar
+- [] Homepage
+- [] Lower-bar ~ KVK
+- [] Signups page
+- [] Calender (Google calender)
+- [] Gallery 
+- [] CCP page
+- [] Contact page
+- [] Boards
+- [] Committee page
+- [] Donator page/Friends of Quatsh

docs/installation_faq.md

@@ -20,3 +20,12 @@ After running this command a Django Migration has to be run to remake the tables
 ``` shell
 docker exec quatsh-website-web-1 python manage.py migrate
 ```
+
+## Make - errors
+
+If you see an error looking as follows docker isn't actually running.
+```
+PS C:\*\Quatsh-Website> docker compose ls
+error during connect: Get "http://%2F%2F.%2Fpipe%2FdockerDesktopLinuxEngine/v1.50/containers/json?filters=%7B%22label%22%3A%7B%22com.docker.compose.config-hash%22%3Atrue%2C%22com.docker.compose.project%22%3Atrue%7D%7D": open //./pipe/dockerDesktopLinuxEngine: The system cannot find the file specified.
+```
+

src/core/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

src/core/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class CoreConfig(AppConfig):
+    name = 'core'

src/core/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

src/core/templates/core/index.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Home{% endblock %}
+
+{% block content %}
+
+<h1>Welcome</h1>
+<div>
+{% include "components/carousel.html" with carousel_id="hero" carousel_images=carousel_images %}
+</div>
+
+{% endblock %}

src/core/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

src/core/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+
+from . import views
+
+app_name = "core"
+
+urlpatterns = [
+    path("", views.index, name="index"),
+]

src/core/views.py

@@ -0,0 +1,10 @@
+from django.shortcuts import render
+from django.templatetags.static import static
+
+
+def index(request):
+    return render(
+        request,
+        "core/index.html",
+        {"carousel_images": [static("/core/img/5x5-2023-11-16-at-14.56.56-1.jpeg")]},
+    )

src/gallery/templates/gallery/index.html

@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% load static %}
+{% block title %}Home{% endblock %}
+{% block content %}<h1>Welcome</h1>{% endblock %}

src/gallery/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+
+from . import views
+
+app_name = "gallery"
+
+urlpatterns = [
+    path("", views.index, name="index"),
+]

src/gallery/views.py

@@ -1,3 +1,5 @@
 from django.shortcuts import render
 
-# Create your views here.
+
+def index(request):
+    return render(request, "gallery/index.html")

src/polls/urls.py

@@ -2,6 +2,8 @@ from django.urls import path
 
 from . import views
 
+app_name = "polls"
+
 urlpatterns = [
     # ex: /polls/
     path("", views.index, name="index"),

src/static/css/input.css

@@ -0,0 +1 @@
+@import "tailwindcss"

src/static/js/carousel.js

@@ -0,0 +1,68 @@
+function initCarousel(id) {
+  document.addEventListener("DOMContentLoaded", function () {
+    const track = document.getElementById(id);
+    const originalSlides = Array.from(track.children);
+    const total = originalSlides.length;
+
+    if (total <= 1) {
+      return;
+    }
+
+    const firstClone = originalSlides[0].cloneNode(true);
+    const lastClone = originalSlides[total - 1].cloneNode(true);
+    track.appendChild(firstClone);
+    track.insertBefore(lastClone, originalSlides[0]);
+
+    let current = 1;
+    let isTransitioning = false;
+    track.style.transform = `translateX(-${current * 100}%)`;
+
+    const dots = document.querySelectorAll(`.${id}_dot`);
+
+    function updateDots(index) {
+      const realIndex = (index - 1 + total) % total;
+      dots.forEach((d, i) => {
+        d.classList.toggle("opacity-100", i === realIndex);
+        d.classList.toggle("opacity-50", i !== realIndex);
+      });
+    }
+
+    function goTo(index) {
+      if (isTransitioning) return;
+      isTransitioning = true;
+      track.style.transition = "transform 500ms ease-in-out";
+      current = index;
+      track.style.transform = `translateX(-${current * 100}%)`;
+      updateDots(current);
+    }
+
+    function next() {
+      goTo(current + 1);
+    }
+    function prev() {
+      goTo(current - 1);
+    }
+
+    track.addEventListener("transitionend", function () {
+      if (current === 0) {
+        track.style.transition = "none";
+        current = total;
+        track.style.transform = `translateX(-${current * 100}%)`;
+      }
+      if (current === total + 1) {
+        track.style.transition = "none";
+        current = 1;
+        track.style.transform = `translateX(-${current * 100}%)`;
+      }
+
+      isTransitioning = false;
+    });
+
+    setInterval(next, 5000);
+    updateDots(current);
+
+    window[`${id}_goTo`] = (i) => goTo(i + 1);
+    window[`${id}_next`] = next;
+    window[`${id}_prev`] = prev;
+  });
+}

src/templates/base.html

@@ -0,0 +1,18 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>
+            {% block title %}My Site{% endblock %}
+        </title>
+        <link rel="stylesheet" href="{% static 'css/output.css' %}">
+    </head>
+    <body>
+        {% include "components/topbar.html" %}
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+    </body>
+</html>

src/templates/components/carousel.html

@@ -0,0 +1,28 @@
+{% load static %}
+<div class="relative w-full overflow-hidden">
+    <div id="{{ carousel_id }}" class="flex w-full">
+        {% for image in carousel_images %}
+            <div class="w-full flex-shrink-0">
+                <img src="{{ image }}" class="w-full object-cover">
+            </div>
+        {% endfor %}
+    </div>
+    {% if carousel_images|length > 1 %}
+        <button onclick="{{ carousel_id }}_prev()"
+                class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 text-white px-3 py-1 rounded-full">
+            &#8592;
+        </button>
+        <button onclick="{{ carousel_id }}_next()"
+                class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 text-white px-3 py-1 rounded-full">
+            &#8594;
+        </button>
+        <div class="absolute bottom-2 w-full flex justify-center gap-2">
+            {% for image in carousel_images %}
+                <span class="{{ carousel_id }}_dot w-2 h-2 rounded-full bg-white opacity-50 cursor-pointer"
+                      onclick="{{ carousel_id }}_goTo({{ forloop.counter0 }})"></span>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
+<script src="{% static 'js/carousel.js' %}"></script>
+<script>initCarousel('{{ carousel_id }}');</script>

src/templates/components/topbar.html

@@ -0,0 +1,8 @@
+<nav>
+	<ul>
+		<li><a href="{% url 'core:index' %}">Home</a></li>
+		<li><a href="{% url 'polls:index' %}">Polls</a></li>
+		<li><a href="{% url 'gallery:index' %}">Gallery</a></li>
+	</ul>
+    <!-- rest of your topbar -->
+</nav>

src/website/settings.py

@@ -10,8 +10,8 @@ For the full list of settings and their values, see
 https://docs.djangoproject.com/en/6.0/ref/settings/
 """
 
-from pathlib import Path
 import os
+from pathlib import Path
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -24,7 +24,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 SECRET_KEY = os.environ["DJANGO_SECRET_KEY"]
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = os.getenv("DEBUG") == "TRUE"
+DEBUG = os.getenv("DEBUG", "false") == "true"
 
 ALLOWED_HOSTS = os.getenv("ALLOWED_HOSTS", "127.0.0.1").split(",")
 
@@ -34,6 +34,8 @@ SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
 
 INSTALLED_APPS = [
     "polls.apps.PollsConfig",
+    "core.apps.CoreConfig",
+    "gallery.apps.GalleryConfig",
     "django.contrib.admin",
     "django.contrib.auth",
     "django.contrib.contenttypes",
@@ -53,7 +55,7 @@ MIDDLEWARE = [
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
 ]
 
-if os.getenv("DJANGO_RELOAD", "False") == "True":
+if os.getenv("DJANGO_RELOAD", "false") == "true":
     INSTALLED_APPS.append("django_browser_reload")
     INSTALLED_APPS.append("django_watchfiles")
     MIDDLEWARE.append("django_browser_reload.middleware.BrowserReloadMiddleware")
@@ -63,7 +65,7 @@ ROOT_URLCONF = "website.urls"
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [],
+        "DIRS": [BASE_DIR / "templates"],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -129,3 +131,7 @@ USE_TZ = True
 
 STATIC_ROOT = "/app/static/"
 STATIC_URL = "static/"
+
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]

src/website/urls.py

@@ -21,10 +21,12 @@ from django.contrib import admin
 from django.urls import include, path
 
 urlpatterns = [
+    path("", include("core.urls")),
     path("polls/", include("polls.urls")),
+    path("gallery/", include("gallery.urls")),
     path("admin/doc/", include("django.contrib.admindocs.urls")),
     path("admin/", admin.site.urls),
 ]
 
-if os.getenv("DJANGO_RELOAD", "False") == "True":
+if os.getenv("DJANGO_RELOAD", "false") == "true":
     urlpatterns.append(path("__reload__/", include("django_browser_reload.urls")))