import { useEffect, useState } from "react"; import Head from "next/head.js"; import { NextRouter, useRouter } from "next/router.js"; import clsx from "clsx"; import { useTableOfContents } from "./useTableOfContents"; import { collectHeadings } from "../../utils"; import { Nav } from "../Nav"; import { SiteToc, NavItem, NavGroup } from "../SiteToc"; import { Comments, CommentsConfig } from "../Comments"; import { Footer } from "./Footer"; import { EditThisPage } from "./EditThisPage"; import { TableOfContents, TocSection } from "./TableOfContents"; import { NavConfig, ThemeConfig } from "../Nav"; import { AuthorConfig } from "../types"; interface Props extends React.PropsWithChildren { showComments: boolean; showEditLink: boolean; showSidebar: boolean; showToc: boolean; nav: NavConfig; author: AuthorConfig; theme: ThemeConfig; urlPath: string; commentsConfig: CommentsConfig; siteMap: Array; editUrl?: string; } export const Layout: React.FC = ({ children, nav, author, theme, showEditLink, showToc, showSidebar, urlPath, showComments, commentsConfig, editUrl, siteMap, }) => { const [isScrolled, setIsScrolled] = useState(false); const [tableOfContents, setTableOfContents] = useState([]); const currentSection = useTableOfContents(tableOfContents); const router: NextRouter = useRouter(); useEffect(() => { if (!showToc) return; const headingNodes: NodeListOf = document.querySelectorAll("h1,h2,h3"); const toc = collectHeadings(headingNodes); setTableOfContents(toc ?? []); }, [router.asPath, showToc]); // update table of contents on route change with next/link useEffect(() => { function onScroll() { setIsScrolled(window.scrollY > 0); } onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); }; }, []); return ( <>
{/* NAVBAR */}
{/* wrapper for sidebar, main content and ToC */}
{/* SIDEBAR */} {showSidebar && (
)} {/* MAIN CONTENT & FOOTER */}
{children} {/* EDIT THIS PAGE LINK */} {showEditLink && editUrl && } {/* PAGE COMMENTS */} {showComments && (
{}
)}
); };