-
- );
- }
-
- return (
- <>
- {/* Breadcrumb - GitBook Style */}
- Content Coming Soon
-This documentation page is being written.
-+ {children} +
+ ); }, - { - id: 'api-reference', - label: 'API Reference', - children: [ - { id: 'authentication', label: 'Authentication' }, - { - id: 'endpoints', - label: 'Endpoints', - children: [ - { id: 'documents-api', label: 'Documents API' }, - { id: 'users-api', label: 'Users API' }, - { id: 'teams-api', label: 'Teams API' }, - ], - }, - { id: 'webhooks', label: 'Webhooks' }, - ], + + h2: ({ children }: { children?: React.ReactNode }) => { + const text = String(children || ''); + return ( ++ {children} +
+ ); }, - { - id: 'integrations', - label: 'Integrations', - children: [ - { id: 'vdid-auth', label: 'VDID Authentication' }, - { id: 'git-sync', label: 'Git Sync' }, - { id: 'export', label: 'Export Options' }, - ], + + h3: ({ children }: { children?: React.ReactNode }) => { + const text = String(children || ''); + return ( ++ {children} +
+ ); }, -]; -// Recursive TreeItem component with connection lines -interface TreeItemProps { - node: TreeNode; - level: number; - activeDoc: string; - setActiveDoc: (id: string) => void; - expandedSections: string[]; - toggleSection: (id: string) => void; - colors: Record+ {children} +
+ ), -function TreeItem({ node, level, activeDoc, setActiveDoc, expandedSections, toggleSection, colors, isMobile, setIsSidebarOpen }: TreeItemProps) { - const hasChildren = node.children && node.children.length > 0; - const isExpanded = expandedSections.includes(node.id); - const isActive = activeDoc === node.id; - const indent = 12 + level * 16; // Base indent + level offset - - return ( -
- {/* Connection line for nested items */}
- {level > 0 && (
-
- )}
-
- {/* Horizontal connector */}
- {level > 0 && (
-
- )}
-
-
-
- {/* Render children recursively */}
- {hasChildren && isExpanded && (
-
+ {codeString}
+
+
+ );
+ },
+
+ table: ({ children }: { children?: React.ReactNode }) => (
+
- {node.children!.map((child, idx) => (
-
- )}
+
+ {children}
- );
- }
-
+ ),
+
+ thead: ({ children }: { children?: React.ReactNode }) => (
+
+ {children}
+
+ ),
+
+ th: ({ children }: { children?: React.ReactNode }) => (
+ + ), + + strong: ({ children }: { children?: React.ReactNode }) => ( + {children} + ), + + img: ({ src, alt }: { src?: string; alt?: string }) => ( +
- {/* ========== TOP HEADER ========== */}
-
- {/* Primary Nav: Logo + Search + Actions */}
-
+
+ {/* ═══════ TOP HEADER ═══════ */}
+
+ {/* Primary Nav */}
+
- {/* ========== ECOSYSTEM NAV ========== */}
-
{/* Left: Logo */}
{isMobile && (
)}
-
@@ -848,26 +495,24 @@ export default function Docs() {
gap: '8px',
transition: 'all 0.2s ease',
}}
- onMouseEnter={(e) => {
- e.currentTarget.style.borderColor = colors.borderHover;
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.borderColor = colors.border;
- }}
+ onMouseEnter={(e) => { e.currentTarget.style.borderColor = colors.borderHover; }}
+ onMouseLeave={(e) => { e.currentTarget.style.borderColor = colors.border; }}
>
-
+ {/* ═══════ ECOSYSTEM NAV ═══════ */}
+
+
-
- {/* ========== SECONDARY NAV (Docs/API/Guides/Support) ========== */}
-
{ecosystemProducts.map((product) => (
- {docNavItems.map((item) => (
-
- ))}
-
- {/* ========== MAIN LAYOUT ========== */}
-
- {/* ========== LEFT SIDEBAR WITH IMPROVED MOBILE ========== */}
+ {/* ═══════ MAIN LAYOUT ═══════ */}
+
+ {/* Mobile overlay */}
{isMobile && isSidebarOpen && (
{showSearch && (
<>
- {/* Backdrop */}
- {/* Search Input */}
-
diff --git a/src/app/utils/docsLoader.ts b/src/app/utils/docsLoader.ts
new file mode 100644
index 0000000..6b8691b
--- /dev/null
+++ b/src/app/utils/docsLoader.ts
@@ -0,0 +1,169 @@
+/**
+ * Docs Loader - Build-time markdown file discovery via Vite
+ * Automatically discovers and organizes all .md files from /docs directory
+ */
+
+// Discover all markdown files at build time
+// ?url gives us static asset URLs instead of bundling content into JS chunks
+// This keeps markdown files out of the JS bundle (~500KB savings)
+const markdownUrls = import.meta.glob('/docs/**/*.md', {
+ eager: true,
+ query: '?url',
+ import: 'default',
+}) as Record;
+
+// ── Types ──────────────────────────────────────────────────────
+
+export interface DocItem {
+ id: string;
+ label: string;
+ filePath: string;
+}
+
+export interface DocCategory {
+ id: string;
+ label: string;
+ items: DocItem[];
+}
+
+export interface DocHeading {
+ level: number;
+ text: string;
+ id: string;
+}
+
+// ── Helpers ────────────────────────────────────────────────────
+
+const ACRONYMS = new Set([
+ 'AI', 'API', 'UI', 'UX', 'SEO', 'CSS', 'VDID', 'HTML', '3D',
+ 'RTPX', 'PWA', 'VSPEC', 'SDK', 'CLI', 'URL', 'PDF', 'FAQ',
+]);
+
+/** Convert a filename like "AI-STRATEGY.md" to "AI Strategy" */
+function fileToLabel(fileName: string): string {
+ const name = fileName.replace(/\.md$/, '');
+ if (name === 'README') return 'Overview';
+
+ return name
+ .replace(/[-_]/g, ' ')
+ .split(' ')
+ .map(word => {
+ const upper = word.toUpperCase();
+ if (ACRONYMS.has(upper)) return upper;
+ // Handle date-like segments (2025, 12, 25)
+ if (/^\d+$/.test(word)) return word;
+ return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+ })
+ .join(' ');
+}
+
+// ── Navigation Builder ─────────────────────────────────────────
+
+/** Build the full navigation tree from discovered files */
+export function buildNavigation(): DocCategory[] {
+ const categoryMap: Record = {};
+
+ for (const filePath of Object.keys(markdownUrls)) {
+ const rel = filePath.replace(/^\/docs\//, '');
+ const parts = rel.split('/');
+
+ // Skip html directory (not markdown docs)
+ if (parts[0] === 'html') continue;
+
+ const fileName = parts[parts.length - 1];
+ const category = parts.length > 1 ? parts[0] : 'root';
+ const id = rel
+ .replace(/\.md$/, '')
+ .replace(/[/\s]/g, '-')
+ .toLowerCase();
+
+ if (!categoryMap[category]) categoryMap[category] = [];
+ categoryMap[category].push({ id, label: fileToLabel(fileName), filePath });
+ }
+
+ // Sort alphabetically, Overview first
+ for (const items of Object.values(categoryMap)) {
+ items.sort((a, b) => {
+ if (a.label === 'Overview') return -1;
+ if (b.label === 'Overview') return 1;
+ return a.label.localeCompare(b.label);
+ });
+ }
+
+ const result: DocCategory[] = [];
+
+ // Ordered sections
+ if (categoryMap['root']) {
+ result.push({ id: 'documentation', label: 'Documentation', items: categoryMap['root'] });
+ }
+ if (categoryMap['guides']) {
+ result.push({ id: 'guides', label: 'Guides', items: categoryMap['guides'] });
+ }
+ if (categoryMap['internal']) {
+ result.push({ id: 'internal', label: 'Internal', items: categoryMap['internal'] });
+ }
+
+ // Any other folders
+ for (const [cat, items] of Object.entries(categoryMap)) {
+ if (!['root', 'guides', 'internal', 'html'].includes(cat)) {
+ result.push({
+ id: cat,
+ label: cat.charAt(0).toUpperCase() + cat.slice(1),
+ items,
+ });
+ }
+ }
+
+ return result;
+}
+
+// ── Content Loader ─────────────────────────────────────────────
+
+/** Load markdown content for a doc by its file path (runtime fetch) */
+export async function loadDocContent(filePath: string): Promise {
+ const url = markdownUrls[filePath];
+ if (!url) {
+ return `# Document Not Found\n\nThe requested document could not be loaded.`;
+ }
+ const response = await fetch(url);
+ if (!response.ok) {
+ return `# Load Error\n\nFailed to load document (${response.status}).`;
+ }
+ return response.text();
+}
+
+// ── Heading Extractor ──────────────────────────────────────────
+
+/** Extract h2/h3 headings from markdown for table of contents */
+export function extractHeadings(markdown: string): DocHeading[] {
+ const headings: DocHeading[] = [];
+ const regex = /^(#{2,3})\s+(.+)$/gm;
+ let match;
+
+ while ((match = regex.exec(markdown)) !== null) {
+ const text = match[2].replace(/[*`#[\]]/g, '').trim();
+ headings.push({
+ level: match[1].length,
+ text,
+ id: text
+ .toLowerCase()
+ .replace(/[^a-z0-9\u4e00-\u9fff]+/g, '-')
+ .replace(/^-|-$/g, ''),
+ });
+ }
+
+ return headings;
+}
+
+// ── Lookup Map ─────────────────────────────────────────────────
+
+/** Build a flat id -> doc info map for quick lookups */
+export function buildLookup(nav: DocCategory[]): Map {
+ const map = new Map();
+ for (const cat of nav) {
+ for (const item of cat.items) {
+ map.set(item.id, { ...item, category: cat.label });
+ }
+ }
+ return map;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 7e1e215..9ae5e3a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -54,7 +54,8 @@ export default defineConfig({
'vendor-xyflow': ['@xyflow/react'],
// Icons
'vendor-icons': ['lucide-react'],
- // Syntax highlighting (heavy)
+ // Markdown rendering + syntax highlighting
+ 'vendor-markdown': ['react-markdown', 'remark-gfm'],
'vendor-syntax': ['react-syntax-highlighter'],
// Lottie animations
'vendor-lottie': ['lottie-react'],
setIsSidebarOpen(false)}
style={{
position: 'fixed',
inset: 0,
- background: 'rgba(0, 0, 0, 0.7)',
+ background: 'rgba(0,0,0,0.7)',
backdropFilter: 'blur(4px)',
WebkitBackdropFilter: 'blur(4px)',
zIndex: 100,
}}
/>
)}
-
- {/* LEFT SIDEBAR - Navigation */}
-
-
- {/* MAIN CONTENT AREA */}
-
- {(() => {
- const currentDoc = docContent[activeDoc];
- // Fallback for unknown docs
- if (!currentDoc) {
- return (
-
- {/* ========== SEARCH MODAL ========== */}
+ {/* ═══════ SEARCH MODAL ═══════ */}
-
-
- {/* Search Results */}
-
- {searchQuery.trim() === '' ? (
-
- {/* No results message */}
- {Object.entries(docContent).filter(([_, doc]) =>
- doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
- doc.sections.some(s =>
- s.content?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- s.title?.toLowerCase().includes(searchQuery.toLowerCase())
- )
- ).length === 0 && (
-
- Type to search documentation...
-
- ) : (
- <>
- {/* Filter matching docs */}
- {Object.entries(docContent)
- .filter(([_, doc]) =>
- doc.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
- doc.sections.some(s =>
- s.content?.toLowerCase().includes(searchQuery.toLowerCase()) ||
- s.title?.toLowerCase().includes(searchQuery.toLowerCase())
- )
- )
- .map(([docId, doc]) => (
-
- ))
- }
+ }}
+ >
+
- No results found for "{searchQuery}"
-
- )}
-
- )}
+ {/* Search Results */}
+
+ {searchQuery.trim() === '' ? (
+
+ Type to search documentation...
+
+ ) : searchResults.length > 0 ? (
+ searchResults.map((result) => (
+
+ ))
+ ) : (
+
+ No results found for “{searchQuery}”
+
+ )}