auramaxx 1.0.0-alpha.4

package/src/app/docs/page.tsx

@@ -0,0 +1,178 @@
+import Link from 'next/link';
+import DocsThemeToggle from '@/components/docs/DocsThemeToggle';
+
+import { listDocFiles, listDocGroups, readDocFile, renderMarkdown } from '@/lib/docs';
+
+interface DocsPageProps {
+  searchParams?: Promise<{
+    doc?: string | string[];
+  }>;
+}
+
+const resolveDocParam = (value?: string | string[]) => {
+  if (!value) return null;
+  return Array.isArray(value) ? value[0] : value;
+};
+
+const getDocNavLabel = (filename: string, title: string) => {
+  if (filename === 'README.md') return title;
+  const base = filename.split('/').pop() ?? filename;
+  if (base.toLowerCase() === 'readme.md') {
+    const parent = filename.split('/').slice(-2, -1)[0];
+    return parent ? `${parent}` : 'README';
+  }
+  return base.replace(/\.md$/i, '');
+};
+
+export default async function DocsPage({ searchParams }: DocsPageProps) {
+  const resolvedSearchParams = searchParams ? await searchParams : undefined;
+  const docs = await listDocFiles();
+  const groups = await listDocGroups();
+  const selected = resolveDocParam(resolvedSearchParams?.doc);
+  const selectedDoc = docs.find((doc) => doc.filename === selected) ?? docs[0];
+  const rawContent = selectedDoc ? await readDocFile(selectedDoc.filename) : '# No docs found';
+  const html = renderMarkdown(rawContent);
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background,#f4f4f5)] relative p-4 py-8">
+      {/* Background matching Sterile Field */}
+      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+        {/* Sterile Grid */}
+        <div className="absolute inset-0 bg-grid-adaptive bg-[size:4rem_4rem] opacity-30" />
+
+        {/* Tyvek Texture Overlay */}
+        <div className="absolute inset-0 tyvek-texture opacity-40 mix-blend-multiply" />
+
+        {/* Giant Background Typography */}
+        <div className="absolute top-[5%] left-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter">
+            AURA
+          </h1>
+        </div>
+        <div className="absolute bottom-[5%] right-[5%] opacity-5 select-none">
+          <h1 className="text-[15vw] font-bold leading-none text-[var(--color-text,#0a0a0a)] font-mono tracking-tighter text-right">
+            MAXXING
+          </h1>
+        </div>
+
+        {/* Lab Markings - Corner Finder Patterns */}
+        <div className="absolute top-10 left-10 w-32 h-32 border-l-4 border-t-4 border-[var(--color-text,#0a0a0a)] opacity-10">
+          <div className="absolute top-2 left-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+        <div className="absolute bottom-10 right-10 w-32 h-32 border-r-4 border-b-4 border-[var(--color-text,#0a0a0a)] opacity-10 flex items-end justify-end">
+          <div className="absolute bottom-2 right-2 w-4 h-4 bg-[var(--color-text,#0a0a0a)]" />
+        </div>
+      </div>
+
+      {/* Logo header */}
+      <Link
+        href="/"
+        className="fixed top-6 left-6 z-50 flex items-center gap-3 hover:opacity-80 transition-opacity"
+      >
+        <div className="w-10 h-10">
+          <img src="/logo.webp" alt="AuraWallet" className="w-full h-full object-contain" />
+        </div>
+        <div className="font-black text-xl tracking-tighter text-[var(--color-text,#0a0a0a)]">AURAWALLET</div>
+      </Link>
+
+      {/* Nav */}
+      <div className="fixed top-7 right-6 z-50 flex items-center gap-3 font-mono text-[10px] tracking-widest">
+        <Link href="/api" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">API</Link>
+        <Link href="/app" className="text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] transition-colors">APP</Link>
+        <DocsThemeToggle />
+      </div>
+
+      <div className="relative z-[5] max-w-[1400px] mx-auto pt-16">
+        <div className="grid gap-4 md:grid-cols-[240px_minmax(0,1fr)]">
+          {/* Sidebar (sticky) */}
+          <aside className="font-mono hidden md:block">
+            <div className="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto">
+              <div className="bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
+                <div className="px-4 py-3 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between">
+                  <span className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight">Index</span>
+                  <span className="text-[9px] text-[var(--color-text-faint,#9ca3af)] font-bold">QTY: {docs.length.toString().padStart(3, '0')}</span>
+                </div>
+                <div className="p-3 space-y-4">
+                  {groups.map((group) => (
+                    <div key={group.label}>
+                      <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-1 px-1 uppercase">{group.label}</div>
+                      <div className="space-y-0.5">
+                        {group.docs.map((doc) => {
+                          const isActive = selectedDoc?.filename === doc.filename;
+                          return (
+                            <Link
+                              key={doc.filename}
+                              href={`/docs?doc=${encodeURIComponent(doc.filename)}`}
+                              className={`block px-3 py-1.5 text-[11px] uppercase transition-colors border ${
+                                isActive
+                                  ? 'border-[var(--color-border,#d4d4d8)] bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)]'
+                                  : 'border-transparent hover:border-[var(--color-border-muted,#e5e5e5)] hover:bg-[var(--color-surface-alt,#fafafa)] text-[var(--color-text-muted,#6b7280)]'
+                              }`}
+                            >
+                              {getDocNavLabel(doc.filename, doc.title)}
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ))}
+
+                  {/* REFERENCE — links to dedicated /api page */}
+                  <div>
+                    <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-widest mb-1 px-1">REFERENCE</div>
+                    <Link
+                      href="/api"
+                      className="flex items-center gap-2 px-3 py-1.5 text-[11px] border border-transparent hover:border-[var(--color-border-muted,#e5e5e5)] hover:bg-[var(--color-surface-alt,#fafafa)] text-[var(--color-text-muted,#6b7280)] transition-colors"
+                    >
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></svg>
+                      API ENDPOINTS
+                    </Link>
+                  </div>
+                </div>
+                {/* Barcode + Stripe */}
+                <div className="flex items-center gap-3 px-4 py-2 border-t border-[var(--color-border,#d4d4d8)]">
+                  <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+                </div>
+                <div className="h-2 w-full" style={{
+                  backgroundImage: 'repeating-linear-gradient(45deg, var(--color-text, #000), var(--color-text, #000) 5px, transparent 5px, transparent 10px)',
+                  opacity: 0.1,
+                }} />
+              </div>
+            </div>
+          </aside>
+
+          {/* Content */}
+          <div className="bg-[var(--color-surface,#f4f4f2)] border border-[var(--color-border,#d4d4d8)] shadow-lg overflow-hidden font-mono">
+            <div className="px-4 py-3 border-b border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)] flex items-center justify-between">
+              <span className="font-sans font-bold text-sm text-[var(--color-text,#0a0a0a)] uppercase tracking-tight">
+                {selectedDoc?.title ?? 'Documentation'}
+              </span>
+              <span className="text-[9px] text-[var(--color-text-muted,#6b7280)]">{selectedDoc?.filename}</span>
+            </div>
+
+            <div
+              className="p-5 prose-mono"
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+
+            {/* Footer */}
+            <div className="px-4 py-2 border-t border-[var(--color-border,#d4d4d8)] bg-[var(--color-surface-alt,#fafafa)]">
+              <div className="text-[8px] text-[var(--color-text-faint,#9ca3af)] uppercase tracking-wider mb-1">DOCUMENT REFERENCE</div>
+              <div className="text-[9px] text-[var(--color-text,#0a0a0a)] font-bold">{selectedDoc?.filename}</div>
+            </div>
+
+            {/* Barcode + Stripe */}
+            <div className="flex items-center gap-3 px-4 py-2 border-t border-[var(--color-border,#d4d4d8)]">
+              <div className="h-4 flex-1 bg-[repeating-linear-gradient(90deg,var(--color-text,#000),var(--color-text,#000)_1px,transparent_1px,transparent_3px)] opacity-30" />
+              <span className="text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-wider">AURAWALLET</span>
+            </div>
+            <div className="h-2 w-full" style={{
+              backgroundImage: 'repeating-linear-gradient(45deg, var(--color-text, #000), var(--color-text, #000) 5px, transparent 5px, transparent 10px)',
+              opacity: 0.1,
+            }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}