From fed5120935e39278e034c4c6878a3a3561c1d68f Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 6 Dec 2024 17:25:58 +0000 Subject: [PATCH 1/2] FSPT-156: fix fonts and favicon being served Currently the authenticator app services web pages that fallback on the `arial` font and don't have the GOV.UK crown as the Favicon. This gives in inconsistent user experience, looks visually broken and doesn't follow the guidance to use "GDS Transport" on gov.uk domains. Tell the flask app to serve static assets from the `/assets` path. As we're not customising our styles from the base design system SCSS we'll use the default path included in the pre-built CSS. The relative paths for the `/fonts` and `/images` will now line up and the appropriate font should be used. Remove custom logic for manipulating the asset path in the CSS thats copied over, that is error prone as evidenced by the fact it would update for the font files but not the favicon. (Instead we adjust where static files are served from Flask). --- app.py | 3 ++- build.py | 28 +--------------------------- frontend/templates/base.html | 2 +- frontend/templates/head.html | 2 +- 4 files changed, 5 insertions(+), 30 deletions(-) diff --git a/app.py b/app.py index 0ebe756a..83ab26e6 100644 --- a/app.py +++ b/app.py @@ -51,6 +51,7 @@ def create_app() -> Flask: "Authenticator", specification_dir="/openapi/", options=connexion_options, + server_args={"static_url_path": "/assets"}, ) connexion_app.add_api( get_bundled_specs(Config.FLASK_ROOT + "/openapi/api.yml"), @@ -61,7 +62,7 @@ def create_app() -> Flask: # Configure Flask App flask_app = connexion_app.app flask_app.config.from_object("config.Config") - flask_app.static_folder = "frontend/static/dist/" + flask_app.static_folder = Config.STATIC_FOLDER flask_app.jinja_loader = ChoiceLoader( [ PackageLoader("frontend"), diff --git a/build.py b/build.py index 83c7890b..73d95300 100644 --- a/build.py +++ b/build.py @@ -1,4 +1,3 @@ -import glob import os import shutil import urllib.request @@ -9,16 +8,10 @@ def build_govuk_assets(static_dist_root="frontend/static/dist"): - # NOTE: When using connexion for our openapi management - # FLASK_STATIC_URL needs to be "/static" - # as static_url_path is not directly configurable - # with the connexion app constructor connexion.FlaskApp() - # so the default /static url needs to be used DIST_ROOT = "./" + static_dist_root - GOVUK_DIR = "/govuk-frontend" GOVUK_URL = "https://github.com/alphagov/govuk-frontend/releases/download/v4.0.0/release-v4.0.0.zip" ZIP_FILE = "./govuk_frontend.zip" - DIST_PATH = DIST_ROOT + GOVUK_DIR + DIST_PATH = DIST_ROOT ASSETS_DIR = "/assets" ASSETS_PATH = DIST_PATH + ASSETS_DIR @@ -56,25 +49,6 @@ def build_govuk_assets(static_dist_root="frontend/static/dist"): for file_to_move in os.listdir(ASSETS_PATH): shutil.move("/".join([ASSETS_PATH, file_to_move]), DIST_PATH) - # Update relative paths - - print("Updating relative paths in css files to " + GOVUK_DIR) - cwd = os.getcwd() - os.chdir(DIST_PATH) - for css_file in glob.glob("*.css"): - - # Read in the file - with open(css_file, "r") as file: - filedata = file.read() - - # Replace the target string - filedata = filedata.replace(ASSETS_DIR, ASSETS_DIR + GOVUK_DIR) - - # Write the file out again - with open(css_file, "w") as file: - file.write(filedata) - os.chdir(cwd) - # Delete temp files print("Deleting " + ASSETS_PATH) shutil.rmtree(ASSETS_PATH) diff --git a/frontend/templates/base.html b/frontend/templates/base.html index 02c25f8b..7a96b8fb 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -20,7 +20,7 @@ {% block bodyEnd %} - + From b13bf975bffbcf1f87fbb9c081240590b0119595 Mon Sep 17 00:00:00 2001 From: Steven Date: Wed, 11 Dec 2024 14:55:50 +0000 Subject: [PATCH 2/2] FSPT-156: fix serving the incorrect crown for the favicon This updates the design system + jinja to gov uk frontend 4.8. This was a period before the breaking changes of v5 that bundles the new crown that services could opt in to. --- build.py | 2 +- frontend/templates/base.html | 2 +- frontend/templates/head.html | 2 +- pyproject.toml | 2 +- uv.lock | 8 ++++---- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/build.py b/build.py index 73d95300..043ca0d1 100644 --- a/build.py +++ b/build.py @@ -9,7 +9,7 @@ def build_govuk_assets(static_dist_root="frontend/static/dist"): DIST_ROOT = "./" + static_dist_root - GOVUK_URL = "https://github.com/alphagov/govuk-frontend/releases/download/v4.0.0/release-v4.0.0.zip" + GOVUK_URL = "https://github.com/alphagov/govuk-frontend/releases/download/v4.8.0/release-v4.8.0.zip" ZIP_FILE = "./govuk_frontend.zip" DIST_PATH = DIST_ROOT ASSETS_DIR = "/assets" diff --git a/frontend/templates/base.html b/frontend/templates/base.html index 7a96b8fb..9b04d61c 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -20,7 +20,7 @@ {% block bodyEnd %} - + diff --git a/pyproject.toml b/pyproject.toml index 1c05ac62..1f444af4 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -18,7 +18,7 @@ dependencies = [ "flask-wtf==1.2.2", "flask==2.2.5", "funding-service-design-utils==5.2.0", - "govuk-frontend-jinja==2.3.0", + "govuk-frontend-jinja==2.8.0", "greenlet==3.1.1", "jsmin==3.0.1", "msal==1.28.0", diff --git a/uv.lock b/uv.lock index 0b66eccd..a8878e8a 100644 --- a/uv.lock +++ b/uv.lock @@ -649,7 +649,7 @@ requires-dist = [ { name = "flask-talisman", specifier = "==0.8.1" }, { name = "flask-wtf", specifier = "==1.2.2" }, { name = "funding-service-design-utils", specifier = "==5.2.0" }, - { name = "govuk-frontend-jinja", specifier = "==2.3.0" }, + { name = "govuk-frontend-jinja", specifier = "==2.8.0" }, { name = "greenlet", specifier = "==3.1.1" }, { name = "jsmin", specifier = "==3.0.1" }, { name = "msal", specifier = "==1.28.0" }, @@ -710,14 +710,14 @@ wheels = [ [[package]] name = "govuk-frontend-jinja" -version = "2.3.0" +version = "2.8.0" source = { registry = "https://pypi.org/simple" } dependencies = [ { name = "jinja2" }, ] -sdist = { url = "https://files.pythonhosted.org/packages/3f/ac/e4ef295f6008d5ba08bfc92ddeadc1005bb49aa1628100337c246d5f666c/govuk-frontend-jinja-2.3.0.tar.gz", hash = "sha256:e79554e08615d7a31d4834f92879913b8b7dbc646fb7acd84ed65c67946a690d", size = 23952 } +sdist = { url = "https://files.pythonhosted.org/packages/02/06/9b7d66f5dd98daa230262f58d6d071df7115d68828e54ac3d7bed4b05524/govuk-frontend-jinja-2.8.0.tar.gz", hash = "sha256:0c67e8df4069848acd614253b0d618f4052941baa5eec6835756d05d061a14dc", size = 28103 } wheels = [ - { url = "https://files.pythonhosted.org/packages/6c/95/836a62d0df3806c2622f0754fb02514cc3361f22709ec85cd862b5e9c559/govuk_frontend_jinja-2.3.0-py3-none-any.whl", hash = "sha256:87a9233e58e0fb86ff4ce5b201352f55aa42ede949ae091df5e9d56fab671181", size = 35934 }, + { url = "https://files.pythonhosted.org/packages/81/4d/18c773f5192176b18c292f8e8244df6c416d31686b2be369c713a2fc1c8e/govuk_frontend_jinja-2.8.0-py3-none-any.whl", hash = "sha256:e7202be806ec99657ef152f7c6c7c80e16e949a1cc3caddda4b97f54fb32b00e", size = 39988 }, ] [[package]]