Merge pull request #1 from nationalarchives/proof-of-concept

Proof of concept -> main

.github/workflows/ci.yml

@@ -0,0 +1,47 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+      - name: Install Poetry
+        uses: snok/install-poetry@v1
+      - name: Install Python requirements
+        run: poetry install
+      - name: Lint Python
+        run: |
+          poetry run isort . --diff --verbose
+          poetry run black . --check --verbose
+          poetry run flake8 . --verbose
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+      - name: Install Poetry
+        uses: snok/install-poetry@v1
+      - name: Get fixtures
+        run: cd .. && git clone https://github.com/nationalarchives/tna-frontend.git
+      - name: Install Python requirements
+        run: poetry install
+      - name: Install Node dependencies
+        run: cd tasks && npm install
+      - name: Run server
+        run: poetry run flask --app tna-frontend-jinja run --debug --port 5000 &
+      - name: Run the tests
+        run: node ./tasks/test.mjs || exit 1

.github/workflows/python-publish.yml

@@ -0,0 +1,50 @@
+name: Python Package
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+      - name: Install Poetry
+        uses: snok/install-poetry@v1
+      - name: Get fixtures
+        run: cd .. && git clone https://github.com/nationalarchives/tna-frontend.git
+      - name: Install Python requirements
+        run: poetry install
+      - name: Install Node dependencies
+        run: cd tasks && npm install
+      - name: Run server
+        run: poetry run flask --app tna-frontend-jinja run --debug --port 5000 &
+      - name: Run the tests
+        run: node ./tasks/test.mjs || exit 1
+
+  deploy:
+    name: Upload release to PyPI
+    runs-on: ubuntu-latest
+    needs: [test]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v3
+        with:
+          python-version: '3.x'
+      - name: Install build dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install build
+      - name: Build package
+        run: python -m build
+      - name: Publish package
+        uses: pypa/gh-action-pypi-publish@release/v1
+        with:
+          password: ${{ secrets.PYPI_API_TOKEN }}

.gitignore

@@ -1,2 +1,7 @@
 .DS_Store
 .vscode
+*.egg-info
+dist
+node_modules
+venv
+__pycache__

CHANGELOG.md

@@ -0,0 +1,25 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.1...HEAD)
+
+### Added
+### Changed
+### Deprecated
+### Removed
+### Fixed
+### Security
+
+## [0.1.1](https://github.com/nationalarchives/tna-frontend-jinja/compare/v0.1.0...v0.1.1) - 2023-11-28
+
+### Changed
+
+- Package structure updated
+
+## 0.1.0 - 2023-11-28
+
+Initial release made to PyPi

LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2022 The National Archives
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,14 +1,14 @@
-# The National Archives Frontend Jinja2 Templates
+# TNA Frontend Jinja
 
