Skip to content

Commit eac8c88

Browse files
benfacebenface
authored
Add Edit Page link (graphprotocol#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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@graphprotocol/docs-reviewers
1+
* @graphprotocol/docs-reviewers

‎components/Blockquote.tsx

+2-2
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

+2-2
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

+1-1
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

+2-2
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

+3-3
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

+21-8
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

+36
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

+18-10
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

+1-1
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 =

‎components/Image.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ImgHTMLAttributes } from 'react'
22

3-
export type ImageProps = ImgHTMLAttributes<HTMLImageElement>
3+
export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>
44

55
export const Image = ({ src, ...props }: ImageProps) => {
66
// If the URL is internal, automatically prepend the base path

‎components/Link.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AnchorHTMLAttributes } from 'react'
22
import NextLink, { LinkProps as NextLinkProps } from 'next/link'
3-
import { useTheme } from '@edgeandnode/components'
3+
import { useTheme, buildShadow } from '@edgeandnode/components'
44

55
import { Locale } from '@/locale'
66
import { useLocale } from '@/hooks'
@@ -72,7 +72,7 @@ export const LinkInline = (props: LinkProps) => {
7272
backgroundImage: `linear-gradient(to bottom, ${theme.colors!.Purple}, ${theme.colors!.Purple})`,
7373
backgroundPosition: '0% 95%',
7474
color: 'White',
75-
textShadow: `${theme.colors!.Purple64} 0px 0px 16px`,
75+
textShadow: buildShadow('S'),
7676
},
7777
transition: 'background-position 200ms, color 200ms, text-shadow 200ms',
7878
}}

‎components/NavTree.tsx

+8-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { HTMLAttributes, createContext, Context, useState, useContext } from 'react'
22
import * as Collapsible from '@radix-ui/react-collapsible'
3-
import { Flex, Spacing, Opacities } from '@edgeandnode/components'
3+
import { Flex, Spacing, Opacity } from '@edgeandnode/components'
44
import { keyframes } from '@emotion/react'
55
import { SxProp } from 'theme-ui'
66

@@ -37,7 +37,7 @@ export type NavTreeDividerProps = Omit<HTMLAttributes<HTMLElement>, 'children'>
3737
const NavTree = ({ children, textProps, ...props }: NavTreeProps) => {
3838
return (
3939
<Flex.Column {...props}>
40-
<Text weight="SemiBold" size="14px" as="ul" role="list" {...textProps}>
40+
<Text weight="Semibold" size="14px" as="ul" role="list" {...textProps}>
4141
{children}
4242
</Text>
4343
</Flex.Column>
@@ -64,8 +64,8 @@ const NavTreeItem = ({
6464
display: 'block',
6565
px: Spacing.L_XL,
6666
py: Spacing.M_L,
67-
opacity: !active ? Opacities[64] : undefined,
68-
'&:hover': { opacity: Opacities[100] },
67+
opacity: !active ? Opacity['64%'] : undefined,
68+
'&:hover': { opacity: Opacity['100%'] },
6969
transition: 'opacity 200ms',
7070
...linkSx,
7171
}}
@@ -118,19 +118,18 @@ const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGr
118118
width: '100%',
119119
px: Spacing.L_XL,
120120
py: Spacing.M_L,
121-
opacity: context.open || context.active ? Opacities[100] : Opacities[64],
122-
'&:hover': { opacity: Opacities[100] },
121+
opacity: context.open || context.active ? Opacity['100%'] : Opacity['64%'],
122+
'&:hover': { opacity: Opacity['100%'] },
123123
transition: 'opacity 200ms',
124124
...buttonSx,
125125
}}
126126
{...buttonOtherProps}
127127
>
128-
<Flex.Row as="span" justify="space-between" align="center">
128+
<Flex.Row as="span" justify="space-between" align="center" gap={Spacing.L}>
129129
<span>{children}</span>
130130
<Flex.Column
131131
as="span"
132132
sx={{
133-
ml: Spacing.L,
134133
flex: 'none',
135134
transform: context.open ? 'rotate(90deg)' : 'rotate(0deg)',
136135
transition: 'transform 200ms',
@@ -162,13 +161,7 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
162161
}
163162

164163
const NavTreeDivider = (props: NavTreeDividerProps) => {
165-
return (
166-
<li
167-
aria-hidden="true"
168-
sx={{ my: Spacing.M, borderTop: (theme) => `1px solid ${theme.colors!.White16}` }}
169-
{...props}
170-
/>
171-
)
164+
return <li aria-hidden="true" sx={{ my: Spacing.M, borderTop: 'White16' }} {...props} />
172165
}
173166

174167
NavTree.Item = NavTreeItem

‎components/Table.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { HTMLAttributes } from 'react'
2-
import { Spacing, FontWeight, Opacities, darkModeColors } from '@edgeandnode/components'
2+
import { Spacing, FontWeight, Opacity, darkModeColors } from '@edgeandnode/components'
33
import Color from 'color'
44

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

77
// Using `color` to get an opaque version of `White16` for the table's borders, since a color with an alpha channel is ugly due to borders overlapping
88
const WhiteColor = Color(darkModeColors.White)
99
const MidnightColor = Color(darkModeColors.Midnight)
10-
const BorderColor = MidnightColor.mix(WhiteColor, Opacities[16])
10+
const BorderColor = MidnightColor.mix(WhiteColor, Opacity['16%'])
1111

1212
export type TableProps = Omit<HTMLAttributes<HTMLTableElement>, 'color'>
1313

@@ -23,7 +23,7 @@ export const Table = ({ children, ...props }: TableProps) => {
2323
},
2424
'& th': {
2525
bg: 'White4',
26-
fontWeight: FontWeight.SemiBold,
26+
fontWeight: FontWeight.Semibold,
2727
textAlign: 'center',
2828
},
2929
}}

0 commit comments

Comments
 (0)