feat: implement audit logs system, request extractor, admin log panel, and dedicated documentation
- Added an enterprise-grade, request-scoped AuditLogger extractor in Axum. - Configured MongoDB persistence for structured, replayable audit logs (capturing timestamp, user, action, type, payload snapshot, client IP with proxy header support, and User-Agent). - Created a live Administrator console at /auth/audit to filter and inspect log events. - Re-architected documentation by moving Design Wiki pages out of /components into a dedicated /docs route. - Published logging architecture documentation at /docs/logging.
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
{% extends "base.html" %}
|
||||
{% import "components/macros.html" as ui %}
|
||||
|
||||
{% block title %}Tabs & Accordions - Design System Wiki{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
|
||||
|
||||
<!-- Left Navigation Sidebar -->
|
||||
{% include "docs/sidebar.html" %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="text-xs font-semibold text-indigo-400">Layout & Navigation</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tabs & Accordions</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Horizontal tab groups and collapsible vertical headers with animated rotation chevrons, powered by lightweight document-level event delegation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Tabs/Accordion -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Navigation Elements</h2>
|
||||
|
||||
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
|
||||
<!-- Tab Headers -->
|
||||
<div class="flex border-b border-border/60 pb-1.5">
|
||||
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'tabs-sandbox')">Interactive Demo</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'tabs-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="tabs-sandbox" class="wiki-pane space-y-6 max-w-md py-2">
|
||||
<!-- Tabs Showcase using macros -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Switch Tabs</span>
|
||||
{{ 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.
|
||||
{{ 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.
|
||||
{{ ui::tab_pane_close() }}
|
||||
{{ ui::tabs_content_close() }}
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
{{ 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>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="tabs-code" class="wiki-pane hidden space-y-4">
|
||||
<div class="relative group">
|
||||
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-slate-455 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
|
||||
<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>{{ "{%" }} import "components/macros.html" as ui {{ "%}" }}
|
||||
|
||||
<!-- 1. Tabs Layout using paired macros -->
|
||||
{{ "{{" }} 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() {{ "}}" }}
|
||||
|
||||
{{ "{{" }} 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() {{ "}}" }}
|
||||
|
||||
<!-- 2. Accordion using paired macros -->
|
||||
{{ "{{" }} ui::accordion_open(title="Section Title", is_open=false) {{ "}}" }}
|
||||
Collapsible description content.
|
||||
{{ "{{" }} ui::accordion_close() {{ "}}" }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-6 border-t border-border/60 pt-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Tabs JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The global script <code>components.js</code> handles click switches for tabs via specific dataset variables. Here is the contract:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Attribute</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-group</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to buttons and triggers. Isolates tab groups on the same page. Tab buttons in the same group toggle together (e.g., <code>data-tab-group="group1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-target</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Specifies the ID of the content element pane that should be revealed when this tab is clicked (e.g., <code>data-tab-target="my-pane-1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-content-group</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the content elements. Must match the <code>data-tab-group</code> string. Click triggers hide all content elements in this group and show the target.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Accordion JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
Accordions are toggled through click delegation looking for the following class tree:
|
||||
</p>
|
||||
</div>
|
||||
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
|
||||
<table class="w-full border-collapse text-left text-xs">
|
||||
<thead>
|
||||
<tr class="border-b border-border text-muted-foreground font-bold">
|
||||
<th class="pb-2.5 w-1/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">Type</th>
|
||||
<th class="pb-2.5">Behavior & Purpose</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Surrounds the single collapsible item container (trigger header + content block).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Clickable header button. Toggles display classes on the sibling content element.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-content</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Contained collapsible item body text. Starts with the class <code>hidden</code>. Toggled by the script.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-chevron</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Optional vector arrow icon inside trigger. The JS applies <code>rotate-180</code> animation classes on show.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
|
||||
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
For <strong>Tabs</strong>, you can style the tab list buttons (direction, active borders, colors) and content layout freely. Just ensure <code>data-tab-group</code> matches between triggers and active panes, and <code>data-tab-target</code> matches the pane ID.
|
||||
For <strong>Accordions</strong>, you can design the headers, chevron SVGs, background panels, and borders. You must maintain the <code>.accordion-item</code>, <code>.accordion-trigger</code>, and <code>.accordion-content</code> class selectors so the script can toggle the collapsed state.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleWikiTabs(btn, paneId) {
|
||||
const card = btn.closest('.border-border');
|
||||
if (!card) return;
|
||||
card.querySelectorAll('button').forEach(b => {
|
||||
b.classList.remove('border-sky-500', 'text-sky-400');
|
||||
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
});
|
||||
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
|
||||
btn.classList.add('border-sky-500', 'text-sky-400');
|
||||
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
|
||||
const target = card.querySelector('#' + paneId);
|
||||
if (target) target.classList.remove('hidden');
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user