{% 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" %} {# Per-page injection point — extras for the document head. #} {% block extra_head %}{% endblock %}
{% block content %}{% endblock %}
{% comment %} Slim help footer — pinned at the bottom of every page. Whole row is a single button that opens the cheatsheet, so a click is enough; the `?` hint just teaches the shortcut. Inline shortcut chips on the right fill space when the viewport is wide enough; CSS hides them on mobile. {% endcomment %}
{% comment %} Editor maximize modal — single shared instance. The editor that asked to maximize gets moved into `.cg-editor-modal__slot` (preserving its DOM node, listeners and state); on close, JS moves it back to its original placeholder. This keeps a single source of truth for the editor's value. {% endcomment %} {% comment %} Fullscreen preview modal — single shared instance. Same DOM-move trick the editor-modal uses: clicking the fullscreen button MOVES the `[data-cg-preview-device]` element (chrome + stage with rendered HTML) into the slot below; on close, it's moved back to its original placeholder. The form's preview-fetch loop keeps writing to `[data-cg-preview-stage]` (which is inside the moved device), so live updates work uninterrupted. {% endcomment %} {% comment %} Keyboard shortcut cheatsheet — press `?` anywhere (outside form fields) to bring it up. One shared modal, single source of truth for every shortcut the gallery supports. {% endcomment %} {% comment %} Quick switcher — `Ctrl+K` / `Cmd+K` opens a centered modal with a search input and a fuzzy-matched list of every component in the catalog. No backend round-trip; the JS reads the names from the sidebar links and filters in-memory. {% endcomment %} {% comment %} Consumer-configured scripts. Two layers — same priority order as : 1. DJANGO_COTTON_GALLERY_EXTRA_JS — list of script URLs (settings.py). 2. django_cotton_gallery/_extra_body.html — partial for inline JS (Alpine bridges, HTMX hooks, custom config). Optional. {% endcomment %} {% for url in cotton_gallery.extra_js %} {% endfor %}{% maybe_include "django_cotton_gallery/_extra_body.html" %} {# Per-page injection point — extras at end of body. #} {% block extra_scripts %}{% endblock %}