django-admin-react/django_admin_react/templates/admin_react/index.html at 43c150b13590c665b642a8bc9dcea9d2fb2794ed · MartinCastroAlvarez/django-admin-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
{% load static %}<!doctype html>
{% comment %}
  Dark mode no-flash (#84): paint the `.dark` class on <html> server-side
  from the `dar-theme` cookie (see views._resolve_initial_theme) so the
  correct theme is on the page before first paint — no light→dark flash,
  and no inline script (keeps a strict `script-src 'self'` CSP intact).
{% endcomment %}
<html lang="en"{% if initial_theme == 'dark' %} class="dark"{% endif %}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="dar-mount" content="{{ mount_point }}" />
    {% comment %}
      Absolute URL prefix the SPA calls for every JSON request (#559).
      Defaults to `<mount>/api/v1/` (the inline include behaviour); a
      consumer can override via `DJANGO_ADMIN_REACT["API_URL_PREFIX"]`
      to point the SPA at a separately-mounted django-admin-rest-api.
    {% endcomment %}
    <meta name="dar-api-prefix" content="{{ api_prefix }}" />
    {% comment %}
      Legacy-admin escape hatch (#577): only emitted when the consumer
      set ``DJANGO_ADMIN_REACT["LEGACY_ADMIN_URL_PREFIX"]``. The SPA
      reads this meta and renders a thin top banner linking the same
      page under the legacy admin's prefix. Absent meta = no banner,
      no behavioural change.
    {% endcomment %}
    {% if legacy_admin_prefix %}<meta name="dar-legacy-admin-prefix" content="{{ legacy_admin_prefix }}" />{% endif %}
    <meta name="dar-brand-title" content="{{ brand_title }}" />
    {% if brand_logo_url %}<meta name="dar-brand-logo" content="{{ brand_logo_url }}" />{% endif %}
    {% comment %}
      Active locale (#630). The SPA hydrates its message catalog
      from this — the chrome strings ("Add", "Search", "Loading…")
      render in the user's language. LocaleMiddleware sets
      `translation.get_language()` for the request; without it the
      value collapses to `settings.LANGUAGE_CODE`.
    {% endcomment %}
    <meta name="dar-language" content="{{ active_language }}" />
    {% comment %}
      The tab <title> uses the AdminSite's site_title (Django's tab-title
      source); the sidebar header reads dar-brand-title (site_header). Both
      collapse to BRAND_TITLE when the consumer set that override (#281).
    {% endcomment %}
    <title>{{ tab_title }}</title>
    {% if brand_logo_url %}
      <link rel="icon" href="{{ brand_logo_url }}" />
    {% else %}
      <link rel="icon" href="data:," />
    {% endif %}
    {% comment %}
      PWA (#86): the manifest + SW are served by the package at the mount
      (pwa.py); link the manifest + PWA meta so the browser offers "Install".
      The SW is registered from main.tsx. This is a block-tag comment on
      purpose: the inline hash form is single-line only, so a multi-line one
      would be rendered verbatim into the page head.
    {% endcomment %}
    <link rel="manifest" href="{{ mount_point }}web.manifest" />
    <meta name="theme-color" content="#ffffff" />
    {% comment %}
      Accent color (#437): the SPA reads --dar-primary for primary buttons,
      links, and active states, so a consumer can rebrand with no React
      rebuild. `primary_color` is validated server-side to a strict hex
      color (see views._resolve_primary_color) — it must not be able to
      inject CSS through this <style> block.
    {% endcomment %}
    <style>:root { --dar-primary: {{ primary_color }}; }</style>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="{{ tab_title }}" />
    {% csrf_token %}
    {% if bundle %}
      {% for css_path in bundle.css %}
        <link rel="stylesheet" href="{% static 'admin_react/' %}{{ css_path }}" />
      {% endfor %}
      <script type="module" src="{% static 'admin_react/' %}{{ bundle.file }}"></script>
    {% endif %}
  </head>
  <body class="bg-gray-50 text-gray-900 antialiased">
    <div id="root">
      {% if not bundle %}
        <main style="max-width: 60ch; margin: 4rem auto; font-family: system-ui, sans-serif; line-height: 1.5;">
          <h1>django-admin-react</h1>
          <p>The React bundle is not built yet.</p>
          <p>From the repo root, run:</p>
          <pre style="background:#f3f4f6;padding:.5rem .75rem;border-radius:.25rem;">pnpm install
pnpm run build:vite</pre>
          <p>Then refresh this page.</p>
        </main>
      {% else %}
        <noscript>This page requires JavaScript.</noscript>
      {% endif %}
    </div>
  </body>
</html>