Skip to content

Commit eac8c88

Browse files
benfacebenface
authored
Add Edit Page link (#22)
* Display language dropdown * Update dependencies * Manually translate nav item groups * Fix CODEOWNERS for real * Update dependencies + native language names in dropdown * Style tweaks to right nav and language switcher * Color tweaks * Add EditPageLink component * Comment out LocaleDropdown
1 parent a6163eb commit eac8c88

36 files changed

+1448
-2222
lines changed

‎CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@graphprotocol/docs-reviewers
1+
* @graphprotocol/docs-reviewers

‎components/Blockquote.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HTMLAttributes } from 'react'
2-
import { Spacing } from '@edgeandnode/components'
2+
import { Spacing, buildBorder } from '@edgeandnode/components'
33

44
import { Text, TextProps } from '@/components'
55

@@ -12,7 +12,7 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
1212
sx={{
1313
my: Spacing.XL,
1414
p: Spacing.L_XL,
15-
borderLeft: (theme) => `4px solid ${theme.colors!.Purple}`,
15+
borderLeft: buildBorder('Purple', '4px' as any),
1616
bg: 'Purple8',
1717
'& > p': {
1818
my: 0,

‎components/Code.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const CodeBlock = ({ children, ...props }: CodeBlockProps) => {
129129
overflowX: 'auto',
130130
p: Spacing.L,
131131
borderRadius: BorderRadius.M,
132-
border: (theme) => `1px solid ${theme.colors!.White4}`,
132+
border: 'White4',
133133
bg: 'White4',
134134
fontSize: '16px',
135135
lineHeight: '24px',
@@ -159,7 +159,7 @@ export const CodeInline = ({ children, ...props }: CodeInlineProps) => {
159159
px: '6px',
160160
py: Spacing.S,
161161
borderRadius: BorderRadius.S,
162-
border: (theme) => `1px solid ${theme.colors!.White4}`,
162+
border: 'White4',
163163
bg: 'White4',
164164
fontSize: '0.75em',
165165
}}

‎components/Diamond.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react'
55
export type DiamondProps = {
66
size?: number
77
outline?: boolean
8-
} & HTMLAttributes<HTMLSpanElement>
8+
} & Omit<HTMLAttributes<HTMLElement>, 'children'>
99

1010
export const Diamond = ({ size = 5, outline = false, ...props }: DiamondProps) => {
1111
return (

‎components/Difficulty.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ export const Difficulty = ({ level }: { level: string }) => {
33
<div
44
sx={{
55
padding: '15px 0px 18px',
6-
borderTop: (theme) => `1px solid ${theme.colors!.White16}`,
7-
borderBottom: (theme) => `1px solid ${theme.colors!.White16}`,
6+
borderTop: 'White16',
7+
borderBottom: 'White16',
88
display: 'flex',
99
alignItems: 'center',
1010
gap: '12px',

‎components/Divider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import { Spacing } from '@edgeandnode/components'
55

66
export type DividerProps = {
77
withVerticalMargin?: boolean
8-
} & HTMLAttributes<HTMLHRElement>
8+
} & Omit<HTMLAttributes<HTMLHRElement>, 'children'>
99

1010
export const Divider = ({ withVerticalMargin = false, ...props }: DividerProps) => {
1111
return (
1212
<hr
1313
sx={{
1414
margin: `${withVerticalMargin ? Spacing.XL : '0'} 8px`,
15-
borderTop: (theme) => `1px solid ${theme.colors!.White16}`,
15+
borderTop: 'White16',
1616
'&::before, &::after': {
1717
content: `''`,
1818
position: 'absolute',
1919
top: '-3px',
2020
display: 'block',
2121
width: '5px',
2222
height: '5px',
23-
border: (theme) => `1px solid ${theme.colors!.White48}`,
23+
border: 'White48',
2424
transform: 'rotate(45deg)',
2525
},
2626
'&::before': {

‎components/Dropdown.tsx‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { HTMLAttributes } from 'react'
22
import * as Popover from '@radix-ui/react-popover'
3-
import { Flex, Spacing, BorderRadius, Opacities } from '@edgeandnode/components'
3+
import { Flex, Spacing, BorderRadius, Opacity, useUniqueId } from '@edgeandnode/components'
44

55
import { Text, Diamond } from '@/components'
66

@@ -30,33 +30,46 @@ const DropdownMenu = ({ children, ...props }: DropdownMenuProps) => {
3030
sx={{
3131
padding: Spacing.L_XL,
3232
borderRadius: BorderRadius.S,
33-
border: (theme) => `1px solid ${theme.colors!.White4}`,
33+
border: 'White4',
3434
background: (theme) => theme.colors!.MidnightGradient,
3535
}}
3636
{...props}
3737
>
38-
<Flex.Column as="ul" role="list">
38+
<Flex.Column as="ul" role="list" tabIndex={0} sx={{ '&:focus': { outline: 'none' } }}>
3939
{children}
4040
</Flex.Column>
4141
</Popover.Content>
4242
)
4343
}
4444

4545
const DropdownMenuItem = ({ active = false, onSelect, children, ...props }: DropdownMenuItemProps) => {
46+
const buttonClass = useUniqueId('class')
47+
4648
return (
4749
<li {...props}>
4850
<Popover.Close
51+
className={buttonClass}
4952
sx={{
53+
width: '100%',
5054
px: Spacing.XL,
5155
py: Spacing.M,
52-
opacity: Opacities[64],
53-
'&:hover': { opacity: Opacities[100] },
54-
'&:focus': { outline: 'none', textDecoration: 'underline' },
55-
transition: 'opacity 200ms',
56+
color: 'White88',
57+
'&:hover, &:focus': { color: 'White', outline: 'none' },
58+
transition: 'color 200ms',
5659
}}
5760
onClick={onSelect}
5861
>
59-
{active && <Diamond sx={{ position: 'absolute', left: '12px', top: 0, bottom: 0, my: 'auto' }} />}
62+
<Diamond
63+
sx={{
64+
position: 'absolute',
65+
left: '12px',
66+
top: 0,
67+
bottom: 0,
68+
my: 'auto',
69+
opacity: active ? Opacity['100%'] : Opacity['0%'],
70+
[`.${buttonClass}:hover &, .${buttonClass}:focus &`]: { opacity: active ? undefined : Opacity['32%'] },
71+
}}
72+
/>
6073
<Text size="16px">{children}</Text>
6174
</Popover.Close>
6275
</li>

‎components/EditPageLink.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { HTMLAttributes } from 'react'
2+
import { Spacing, BorderRadius, Flex, Icon, buildShadow } from '@edgeandnode/components'
3+
4+
import { Text, Link } from '@/components'
5+
import { useLocale } from '@/hooks'
6+
7+
export type EditPageLinkProps = {
8+
mobile?: boolean
9+
} & Omit<HTMLAttributes<HTMLElement>, 'children'>
10+
11+
export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
12+
const { currentLocale, currentPathWithoutLocale } = useLocale()
13+
14+
return (
15+
<Link
16+
href={`https://github.com/graphprotocol/docs/blob/main/pages/${currentLocale}${currentPathWithoutLocale}${
17+
currentPathWithoutLocale.endsWith('/') ? 'index' : ''
18+
}.mdx`}
19+
target="_blank"
20+
sx={{
21+
display: 'block',
22+
py: Spacing.S,
23+
borderRadius: BorderRadius.S,
24+
'&:hover': { color: 'White', textShadow: buildShadow('M') },
25+
transition: 'color 200ms, text-shadow 200ms',
26+
}}
27+
>
28+
<Flex.Row as="span" align="center" gap={Spacing.M}>
29+
<Icon.LogoGitHub />
30+
<Text weight={mobile ? 'Semibold' : 'Normal'} size={mobile ? '16px' : '14px'}>
31+
Edit page
32+
</Text>
33+
</Flex.Row>
34+
</Link>
35+
)
36+
}

‎components/Heading.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { HTMLAttributes, useContext } from 'react'
2-
import { useUniqueId, Spacing, Glow } from '@edgeandnode/components'
2+
import { Spacing, Opacity, buildShadow, useUniqueId } from '@edgeandnode/components'
33
import classnames from 'classnames'
44
import { useInView } from 'react-intersection-observer'
55
import { useDebounce } from 'react-use'
@@ -34,7 +34,7 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
3434
innerRef={ref}
3535
as={`h${level}`}
3636
id={id}
37-
weight="SemiBold"
37+
weight="Semibold"
3838
color="White"
3939
className={classnames(rootClass, className)}
4040
sx={{ whiteSpace: 'nowrap' }}
@@ -45,8 +45,8 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
4545
<span
4646
sx={{
4747
ml: '0.35em',
48-
opacity: 0,
49-
[`.${rootClass}:hover &`]: { opacity: 1 },
48+
opacity: Opacity['0%'],
49+
[`.${rootClass}:hover &`]: { opacity: Opacity['100%'] },
5050
transition: 'opacity 200ms',
5151
}}
5252
>
@@ -58,7 +58,7 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
5858
}
5959

6060
export const H1 = (props: HeadingSpecificProps) => {
61-
return <Heading level={1} size="48px" sx={{ mb: Spacing.L, textShadow: Glow.L }} {...props} />
61+
return <Heading level={1} size="48px" sx={{ mb: Spacing.L, textShadow: buildShadow('L') }} {...props} />
6262
}
6363

6464
export const H2 = (props: HeadingSpecificProps) => {
@@ -69,25 +69,33 @@ export const H2 = (props: HeadingSpecificProps) => {
6969
sx={{
7070
mt: Spacing.XL_XXL,
7171
mb: Spacing.L_XL,
72-
textShadow: Glow.M,
72+
textShadow: buildShadow('M'),
7373
}}
7474
{...props}
7575
/>
7676
)
7777
}
7878

7979
export const H3 = (props: HeadingSpecificProps) => {
80-
return <Heading level={3} size="24px" sx={{ mt: Spacing.XL, mb: Spacing.L_XL, textShadow: Glow.M }} {...props} />
80+
return (
81+
<Heading level={3} size="24px" sx={{ mt: Spacing.XL, mb: Spacing.L_XL, textShadow: buildShadow('M') }} {...props} />
82+
)
8183
}
8284

8385
export const H4 = (props: HeadingSpecificProps) => {
84-
return <Heading level={4} size="20px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
86+
return (
87+
<Heading level={4} size="20px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
88+
)
8589
}
8690

8791
export const H5 = (props: HeadingSpecificProps) => {
88-
return <Heading level={5} size="18px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
92+
return (
93+
<Heading level={5} size="18px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
94+
)
8995
}
9096

9197
export const H6 = (props: HeadingSpecificProps) => {
92-
return <Heading level={6} size="16px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
98+
return (
99+
<Heading level={6} size="16px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
100+
)
93101
}

‎components/Icon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export type IconProps = {
77
icon: keyof typeof Icons | ElementType
88
size?: number | string
99
direction?: 'right' | 'down' | 'left' | 'up'
10-
} & HTMLAttributes<HTMLElement>
10+
} & Omit<HTMLAttributes<HTMLElement>, 'children'>
1111

1212
export const Icon = ({ icon, size = '1em', direction = 'right', ...props }: IconProps) => {
1313
const IconSvg =

0 commit comments

Comments
 (0)