Skip to content

Commit 9e28b03

Browse files
LadyBluenotesLadyBluenotes
committed
fix formatting in docs page
1 parent dad7744 commit 9e28b03

File tree

1 file changed

+198
-198
lines changed

1 file changed

+198
-198
lines changed

‎src/components/Doc.tsx‎

Lines changed: 198 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,198 +1,198 @@
1-
import * as React from 'react'
2-
import {
3-
BsArrowsCollapseVertical,
4-
BsArrowsExpandVertical,
5-
} from 'react-icons/bs'
6-
import { FaEdit } from 'react-icons/fa'
7-
import { twMerge } from 'tailwind-merge'
8-
import { useWidthToggle } from '~/components/DocsLayout'
9-
import { DocTitle } from '~/components/DocTitle'
10-
import { Markdown } from '~/components/Markdown'
11-
import {
12-
MarkdownHeadingProvider,
13-
useMarkdownHeadings,
14-
} from '~/components/MarkdownHeadingContext'
15-
import { AdGate } from '~/contexts/AdsContext'
16-
import { CopyMarkdownButton } from './CopyMarkdownButton'
17-
import { GamHeader, GamLeader } from './Gam'
18-
import { Toc } from './Toc'
19-
import { TocMobile } from './TocMobile'
20-
21-
type DocProps = {
22-
title: string
23-
content: string
24-
repo: string
25-
branch: string
26-
filePath: string
27-
shouldRenderToc?: boolean
28-
colorFrom?: string
29-
colorTo?: string
30-
}
31-
32-
function DocContent({
33-
title,
34-
content,
35-
repo,
36-
branch,
37-
filePath,
38-
shouldRenderToc = false,
39-
colorFrom,
40-
colorTo,
41-
}: DocProps) {
42-
const { headings } = useMarkdownHeadings()
43-
44-
const isTocVisible = shouldRenderToc && headings && headings.length > 1
45-
46-
const markdownContainerRef = React.useRef<HTMLDivElement>(null)
47-
const [activeHeadings, setActiveHeadings] = React.useState<Array<string>>([])
48-
49-
const headingElementRefs = React.useRef<
50-
Record<string, IntersectionObserverEntry>
51-
>({})
52-
53-
// Try to get the width toggle context from DocsLayout
54-
let isFullWidth = false
55-
let setIsFullWidth: ((isFullWidth: boolean) => void) | undefined
56-
57-
try {
58-
const context = useWidthToggle()
59-
isFullWidth = context.isFullWidth
60-
setIsFullWidth = context.setIsFullWidth
61-
} catch {
62-
// Context not available, that's okay
63-
}
64-
65-
React.useEffect(() => {
66-
const callback = (headingsList: Array<IntersectionObserverEntry>) => {
67-
headingElementRefs.current = headingsList.reduce(
68-
(map, headingElement) => {
69-
map[headingElement.target.id] = headingElement
70-
return map
71-
},
72-
headingElementRefs.current
73-
)
74-
75-
const visibleHeadings: Array<IntersectionObserverEntry> = []
76-
Object.keys(headingElementRefs.current).forEach((key) => {
77-
const headingElement = headingElementRefs.current[key]
78-
if (headingElement.isIntersecting) {
79-
visibleHeadings.push(headingElement)
80-
}
81-
})
82-
83-
if (visibleHeadings.length >= 1) {
84-
setActiveHeadings(visibleHeadings.map((h) => h.target.id))
85-
}
86-
}
87-
88-
const observer = new IntersectionObserver(callback, {
89-
rootMargin: '0px',
90-
threshold: 0.2,
91-
})
92-
93-
const headingElements = Array.from(
94-
markdownContainerRef.current?.querySelectorAll(
95-
'h2[id], h3[id], h4[id], h5[id], h6[id]'
96-
) ?? []
97-
)
98-
headingElements.forEach((el) => observer.observe(el))
99-
100-
return () => observer.disconnect()
101-
}, [headings])
102-
103-
return (
104-
<div className="flex-1 min-h-0 flex flex-col">
105-
{shouldRenderToc ? <TocMobile headings={headings} /> : null}
106-
<AdGate>
107-
<div className="mb-2 xl:mb-4 max-w-full">
108-
<GamHeader />
109-
</div>
110-
</AdGate>
111-
<div
112-
className={twMerge(
113-
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
114-
isTocVisible && 'max-w-full',
115-
shouldRenderToc && 'lg:pt-0'
116-
)}
117-
>
118-
<div
119-
className={twMerge(
120-
'flex overflow-auto flex-col w-full p-2 lg:p-4 xl:p-6',
121-
isTocVisible && 'pr-0!'
122-
)}
123-
>
124-
{title ? (
125-
<div className="flex items-center justify-between gap-4 pr-2 lg:pr-4">
126-
<DocTitle>{title}</DocTitle>
127-
<div className="flex items-center gap-4">
128-
<CopyMarkdownButton
129-
repo={repo}
130-
branch={branch}
131-
filePath={filePath}
132-
/>
133-
134-
{setIsFullWidth && (
135-
<button
136-
onClick={() => setIsFullWidth(!isFullWidth)}
137-
className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
138-
title={isFullWidth ? 'Constrain width' : 'Expand width'}
139-
>
140-
{isFullWidth ? (
141-
<BsArrowsCollapseVertical className="w-4 h-4" />
142-
) : (
143-
<BsArrowsExpandVertical className="w-4 h-4" />
144-
)}
145-
</button>
146-
)}
147-
</div>
148-
</div>
149-
) : null}
150-
<div className="h-4" />
151-
<div className="h-px bg-gray-500 opacity-20" />
152-
<div className="h-4" />
153-
<div
154-
ref={markdownContainerRef}
155-
className={twMerge(
156-
'prose prose-gray dark:prose-invert max-w-none',
157-
'[font-size:14px]',
158-
isTocVisible && 'pr-2 lg:pr-4 xl:pr-6',
159-
'styled-markdown-content'
160-
)}
161-
>
162-
<Markdown rawContent={content} />
163-
</div>
164-
<div className="h-12" />
165-
<div className="w-full h-px bg-gray-500 opacity-30" />
166-
<div className="flex py-4 opacity-70">
167-
<a
168-
href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
169-
className="flex items-center gap-2"
170-
>
171-
<FaEdit /> Edit on GitHub
172-
</a>
173-
</div>
174-
<div className="h-24" />
175-
</div>
176-
177-
{isTocVisible && (
178-
<div className="border-l border-gray-500/20 max-w-32 lg:max-w-36 xl:max-w-44 2xl:max-w-52 w-full hidden lg:block transition-all">
179-
<Toc
180-
headings={headings}
181-
activeHeadings={activeHeadings}
182-
colorFrom={colorFrom}
183-
colorTo={colorTo}
184-
/>
185-
</div>
186-
)}
187-
</div>
188-
</div>
189-
)
190-
}
191-
192-
export function Doc(props: DocProps) {
193-
return (
194-
<MarkdownHeadingProvider>
195-
<DocContent {...props} />
196-
</MarkdownHeadingProvider>
197-
)
198-
}
1+
import * as React from 'react'
2+
import {
3+
BsArrowsCollapseVertical,
4+
BsArrowsExpandVertical,
5+
} from 'react-icons/bs'
6+
import { FaEdit } from 'react-icons/fa'
7+
import { twMerge } from 'tailwind-merge'
8+
import { useWidthToggle } from '~/components/DocsLayout'
9+
import { DocTitle } from '~/components/DocTitle'
10+
import { Markdown } from '~/components/Markdown'
11+
import {
12+
MarkdownHeadingProvider,
13+
useMarkdownHeadings,
14+
} from '~/components/MarkdownHeadingContext'
15+
import { AdGate } from '~/contexts/AdsContext'
16+
import { CopyMarkdownButton } from './CopyMarkdownButton'
17+
import { GamHeader, GamLeader } from './Gam'
18+
import { Toc } from './Toc'
19+
import { TocMobile } from './TocMobile'
20+
21+
type DocProps = {
22+
title: string
23+
content: string
24+
repo: string
25+
branch: string
26+
filePath: string
27+
shouldRenderToc?: boolean
28+
colorFrom?: string
29+
colorTo?: string
30+
}
31+
32+
function DocContent({
33+
title,
34+
content,
35+
repo,
36+
branch,
37+
filePath,
38+
shouldRenderToc = false,
39+
colorFrom,
40+
colorTo,
41+
}: DocProps) {
42+
const { headings } = useMarkdownHeadings()
43+
44+
const isTocVisible = shouldRenderToc && headings && headings.length > 1
45+
46+
const markdownContainerRef = React.useRef<HTMLDivElement>(null)
47+
const [activeHeadings, setActiveHeadings] = React.useState<Array<string>>([])
48+
49+
const headingElementRefs = React.useRef<
50+
Record<string, IntersectionObserverEntry>
51+
>({})
52+
53+
// Try to get the width toggle context from DocsLayout
54+
let isFullWidth = false
55+
let setIsFullWidth: ((isFullWidth: boolean) => void) | undefined
56+
57+
try {
58+
const context = useWidthToggle()
59+
isFullWidth = context.isFullWidth
60+
setIsFullWidth = context.setIsFullWidth
61+
} catch {
62+
// Context not available, that's okay
63+
}
64+
65+
React.useEffect(() => {
66+
const callback = (headingsList: Array<IntersectionObserverEntry>) => {
67+
headingElementRefs.current = headingsList.reduce(
68+
(map, headingElement) => {
69+
map[headingElement.target.id] = headingElement
70+
return map
71+
},
72+
headingElementRefs.current
73+
)
74+
75+
const visibleHeadings: Array<IntersectionObserverEntry> = []
76+
Object.keys(headingElementRefs.current).forEach((key) => {
77+
const headingElement = headingElementRefs.current[key]
78+
if (headingElement.isIntersecting) {
79+
visibleHeadings.push(headingElement)
80+
}
81+
})
82+
83+
if (visibleHeadings.length >= 1) {
84+
setActiveHeadings(visibleHeadings.map((h) => h.target.id))
85+
}
86+
}
87+
88+
const observer = new IntersectionObserver(callback, {
89+
rootMargin: '0px',
90+
threshold: 0.2,
91+
})
92+
93+
const headingElements = Array.from(
94+
markdownContainerRef.current?.querySelectorAll(
95+
'h2[id], h3[id], h4[id], h5[id], h6[id]'
96+
) ?? []
97+
)
98+
headingElements.forEach((el) => observer.observe(el))
99+
100+
return () => observer.disconnect()
101+
}, [headings])
102+
103+
return (
104+
<div className="flex-1 min-h-0 flex flex-col">
105+
{shouldRenderToc ? <TocMobile headings={headings} /> : null}
106+
<AdGate>
107+
<div className="mb-2 xl:mb-4 max-w-full">
108+
<GamHeader />
109+
</div>
110+
</AdGate>
111+
<div
112+
className={twMerge(
113+
'w-full flex bg-white/70 dark:bg-black/40 mx-auto rounded-xl max-w-[936px]',
114+
isTocVisible && 'max-w-full',
115+
shouldRenderToc && 'lg:pt-0'
116+
)}
117+
>
118+
<div
119+
className={twMerge(
120+
'flex overflow-auto flex-col w-full p-2 lg:p-4 xl:p-6',
121+
isTocVisible && 'pr-0!'
122+
)}
123+
>
124+
{title ? (
125+
<div className="flex items-center justify-between gap-4 pr-2 lg:pr-4">
126+
<DocTitle>{title}</DocTitle>
127+
<div className="flex items-center gap-4">
128+
<CopyMarkdownButton
129+
repo={repo}
130+
branch={branch}
131+
filePath={filePath}
132+
/>
133+
134+
{setIsFullWidth && (
135+
<button
136+
onClick={() => setIsFullWidth(!isFullWidth)}
137+
className="p-2 mr-4 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors shrink-0 hidden [@media(min-width:1800px)]:inline-flex"
138+
title={isFullWidth ? 'Constrain width' : 'Expand width'}
139+
>
140+
{isFullWidth ? (
141+
<BsArrowsCollapseVertical className="w-4 h-4" />
142+
) : (
143+
<BsArrowsExpandVertical className="w-4 h-4" />
144+
)}
145+
</button>
146+
)}
147+
</div>
148+
</div>
149+
) : null}
150+
<div className="h-4" />
151+
<div className="h-px bg-gray-500 opacity-20" />
152+
<div className="h-4" />
153+
<div
154+
ref={markdownContainerRef}
155+
className={twMerge(
156+
'prose prose-gray dark:prose-invert max-w-none',
157+
'[font-size:14px]',
158+
isTocVisible && 'pr-2 lg:pr-4 xl:pr-6',
159+
'styled-markdown-content'
160+
)}
161+
>
162+
<Markdown rawContent={content} />
163+
</div>
164+
<div className="h-12" />
165+
<div className="w-full h-px bg-gray-500 opacity-30" />
166+
<div className="flex py-4 opacity-70">
167+
<a
168+
href={`https://github.com/${repo}/edit/${branch}/${filePath}`}
169+
className="flex items-center gap-2"
170+
>
171+
<FaEdit /> Edit on GitHub
172+
</a>
173+
</div>
174+
<div className="h-24" />
175+
</div>
176+
177+
{isTocVisible && (
178+
<div className="border-l border-gray-500/20 max-w-32 lg:max-w-36 xl:max-w-44 2xl:max-w-52 w-full hidden lg:block transition-all">
179+
<Toc
180+
headings={headings}
181+
activeHeadings={activeHeadings}
182+
colorFrom={colorFrom}
183+
colorTo={colorTo}
184+
/>
185+
</div>
186+
)}
187+
</div>
188+
</div>
189+
)
190+
}
191+
192+
export function Doc(props: DocProps) {
193+
return (
194+
<MarkdownHeadingProvider>
195+
<DocContent {...props} />
196+
</MarkdownHeadingProvider>
197+
)
198+
}

0 commit comments

Comments
 (0)