From c38d403f77f527f0ceddcf01b9187d91d8c7dd41 Mon Sep 17 00:00:00 2001 From: Zeno Kapitein Date: Wed, 7 May 2025 12:56:08 +0200 Subject: [PATCH] Layout fixes --- .../src/components/Adaptive/AIPageSummary.tsx | 15 ++++------ .../components/Adaptive/AdaptiveContext.tsx | 30 ++++++++++++++++++- .../src/components/Adaptive/AdaptivePane.tsx | 4 +-- .../Adaptive/AdaptivePaneHeader.tsx | 1 + .../server-actions/streamPageSummary.ts | 8 ++--- .../gitbook/src/components/Header/Header.tsx | 4 +++ .../src/components/PageAside/PageAside.tsx | 22 +++++++++----- .../src/components/SitePage/SitePage.tsx | 2 +- .../src/components/primitives/Loading.tsx | 15 ++++------ packages/gitbook/tailwind.config.ts | 5 ++++ 10 files changed, 71 insertions(+), 35 deletions(-) diff --git a/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx b/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx index 9357d5c34..a30d3fbdd 100644 --- a/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx +++ b/packages/gitbook/src/components/Adaptive/AIPageSummary.tsx @@ -13,11 +13,12 @@ export function AIPageSummary() { const visitedPagesRef = useRef(visitedPages); const [summary, setSummary] = useState<{ - pageSummary?: string; + keyFacts?: string; bigPicture?: string; }>({}); useEffect(() => { + if (!summary.keyFacts) setLoading(true); if (!visitedPages?.length) return; // Skip if the visited pages haven't changed @@ -47,12 +48,6 @@ export function AIPageSummary() { } })().finally(() => { setLoading(false); - if (!toggle.manual) { - setToggle({ - open: true, - manual: false, - }); - } }); return () => { @@ -64,13 +59,13 @@ export function AIPageSummary() { return ( toggle.open && ( -
- {summary.pageSummary ? ( +
+ {summary.keyFacts ? (
Key facts
- {summary.pageSummary} + {summary.keyFacts}
) : (
diff --git a/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx b/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx index 89dbc7be7..cf9b40368 100644 --- a/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx +++ b/packages/gitbook/src/components/Adaptive/AdaptiveContext.tsx @@ -19,11 +19,39 @@ export const AdaptiveContext = React.createContext(n */ export function AdaptiveContextProvider({ children }: { children: React.ReactNode }) { const [loading, setLoading] = React.useState(true); + + // Start with a default state that works for SSR const [toggle, setToggle] = React.useState({ - open: true, + open: false, // Default to open for SSR manual: false, }); + // Update the toggle state on the client side only + React.useEffect(() => { + // Check for mobile only on the client + const handleResize = () => { + if (!toggle.manual) { + const isMobile = window.innerWidth < 1280; + setToggle((prev) => ({ + ...prev, + open: !isMobile, + })); + } + }; + handleResize(); + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, [toggle.manual]); + + React.useEffect(() => { + if (toggle.open) { + document.body.classList.add('adaptive-pane'); + } else { + document.body.classList.remove('adaptive-pane'); + } + }, [toggle.open]); + return ( {children} diff --git a/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx b/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx index be02580ee..f0e6f1a08 100644 --- a/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx +++ b/packages/gitbook/src/components/Adaptive/AdaptivePane.tsx @@ -10,8 +10,8 @@ export function AdaptivePane() { return (
diff --git a/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx b/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx index 46b67bd61..93338b152 100644 --- a/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx +++ b/packages/gitbook/src/components/Adaptive/AdaptivePaneHeader.tsx @@ -21,6 +21,7 @@ export function AdaptivePaneHeader() { initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} + transition={{ duration: 0.3 }} className="text-tint-subtle text-xs" > {loading ? 'Basing on your context...' : 'Based on your context'} diff --git a/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts b/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts index a2ee58afe..3f64bb00e 100644 --- a/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts +++ b/packages/gitbook/src/components/Adaptive/server-actions/streamPageSummary.ts @@ -40,7 +40,7 @@ export async function* streamPageSummary({ }, { schema: z.object({ - pageSummary: z + keyFacts: z .string() .describe( 'A collection of key facts from the page that together form a comprehensive summary. Keep it under 30 words.' @@ -201,13 +201,13 @@ export async function* streamPageSummary({ ]); for await (const value of stream) { - const pageSummary = value.pageSummary; + const keyFacts = value.keyFacts; const bigPicture = value.bigPicture; - if (!pageSummary) continue; + if (!keyFacts) continue; yield { - pageSummary, + keyFacts, bigPicture, }; } diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx index 35c2583c4..7a27e1eb2 100644 --- a/packages/gitbook/src/components/Header/Header.tsx +++ b/packages/gitbook/src/components/Header/Header.tsx @@ -106,12 +106,16 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo 'lg:max-w-lg', 'lg:ml-[max(calc((100%-18rem-48rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - margin (3rem) 'xl:ml-[max(calc((100%-18rem-48rem-14rem-3rem)/2),1.5rem)]', // container (100%) - sidebar (18rem) - content (48rem) - outline (14rem) - margin (3rem) + 'adaptive-pane:xl:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),1.5rem)]', 'page-no-toc:lg:ml-[max(calc((100%-18rem-48rem-18rem-3rem)/2),0rem)]', 'page-full-width:lg:ml-[max(calc((100%-18rem-103rem-3rem)/2),1.5rem)]', 'page-full-width:2xl:ml-[max(calc((100%-18rem-96rem-14rem+3rem)/2),1.5rem)]', + '[body.adaptive-pane:has(.page-full-width)_&]:2xl:ml-[max(calc((100%-18rem-96rem-18rem+3rem)/2),1.5rem)]', 'md:mr-auto', 'order-last', 'md:order-[unset]', + 'transition-[margin-left]', + 'duration-300', ] : ['order-last'] )} diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx index a5bf845dd..4a502e7c2 100644 --- a/packages/gitbook/src/components/PageAside/PageAside.tsx +++ b/packages/gitbook/src/components/PageAside/PageAside.tsx @@ -35,10 +35,11 @@ export function PageAside(props: {