basecoat/docs/src/_includes/layouts/base.njk

<!DOCTYPE html>
<html>
<head>
  {# Dark mode #}
  <script>
    (() => {
      try {
        const stored = localStorage.getItem('themeMode');
        if (stored ? stored === 'dark'
                   : matchMedia('(prefers-color-scheme: dark)').matches) {
          document.documentElement.classList.add('dark');
        }
      } catch (_) {}

      const apply = dark => {
        document.documentElement.classList.toggle('dark', dark);
        try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
      };

      document.addEventListener('basecoat:theme', (event) => {
        const mode = event.detail?.mode;
        apply(mode === 'dark' ? true
             : mode === 'light' ? false
             : !document.documentElement.classList.contains('dark'));
      });
    })();
  </script>
  {# Theme variant #}
  <script>
    (function() {
      try {
        const storedTheme = localStorage.getItem('themeVariant');
        if (storedTheme) document.documentElement.classList.add(`theme-${storedTheme}`);
      } catch (event) {
        console.error('Could not apply theme variant from localStorage', event);
      }
    })();
  </script>
  {# Style variant #}
  <script>
    (function() {
      try {
        const storedStyle = localStorage.getItem('styleVariant') || 'nova';
        document.documentElement.dataset.styleVariant = storedStyle;
      } catch (event) {
        console.error('Could not apply style variant from localStorage', event);
      }
    })();
  </script>
  {# Meta #}
  <meta charset="utf-8">
  <meta http-equiv="Content-Language" content="en">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {# Title & Description #}
  {% set meta_title = title ~ ' | ' ~ site.title  if title else site.title %}
  {% set meta_description = description or site.description %}
  <title>{{ meta_title }}</title>
  <meta name="description" content="{{ meta_description }}"/>
  <meta name="title" content="{{ meta_title }}">
  {% if site.keywords %}<meta name="keywords" content="{{ site.keywords | join(',') }}" />{% endif %}
  {# Favicon #}
  <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
  {# Open Graph / Facebook #}
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
  <meta property="og:title" content="{{ meta_title }}">
  <meta property="og:description" content="{{ meta_description }}">
  <meta property="og:image" content="{{ site.url }}/assets/social-screenshot.png">
  <meta property="og:site_name" content="{{ site.title }}">
  <meta property="og:locale" content="en_US">
  <meta property="og:author" content="{{ site.author.name }}">
  {# X/Twitter #}
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
  <meta name="twitter:title" content="{{ title if title else site.title }}">
  <meta name="twitter:description" content="{{ meta_description }}">
  <meta name="twitter:image" content="{{ site.url }}/assets/social-screenshot.png">
  <meta name="twitter:creator" content="{{ site.author.x }}">
  {# CSS #}
  <link rel="stylesheet" id="style-variant-stylesheet" href="/assets/styles-nova.css">
  <script>
    (() => {
      const styleLink = document.getElementById('style-variant-stylesheet');
      const styleVariant = document.documentElement.dataset.styleVariant || 'nova';
      styleLink.href = `/assets/styles-${styleVariant}.css`;
    })();
  </script>
  {# JS #}
  <script src="/assets/js/basecoat.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/command.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/combobox.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/dropdown-menu.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/popover.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/range.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/select.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/sidebar.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/tabs.js?v={{ pkg.version }}" defer></script>
  <script src="/assets/js/toast.js?v={{ pkg.version }}" defer></script>
  {# HTMX #}
  <script src="/assets/js/htmx.min.js" defer></script>
  {# Highlight.js #}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/django.min.js"></script>
  <script>
    const highlight = () => {
      if (!window.hljs) return;
      document
        .querySelectorAll('pre code:not([data-highlighted]), code.highlight:not([data-highlighted])')
        .forEach(el => hljs.highlightElement(el));
    };

    if (!window._hljsInit) {
      window._hljsInit = true;
      document.addEventListener('DOMContentLoaded', highlight);
      document.addEventListener('htmx:afterSwap', highlight);
    }
  </script>
  <script>
    document.addEventListener('htmx:historyRestore', () => {
      if (window.basecoat) window.basecoat.initAll();
    });
  </script>
  {% if head %}{{ head | safe }}{% endif %}
</head>
<body hx-boost="true" hx-target="#content" hx-select="#content" hx-swap="outerHTML show:window:top">
{{ content | safe }}

{% from "toast.njk" import toaster %}
{{ toaster() }}
</body>
</html>