From 88f2a05bdbdceb2f38b512cd5294b6fe00e6e049 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Wed, 24 Apr 2024 13:53:32 +0100 Subject: [PATCH 01/13] wip: collapsible button --- .../site/src/components/DocumentOutline.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 494bca3a..3af00aea 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -9,6 +9,9 @@ import classNames from 'classnames'; import throttle from 'lodash.throttle'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { DocumentChartBarIcon } from '@heroicons/react/24/outline'; +import { ChevronRightIcon } from '@heroicons/react/24/solid'; +import * as Collapsible from '@radix-ui/react-collapsible'; + const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', '); const HIGHLIGHT_CLASS = 'highlight'; @@ -247,6 +250,7 @@ export const DocumentOutline = ({ return ; } return ( + + ); }; From d96e6d651130c532bdfde88888037f4f6c5a32b0 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 6 Aug 2024 13:16:24 +0100 Subject: [PATCH 02/13] refactor: clean up code --- .../site/src/components/DocumentOutline.tsx | 210 +++++++++++------- 1 file changed, 133 insertions(+), 77 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 3af00aea..befe4a8c 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -8,11 +8,11 @@ import { useNavigation } from '@remix-run/react'; import classNames from 'classnames'; import throttle from 'lodash.throttle'; import React, { useCallback, useEffect, useRef, useState } from 'react'; +import type { RefObject } from 'react'; import { DocumentChartBarIcon } from '@heroicons/react/24/outline'; import { ChevronRightIcon } from '@heroicons/react/24/solid'; import * as Collapsible from '@radix-ui/react-collapsible'; - const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', '); const HIGHLIGHT_CLASS = 'highlight'; @@ -108,11 +108,44 @@ function getHeaders(selector: string): HTMLHeadingElement[] { return headers as HTMLHeadingElement[]; } +type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void; + +function useMutationObserver( + targetRef: RefObject, + callback: MutationCallback, + options: Record, +) { + const [observer, setObserver] = useState(null); + + // Create observer + useEffect(() => { + const obs = new MutationObserver(callback); + setObserver(obs); + }, [callback, setObserver]); + + // Setup observer + useEffect(() => { + if (!observer || !targetRef.current) { + return; + } + + try { + observer.observe(targetRef.current, options); + } catch (e) { + console.error(e); + } + return () => { + if (observer) { + observer.disconnect(); + } + }; + }, [observer]); +} + export function useHeaders(selector: string, maxdepth: number) { if (!onClient) return { activeId: '', headings: [] }; const onScreen = useRef>(new Set()); const [activeId, setActiveId] = useState(); - const headingsSet = useRef>(new Set()); const highlight = useCallback(() => { const current = [...onScreen.current]; @@ -126,63 +159,82 @@ export function useHeaders(selector: string, maxdepth: number) { ); const active = [...onScreen.current].sort((a, b) => a.offsetTop - b.offsetTop)[0]; if (highlighted || active) setActiveId(highlighted || active.id); + }, [onScreen, setActiveId]); + + // Keep track of main manually for now + const mainElementRef = useRef(null); + useEffect(() => { + mainElementRef.current = document.querySelector('main'); }, []); - const { observer } = useIntersectionObserver(highlight, onScreen.current); + // Track changes to the DOM const [elements, setElements] = useState([]); + const onMutation = useCallback( + throttle( + () => { + setElements(getHeaders(selector)); + }, + 500, + { trailing: false }, + ), + [selector], + ); + useMutationObserver(mainElementRef, onMutation, { + attributes: true, + childList: true, + subtree: true, + }); - const render = throttle(() => setElements(getHeaders(selector)), 500); + // Trigger initial update + useEffect(onMutation, []); + + const { observer } = useIntersectionObserver(highlight, onScreen.current); + // Changes to the DOM mean we need to update our intersection observer useEffect(() => { - // We have to look at the document changes for reloads/mutations - const main = document.querySelector('main'); - const mutations = new MutationObserver(render); - // Fire when added to the dom - render(); - if (main) { - mutations.observe(main, { attributes: true, childList: true, subtree: true }); - } - return () => mutations.disconnect(); + // Re-observe all elements when the observer changes + Array.from(elements).map((e) => observer?.observe(e)); }, []); + const headingsSet = useRef>(new Set()); + const headingsRef = useRef([]); useEffect(() => { - // Re-observe all elements when the observer changes - Array.from(elements).map((e) => observer.current?.observe(e)); - }, [observer]); + let minLevel = 10; + const headings: Heading[] = elements + .map((element) => { + return { + element, + level: Number(element.tagName.slice(1)), + id: element.id, + text: element.querySelector('.heading-text'), + }; + }) + .filter((h) => !!h.text) + .map(({ element, level, text, id }) => { + const { innerText: title, innerHTML: titleHTML } = cloneHeadingElement( + text as HTMLSpanElement, + ); + minLevel = Math.min(minLevel, level); + return { element, title, titleHTML, id, level }; + }) + .filter((heading) => { + heading.level = heading.level - minLevel + 1; + return heading.level < maxdepth + 1; + }); - let minLevel = 10; - const headings: Heading[] = elements - .map((element) => { - return { - element, - level: Number(element.tagName.slice(1)), - id: element.id, - text: element.querySelector('.heading-text'), - }; - }) - .filter((h) => !!h.text) - .map(({ element, level, text, id }) => { - const { innerText: title, innerHTML: titleHTML } = cloneHeadingElement( - text as HTMLSpanElement, - ); - minLevel = Math.min(minLevel, level); - return { element, title, titleHTML, id, level }; - }) - .filter((heading) => { - heading.level = heading.level - minLevel + 1; - return heading.level < maxdepth + 1; + headings.forEach(({ element: e }) => { + if (headingsSet.current.has(e)) return; + observer?.observe(e); + headingsSet.current.add(e); }); - headings.forEach(({ element: e }) => { - if (headingsSet.current.has(e)) return; - observer.current?.observe(e); - headingsSet.current.add(e); - }); + headingsRef.current = headings; + }, [elements]); - return { activeId, highlight, headings }; + return { activeId, highlight, headings: headingsRef.current }; } const useIntersectionObserver = (highlight: () => void, onScreen: Set) => { - const observer = useRef(null); + const [observer, setObserver] = useState(null); if (!onClient) return { observer }; useEffect(() => { const callback: IntersectionObserverCallback = (entries) => { @@ -192,7 +244,7 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set o.disconnect(); }, [highlight, onScreen]); return { observer }; @@ -251,38 +303,42 @@ export const DocumentOutline = ({ } return ( - - + + ); }; From d64e695778954c717c4ea58fa1db9a88b26215bc Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 6 Aug 2024 13:59:19 +0100 Subject: [PATCH 03/13] wip: hide when margin visible --- .../site/src/components/DocumentOutline.tsx | 135 ++++++++++++++---- 1 file changed, 105 insertions(+), 30 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index befe4a8c..52df4483 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -111,12 +111,14 @@ function getHeaders(selector: string): HTMLHeadingElement[] { type MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => void; function useMutationObserver( - targetRef: RefObject, + targetRef: RefObject, callback: MutationCallback, options: Record, ) { const [observer, setObserver] = useState(null); + if (!onClient) return { observer }; + // Create observer useEffect(() => { const obs = new MutationObserver(callback); @@ -142,13 +144,54 @@ function useMutationObserver( }, [observer]); } +const useIntersectionObserver = ( + callback: () => void, + onScreen: RefObject>, + elements: Element[], + options?: Record, +) => { + const [observer, setObserver] = useState(null); + if (!onClient) return { observer }; + useEffect(() => { + const cb: IntersectionObserverCallback = (entries) => { + if (!onScreen.current) return; + entries.forEach((entry) => { + onScreen.current[entry.isIntersecting ? 'add' : 'delete'](entry.target as HTMLElement); + }); + callback(); + }; + const o = new IntersectionObserver(cb, options ?? {}); + setObserver(o); + return () => o.disconnect(); + }, [callback]); + + // Changes to the DOM mean we need to update our intersection observer + useEffect(() => { + if (!observer) { + return; + } + // Observe all heading elements + const toWatch = elements; + toWatch.map((e) => observer.observe(e)); + // Cleanup afterwards + return () => { + toWatch.map((e) => observer.unobserve(e)); + }; + }, [elements]); + + return { observer }; +}; + +/** + * Keep track of which headers are visible, and which header is active + */ export function useHeaders(selector: string, maxdepth: number) { if (!onClient) return { activeId: '', headings: [] }; - const onScreen = useRef>(new Set()); + const onScreenRef = useRef>(new Set()); const [activeId, setActiveId] = useState(); const highlight = useCallback(() => { - const current = [...onScreen.current]; + const current = [...onScreenRef.current]; const highlighted = current.reduce( (a, b) => { if (a) return a; @@ -157,9 +200,9 @@ export function useHeaders(selector: string, maxdepth: number) { }, null as string | null, ); - const active = [...onScreen.current].sort((a, b) => a.offsetTop - b.offsetTop)[0]; + const active = [...onScreenRef.current].sort((a, b) => a.offsetTop - b.offsetTop)[0]; if (highlighted || active) setActiveId(highlighted || active.id); - }, [onScreen, setActiveId]); + }, [onScreenRef, setActiveId]); // Keep track of main manually for now const mainElementRef = useRef(null); @@ -188,12 +231,8 @@ export function useHeaders(selector: string, maxdepth: number) { // Trigger initial update useEffect(onMutation, []); - const { observer } = useIntersectionObserver(highlight, onScreen.current); - // Changes to the DOM mean we need to update our intersection observer - useEffect(() => { - // Re-observe all elements when the observer changes - Array.from(elements).map((e) => observer?.observe(e)); - }, []); + // Watch intersections with headings + useIntersectionObserver(highlight, onScreenRef, elements); const headingsSet = useRef>(new Set()); const headingsRef = useRef([]); @@ -223,7 +262,6 @@ export function useHeaders(selector: string, maxdepth: number) { headings.forEach(({ element: e }) => { if (headingsSet.current.has(e)) return; - observer?.observe(e); headingsSet.current.add(e); }); @@ -233,23 +271,6 @@ export function useHeaders(selector: string, maxdepth: number) { return { activeId, highlight, headings: headingsRef.current }; } -const useIntersectionObserver = (highlight: () => void, onScreen: Set) => { - const [observer, setObserver] = useState(null); - if (!onClient) return { observer }; - useEffect(() => { - const callback: IntersectionObserverCallback = (entries) => { - entries.forEach((entry) => { - onScreen[entry.isIntersecting ? 'add' : 'delete'](entry.target as HTMLHeadingElement); - }); - highlight(); - }; - const o = new IntersectionObserver(callback); - setObserver(o); - return () => o.disconnect(); - }, [highlight, onScreen]); - return { observer }; -}; - export function useOutlineHeight( existingContainer?: React.RefObject, ) { @@ -281,6 +302,53 @@ export function useOutlineHeight( return { container, outline }; } +function useMarginOccluder() { + const [occluded, setOccluded] = useState(false); + const [elements, setElements] = useState([]); + + // Keep track of main manually for now + const mainElementRef = useRef(null); + useEffect(() => { + mainElementRef.current = document.querySelector('main'); + }, []); + + // Update list of margin elements + const onMutation = useCallback( + throttle( + () => { + if (!mainElementRef.current) { + return; + } + const elements = mainElementRef.current.querySelectorAll('.col-margin-right'); + setElements(Array.from(elements)); + }, + 500, + { trailing: false }, + ), + [], + ); + useMutationObserver(mainElementRef, onMutation, { + attributes: true, + childList: true, + subtree: true, + }); + + // Trigger initial update + useEffect(onMutation, []); + // Watch for changes to on-screen elements + const onScreenRef = useRef>(new Set()); + const onChange = useCallback(() => { + if (!onScreenRef.current) { + return; + } + setOccluded(onScreenRef.current.size > 0) + }, []); + // Keep tabs of margin elements on screen + useIntersectionObserver(onChange, onScreenRef, elements, {rootMargin: "0px 0px -33% 0px"}); + + return { occluded }; +} + export const DocumentOutline = ({ outlineRef, top = 0, @@ -298,11 +366,18 @@ export const DocumentOutline = ({ maxdepth?: number; }) => { const { activeId, headings, highlight } = useHeaders(selector, maxdepth); + const [open, setOpen] = useState(false); + + // Keep track of changing occlusion + const { occluded } = useMarginOccluder(); + useEffect( ()=> setOpen(!occluded), [occluded] ); + if (headings.length <= 1 || !onClient) { return ; } + return ( - + diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx index 2c70eb62..33fbf3f0 100644 --- a/themes/book/app/components/ArticlePage.tsx +++ b/themes/book/app/components/ArticlePage.tsx @@ -4,6 +4,7 @@ import { useProjectManifest, useSiteManifest, useThemeTop, + useMediaQuery, } from '@myst-theme/providers'; import { Bibliography, @@ -75,7 +76,7 @@ export const ArticlePage = React.memo(function ({ const tree = copyNode(article.mdast); const keywords = article.frontmatter?.keywords ?? []; const parts = extractKnownParts(tree); - + const isOutlineMargin = useMediaQuery('(min-width: 1024px)'); return ( - + )} {compute?.enabled && From 872c3ae4c00161dd26e47e05ea2349c7cf2a2539 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 6 Aug 2024 15:10:51 +0100 Subject: [PATCH 05/13] chore: run linter --- packages/site/src/components/DocumentOutline.tsx | 2 +- themes/book/app/components/ArticlePage.tsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index f221729a..247e77cf 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -353,7 +353,7 @@ export const DocumentOutline = ({ // Handle transition between margin and non-margin useEffect(() => { - setOpen(true); + setOpen(true); }, [isMargin]); // Handle occlusion when outline is in margin diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx index 33fbf3f0..e9346440 100644 --- a/themes/book/app/components/ArticlePage.tsx +++ b/themes/book/app/components/ArticlePage.tsx @@ -96,7 +96,11 @@ export const ArticlePage = React.memo(function ({ className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-0 lg:my-0 lg:ml-10 lg:col-margin-right" style={{ top: top + TOP_OFFSET }} > - + )} {compute?.enabled && From 8f22b22c60cc17ef91fa3962654bee592a3a7813 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 6 Aug 2024 17:26:49 +0100 Subject: [PATCH 06/13] chore: run linter --- packages/site/src/components/DocumentOutline.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 247e77cf..6c4dcfe4 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -14,7 +14,6 @@ import { ChevronRightIcon } from '@heroicons/react/24/solid'; import * as Collapsible from '@radix-ui/react-collapsible'; const SELECTOR = [1, 2, 3, 4].map((n) => `main h${n}`).join(', '); -const HIGHLIGHT_CLASS = 'highlight'; const onClient = typeof document !== 'undefined'; @@ -302,8 +301,8 @@ function useMarginOccluder() { if (!mainElementRef.current) { return; } - const elements = mainElementRef.current.querySelectorAll('.col-margin-right'); - setElements(Array.from(elements)); + const marginElements = mainElementRef.current.querySelectorAll('.col-margin-right'); + setElements(Array.from(marginElements)); }, 500, { trailing: false }, From 4a465f68f3c82e9ced0e3c587e33d20592217a13 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 6 Aug 2024 17:30:38 +0100 Subject: [PATCH 07/13] fix: compile --- themes/article/app/components/Article.tsx | 6 +++--- themes/book/app/components/ArticlePage.tsx | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx index 7d551480..9f50e97d 100644 --- a/themes/article/app/components/Article.tsx +++ b/themes/article/app/components/Article.tsx @@ -11,7 +11,7 @@ import { } from '@myst-theme/site'; import { ErrorTray, NotebookToolbar, useComputeOptions } from '@myst-theme/jupyter'; import { FrontmatterBlock } from '@myst-theme/frontmatter'; -import { ReferencesProvider, useThemeTop } from '@myst-theme/providers'; +import { ReferencesProvider, useThemeTop, useMediaQuery } from '@myst-theme/providers'; import type { GenericParent } from 'myst-common'; import { copyNode } from 'myst-common'; import { BusyScopeProvider, ConnectionStatusTray, ExecuteScopeProvider } from '@myst-theme/jupyter'; @@ -38,7 +38,7 @@ export function Article({ const { title, subtitle } = article.frontmatter; const compute = useComputeOptions(); const top = useThemeTop(); - + const isOutlineMargin = useMediaQuery('(min-width: 1024px)'); return ( - + diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx index e9346440..db4953dd 100644 --- a/themes/book/app/components/ArticlePage.tsx +++ b/themes/book/app/components/ArticlePage.tsx @@ -15,7 +15,6 @@ import { DocumentOutline, extractKnownParts, Footnotes, - DEFAULT_NAV_HEIGHT, } from '@myst-theme/site'; import type { SiteManifest } from 'myst-config'; import type { PageLoader } from '@myst-theme/common'; From aeaa712927b02874fde0869db8e154d17a9c32d2 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Wed, 21 Aug 2024 16:03:25 +0100 Subject: [PATCH 08/13] fix: margin height --- packages/site/src/components/DocumentOutline.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 6c4dcfe4..6e2515c5 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -301,7 +301,8 @@ function useMarginOccluder() { if (!mainElementRef.current) { return; } - const marginElements = mainElementRef.current.querySelectorAll('.col-margin-right'); + // Watch margin elements, or their direct descendents (as some margin elements have height set to zero) + const marginElements = mainElementRef.current.querySelectorAll('.col-margin-right, .col-margin-right > *'); setElements(Array.from(marginElements)); }, 500, From 72ea54980d7439f5c65fe12380eda3a5a70e17ae Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Wed, 21 Aug 2024 17:20:02 +0100 Subject: [PATCH 09/13] chore: run prettier --- packages/site/src/components/DocumentOutline.tsx | 6 ++++-- themes/article/app/components/Article.tsx | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 6e2515c5..7db2ee8b 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -301,8 +301,10 @@ function useMarginOccluder() { if (!mainElementRef.current) { return; } - // Watch margin elements, or their direct descendents (as some margin elements have height set to zero) - const marginElements = mainElementRef.current.querySelectorAll('.col-margin-right, .col-margin-right > *'); + // Watch margin elements, or their direct descendents (as some margin elements have height set to zero) + const marginElements = mainElementRef.current.querySelectorAll( + '.col-margin-right, .col-margin-right > *', + ); setElements(Array.from(marginElements)); }, 500, diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx index 9f50e97d..04acab57 100644 --- a/themes/article/app/components/Article.tsx +++ b/themes/article/app/components/Article.tsx @@ -52,7 +52,11 @@ export function Article({ className="block my-10 lg:sticky lg:top-0 lg:z-10 lg:h-0 lg:pt-0 lg:my-0 lg:ml-10 lg:col-margin-right" style={{ top: top + TOP_OFFSET }} > - + From df311f0e5d49d422b5087466060d563b7c62c086 Mon Sep 17 00:00:00 2001 From: Rowan Cockett Date: Tue, 24 Sep 2024 10:22:53 -0600 Subject: [PATCH 10/13] Create heavy-bees-ring.md --- .changeset/heavy-bees-ring.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/heavy-bees-ring.md diff --git a/.changeset/heavy-bees-ring.md b/.changeset/heavy-bees-ring.md new file mode 100644 index 00000000..52132c7a --- /dev/null +++ b/.changeset/heavy-bees-ring.md @@ -0,0 +1,7 @@ +--- +"@myst-theme/site": patch +"@myst-theme/article": patch +"@myst-theme/book": patch +--- + +🔍 Make document outline collapsible From 8192c6420391fe7595b58d9cce95e171c3a5b780 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Tue, 24 Sep 2024 17:24:56 +0100 Subject: [PATCH 11/13] fix: support more selectors --- .../site/src/components/DocumentOutline.tsx | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 7db2ee8b..3abd531b 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -302,9 +302,26 @@ function useMarginOccluder() { return; } // Watch margin elements, or their direct descendents (as some margin elements have height set to zero) - const marginElements = mainElementRef.current.querySelectorAll( - '.col-margin-right, .col-margin-right > *', - ); + const classes = [ + 'col-margin-right', + 'col-margin-right-inset', + 'col-gutter-outset-right', + 'col-screen-right', + 'col-screen-inset-right', + 'col-page-right', + 'col-page-inset-right', + 'col-body-outset-right', + 'col-gutter-page-right', + 'col-screen', + 'col-page', + 'col-page-inset', + 'col-body-outset', + ]; + const selector = classes + .map((cls) => [`.${cls}`, `.${cls} > *`]) + .flat() + .join(', '); + const marginElements = mainElementRef.current.querySelectorAll(selector); setElements(Array.from(marginElements)); }, 500, From d4102392670fb31c96fe79e6db074dfa186cdcb0 Mon Sep 17 00:00:00 2001 From: Rowan Cockett Date: Tue, 24 Sep 2024 10:30:26 -0600 Subject: [PATCH 12/13] Remove col-screen --- packages/site/src/components/DocumentOutline.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx index 3abd531b..d3cd63a3 100644 --- a/packages/site/src/components/DocumentOutline.tsx +++ b/packages/site/src/components/DocumentOutline.tsx @@ -312,7 +312,7 @@ function useMarginOccluder() { 'col-page-inset-right', 'col-body-outset-right', 'col-gutter-page-right', - 'col-screen', + // 'col-screen', // This is on everything! 'col-page', 'col-page-inset', 'col-body-outset', @@ -401,7 +401,7 @@ export const DocumentOutline = ({ maxHeight: `calc(100vh - ${top + 20}px)`, }} > -
+
In this article