shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate and consolidate UI templates to compile-time Askama component macros

Browse Source
This commit is contained in:
Enciphered
2026-05-30 12:28:47 +05:00
parent f42a5f05b2
commit 110fc61fa2
16 changed files with 697 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/tabs_accordion.html
+38 -58
View File
@@ -1,4 +1,5 @@
{% extends "base.html" %}
{% import "components/macros.html" as ui %}
{% block title %}Tabs & Accordions - Design System Wiki{% endblock %}
@@ -33,36 +34,32 @@
<!-- Demo Viewport -->
<div id="tabs-sandbox" class="wiki-pane space-y-6 max-w-md py-2">
<!-- Tabs Showcase -->
<!-- Tabs Showcase using macros -->
<div class="space-y-2">
<span class="block text-xs font-semibold text-muted-foreground">Switch Tabs</span>
<div class="flex border-b border-border">
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-1" class="px-4 py-2 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 focus:outline-none">Overview</button>
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-2" class="px-4 py-2 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 focus:outline-none">Config Settings</button>
</div>
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
<div id="wiki-pane-1" data-tab-content-group="wiki-tabs">
{{ ui::tabs_header_open() }}
{{ ui::tab_trigger(group="wiki-tabs", target_id="wiki-pane-1", label="Overview", is_active=true) }}
{{ ui::tab_trigger(group="wiki-tabs", target_id="wiki-pane-2", label="Config Settings") }}
{{ ui::tabs_header_close() }}
{{ ui::tabs_content_open() }}
{{ ui::tab_pane_open(group="wiki-tabs", id="wiki-pane-1", is_active=true) }}
Overview parameters content pane. You can place statistics, graphs, or summary tables here.
</div>
<div id="wiki-pane-2" data-tab-content-group="wiki-tabs" class="hidden">
{{ ui::tab_pane_close() }}
{{ ui::tab_pane_open(group="wiki-tabs", id="wiki-pane-2", is_active=false) }}
Settings updates pane. Configuration toggles, environment variables, or webhook URLs live here.
</div>
</div>
{{ ui::tab_pane_close() }}
{{ ui::tabs_content_close() }}
</div>
<!-- Accordion Showcase -->
<!-- Accordion Showcase using paired macros -->
<div class="space-y-2">
<span class="block text-xs font-semibold text-muted-foreground">Accordion Collapsible</span>
<div class="space-y-2">
<div class="accordion-item border border-border rounded-xl overflow-hidden bg-card/30">
<button type="button" class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50 transition focus:outline-none">
<span>Is this library dependency-free?</span>
<svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border leading-relaxed">
Yes! The template does not rely on Alpine.js or React. JavaScript toggles run via vanilla click listeners listening on specific class selectors.
</div>
</div>
{{ ui::accordion_open(title="Is this library dependency-free?", is_open=false) }}
Yes! The template does not rely on Alpine.js or React. JavaScript toggles run via vanilla click listeners listening on specific class selectors.
{{ ui::accordion_close() }}
</div>
</div>
</div>
@@ -74,45 +71,28 @@
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- 1. Tabs Layout Markup --&gt;
&lt;div class="space-y-2"&gt;
&lt;!-- Tabs Trigger Header --&gt;
&lt;div class="flex border-b border-border"&gt;
&lt;!-- Include class 'border-sky-500 text-sky-400' on the active trigger --&gt;
&lt;button data-tab-group="my-tabs-group" data-tab-target="my-pane-1" class="px-4 py-2 border-b-2 border-sky-500 text-sky-400 text-xs font-semibold"&gt;
Tab 1
&lt;/button&gt;
&lt;button data-tab-group="my-tabs-group" data-tab-target="my-pane-2" class="px-4 py-2 border-b-2 border-transparent text-muted-foreground hover:text-slate-200 text-xs font-semibold"&gt;
Tab 2
&lt;/button&gt;
&lt;/div&gt;
&lt;!-- Content Panes --&gt;
&lt;div class="p-4 bg-card/50 rounded-xl border border-border text-xs"&gt;
&lt;div id="my-pane-1" data-tab-content-group="my-tabs-group"&gt;
Overview content...
&lt;/div&gt;
&lt;div id="my-pane-2" data-tab-content-group="my-tabs-group" class="hidden"&gt;
Settings content...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
&lt;!-- 2. Accordion Markup --&gt;
&lt;div class="accordion-item border border-border rounded-xl bg-card/30 overflow-hidden"&gt;
&lt;!-- Accordion Button Trigger --&gt;
&lt;button class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50"&gt;
&lt;span&gt;Section Title&lt;/span&gt;
&lt;svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"&gt;
&lt;polyline points="6 9 12 15 18 9"/&gt;
&lt;/svg&gt;
&lt;/button&gt;
&lt;!-- 1. Tabs Layout using paired macros --&gt;
{{ "{{" }} ui::tabs_header_open() {{ "}}" }}
{{ "{{" }} ui::tab_trigger(group="my-tabs-group", target_id="my-pane-1", label="Tab 1", is_active=true) {{ "}}" }}
{{ "{{" }} ui::tab_trigger(group="my-tabs-group", target_id="my-pane-2", label="Tab 2") {{ "}}" }}
{{ "{{" }} ui::tabs_header_close() {{ "}}" }}
{{ "{{" }} ui::tabs_content_open() {{ "}}" }}
{{ "{{" }} ui::tab_pane_open(group="my-tabs-group", id="my-pane-1", is_active=true) {{ "}}" }}
Overview content...
{{ "{{" }} ui::tab_pane_close() {{ "}}" }}
&lt;!-- Content Panel (Hidden by default) --&gt;
&lt;div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border"&gt;
Collapsible description content.
&lt;/div&gt;
&lt;/div&gt;</code></pre>
{{ "{{" }} ui::tab_pane_open(group="my-tabs-group", id="my-pane-2", is_active=false) {{ "}}" }}
Settings content...
{{ "{{" }} ui::tab_pane_close() {{ "}}" }}
{{ "{{" }} ui::tabs_content_close() {{ "}}" }}
&lt;!-- 2. Accordion using paired macros --&gt;
{{ "{{" }} ui::accordion_open(title="Section Title", is_open=false) {{ "}}" }}
Collapsible description content.
{{ "{{" }} ui::accordion_close() {{ "}}" }}</code></pre>
</div>
</div>
</div>