{% load catalog_tags i18n static %}{% get_current_language as CURRENT_LANG %} {% block title %}{% trans "Component Gallery" %}{% endblock %} | Cotton Gallery {% comment %} Apply the theme attribute BEFORE the rest of renders so the first paint already has dark colors — no flash of light theme. Reads from the same localStorage key the toggle button writes to. {% endcomment %} {# Same FOUC-prevention pattern for the sidebar collapse state — apply the data-attr on before the body paints, then sidebar.js wires the toggle button to flip it at runtime. #} {# Inline SVG favicon — brand orange tile with a "C" mark. No extra request. #} {# Self-contained gallery chrome — no third-party CDNs, no global pollution. #} {% comment %} i18n bridge for JS-only strings. The few user-visible labels that live inside JS (switcher headers, ui-bits toggles) read from window.cgI18n. Keep keys SHORT and identifier-style; values come through {% trans %} so they participate in the normal PO/MO pipeline. {% endcomment %} {# type="module" implies defer; main.js imports every feature module from ./js/ #} {% comment %} Opt-in dropdown timeline recorder. Append `?cgdebug=1` to any URL to enable. Captures clicks, [hidden] toggles on menus, and SPA swaps; exposed as `window.__d`. Use `__d.dump()` in console to print the timeline. {% endcomment %} {% if request.GET.cgdebug %} {% endif %} {% comment %} Prism.js for source-code syntax highlighting in the detail page's Source tab. `markup-templating` is the dependency Django needs; `django` adds the {% verbatim %}{% ... %}{% endverbatim %} / {% verbatim %}{{ ... }}{% endverbatim %} tag rules. All defer so they don't block first paint, and gallery.js re-runs Prism on SPA swaps via Prism.highlightAllUnder on bindContent. {% endcomment %} {% comment %} Consumer-injected assets — the gallery is stack-agnostic, so any CSS/JS dependency your components need (Tailwind, HTMX, Alpine, your compiled bundle, design tokens, env keys, …) lives in YOUR project, not the gallery. Two layers: 1. DJANGO_COTTON_GALLERY_EXTRA_CSS / _EXTRA_JS — lists of URLs in settings.py for external stylesheets and scripts. 2. django_cotton_gallery/_extra_head.html — drop a partial in your templates dir for inline HTML/JS that needs editor support (Tailwind play-CDN + tailwind.config, preconnects, design tokens). Optional. {% endcomment %} {% for url in cotton_gallery.extra_css %} {% endfor %}{% maybe_include "django_cotton_gallery/_extra_head.html" %} {# Same loops again, for js/isolated-stage.js to rebuild the stack inside each #} {# preview iframe. `