-Jinja2 implementation of [TNA components](https://github.com/nationalarchives/tna-frontend) for inclusion in Python applications.
+[![Main build status](https://img.shields.io/github/actions/workflow/status/nationalarchives/tna-frontend-jinja/ci.yml?style=flat-square&event=push&branch=main)](https://github.com/nationalarchives/tna-frontend-jinja/actions/workflows/ci.yml?query=branch%3Amain)
+[![Latest release](https://img.shields.io/github/v/release/nationalarchives/tna-frontend-jinja?style=flat-square&logo=github&logoColor=white&sort=semver)](https://github.com/nationalarchives/tna-frontend-jinja/releases)
+[![PyPi version](https://img.shields.io/pypi/v/tna-frontend-jinja?style=flat-square&logo=pypi&logoColor=white)](https://pypi.org/project/tna-frontend-jinja/)
+![Python version](https://img.shields.io/pypi/pyversions/tna-frontend-jinja?style=flat-square&logo=python&logoColor=white)
+[![Licence](https://img.shields.io/github/license/nationalarchives/tna-frontend-jinja?style=flat-square)](https://github.com/nationalarchives/tna-frontend-jinja/blob/main/LICENCE)
 
-The rationale behind choosing Jinja was that it works with the two most popular Python frameworks:
+## Quickstart
 
-- Django - [Django has support for the Jinja2 template engine](https://docs.djangoproject.com/en/4.2/topics/templates/#support-for-template-engines) which is then extended to [Wagtail support for Jinja](https://docs.wagtail.org/en/stable/reference/jinja2.html)
-- Flask - [Jinja2 is the default template engine for Flask](https://flask.palletsprojects.com/en/2.3.x/templating/)
-
-## Output
-
-The Jinja2 templates and macros will be published to [PyPi](https://pypi.org/) which can then be included as a dependecy in Python projects.
-
-For a full relationship diagram, see https://github.com/nationalarchives/tna-frontend#component-diagram.
+```sh
+flask --app tna-frontend-jinja run --debug --port 5000
+node tasks/test.mjs
+```

app/__init__.py

@@ -0,0 +1,11 @@
+from flask import Flask
+
+
+def create_app():
+    app = Flask(__name__, template_folder="../templates")
+
+    from .components import bp as components_bp
+
+    app.register_blueprint(components_bp)
+
+    return app

app/components/__init__.py

@@ -0,0 +1,5 @@
+from flask import Blueprint
+
+bp = Blueprint("components", __name__, template_folder="test-templates")
+
+from app.components import routes  # noqa: E402,F401

app/components/routes.py

@@ -0,0 +1,91 @@
+import json
+
+from flask import render_template, request
+
+from app.components import bp
+
+
+def render_component(template):
+    params = request.args.get("params")
+    context = json.loads(params) if params else {}
+    return render_template(template, context=context)
+
+
+@bp.route("/breadcrumbs")
+def breadcrumbs():
+    return render_component("breadcrumbs.html")
+
+
+@bp.route("/button")
+def button():
+    return render_component("button.html")
+
+
+@bp.route("/card")
+def card():
+    return render_component("card.html")
+
+
+@bp.route("/cookie-banner")
+def cookie_banner():
+    return render_component("cookie-banner.html")
+
+
+@bp.route("/filters")
+def filters():
+    return render_component("filters.html")
+
+
+@bp.route("/footer")
+def footer():
+    return render_component("footer.html")
+
+
+@bp.route("/grid")
+def grid():
+    return render_component("grid.html")
+
+
+@bp.route("/header")
+def header():
+    return render_component("header.html")
+
+
+@bp.route("/hero")
+def hero():
+    return render_component("hero.html")
+
+
+@bp.route("/index-grid")
+def index_grid():
+    return render_component("index-grid.html")
+
+
+@bp.route("/message")
+def message():
+    return render_component("message.html")
+
+
+@bp.route("/phase-banner")
+def phase_banner():
+    return render_component("phase-banner.html")
+
+
+@bp.route("/picture")
+def picture():
+    return render_component("picture.html")
+
+
+@bp.route("/sensitive-image")
+def sensitive_image():
+    return render_component("sensitive-image.html")
+
+
+@bp.route("/skip-link")
+def skip_link():
+    return render_component("skip-link.html")
+
+
+@bp.route("/tabs")
+def tabs():
+    return render_component("tabs.html")

app/components/test-templates/breadcrumbs.html

@@ -0,0 +1,2 @@
+{%- from "components/breadcrumbs/macro.html" import tnaBreadcrumbs -%}
+{{ tnaBreadcrumbs(context) }}

app/components/test-templates/button.html

@@ -0,0 +1,2 @@
+{%- from "components/button/macro.html" import tnaButton -%}
+{{ tnaButton(context) }}

app/components/test-templates/card.html

@@ -0,0 +1,2 @@
+{%- from "components/card/macro.html" import tnaCard -%}
+{{ tnaCard(context) }}

app/components/test-templates/cookie-banner.html

@@ -0,0 +1,2 @@
+{%- from "components/cookie-banner/macro.html" import tnaCookieBanner -%}
+{{ tnaCookieBanner(context) }}

app/components/test-templates/filters.html

@@ -0,0 +1,2 @@
+{%- from "components/filters/macro.html" import tnaFilters -%}
+{{ tnaFilters(context) }}

app/components/test-templates/footer.html

@@ -0,0 +1,2 @@
+{%- from "components/footer/macro.html" import tnaFooter -%}
+{{ tnaFooter(context) }}

app/components/test-templates/grid.html

@@ -0,0 +1,2 @@
+{%- from "components/grid/macro.html" import tnaGrid -%}
+{{ tnaGrid(context) }}

app/components/test-templates/header.html

@@ -0,0 +1,2 @@
+{%- from "components/header/macro.html" import tnaHeader -%}
+{{ tnaHeader(context) }}

app/components/test-templates/hero.html

@@ -0,0 +1,2 @@
+{%- from "components/hero/macro.html" import tnaHero -%}
+{{ tnaHero(context) }}

app/components/test-templates/index-grid.html

@@ -0,0 +1,2 @@
+{%- from "components/index-grid/macro.html" import tnaIndexGrid -%}
+{{ tnaIndexGrid(context) }}

app/components/test-templates/message.html

@@ -0,0 +1,2 @@
+{%- from "components/message/macro.html" import tnaMessage -%}
+{{ tnaMessage(context) }}

app/components/test-templates/phase-banner.html

@@ -0,0 +1,2 @@
+{%- from "components/phase-banner/macro.html" import tnaPhaseBanner -%}
+{{ tnaPhaseBanner(context) }}

app/components/test-templates/picture.html

@@ -0,0 +1,2 @@
+{%- from "components/picture/macro.html" import tnaPicture -%}
+{{ tnaPicture(context) }}

app/components/test-templates/sensitive-image.html

@@ -0,0 +1,2 @@
+{%- from "components/sensitive-image/macro.html" import tnaSensitiveImage -%}
+{{ tnaSensitiveImage(context) }}

app/components/test-templates/skip-link.html

@@ -0,0 +1,2 @@
+{%- from "components/skip-link/macro.html" import tnaSkipLink -%}
+{{ tnaSkipLink(context) }}

app/components/test-templates/tabs.html

@@ -0,0 +1,2 @@
+{%- from "components/tabs/macro.html" import tnaTabs -%}
+{{ tnaTabs(context) }}