# yksa-web-kit Common UI: navbar, page chrome, and vendored front-end libs, shared across the YKSA TM/TC services. ## Install ``` yksa-web-kit @ git+https://git.intra.yksa.space/web/yksa-web-kit.git@v0.1.0 ``` Requires [yksa-django-kit](../yksa-django-kit) for the views and context processor behind the shared pages. ## Wire up ```python INSTALLED_APPS = [..., "yksa_kit", "yksa_web", ...] ``` Then reduce the service's `templates/base.html` to blocks: ```django {% extends "yksa/base.html" %} {% load i18n %} {% block title %}{% trans "Telemetry" %}{% endblock title %} {% block title_suffix %}YKSA TDAS{% endblock title_suffix %} {% block brand_url %}{% url 'public:index' %}{% endblock brand_url %} {% block navbar_items %} {% endblock navbar_items %} ``` ## Blocks | Block | Default | |---|---| | `title`, `title_suffix` | `YKSA` | | `meta_description`, `meta_keywords` | generic | | `brand_url` | `/` | | `navbar_container_class` | `container` -- the one thing allowed to vary in width | | `navbar_items` | empty | | `navbar_tools` | empty (ops puts the duty link and the user menu here) | | `main_class` | empty (a density scope such as `ops` goes here, never on ``) | | `pre-content`, `content` | empty | | `extra_head`, `extra_js` | empty | The timezone and language menus are not blocks. They are the same on every page of every service, so there is nothing to vary. ## Vendored files ``` static/yksa/ css/kit.css bootstrap.min.css bootstrap-icons.min.css fonts/ src/bootstrap.bundle.min.js cookie-banner.js toast.js copy.js chip-filters.js src/chart.umd.min.js chartjs-adapter-date-fns.bundle.min.js chartjs-plugin-zoom.min.js img/logo-*.svg img/lang/flag-*.svg favicon.ico robots.txt ``` The page templates are deliberately not namespaced: `yksa_kit.views` renders them by their plain names, and a service can still override one by putting its own copy in `templates/`. Assets only one service uses (Leaflet, FullCalendar, Luxon, per-page plots) stay in that service. ## Tests ```sh pip install -e ".[test]" ../yksa-django-kit python -m pytest ```