Files
bugsink/theme/templates/bare_base.html
Klaas van Schelven a4ecd386b6 Support hosting at subpath
"In principle" setting `SCRIPT_NAME` is enough. The way we do this is [1] using
`FORCE_SCRIPT_NAME` (which does not depend on messing with reverse proxy
settings and [2] by deducing the correct value from `BASE_URL` (which must be
set anyway) automatically.

By works I mean: `reverse` and `{% url` pick it up from there.

However, there are subtleties / extra work:

* `STATIC_URL` is needed too b/c https://code.djangoproject.com/ticket/34028

* in many pre-existing code I just created a path manually in the html. Such
  hrefs are obviously not magically fixed for script_name. Rather than doing
  the "full rewrite" (into `{% url`) this commit just prepends the
  `script_name` in those cases. That's the way forward that will least likely
  break and it gives us something to grep for if we ever want to 'do it
  right'.

* `LOGIN_REDIRECT_URL` and `LOGIN_URL` needed to use a view-name for this to
  work (using a view-name gets revolved using the thing that introduces
  `script_name`)

Checked, no work needed:

* views (`redirect` and `HttpResponseRedirect`)
* html uses of action="..."

Fix #93
2025-09-05 22:47:22 +02:00

39 lines
1.8 KiB
HTML

{% load static tailwind_tags %}<!DOCTYPE html>{# copy of base.html, but without variables (and hence no menu), for use in contextless templates (e.g. 500.html) #}
<html lang="en" data-theme="system">
<head>
<title>{% block title %}Bugsink{% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% tailwind_preload_css %}
{% tailwind_css %}
<script>
// System theme detection and switching
(function() {
const html = document.documentElement;
function applySystemTheme() {
if (document.documentElement.getAttribute('data-theme') === 'system') {
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
html.setAttribute('data-theme', isDark ? 'dark' : 'light');
}
}
applySystemTheme();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applySystemTheme);
})();
</script>
</head>
<body class="dark:bg-slate-700 dark:text-slate-100">
<div id="content">
<div class="flex pl-4 bg-slate-200 dark:bg-slate-800">
<a href="{# probably broken? no (guaranteed) context! #}{{ script_prefix }}/"><img src="{% static 'images/bugsink-logo.png' %}" class="p-2 h-12 w-12 dark:hidden block" alt="Bugsink logo"><img src="{% static 'images/bugsink-logo-dark.png' %}" class="p-2 h-12 w-12 hidden dark:block" alt="Bugsink logo"></a>
<a href="{# probably broken? no (guaranteed) context #}{{ script_prefix }}/"><div class="pt-4 pb-4 pl-2 pr-2 font-bold">Bugsink</div></a>
</div>
<div>
{% block content %}{% endblock %}
</div>
</div>
{% block extra_js %}{% endblock %}
</body>
</html>