{match && {match[1]}}
{codeString}
@@ -681,7 +710,7 @@ export default function BlogPost({ content, slug, pageType = "post" }: BlogPostP
const url = new URL(src);
const isAllowed = ALLOWED_IFRAME_DOMAINS.some(
(domain) =>
- url.hostname === domain || url.hostname.endsWith("." + domain)
+ url.hostname === domain || url.hostname.endsWith("." + domain),
);
if (!isAllowed) return null;
@@ -727,10 +756,7 @@ export default function BlogPost({ content, slug, pageType = "post" }: BlogPostP
if (segment.type === "contactform") {
// Contact form inline
return siteConfig.contactForm?.enabled ? (
- 
- {alt && {alt}}
-
- );
- },
- a({ href, children }) {
- const isExternal = href?.startsWith("http");
- return (
-
- {children}
-
- );
- },
- blockquote({ children }) {
- return (
-
-
- );
- },
- h2({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h3({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h4({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h5({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h6({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- ul({ children }) {
- return {children} ;
- },
- hr() {
- return
; - }, - // Table components for GitHub-style tables - table({ children }) { - return ( -{children} ;
- },
- th({ children }) {
- return {children} ;
- },
- td({ children }) {
- return {children} ;
- },
- // Iframe component with domain whitelisting for YouTube and Twitter/X
- iframe(props) {
- const src = props.src as string;
- if (!src) return null;
- try {
- const url = new URL(src);
- const isAllowed = ALLOWED_IFRAME_DOMAINS.some(
- (domain) =>
- url.hostname === domain || url.hostname.endsWith("." + domain)
- );
- if (!isAllowed) return null;
+ const codeString = String(children).replace(/\n$/, "");
+ const language = match ? match[1] : "text";
+ const isTextBlock = language === "text";
+
+ // Custom styles for text blocks to enable wrapping
+ const textBlockStyle = isTextBlock
+ ? {
+ whiteSpace: "pre-wrap" as const,
+ wordWrap: "break-word" as const,
+ overflowWrap: "break-word" as const,
+ }
+ : {};
return (
-
- {children}
-
- );
- }
+ // Detect inline code: no language class AND content is short without newlines
+ // Fenced code blocks (even without language) are longer or have structure
+ const codeContent = String(children);
+ const hasNewlines = codeContent.includes("\n");
+ const isShort = codeContent.length < 80;
+ const hasLanguage = !!match || !!className;
- const codeString = String(children).replace(/\n$/, "");
- const language = match ? match[1] : "text";
- const isTextBlock = language === "text";
-
- // Custom styles for text blocks to enable wrapping
- const textBlockStyle = isTextBlock ? {
- whiteSpace: "pre-wrap" as const,
- wordWrap: "break-word" as const,
- overflowWrap: "break-word" as const,
- } : {};
-
- return (
-
- {match && {match[1]}}
-
- {codeString}
-
-
- );
- },
- img({ src, alt }) {
- const handleImageClick = () => {
- if (isLightboxEnabled && src) {
- setLightboxImage({ src, alt: alt || "" });
+ // It's inline only if: no language, short content, no newlines
+ const isInline = !hasLanguage && isShort && !hasNewlines;
+
+ if (isInline) {
+ return (
+
+ {children}
+
+ );
}
- };
- return (
-
- {children}- ); - }, - h1({ children }) { - const id = generateSlug(getTextContent(children)); - return ( -
-
- );
- },
- h2({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h3({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h4({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h5({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- h6({ children }) {
- const id = generateSlug(getTextContent(children));
- return (
-
-
- );
- },
- ul({ children }) {
- return - {children}
- {children}
; - }, - // Table components for GitHub-style tables - table({ children }) { - return ( -
- {children}
-
- );
- },
- thead({ children }) {
- return {children};
- },
- tbody({ children }) {
- return {children};
- },
- tr({ children }) {
- return
-
+
+ {alt && {alt}}
+
+ );
+ },
+ a({ href, children }) {
+ const isExternal = href?.startsWith("http");
+ return (
+
+ {children}
+
+ );
+ },
+ blockquote({ children }) {
+ return (
+
+
+ );
+ },
+ h2({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h3({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h4({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h5({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h6({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ ul({ children }) {
+ return {children} ;
+ },
+ hr() {
+ return
; + }, + // Table components for GitHub-style tables + table({ children }) { + return ( +{children} ;
+ },
+ th({ children }) {
+ return {children} ;
+ },
+ td({ children }) {
+ return {children} ;
+ },
+ // Iframe component with domain whitelisting for YouTube and Twitter/X
+ iframe(props) {
+ const src = props.src as string;
+ if (!src) return null;
+
+ try {
+ const url = new URL(src);
+ const isAllowed = ALLOWED_IFRAME_DOMAINS.some(
+ (domain) =>
+ url.hostname === domain ||
+ url.hostname.endsWith("." + domain),
+ );
+ if (!isAllowed) return null;
+
+ return (
+ ();
+ const ungrouped: DocsItem[] = [];
+
+ for (const item of allDocsItems) {
+ const groupName = item.docsSectionGroup || "";
+ if (groupName) {
+ if (!groupMap.has(groupName)) {
+ groupMap.set(groupName, []);
+ }
+ groupMap.get(groupName)!.push(item);
+ } else {
+ ungrouped.push(item);
+ }
+ }
+
+ // Sort items within each group by docsSectionOrder
+ const sortItems = (a: DocsItem, b: DocsItem) => {
+ const orderA = a.docsSectionOrder ?? 999;
+ const orderB = b.docsSectionOrder ?? 999;
+ if (orderA !== orderB) return orderA - orderB;
+ return a.title.localeCompare(b.title);
+ };
+
+ // Convert to array and sort
+ const result: DocsGroup[] = [];
+
+ // Add groups sorted by docsSectionGroupOrder (using minimum order from items in each group)
+ const sortedGroupNames = Array.from(groupMap.keys()).sort((a, b) => {
+ const groupAItems = groupMap.get(a)!;
+ const groupBItems = groupMap.get(b)!;
+ const orderA = Math.min(...groupAItems.map(i => i.docsSectionGroupOrder ?? 999));
+ const orderB = Math.min(...groupBItems.map(i => i.docsSectionGroupOrder ?? 999));
+ if (orderA !== orderB) return orderA - orderB;
+ return a.localeCompare(b); // Fallback to alphabetical
+ });
+ for (const name of sortedGroupNames) {
+ const items = groupMap.get(name)!;
+ items.sort(sortItems);
+ result.push({ name, items });
+ }
+
+ // Add ungrouped items at the end if any
+ if (ungrouped.length > 0) {
+ ungrouped.sort(sortItems);
+ result.push({ name: "", items: ungrouped });
+ }
+
+ return result;
+ }, [allDocsItems]);
+
+ // Expanded state for groups
+ const [expanded, setExpanded] = useState>(() => {
+ // Load from localStorage or default to all expanded
+ try {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ const parsed = JSON.parse(stored);
+ if (Array.isArray(parsed)) {
+ return new Set(parsed);
+ }
+ }
+ } catch {
+ // Ignore parsing errors
+ }
+ // Default: expand all groups if siteConfig says so
+ if (siteConfig.docsSection?.defaultExpanded) {
+ return new Set(groups.map((g) => g.name));
+ }
+ return new Set();
+ });
+
+ // Persist expanded state to localStorage
+ useEffect(() => {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(expanded)));
+ } catch {
+ // Ignore storage errors
+ }
+ }, [expanded]);
+
+ // Update expanded state when groups change (ensure new groups are expanded if defaultExpanded)
+ useEffect(() => {
+ if (siteConfig.docsSection?.defaultExpanded && groups.length > 0) {
+ setExpanded((prev) => {
+ const newExpanded = new Set(prev);
+ for (const group of groups) {
+ if (group.name && !prev.has(group.name)) {
+ newExpanded.add(group.name);
+ }
+ }
+ return newExpanded;
+ });
+ }
+ }, [groups]);
+
+ // Get current slug from URL if not provided
+ const activeSlug = currentSlug || location.pathname.replace(/^\//, "");
+
+ // Toggle group expansion
+ const toggleGroup = (name: string) => {
+ setExpanded((prev) => {
+ const newExpanded = new Set(prev);
+ if (newExpanded.has(name)) {
+ newExpanded.delete(name);
+ } else {
+ newExpanded.add(name);
+ }
+ return newExpanded;
+ });
+ };
+
+ // Loading state
+ if (docsPosts === undefined || docsPages === undefined) {
+ return null;
+ }
+
+ // No docs items
+ if (allDocsItems.length === 0) {
+ return null;
+ }
+
+ const containerClass = isMobile ? "docs-mobile-sidebar" : "docs-sidebar-nav";
+
+ return (
+
+ );
+}
diff --git a/src/components/DocsTOC.tsx b/src/components/DocsTOC.tsx
new file mode 100644
index 0000000..f56e8ac
--- /dev/null
+++ b/src/components/DocsTOC.tsx
@@ -0,0 +1,129 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import type { Heading } from "../utils/extractHeadings";
+
+interface DocsTOCProps {
+ headings: Heading[];
+}
+
+// Get absolute position of element from top of document
+function getElementTop(element: HTMLElement): number {
+ const rect = element.getBoundingClientRect();
+ return rect.top + window.scrollY;
+}
+
+export default function DocsTOC({ headings }: DocsTOCProps) {
+ const [activeId, setActiveId] = useState("");
+ const isNavigatingRef = useRef(false);
+
+ // Scroll tracking to highlight active heading
+ useEffect(() => {
+ if (headings.length === 0) return;
+
+ const handleScroll = () => {
+ // Skip during programmatic navigation
+ if (isNavigatingRef.current) return;
+
+ const scrollPosition = window.scrollY + 120; // Header offset
+
+ // Find the heading that's currently in view
+ let currentId = "";
+ for (const heading of headings) {
+ const element = document.getElementById(heading.id);
+ if (element) {
+ const top = getElementTop(element);
+ if (scrollPosition >= top) {
+ currentId = heading.id;
+ } else {
+ break;
+ }
+ }
+ }
+
+ setActiveId(currentId);
+ };
+
+ // Initial check
+ handleScroll();
+
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [headings]);
+
+ // Navigate to heading
+ const navigateToHeading = useCallback((id: string) => {
+ const element = document.getElementById(id);
+ if (!element) return;
+
+ isNavigatingRef.current = true;
+ setActiveId(id);
+
+ // Scroll with header offset
+ const headerOffset = 80;
+ const elementTop = getElementTop(element);
+ const targetPosition = elementTop - headerOffset;
+
+ window.scrollTo({
+ top: Math.max(0, targetPosition),
+ behavior: "smooth",
+ });
+
+ // Update URL hash
+ window.history.pushState(null, "", `#${id}`);
+
+ // Re-enable scroll tracking after animation
+ setTimeout(() => {
+ isNavigatingRef.current = false;
+ }, 500);
+ }, []);
+
+ // Handle hash changes (browser back/forward)
+ useEffect(() => {
+ const handleHashChange = () => {
+ const hash = window.location.hash.slice(1);
+ if (hash && headings.some((h) => h.id === hash)) {
+ navigateToHeading(hash);
+ }
+ };
+
+ window.addEventListener("hashchange", handleHashChange);
+ return () => window.removeEventListener("hashchange", handleHashChange);
+ }, [headings, navigateToHeading]);
+
+ // Initial hash navigation on mount
+ useEffect(() => {
+ const hash = window.location.hash.slice(1);
+ if (hash && headings.some((h) => h.id === hash)) {
+ // Delay to ensure DOM is ready
+ requestAnimationFrame(() => {
+ navigateToHeading(hash);
+ });
+ }
+ }, [headings, navigateToHeading]);
+
+ // No headings, don't render
+ if (headings.length === 0) {
+ return null;
+ }
+
+ return (
+
+ );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index c548298..cba34dd 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -31,6 +31,23 @@ export default function Layout({ children }: LayoutProps) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const location = useLocation();
+ // Fetch docs pages and posts for detecting if current page is in docs section
+ const docsPages = useQuery(
+ siteConfig.docsSection?.enabled ? api.pages.getDocsPages : "skip"
+ );
+ const docsPosts = useQuery(
+ siteConfig.docsSection?.enabled ? api.posts.getDocsPosts : "skip"
+ );
+
+ // Check if current page is a docs page
+ const currentSlug = location.pathname.replace(/^\//, "");
+ const docsSlug = siteConfig.docsSection?.slug || "docs";
+ const isDocsLanding = currentSlug === docsSlug;
+ const isDocsPage =
+ isDocsLanding ||
+ (docsPages?.some((p) => p.slug === currentSlug) ?? false) ||
+ (docsPosts?.some((p) => p.slug === currentSlug) ?? false);
+
// Get sidebar headings from context (if available)
const sidebarContext = useSidebarOptional();
const sidebarHeadings = sidebarContext?.headings || [];
@@ -103,6 +120,15 @@ export default function Layout({ children }: LayoutProps) {
});
}
+ // Add Docs link if enabled
+ if (siteConfig.docsSection?.enabled && siteConfig.docsSection?.showInNav) {
+ navItems.push({
+ slug: siteConfig.docsSection.slug,
+ title: siteConfig.docsSection.title,
+ order: siteConfig.docsSection.order ?? 1,
+ });
+ }
+
// Add hardcoded nav items (React routes like /stats, /write)
if (siteConfig.hardcodedNavItems && siteConfig.hardcodedNavItems.length > 0) {
siteConfig.hardcodedNavItems.forEach((item) => {
@@ -236,6 +262,8 @@ export default function Layout({ children }: LayoutProps) {
onClose={closeMobileMenu}
sidebarHeadings={sidebarHeadings}
sidebarActiveId={sidebarActiveId}
+ showDocsNav={isDocsPage}
+ currentDocsSlug={currentSlug}
>
{/* Page navigation links in mobile menu (same order as desktop) */}
+ {match && {match[1]}}
+
+ {codeString}
+
);
- } catch {
- return null;
- }
- },
+ },
+ img({ src, alt }) {
+ const handleImageClick = () => {
+ if (isLightboxEnabled && src) {
+ setLightboxImage({ src, alt: alt || "" });
+ }
+ };
+ return (
+
+ {children}+ ); + }, + h1({ children }) { + const id = generateSlug(getTextContent(children)); + return ( +
+
+ );
+ },
+ h2({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h3({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h4({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h5({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ h6({ children }) {
+ const id = generateSlug(getTextContent(children));
+ return (
+
+
+ );
+ },
+ ul({ children }) {
+ return - {children}
- {children}
; + }, + // Table components for GitHub-style tables + table({ children }) { + return ( +
+ {children}
+
+ );
+ },
+ thead({ children }) {
+ return {children};
+ },
+ tbody({ children }) {
+ return {children};
+ },
+ tr({ children }) {
+ return
+
+
+ );
+ } catch {
+ return null;
+ }
+ },
}}
>
{cleanedContent}
diff --git a/src/components/DocsLayout.tsx b/src/components/DocsLayout.tsx
new file mode 100644
index 0000000..2122eed
--- /dev/null
+++ b/src/components/DocsLayout.tsx
@@ -0,0 +1,101 @@
+import { ReactNode, useState, useEffect } from "react";
+import DocsSidebar from "./DocsSidebar";
+import DocsTOC from "./DocsTOC";
+import AIChatView from "./AIChatView";
+import type { Heading } from "../utils/extractHeadings";
+import siteConfig from "../config/siteConfig";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+// Storage key for AI chat expanded state
+const AI_CHAT_EXPANDED_KEY = "docs-ai-chat-expanded";
+
+interface DocsLayoutProps {
+ children: ReactNode;
+ headings: Heading[];
+ currentSlug: string;
+ aiChatEnabled?: boolean; // From frontmatter aiChat: true/false
+ pageContent?: string; // Page/post content for AI context
+}
+
+export default function DocsLayout({
+ children,
+ headings,
+ currentSlug,
+ aiChatEnabled = false,
+ pageContent,
+}: DocsLayoutProps) {
+ const hasTOC = headings.length > 0;
+
+ // Check if AI chat should be shown (requires global config + frontmatter)
+ const showAIChat =
+ siteConfig.aiChat?.enabledOnContent && aiChatEnabled === true && currentSlug;
+
+ // AI chat expanded state (closed by default)
+ const [aiChatExpanded, setAiChatExpanded] = useState(() => {
+ try {
+ const stored = localStorage.getItem(AI_CHAT_EXPANDED_KEY);
+ return stored === "true";
+ } catch {
+ return false;
+ }
+ });
+
+ // Persist AI chat expanded state
+ useEffect(() => {
+ try {
+ localStorage.setItem(AI_CHAT_EXPANDED_KEY, aiChatExpanded.toString());
+ } catch {
+ // Ignore storage errors
+ }
+ }, [aiChatExpanded]);
+
+ // Show right sidebar if TOC exists OR AI chat is enabled
+ const hasRightSidebar = hasTOC || showAIChat;
+
+ return (
+
+ {/* Left sidebar - docs navigation */}
+
+
+ {/* Main content */}
+ {children}
+
+ {/* Right sidebar - AI chat toggle + table of contents */}
+ {hasRightSidebar && (
+
+ )}
+
+ );
+}
diff --git a/src/components/DocsSidebar.tsx b/src/components/DocsSidebar.tsx
new file mode 100644
index 0000000..08c4963
--- /dev/null
+++ b/src/components/DocsSidebar.tsx
@@ -0,0 +1,213 @@
+import { useQuery } from "convex/react";
+import { api } from "../../convex/_generated/api";
+import { Link, useLocation } from "react-router-dom";
+import { ChevronRight } from "lucide-react";
+import { useState, useEffect, useMemo } from "react";
+import siteConfig from "../config/siteConfig";
+
+// Docs item from query
+interface DocsItem {
+ _id: string;
+ slug: string;
+ title: string;
+ docsSectionGroup?: string;
+ docsSectionOrder?: number;
+ docsSectionGroupOrder?: number;
+}
+
+// Grouped docs structure
+interface DocsGroup {
+ name: string;
+ items: DocsItem[];
+}
+
+interface DocsSidebarProps {
+ currentSlug?: string;
+ isMobile?: boolean;
+}
+
+// Storage key for expanded state
+const STORAGE_KEY = "docs-sidebar-expanded-state";
+
+export default function DocsSidebar({ currentSlug, isMobile }: DocsSidebarProps) {
+ const location = useLocation();
+ const docsPosts = useQuery(api.posts.getDocsPosts);
+ const docsPages = useQuery(api.pages.getDocsPages);
+
+ // Combine posts and pages
+ const allDocsItems = useMemo(() => {
+ const items: DocsItem[] = [];
+ if (docsPosts) {
+ items.push(...docsPosts.map((p) => ({ ...p, _id: p._id.toString() })));
+ }
+ if (docsPages) {
+ items.push(...docsPages.map((p) => ({ ...p, _id: p._id.toString() })));
+ }
+ return items;
+ }, [docsPosts, docsPages]);
+
+ // Group items by docsSectionGroup
+ const groups = useMemo(() => {
+ const groupMap = new Map