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,105 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Custom Scrollbars - 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">Styles</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Custom Scrollbars</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Thin custom scrollbars replacing chunky default native OS scrollbars using modern cross-browser CSS rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Scrollbars -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Scrollbar Customization Showcase</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, 'scroll-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, 'scroll-code')">CSS Rules</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="scroll-sandbox" class="wiki-pane max-w-sm py-2">
|
||||
<div class="max-h-28 overflow-y-auto pr-1.5 border border-border rounded-xl p-2 bg-card/50 space-y-1.5">
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 1</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 2</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 3</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 4</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="scroll-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 CSS Rules
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>/* Custom Webkit scrollbar rules (applied in input.css) */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground));
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</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