448 lines
14 KiB
TypeScript
448 lines
14 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Link, useLocation, Navigate } from "react-router-dom";
|
|
import { Menu, X, ChevronRight, Lock, Home, ExternalLink } from "lucide-react";
|
|
import { useAuth } from "@/contexts/AuthContext";
|
|
|
|
interface NavSpace {
|
|
id: string;
|
|
title: string;
|
|
emoji: string;
|
|
description: string;
|
|
pages: NavPage[];
|
|
}
|
|
|
|
interface NavPage {
|
|
title: string;
|
|
path: string;
|
|
description?: string;
|
|
}
|
|
|
|
const spaces: NavSpace[] = [
|
|
{
|
|
id: "space1",
|
|
title: "START HERE",
|
|
emoji: "🚀",
|
|
description: "For All New Members",
|
|
pages: [
|
|
{
|
|
title: "Welcome",
|
|
path: "/internal-docs",
|
|
description: "Welcome to AeThex Ecosystem",
|
|
},
|
|
{
|
|
title: "Axiom Model",
|
|
path: "/internal-docs/axiom-model",
|
|
description: "Our 3-entity structure",
|
|
},
|
|
{
|
|
title: "Find Your Role",
|
|
path: "/internal-docs/find-your-role",
|
|
description: "Who are you in the ecosystem?",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "space2",
|
|
title: "ECOSYSTEM-WIDE",
|
|
emoji: "🌍",
|
|
description: "Universal Rules",
|
|
pages: [
|
|
{
|
|
title: "Code of Conduct",
|
|
path: "/internal-docs/code-of-conduct",
|
|
description: "How we act",
|
|
},
|
|
{
|
|
title: "Communication Protocol",
|
|
path: "/internal-docs/communication",
|
|
description: "Discord, Slack, meetings",
|
|
},
|
|
{
|
|
title: "Meeting Cadence",
|
|
path: "/internal-docs/meetings",
|
|
description: "When & how we meet",
|
|
},
|
|
{
|
|
title: "Brand & Voice",
|
|
path: "/internal-docs/brand",
|
|
description: "How we talk publicly",
|
|
},
|
|
{
|
|
title: "Tech Stack",
|
|
path: "/internal-docs/tech-stack",
|
|
description: "Tools we use",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "space3",
|
|
title: "THE FOUNDATION",
|
|
emoji: "🏛️",
|
|
description: "The Guardian",
|
|
pages: [
|
|
{
|
|
title: "Governance Model",
|
|
path: "/internal-docs/foundation-governance",
|
|
description: "The Parliament",
|
|
},
|
|
{
|
|
title: "Open-Source Protocol",
|
|
path: "/internal-docs/foundation-protocol",
|
|
description: "The AI Foundry",
|
|
},
|
|
{
|
|
title: "Community Programs",
|
|
path: "/internal-docs/foundation-programs",
|
|
description: "The University",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "space4",
|
|
title: "THE CORP",
|
|
emoji: "⚙️",
|
|
description: "The Engine",
|
|
pages: [
|
|
{
|
|
title: "Product & Engineering",
|
|
path: "/internal-docs/corp-product",
|
|
description: "Development lifecycle",
|
|
},
|
|
{
|
|
title: "Product Blueprints",
|
|
path: "/internal-docs/corp-blueprints",
|
|
description: "The Factory",
|
|
},
|
|
{
|
|
title: "Client & Sales Ops",
|
|
path: "/internal-docs/corp-clients",
|
|
description: "Client onboarding & hiring",
|
|
},
|
|
{
|
|
title: "Platform Strategy",
|
|
path: "/internal-docs/corp-platform",
|
|
description: "The Monolith",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "space5",
|
|
title: "PEOPLE & FINANCE",
|
|
emoji: "👥",
|
|
description: "Back Office",
|
|
pages: [
|
|
{
|
|
title: "Onboarding",
|
|
path: "/internal-docs/onboarding",
|
|
description: "New hire handbook",
|
|
},
|
|
{
|
|
title: "Finance & Payments",
|
|
path: "/internal-docs/finance",
|
|
description: "Invoicing & expenses",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
interface InternalDocsLayoutProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
// Map routes -> source file path so "Edit this page" can link to the component in the repo
|
|
const SOURCE_MAP: Record<string, string> = {
|
|
"/internal-docs": "code/client/pages/internal-docs/Space1Welcome.tsx",
|
|
"/internal-docs/axiom-model":
|
|
"code/client/pages/internal-docs/Space1AxiomModel.tsx",
|
|
"/internal-docs/find-your-role":
|
|
"code/client/pages/internal-docs/Space1FindYourRole.tsx",
|
|
"/internal-docs/code-of-conduct":
|
|
"code/client/pages/internal-docs/Space2CodeOfConduct.tsx",
|
|
"/internal-docs/communication":
|
|
"code/client/pages/internal-docs/Space2Communication.tsx",
|
|
"/internal-docs/meetings":
|
|
"code/client/pages/internal-docs/Space2MeetingCadence.tsx",
|
|
"/internal-docs/brand":
|
|
"code/client/pages/internal-docs/Space2BrandVoice.tsx",
|
|
"/internal-docs/tech-stack":
|
|
"code/client/pages/internal-docs/Space2TechStack.tsx",
|
|
"/internal-docs/foundation-governance":
|
|
"code/client/pages/internal-docs/Space3FoundationGovernance.tsx",
|
|
"/internal-docs/foundation-protocol":
|
|
"code/client/pages/internal-docs/Space3OpenSourceProtocol.tsx",
|
|
"/internal-docs/foundation-programs":
|
|
"code/client/pages/internal-docs/Space3CommunityPrograms.tsx",
|
|
"/internal-docs/corp-product":
|
|
"code/client/pages/internal-docs/Space4ProductOps.tsx",
|
|
"/internal-docs/corp-blueprints":
|
|
"code/client/pages/internal-docs/Space4CorpBlueprints.tsx",
|
|
"/internal-docs/corp-clients":
|
|
"code/client/pages/internal-docs/Space4ClientOps.tsx",
|
|
"/internal-docs/corp-platform":
|
|
"code/client/pages/internal-docs/Space4PlatformStrategy.tsx",
|
|
"/internal-docs/onboarding":
|
|
"code/client/pages/internal-docs/Space5Onboarding.tsx",
|
|
"/internal-docs/finance": "code/client/pages/internal-docs/Space5Finance.tsx",
|
|
};
|
|
|
|
export default function InternalDocsLayout({
|
|
children,
|
|
title,
|
|
description,
|
|
}: InternalDocsLayoutProps) {
|
|
const { user, loading } = useAuth();
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
// Add copy buttons to code blocks
|
|
const addCopyButtons = () => {
|
|
document.querySelectorAll("pre").forEach((pre) => {
|
|
if ((pre as HTMLElement).dataset.hasCopy === "true") return;
|
|
(pre as HTMLElement).dataset.hasCopy = "true";
|
|
const btn = document.createElement("button");
|
|
btn.className =
|
|
"copy-code-btn absolute right-3 top-3 bg-slate-800/70 text-slate-200 text-xs px-2 py-1 rounded-md hover:bg-slate-800";
|
|
btn.innerText = "Copy";
|
|
btn.onclick = async () => {
|
|
const code =
|
|
pre.querySelector("code")?.textContent || pre.textContent || "";
|
|
try {
|
|
await navigator.clipboard.writeText(code);
|
|
btn.innerText = "Copied";
|
|
setTimeout(() => (btn.innerText = "Copy"), 1500);
|
|
} catch {
|
|
btn.innerText = "Copy";
|
|
}
|
|
};
|
|
(pre as HTMLElement).style.position = "relative";
|
|
(pre as HTMLElement).appendChild(btn);
|
|
});
|
|
};
|
|
|
|
// Add heading anchors for h2/h3
|
|
const addAnchors = () => {
|
|
const container = document.querySelector(".internal-docs-content");
|
|
if (!container) return;
|
|
container.querySelectorAll("h2, h3").forEach((el) => {
|
|
if ((el as HTMLElement).querySelector(".heading-anchor")) return;
|
|
const text = (el.textContent || "").trim();
|
|
const id = text
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/(^-|-$)/g, "");
|
|
(el as HTMLElement).id = id;
|
|
const anchor = document.createElement("a");
|
|
anchor.className =
|
|
"heading-anchor ml-2 text-slate-500 text-sm opacity-0 hover:opacity-100 transition-opacity";
|
|
anchor.href = `#${id}`;
|
|
anchor.innerText = "#";
|
|
(el as HTMLElement).appendChild(anchor);
|
|
});
|
|
};
|
|
|
|
addCopyButtons();
|
|
addAnchors();
|
|
|
|
const obs = new MutationObserver(() => {
|
|
addCopyButtons();
|
|
addAnchors();
|
|
});
|
|
obs.observe(
|
|
document.querySelector(".internal-docs-content") || document.body,
|
|
{ childList: true, subtree: true },
|
|
);
|
|
return () => obs.disconnect();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// close sidebar on navigation (mobile)
|
|
setSidebarOpen(false);
|
|
}, [location.pathname]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-white flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return <Navigate to="/login" replace />;
|
|
}
|
|
|
|
const isCurrentPage = (path: string) => location.pathname === path;
|
|
|
|
const sourcePath = SOURCE_MAP[location.pathname];
|
|
const editUrl = sourcePath
|
|
? `https://github.com/AeThex-Corporation/aethex-forge/blob/main/${sourcePath}`
|
|
: undefined;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
|
|
{/* Sidebar */}
|
|
<aside
|
|
className={`fixed inset-y-0 left-0 z-30 w-72 bg-slate-900 border-r border-slate-700 overflow-y-auto transition-all duration-300 ${
|
|
sidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
|
|
}`}
|
|
>
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-slate-700 sticky top-0 bg-slate-900">
|
|
<Link
|
|
to="/internal-docs"
|
|
className="flex items-center gap-3 mb-6"
|
|
onClick={() => setSidebarOpen(false)}
|
|
>
|
|
<Lock className="h-5 w-5 text-blue-400" />
|
|
<div>
|
|
<div className="font-bold text-sm text-white">Internal Hub</div>
|
|
<div className="text-xs text-slate-400">Operations & Docs</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800 transition-colors w-full justify-center"
|
|
>
|
|
<Home className="h-4 w-4" />
|
|
Back to Site
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Spaces Navigation */}
|
|
<nav className="p-4 space-y-6">
|
|
{spaces.map((space) => (
|
|
<div key={space.id}>
|
|
<div className="flex items-center gap-2 mb-3 px-2">
|
|
<span className="text-lg">{space.emoji}</span>
|
|
<div>
|
|
<div className="text-xs font-semibold text-blue-400 uppercase tracking-wider">
|
|
{space.title}
|
|
</div>
|
|
<div className="text-xs text-slate-500">
|
|
{space.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1 pl-2">
|
|
{space.pages.map((page) => (
|
|
<Link
|
|
key={page.path}
|
|
to={page.path}
|
|
onClick={() => setSidebarOpen(false)}
|
|
className={`block px-3 py-2 rounded-lg text-sm transition-all group ${
|
|
isCurrentPage(page.path)
|
|
? "bg-blue-600 text-white font-medium"
|
|
: "text-slate-400 hover:text-slate-200 hover:bg-slate-800"
|
|
}`}
|
|
>
|
|
<div className="font-medium">{page.title}</div>
|
|
{page.description && (
|
|
<div className="text-xs text-slate-500 group-hover:text-slate-400">
|
|
{page.description}
|
|
</div>
|
|
)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Footer Info */}
|
|
<div className="p-4 border-t border-slate-700 space-y-2 text-xs text-slate-500">
|
|
<p>🔒 Internal only - Requires authentication</p>
|
|
<p>Last updated: {new Date().toLocaleDateString()}</p>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="md:ml-72">
|
|
{/* Mobile Header */}
|
|
<div className="md:hidden sticky top-0 z-20 border-b border-slate-700 bg-slate-900/95 backdrop-blur p-4 flex items-center justify-between">
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
|
|
>
|
|
{sidebarOpen ? (
|
|
<X className="h-5 w-5" />
|
|
) : (
|
|
<Menu className="h-5 w-5" />
|
|
)}
|
|
</button>
|
|
<Link
|
|
to="/"
|
|
className="text-sm font-medium text-blue-400 hover:text-blue-300"
|
|
>
|
|
← Back
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="p-6 md:p-8 max-w-5xl mx-auto">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
{title && (
|
|
<div className="mb-4">
|
|
<h1 className="text-4xl font-bold text-white mb-2">
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="text-lg text-slate-400">{description}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="ml-6 flex-shrink-0 pt-1">
|
|
{editUrl && (
|
|
<a
|
|
href={editUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-2 text-xs text-slate-300 hover:text-white bg-slate-800/40 px-3 py-2 rounded-md"
|
|
>
|
|
<ExternalLink className="h-4 w-4" /> Edit this page
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="internal-docs-content prose prose-invert mx-auto max-w-none lg:max-w-3xl">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-slate-700 bg-slate-900/50 mt-12">
|
|
<div className="max-w-5xl mx-auto px-6 md:px-8 py-8">
|
|
<p className="text-sm text-slate-500">
|
|
© 2025 AeThex. This is an internal operations hub. Information
|
|
here is confidential and for authorized personnel only.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
{/* Inline styles for print and copy button */}
|
|
<style>{`
|
|
@media print {
|
|
body { background: white !important; color: #111 !important }
|
|
.internal-docs-content { color: #111 !important }
|
|
aside, .copy-code-btn, .heading-anchor, a[href^="http"] { display: none !important }
|
|
.prose h1, .prose h2 { page-break-after: avoid }
|
|
}
|
|
.copy-code-btn { opacity: 0.95 }
|
|
.internal-docs-content pre { position: relative }
|
|
.heading-anchor { margin-left: 8px }
|
|
.prose a[href^="#"] { text-decoration: none }
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|