Skip to content

Commit 1437d84

Browse files
benfacebenface
authored
Use GDS components for List, Link, and Code + misc. fixes and improvements (#453)
* Use GDS components for `List`, `Link`, and `Code` + misc. fixes and improvements * Use released versions of `@edgeandnode/gds` and `@edgeandnode/organisms` * Comment out `NPSForm` for now * Remove outdated comment
1 parent ca0bf64 commit 1437d84

25 files changed

+1010
-1029
lines changed

‎algolia-crawler.config.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ new Crawler({
1919
indexName: 'thegraph-docs',
2020
pathsToMatch: ['https://thegraph.com/docs/**'],
2121
recordExtractor: ({ helpers }) => {
22-
return helpers.docsearch({
22+
const data = helpers.docsearch({
2323
recordProps: {
2424
lvl0: {
2525
selectors: '.graph-docs-current-group',
@@ -34,6 +34,15 @@ new Crawler({
3434
content: '.graph-docs-content p, .graph-docs-content li',
3535
},
3636
})
37+
// See https://github.com/algolia/docsearch/issues/1723
38+
data.forEach((record) => {
39+
Object.entries(record.hierarchy)
40+
.filter(([_level, content]) => content)
41+
.forEach(([level, content]) => {
42+
record.hierarchy[level] = content.replaceAll('&lt;', '<').replaceAll('&gt;', '>').replaceAll('&amp;', '&')
43+
})
44+
})
45+
return data
3746
},
3847
},
3948
],

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
},
2424
"devDependencies": {
2525
"@edgeandnode/eslint-config": "^1.3.5",
26-
"eslint": "^8.45.0",
26+
"eslint": "^8.46.0",
2727
"eslint-plugin-mdx": "^2.1.0",
2828
"husky": "^8.0.3",
2929
"lint-staged": "^13.2.3",
@@ -34,7 +34,7 @@
3434
"remark-lint-heading-increment": "^3.1.2",
3535
"remark-lint-no-heading-punctuation": "^3.1.2",
3636
"remark-lint-restrict-elements": "workspace:*",
37-
"turbo": "^1.10.9",
37+
"turbo": "^1.10.12",
3838
"typescript": "^5.1.6"
3939
},
4040
"lint-staged": {

‎packages/nextra-theme/package.json‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
"typecheck": "tsc --noEmit"
2626
},
2727
"peerDependencies": {
28-
"@edgeandnode/gds": "^2.7.0",
29-
"@edgeandnode/organisms": "^2.7.0",
28+
"@edgeandnode/gds": "^2.8.0",
29+
"@edgeandnode/organisms": "^2.9.0",
3030
"@emotion/react": "^11.10.6",
3131
"next": "^13.4.5",
3232
"next-seo": "^5.15.0",
@@ -39,18 +39,17 @@
3939
"@radix-ui/react-collapsible": "^1.0.3",
4040
"@radix-ui/react-visually-hidden": "^1.0.3",
4141
"lodash": "^4.17.21",
42-
"prism-react-renderer": "^1.3.5",
4342
"react-intersection-observer": "^9.5.2",
4443
"react-use": "^17.4.0"
4544
},
4645
"devDependencies": {
47-
"@edgeandnode/gds": "^2.7.1",
48-
"@edgeandnode/organisms": "^2.8.1",
46+
"@edgeandnode/gds": "^2.8.0",
47+
"@edgeandnode/organisms": "^2.9.0",
4948
"@emotion/react": "^11.11.1",
50-
"@types/lodash": "^4.14.195",
51-
"@types/react": "^18.2.15",
49+
"@types/lodash": "^4.14.196",
50+
"@types/react": "^18.2.17",
5251
"@types/react-dom": "^18.2.7",
53-
"next": "^13.4.11",
52+
"next": "^13.4.12",
5453
"next-seo": "^6.1.0",
5554
"nextra": "2.7.1",
5655
"react": "^18.2.0",

‎packages/nextra-theme/src/components/Blockquote.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
import { HTMLAttributes } from 'react'
1+
import { BlockquoteHTMLAttributes } from 'react'
22

33
import { buildBorder, Spacing, Text, TextProps } from '@edgeandnode/gds'
44

5-
export type BlockquoteProps = Omit<TextProps & HTMLAttributes<HTMLQuoteElement>, 'color'>
5+
export type BlockquoteProps = Omit<TextProps & BlockquoteHTMLAttributes<HTMLQuoteElement>, 'color'>
66

77
export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
88
return (
99
<Text
1010
as="blockquote"
1111
sx={{
1212
my: Spacing['32px'],
13+
'/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ &:nth-child(1 of :not(style))':
14+
{ mt: 0 },
15+
'/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ &:nth-last-child(1 of :not(style))':
16+
{ mb: 0 },
1317
p: Spacing['24px'],
1418
borderInlineStart: buildBorder('Purple', '4px'),
1519
bg: 'Purple8',

‎packages/nextra-theme/src/components/Code.tsx‎

Lines changed: 33 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,49 @@
1-
import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer'
2-
import { HTMLAttributes } from 'react'
1+
import { HTMLAttributes, ReactNode } from 'react'
32

4-
import { BorderRadius, FontFamily, Spacing } from '@edgeandnode/gds'
3+
import { Code, Spacing } from '@edgeandnode/gds'
54

6-
export type CodeBlockProps = HTMLAttributes<HTMLPreElement>
7-
export type CodeInlineProps = HTMLAttributes<HTMLElement>
8-
9-
import theme from 'prism-react-renderer/themes/duotoneDark'
5+
export type CodeBlockProps = {
6+
children?:
7+
| ReactNode
8+
| {
9+
props: {
10+
children: string
11+
className?: string
12+
}
13+
}
14+
} & Omit<HTMLAttributes<HTMLPreElement>, 'children'>
1015

1116
export const CodeBlock = ({ children, ...props }: CodeBlockProps) => {
12-
const data = (
13-
children as {
14-
props: {
15-
children: string
16-
className?: string
17-
}
18-
}
19-
).props
20-
const code = data.children.trim()
21-
let language = data.className?.substring('language-'.length)
17+
const code =
18+
children && typeof children === 'object' && 'props' in children
19+
? children.props.children.trim()
20+
: (children as string)
21+
let language =
22+
children && typeof children === 'object' && 'props' in children
23+
? children.props.className?.substring('language-'.length)
24+
: null
2225

2326
if (!language || language === 'sh') {
2427
language = 'bash'
2528
}
2629

2730
return (
28-
<div sx={{ my: Spacing['24px'] }}>
29-
<Highlight {...defaultProps} code={code} language={language as Language} theme={theme}>
30-
{({ className, tokens, getLineProps, getTokenProps }) => (
31-
<pre
32-
className={className}
33-
sx={{
34-
overflowX: 'auto',
35-
p: Spacing['16px'],
36-
borderRadius: BorderRadius.M,
37-
border: 'White4',
38-
bg: 'White4',
39-
fontFamily: FontFamily.MONOSPACE,
40-
fontSize: '16px',
41-
lineHeight: '24px',
42-
}}
43-
{...props}
44-
>
45-
{tokens.map((line, i) => (
46-
// eslint-disable-next-line react/jsx-key
47-
<div {...getLineProps({ line, key: i })}>
48-
{line.map((token, key) => (
49-
// eslint-disable-next-line react/jsx-key
50-
<span {...getTokenProps({ token, key })} />
51-
))}
52-
</div>
53-
))}
54-
</pre>
55-
)}
56-
</Highlight>
57-
</div>
58-
)
59-
}
60-
61-
export const CodeInline = ({ children, ...props }: CodeInlineProps) => {
62-
return (
63-
<code
31+
<Code.Block
32+
language={language}
6433
sx={{
65-
px: Spacing['4px'],
66-
py: Spacing['2px'],
67-
borderRadius: BorderRadius.S,
68-
border: 'White4',
69-
bg: 'White4',
70-
fontFamily: FontFamily.MONOSPACE,
71-
fontSize: '0.75em',
34+
my: Spacing['24px'],
35+
'/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ &:nth-child(1 of :not(style))':
36+
{ mt: 0 },
37+
'/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ &:nth-last-child(1 of :not(style))':
38+
{ mb: 0 },
7239
}}
7340
{...props}
7441
>
75-
{children}
76-
</code>
42+
{code}
43+
</Code.Block>
7744
)
7845
}
46+
47+
export const CodeInline = ({ children, ...props }: HTMLAttributes<HTMLElement>) => {
48+
return <Code.Inline {...props}>{children as string}</Code.Inline>
49+
}

‎packages/nextra-theme/src/components/DocSearch.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,7 @@ export function DocSearch(props: DocSearchProps) {
6969
>
7070
<Icon.Search size="14px" title="" sx={{ flexShrink: 0 }} />
7171
<Text.P14 size="14px">{props.translations?.button?.buttonText ?? 'Search'}</Text.P14>
72-
{/* TODO: Remove `fontFamily: 'inherit'` when it's included in `@edgeandnode/gds`'s global styles */}
73-
<Text.P14
74-
as="kbd"
75-
size="14px"
76-
color="White48"
77-
sx={{ marginInlineStart: 'auto', px: Spacing['8px'], fontFamily: 'inherit' }}
78-
>
72+
<Text.P14 as="kbd" size="14px" color="White48" sx={{ marginInlineStart: 'auto', px: Spacing['8px'] }}>
7973
<abbr title="Command" sx={{ textDecoration: 'none' }}>
8074
⌘
8175
</abbr>

‎packages/nextra-theme/src/components/EditPageLink.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { HTMLAttributes, useContext } from 'react'
22

33
import {
44
BorderRadius,
5-
buildShadow,
65
buildTransition,
6+
ButtonOrLink,
77
Flex,
88
Icon,
99
Opacity,
@@ -12,7 +12,6 @@ import {
1212
useI18n,
1313
} from '@edgeandnode/gds'
1414

15-
import { Link } from '@/components'
1615
import { NavContext } from '@/layout/NavContext'
1716

1817
export type EditPageLinkProps = {
@@ -31,14 +30,14 @@ export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) =>
3130
['en', '[locale]'].includes(fileLocale) ? fileLocale : 'en'
3231
}/${filePathSegments.join('/')}`
3332
return (
34-
<Link
33+
<ButtonOrLink
3534
href={path}
3635
target="_blank"
3736
sx={{
3837
display: 'block',
3938
py: Spacing['4px'],
4039
borderRadius: BorderRadius.S,
41-
'&:hover': { color: 'White', textShadow: buildShadow('M') },
40+
'&:hover': { color: 'White' },
4241
transition: buildTransition(),
4342
}}
4443
{...props}
@@ -56,6 +55,6 @@ export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) =>
5655
}}
5756
/>
5857
</Flex.Row>
59-
</Link>
58+
</ButtonOrLink>
6059
)
6160
}

‎packages/nextra-theme/src/components/Heading.tsx‎

Lines changed: 12 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { HTMLAttributes, useContext } from 'react'
33
import { useInView } from 'react-intersection-observer'
44
import { useDebounce } from 'react-use'
55

6-
import { buildShadow, buildTransition, Opacity, Spacing, Text, TextProps, useI18n } from '@edgeandnode/gds'
6+
import { buildTransition, Opacity, Spacing, Text, TextProps, useI18n } from '@edgeandnode/gds'
77

88
import { LinkInline } from '@/components'
99
import { DocumentContext } from '@/layout/DocumentContext'
@@ -12,8 +12,6 @@ export type HeadingProps = TextProps & {
1212
level: 1 | 2 | 3 | 4 | 5 | 6
1313
} & HTMLAttributes<HTMLHeadingElement>
1414

15-
export type HeadingSpecificProps = Omit<HeadingProps, 'level' | 'color'>
16-
1715
const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
1816
const { markOutlineItem } = useContext(DocumentContext)!
1917
const { ref, inView: inOrAboveView } = useInView({
@@ -31,8 +29,8 @@ const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
3129
const { t } = useI18n<any>()
3230

3331
return (
34-
<Text ref={ref} as={`h${level}`} id={id} weight="SEMIBOLD" color="White" sx={{ whiteSpace: 'nowrap' }} {...props}>
35-
<span sx={{ whiteSpace: 'normal' }}>{children}</span>
32+
<Text ref={ref} as={`h${level}`} id={id} weight="SEMIBOLD" color="White" {...props}>
33+
{children}
3634
{id ? (
3735
<span
3836
sx={{
@@ -42,6 +40,8 @@ const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
4240
transition: buildTransition('OPACITY'),
4341
}}
4442
>
43+
{/* Non-breaking invisible space, to prevent a line break between the `#` and the previous word */}
44+
&#8288;
4545
<LinkInline href={`#${id}`}>
4646
<span aria-hidden="true">#</span>
4747
<VisuallyHidden.Root>{t('global.linkToThisSection')}</VisuallyHidden.Root>
@@ -52,8 +52,10 @@ const BaseHeading = ({ level, id, children, ...props }: HeadingProps) => {
5252
)
5353
}
5454

55+
export type HeadingSpecificProps = Omit<HeadingProps, 'level' | 'color'>
56+
5557
const H1 = (props: HeadingSpecificProps) => {
56-
return <BaseHeading level={1} size="48px" sx={{ mb: Spacing['16px'], textShadow: buildShadow('L') }} {...props} />
58+
return <BaseHeading level={1} size="48px" sx={{ mb: Spacing['16px'] }} {...props} />
5759
}
5860

5961
const H2 = (props: HeadingSpecificProps) => {
@@ -64,55 +66,26 @@ const H2 = (props: HeadingSpecificProps) => {
6466
sx={{
6567
mt: Spacing['48px'],
6668
mb: Spacing['24px'],
67-
textShadow: buildShadow('M'),
6869
}}
6970
{...props}
7071
/>
7172
)
7273
}
7374

7475
const H3 = (props: HeadingSpecificProps) => {
75-
return (
76-
<BaseHeading
77-
level={3}
78-
size="24px"
79-
sx={{ mt: Spacing['32px'], mb: Spacing['24px'], textShadow: buildShadow('M') }}
80-
{...props}
81-
/>
82-
)
76+
return <BaseHeading level={3} size="24px" sx={{ mt: Spacing['32px'], mb: Spacing['24px'] }} {...props} />
8377
}
8478

8579
const H4 = (props: HeadingSpecificProps) => {
86-
return (
87-
<BaseHeading
88-
level={4}
89-
size="20px"
90-
sx={{ mt: Spacing['32px'], mb: Spacing['16px'], textShadow: buildShadow('S') }}
91-
{...props}
92-
/>
93-
)
80+
return <BaseHeading level={4} size="20px" sx={{ mt: Spacing['32px'], mb: Spacing['16px'] }} {...props} />
9481
}
9582

9683
const H5 = (props: HeadingSpecificProps) => {
97-
return (
98-
<BaseHeading
99-
level={5}
100-
size="18px"
101-
sx={{ mt: Spacing['32px'], mb: Spacing['16px'], textShadow: buildShadow('S') }}
102-
{...props}
103-
/>
104-
)
84+
return <BaseHeading level={5} size="18px" sx={{ mt: Spacing['32px'], mb: Spacing['16px'] }} {...props} />
10585
}
10686

10787
const H6 = (props: HeadingSpecificProps) => {
108-
return (
109-
<BaseHeading
110-
level={6}
111-
size="16px"
112-
sx={{ mt: Spacing['32px'], mb: Spacing['16px'], textShadow: buildShadow('S') }}
113-
{...props}
114-
/>
115-
)
88+
return <BaseHeading level={6} size="16px" sx={{ mt: Spacing['32px'], mb: Spacing['16px'] }} {...props} />
11689
}
11790

11891
const Heading = Object.assign({}, BaseHeading, {

0 commit comments

Comments
 (0)