The National Archives Frontend Django Templates

Django templates implementation of TNA components for inclusion in Python Django applications.

# Create a virtual environment
python3 -m venv venv
. ./venv/bin/activate

# Install the dependencies
pip install -r requirements.txt
npm install

# Run the server
python manage.py runserver 8080

http://localhost:8080/

# Run the tests against the running server
node tasks/test.mjs

How to use in your own Django project

Templates

1. Install the nationalarchives-frontend-django package from PyPi

from distutils.sysconfig import get_python_lib

TEMPLATES = [
    {
        "DIRS": [
            os.path.join(get_python_lib(), "nationalarchives-frontend-django/templates")
        ],
    }
]

Styles

Install the @nationalarchives/frontend package from npm with npm install @nationalarchives/frontend

Add the config to enable you to use the static files:

STATICFILES_DIRS = [
    "node_modules/@nationalarchives/frontend"
]

Import the stylesheet with:

{% load static %}
<link rel="stylesheet" href="{% static 'nationalarchives/all.css' %}">

The @nationalarchives/frontend package also includes the SCSS if you wish to compile the CSS yourself.