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 for the views and context processor behind the shared pages.

Wire up

INSTALLED_APPS = [..., "yksa_kit", "yksa_web", ...]

Then reduce the service's templates/base.html to blocks:

{% 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 %}
    <li class="nav-item">
        <a class="nav-link nav-full-height border border-top-0 {% if url_name == 'satellite-list' %}active{% endif %}"
           href="{% url 'public:satellite-list' %}">{% trans "Satellites" %}</a>
    </li>
{% 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 <body>)
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.

The API reference

A service that publishes an OpenAPI document renders it in this chrome rather than on the standalone page django-modern-rest ships:

from dmr.openapi.views import RedocView

path("docs/", RedocView.as_view(
    schema, template_name="yksa/apidocs/redoc.html"), name="docs")

That is the whole wiring. template_name is a class variable on RedocView, so as_view() accepts it; the view, its context and the URL stay DMR's, and the kit contributes no Python. templates/yksa/apidocs/redoc.html extends the service's own base.html, so the page carries the real navbar and footer.

The active nav cell is the service's own business — ODMS keys its API item off request.resolver_match.app_name, which {% block navbar_items %} already has.

templates/yksa/apidocs/redoc.html   the page
static/yksa/src/redoc-init.js       the ReDoc theme object, replacing DMR's init.js
static/yksa/css/redoc.css           what the theme object cannot reach

Neither file carries a palette: the theme reads --bs-primary, --bs-body-color, --bs-font-sans-serif and the rest off the bundled Bootstrap at run time, and the stylesheet uses the same properties directly. Change the fork and the reference follows.

Do not add a templates/dmr/redoc.html here or in a service. Overriding DMR's own template restyles every RedocView route in the project and puts a second, hand-written navbar in the estate. See ecosystem/ui-kit.md §1.11 for the rest, including why the navbar has to stay sticky.

The bundled ReDoc is pinned in the template at the path DMR ships it under (dmr/redoc/2.5.2/redoc.standalone.js), exactly as DMR's own template pins it. On a DMR upgrade, check that path — a bumped bundle 404s silently and the page renders blank. ODMS fails a test on it first.

Vendored files

static/yksa/
  css/kit.css redoc.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/redoc-init.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

pip install -e ".[test]" ../yksa-django-kit
python -m pytest