🎨 Add MoJ / GOV.UK frontend styling

.gitignore

@@ -16,4 +16,5 @@ __pycache__
 node_modules/
 /static/
 /run/
-db.sqlite3
+db.sqlite3
+staticfiles/

Dockerfile

@@ -1,11 +1,11 @@
-# FROM public.ecr.aws/docker/library/node:20.11.1 AS build-node
+FROM public.ecr.aws/docker/library/node:20.11.1 AS build-node
 
-# WORKDIR /
-# COPY package.json package-lock.json ./
-# COPY assets/scss/app.scss ./assets/scss/app.scss
+WORKDIR /
+COPY package.json package-lock.json ./
+COPY assets/scss/app.scss ./assets/scss/app.scss
 
-# RUN npm install \
-#     && npm run css
+RUN npm install \
+    && npm run css
 
 FROM public.ecr.aws/docker/library/python:3.12-alpine3.19 AS base
 
@@ -21,13 +21,14 @@ RUN mkdir --parents static/assets/fonts \
     && mkdir --parents static/assets/images \
     && mkdir --parents static/assets/js
 
-# COPY --from=build-node static/app.css static/app.css
-# COPY --from=build-node node_modules/govuk-frontend/dist/govuk/assets/fonts/. static/assets/fonts
-# COPY --from=build-node node_modules/govuk-frontend/dist/govuk/assets/images/. static/assets/images
-# COPY --from=build-node node_modules/govuk-frontend/dist/govuk/all.bundle.js static/assets/js/govuk.js
+COPY --from=build-node static/app.css static/app.css
+COPY --from=build-node node_modules/govuk-frontend/dist/govuk/assets/fonts/. static/assets/fonts
+COPY --from=build-node node_modules/govuk-frontend/dist/govuk/assets/images/. static/assets/images
+COPY --from=build-node node_modules/govuk-frontend/dist/govuk/all.bundle.js static/assets/js/govuk.js
 COPY scripts/container/entrypoint.sh /usr/local/bin/entrypoint.sh
 COPY requirements.txt manage.py ./
 COPY ollamate ollamate
+COPY streamingapp streamingapp
 # COPY tests tests
 
 RUN pip install --no-cache-dir --requirement requirements.txt \

Makefile

@@ -1,5 +1,21 @@
 #!make
 
+build-static:
+	make build-css
+	make build-js
+
+build-css:
+	mkdir -p static/assets/fonts
+	mkdir -p static/assets/images
+	cp -R node_modules/govuk-frontend/dist/govuk/assets/fonts/. static/assets/fonts
+	cp -R node_modules/govuk-frontend/dist/govuk/assets/images/. static/assets/images
+	npm run css
+
+build-js:
+	mkdir -p static/assets/js
+	cp node_modules/govuk-frontend/dist/govuk/all.bundle.js static/assets/js/govuk.js
+	cp node_modules/govuk-frontend/dist/govuk/all.bundle.js.map static/assets/js/govuk.js.map
+
 db-migrate:
 	python manage.py migrate
 

assets/scss/app.scss

@@ -0,0 +1,7 @@
+$govuk-assets-path: "/static/assets/";
+
+ /* stylelint-disable import-notation */
+@import "node_modules/govuk-frontend/dist/govuk/all";
+@import "node_modules/@ministryofjustice/frontend/moj/all";
+
+ /* stylelint-enable */

ollamate/settings.py

@@ -28,12 +28,13 @@
     print(f"Loading environment variables from {env_file}")
     environ.Env.read_env(env_file)
 else:
-    print("Fix environment variables.")
+    print("...")
+    # print("Fix environment variables.")
     # print(f"{env_file} not found")
-    # print("CLIENT_ID:", env("CLIENT_ID"))
-    # print("CLIENT_SECRET:", env("CLIENT_SECRET"))
-    # print("TENANT_ID:", env("AZURE_TENANT_ID"))
-    # print("REDIRECT_URI:", env("REDIRECT_URI"))
+    # print("CLIENT_ID:", os.environ.get("CLIENT_ID"))
+    # print("CLIENT_SECRET:", os.environ.get("CLIENT_SECRET"))
+    # print("TENANT_ID:", os.environ.get("AZURE_TENANT_ID"))
+    # print("REDIRECT_URI:", os.environ.get("REDIRECT_URI"))
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 # BASE_DIR = Path(__file__).resolve().parent.parent
@@ -42,7 +43,7 @@
 # See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = env("SECRET_KEY")
+SECRET_KEY = os.environ.get("SECRET_KEY")
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
@@ -60,7 +61,8 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-    "streamingapp",
+    "ollamate",
+    "streamingapp"
     # "azure_auth"
 ]
 
@@ -79,7 +81,7 @@
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [],
+        "DIRS": [os.path.join(BASE_DIR, "templates")],
         "APP_DIRS": True,
         "OPTIONS": {
             "context_processors": [
@@ -153,6 +155,9 @@
 # https://docs.djangoproject.com/en/5.0/howto/static-files/
 
 STATIC_URL = "static/"
+STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
+STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
+
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
@@ -162,12 +167,12 @@
 # Azure authentication settings
 
 AZURE_AUTH = {
-    "CLIENT_ID": env("CLIENT_ID"),
-    "CLIENT_SECRET": env("CLIENT_SECRET"),
-    "REDIRECT_URI": env("REDIRECT_URI"),
+    "CLIENT_ID": os.environ.get("CLIENT_ID"),
+    "CLIENT_SECRET": os.environ.get("CLIENT_SECRET"),
+    "REDIRECT_URI": os.environ.get("REDIRECT_URI"),
     "SCOPES": ["User.Read"],
     "AUTHORITY": "https://login.microsoftonline.com/{}".format(
-        env("AZURE_TENANT_ID")
+        os.environ.get("AZURE_TENANT_ID")
     ),  # Or https://login.microsoftonline.com/common if multi-tenant
     #     # "LOGOUT_URI": "https://<domain>/logout",    # Optional
     #     # "PUBLIC_URLS": ["<public:view_name>",],  # Optional, public views accessible by non-authenticated users