Skip to main content
The National Archives logo

TNA Frontend Jinja

Main build status TNA Frontend version Latest release PyPi version Python version Licence

TNA Frontend Jinja templates are a Jinja implementation of the templates provided as part of TNA Frontend as well as widgets for WTForms.

# Install with Poetry
poetry add tna-frontend-jinja

# Install with pip
pip install tna-frontend-jinja

See the documentation.

Quickstart for Flask projects

Use the Flask application's jinja_loader to allow templates included from either your app (in the below example called app) and the tna_frontend_jinja package.

Ensure your application is first on the list. This means you can overwrite the standard templates by creating a template with the same filename in your project.

from flask import Flask
from jinja2 import ChoiceLoader, PackageLoader


def create_app():
    app = Flask(__name__)

    app.jinja_loader = ChoiceLoader(
        [
            PackageLoader("app"),  # Use your application directory here
            PackageLoader("tna_frontend_jinja"),
        ]
    )

Quickstart for Django projects

Update the TEMPLATES setting in your application config:

TEMPLATES = [
    # Add the Jinja2 backend first
    {
        "BACKEND": "django.template.backends.jinja2.Jinja2",
        "DIRS": [
            os.path.join(BASE_DIR, "app/templates"),  # Use your application directory here
            os.path.join(get_path("platlib"), "tna_frontend_jinja/templates"),
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "environment": "config.jinja2.environment",
        },
    },
    # The DjangoTemplates backend is still needed for tools like Django admin and the debug toolbar
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

Ensure your application is first on the list of template directories. This means you can overwrite the standard templates by creating a template with the same filename in your project.

Using the templates

{%- from 'components/button/macro.html' import tnaButton -%}

{{ tnaButton({
  'text': 'Save and continue'
}) }}

The options available to each component macro can be found in the National Archives Design System Components documentation.

⚠️ The included templates are a like-for-like port, the only difference between the Nunjucks examples and their Jinja equivalents is having to quote key names, e.g. 'text' instead of text.

We test each component against its published component fixtures to ensure complete compatibility.

Overriding templates

To make modifications to the templates, create a new file in your applciation templates directory with the same name as the template you want to customise.

For example, if your application templates directory is app/templates, create app/templates/components/button/macro.html and insert your own HTML using the same macro name (e.g. tnaButton).

This way you can continue to use the same import (e.g. {%- from 'components/button/macro.html' import tnaButton -%}) but introduce your own bespoke functionality.

WTForms support

# Install with Poetry
poetry add tna-frontend-jinja[wtforms]

# Install with pip
pip install tna-frontend-jinja[wtforms]

See the TNA Frontend Jinja WTForms docs for more information.

Running tests

# Start the test server
docker compose up -d

# Install the dependencies
npm install

# Run the fixture tests
npm run test:fixtures

# Run the Playwright tests
npm run test:playwright

# Run the Python tests
docker compose exec app poetry run python -m pytest

Styles and JavaScript

The CSS and JavaScript are not included in the PyPI package. You must install them separately.

Install and use the @nationalarchives/frontend package from npm with npm install @nationalarchives/frontend.

Ensure you install the correct version of TNA Frontend for the version of the templates you are using.

Compatibility with TNA Frontend

v1+

TNA Frontend Jinja Compatible TNA Frontend version(s)
1.2.0 1.2.x
1.1.0 1.1.x
1.0.0 1.0.x

v0.3.x

TNA Frontend Jinja Compatible TNA Frontend version(s)
0.44.0 0.44.x
0.43.0 0.43.x
0.42.0 0.42.x
0.41.0 0.41.x
0.40.0 0.40.x
0.38.0 0.38.x
0.38.0 0.38.x
0.37.0 0.37.x
0.36.0 0.36.x
0.35.x 0.35.1
0.34.0 0.34.x
0.33.0 0.33.x
0.32.0 0.32.x
0.31.x 0.31.x
0.30.0 0.30.x
0.29.1 0.29.1
0.29.0 0.29.0
0.28.0 0.28.x
0.27.0 0.27.x
0.26.0 0.26.x
0.25.0 0.25.x
0.24.0 0.24.x
0.23.0 0.23.x
0.22.0 0.22.x
0.21.0 0.21.x
0.20.1 0.20.1
0.20.0 0.20.0
0.19.0 0.19.x
0.18.0 0.18.x
0.17.0 0.17.x
0.16.0 0.16.x
0.15.0 0.15.x
0.14.0 0.14.x
0.13.0 0.13.x
0.12.0 0.12.x
0.11.0 0.11.x
0.10.0 0.10.x
0.9.0 0.9.x
0.8.1 0.8.1
0.8.0 0.8.0
0.7.0 0.7.x
0.6.0 0.6.x
0.5.0 0.5.x
0.4.0 0.4.x
0.3.0 0.3.x

v0.2.x

TNA Frontend Jinja Compatible TNA Frontend version(s)
0.2.18 0.2.18
0.2.17 0.2.17
0.2.16 0.2.16
0.2.15 0.2.15
0.2.14 0.2.14
0.2.13 0.2.13
0.2.12 0.2.12
0.2.11 0.2.11
0.2.10 0.2.10
0.2.9 0.2.9
0.2.8 0.2.8
0.2.7 0.2.7
0.2.6 0.2.6
0.2.5 0.2.5
0.2.4 0.2.4
0.2.3 0.2.3
0.2.2 0.2.2
0.2.1 0.2.1
0.2.0 0.2.0

v0.1.x

TNA Frontend Jinja Compatible TNA Frontend version(s)
0.1.34 0.1.65
0.1.33 0.1.62, 0.1.63, 0.1.64
0.1.32 0.1.60, 0.1.61
0.1.31 0.1.59
0.1.30 0.1.58
0.1.29 0.1.57
0.1.28 0.1.55, 0.1.56
0.1.27 0.1.54
0.1.26 0.1.53
0.1.25 0.1.51, 0.1.52
0.1.23, 0.1.24 0.1.50
0.1.21, 0.1.22 0.1.49
0.1.20 0.1.48
0.1.19 0.1.45, 0.1.46, 0.1.47
0.1.18 0.1.44
0.1.17 0.1.43
0.1.15, 0.1.16 0.1.42
0.1.14 0.1.40, 0.1.41
0.1.13 0.1.39
0.1.12 0.1.37, 0.1.38
0.1.11 0.1.36
0.1.10 0.1.34, 0.1.35
0.1.9 0.1.33
0.1.7, 0.1.8 0.1.31, 0.1.32
0.1.6 0.1.29-prerelease, 0.1.30
0.1.00.1.5 [latest from main branch when published]

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

tna_frontend_jinja-1.2.0.tar.gz (36.3 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

tna_frontend_jinja-1.2.0-py3-none-any.whl (70.1 kB view details)

Uploaded Python 3

File details

Details for the file tna_frontend_jinja-1.2.0.tar.gz.

File metadata

  • Download URL: tna_frontend_jinja-1.2.0.tar.gz
  • Upload date:
  • Size: 36.3 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/7.0.0 CPython/3.13.14

File hashes

Hashes for tna_frontend_jinja-1.2.0.tar.gz
Algorithm Hash digest
SHA256 4bd79a35e6ad59ee34d99d6e3ed59a70b3e3131001090530b1ab5fa8ecfa5641
MD5 c5ba9dd4edd9a62d15c2c61d48fb9c58
BLAKE2b-256 311449e8feb1ebdab4a6e41cf00cb1c55e09c79bcb037bb0173771a0fb7faa4e

See more details on using hashes here.

Provenance

The following attestation bundles were made for tna_frontend_jinja-1.2.0.tar.gz:

Publisher: python-publish.yml on nationalarchives/tna-frontend-jinja

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file tna_frontend_jinja-1.2.0-py3-none-any.whl.

File metadata

File hashes

Hashes for tna_frontend_jinja-1.2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 4cb4100b46d2261c1893354c96259d1cf280c78b4e966c5f3e8132e9b8472ff5
MD5 cd23b5b482e56453e2f1b9ca42a5a70b
BLAKE2b-256 09ae1befd1b9d9aceeaa2e7c46e9a82726e98d97045773b6f9f759086ce319be

See more details on using hashes here.

Provenance

The following attestation bundles were made for tna_frontend_jinja-1.2.0-py3-none-any.whl:

Publisher: python-publish.yml on nationalarchives/tna-frontend-jinja

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Release history Release notifications | RSS feed

1.4.0

2 files

1.3.0

2 files

This release

1.2.0 This release

2 files

1.1.0

2 files

1.0.0

2 files

0.44.0

2 files

0.43.0

2 files

0.42.0

2 files

0.41.0

2 files

0.40.0

2 files

0.39.0

2 files

0.38.0

2 files

0.37.0

2 files

0.36.0

2 files

0.35.1

2 files

0.35.0

2 files

0.34.0

2 files

0.33.0

2 files

0.32.0

2 files

0.31.1

2 files

0.30.0

2 files

0.29.1

2 files

0.29.0

2 files

0.28.0

2 files

0.27.0

2 files

0.26.0

2 files

0.25.0

2 files

0.24.0

2 files

0.23.0

2 files

0.22.0

2 files

0.21.0

2 files

0.20.1

2 files

0.20.0

2 files

0.19.0

2 files

0.18.0

2 files

0.17.0

2 files

0.16.0

2 files

0.15.0

2 files

0.14.0

2 files

0.13.0

2 files

0.12.0

2 files

0.11.0

2 files

0.10.0

2 files

0.9.0

2 files

0.8.1

2 files

0.8.0

2 files

0.7.0

2 files

0.6.0

2 files

0.5.0

2 files

0.4.0

2 files

0.3.0

2 files

0.2.18

2 files

0.2.17

2 files

0.2.16

2 files

0.2.15

2 files

0.2.14

2 files

0.2.13

2 files

0.2.12

2 files

0.2.11

2 files

0.2.10

2 files

0.2.9

2 files

0.2.8

2 files

0.2.7

2 files

0.2.6

2 files

0.2.5

2 files

0.2.4

2 files

0.2.3

2 files

0.2.2

2 files

0.2.1

2 files

0.2.0

2 files

0.1.34

2 files

0.1.33

2 files

0.1.32

2 files

0.1.31

2 files

0.1.30

2 files

0.1.29

2 files

0.1.28

2 files

0.1.27

2 files

0.1.26

2 files

0.1.25

2 files

0.1.24

2 files

0.1.23

2 files

0.1.22

2 files

0.1.21

2 files

0.1.20

2 files

0.1.19

2 files

0.1.18

2 files

0.1.17

2 files

0.1.16

2 files

0.1.15

2 files

0.1.14

2 files

0.1.13

2 files

0.1.12

2 files

0.1.11

2 files

0.1.10

2 files

0.1.9

2 files

0.1.8

2 files

0.1.7

2 files

0.1.6

2 files

0.1.5

2 files

0.1.4

2 files

0.1.3

2 files

0.1.2

2 files

0.1.1

2 files

0.1.0

2 files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page