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

Author: benface

CODEOWNERS

@@ -1 +1 @@
-@graphprotocol/docs-reviewers
+* @graphprotocol/docs-reviewers

components/Blockquote.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react'
-import { Spacing } from '@edgeandnode/components'
+import { Spacing, buildBorder } from '@edgeandnode/components'
 
 import { Text, TextProps } from '@/components'
 
@@ -12,7 +12,7 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
       sx={{
         my: Spacing.XL,
         p: Spacing.L_XL,
-        borderLeft: (theme) => `4px solid ${theme.colors!.Purple}`,
+        borderLeft: buildBorder('Purple', '4px' as any),
         bg: 'Purple8',
         '& > p': {
           my: 0,

components/Code.tsx

@@ -129,7 +129,7 @@ export const CodeBlock = ({ children, ...props }: CodeBlockProps) => {
               overflowX: 'auto',
               p: Spacing.L,
               borderRadius: BorderRadius.M,
-              border: (theme) => `1px solid ${theme.colors!.White4}`,
+              border: 'White4',
               bg: 'White4',
               fontSize: '16px',
               lineHeight: '24px',
@@ -159,7 +159,7 @@ export const CodeInline = ({ children, ...props }: CodeInlineProps) => {
         px: '6px',
         py: Spacing.S,
         borderRadius: BorderRadius.S,
-        border: (theme) => `1px solid ${theme.colors!.White4}`,
+        border: 'White4',
         bg: 'White4',
         fontSize: '0.75em',
       }}

components/Diamond.tsx

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react'
 export type DiamondProps = {
   size?: number
   outline?: boolean
-} & HTMLAttributes<HTMLSpanElement>
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const Diamond = ({ size = 5, outline = false, ...props }: DiamondProps) => {
   return (

components/Difficulty.tsx

@@ -3,8 +3,8 @@ export const Difficulty = ({ level }: { level: string }) => {
     <div
       sx={{
         padding: '15px 0px 18px',
-        borderTop: (theme) => `1px solid ${theme.colors!.White16}`,
-        borderBottom: (theme) => `1px solid ${theme.colors!.White16}`,
+        borderTop: 'White16',
+        borderBottom: 'White16',
         display: 'flex',
         alignItems: 'center',
         gap: '12px',

components/Divider.tsx

@@ -5,22 +5,22 @@ import { Spacing } from '@edgeandnode/components'
 
 export type DividerProps = {
   withVerticalMargin?: boolean
-} & HTMLAttributes<HTMLHRElement>
+} & Omit<HTMLAttributes<HTMLHRElement>, 'children'>
 
 export const Divider = ({ withVerticalMargin = false, ...props }: DividerProps) => {
   return (
     <hr
       sx={{
         margin: `${withVerticalMargin ? Spacing.XL : '0'} 8px`,
-        borderTop: (theme) => `1px solid ${theme.colors!.White16}`,
+        borderTop: 'White16',
         '&::before, &::after': {
           content: `''`,
           position: 'absolute',
           top: '-3px',
           display: 'block',
           width: '5px',
           height: '5px',
-          border: (theme) => `1px solid ${theme.colors!.White48}`,
+          border: 'White48',
           transform: 'rotate(45deg)',
         },
         '&::before': {

components/Dropdown.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react'
 import * as Popover from '@radix-ui/react-popover'
-import { Flex, Spacing, BorderRadius, Opacities } from '@edgeandnode/components'
+import { Flex, Spacing, BorderRadius, Opacity, useUniqueId } from '@edgeandnode/components'
 
 import { Text, Diamond } from '@/components'
 
@@ -30,33 +30,46 @@ const DropdownMenu = ({ children, ...props }: DropdownMenuProps) => {
       sx={{
         padding: Spacing.L_XL,
         borderRadius: BorderRadius.S,
-        border: (theme) => `1px solid ${theme.colors!.White4}`,
+        border: 'White4',
         background: (theme) => theme.colors!.MidnightGradient,
       }}
       {...props}
     >
-      <Flex.Column as="ul" role="list">
+      <Flex.Column as="ul" role="list" tabIndex={0} sx={{ '&:focus': { outline: 'none' } }}>
         {children}
       </Flex.Column>
     </Popover.Content>
   )
 }
 
 const DropdownMenuItem = ({ active = false, onSelect, children, ...props }: DropdownMenuItemProps) => {
+  const buttonClass = useUniqueId('class')
+
   return (
     <li {...props}>
       <Popover.Close
+        className={buttonClass}
         sx={{
+          width: '100%',
           px: Spacing.XL,
           py: Spacing.M,
-          opacity: Opacities[64],
-          '&:hover': { opacity: Opacities[100] },
-          '&:focus': { outline: 'none', textDecoration: 'underline' },
-          transition: 'opacity 200ms',
+          color: 'White88',
+          '&:hover, &:focus': { color: 'White', outline: 'none' },
+          transition: 'color 200ms',
         }}
         onClick={onSelect}
       >
-        {active && <Diamond sx={{ position: 'absolute', left: '12px', top: 0, bottom: 0, my: 'auto' }} />}
+        <Diamond
+          sx={{
+            position: 'absolute',
+            left: '12px',
+            top: 0,
+            bottom: 0,
+            my: 'auto',
+            opacity: active ? Opacity['100%'] : Opacity['0%'],
+            [`.${buttonClass}:hover &, .${buttonClass}:focus &`]: { opacity: active ? undefined : Opacity['32%'] },
+          }}
+        />
         <Text size="16px">{children}</Text>
       </Popover.Close>
     </li>

components/EditPageLink.tsx

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react'
+import { Spacing, BorderRadius, Flex, Icon, buildShadow } from '@edgeandnode/components'
+
+import { Text, Link } from '@/components'
+import { useLocale } from '@/hooks'
+
+export type EditPageLinkProps = {
+  mobile?: boolean
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>
+
+export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
+  const { currentLocale, currentPathWithoutLocale } = useLocale()
+
+  return (
+    <Link
+      href={`https://github.com/graphprotocol/docs/blob/main/pages/${currentLocale}${currentPathWithoutLocale}${
+        currentPathWithoutLocale.endsWith('/') ? 'index' : ''
+      }.mdx`}
+      target="_blank"
+      sx={{
+        display: 'block',
+        py: Spacing.S,
+        borderRadius: BorderRadius.S,
+        '&:hover': { color: 'White', textShadow: buildShadow('M') },
+        transition: 'color 200ms, text-shadow 200ms',
+      }}
+    >
+      <Flex.Row as="span" align="center" gap={Spacing.M}>
+        <Icon.LogoGitHub />
+        <Text weight={mobile ? 'Semibold' : 'Normal'} size={mobile ? '16px' : '14px'}>
+          Edit page
+        </Text>
+      </Flex.Row>
+    </Link>
+  )
+}

components/Heading.tsx

@@ -1,5 +1,5 @@
 import { HTMLAttributes, useContext } from 'react'
-import { useUniqueId, Spacing, Glow } from '@edgeandnode/components'
+import { Spacing, Opacity, buildShadow, useUniqueId } from '@edgeandnode/components'
 import classnames from 'classnames'
 import { useInView } from 'react-intersection-observer'
 import { useDebounce } from 'react-use'
@@ -34,7 +34,7 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
       innerRef={ref}
       as={`h${level}`}
       id={id}
-      weight="SemiBold"
+      weight="Semibold"
       color="White"
       className={classnames(rootClass, className)}
       sx={{ whiteSpace: 'nowrap' }}
@@ -45,8 +45,8 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
         <span
           sx={{
             ml: '0.35em',
-            opacity: 0,
-            [`.${rootClass}:hover &`]: { opacity: 1 },
+            opacity: Opacity['0%'],
+            [`.${rootClass}:hover &`]: { opacity: Opacity['100%'] },
             transition: 'opacity 200ms',
           }}
         >
@@ -58,7 +58,7 @@ export const Heading = ({ level, id, className, children, ...props }: HeadingPro
 }
 
 export const H1 = (props: HeadingSpecificProps) => {
-  return <Heading level={1} size="48px" sx={{ mb: Spacing.L, textShadow: Glow.L }} {...props} />
+  return <Heading level={1} size="48px" sx={{ mb: Spacing.L, textShadow: buildShadow('L') }} {...props} />
 }
 
 export const H2 = (props: HeadingSpecificProps) => {
@@ -69,25 +69,33 @@ export const H2 = (props: HeadingSpecificProps) => {
       sx={{
         mt: Spacing.XL_XXL,
         mb: Spacing.L_XL,
-        textShadow: Glow.M,
+        textShadow: buildShadow('M'),
       }}
       {...props}
     />
   )
 }
 
 export const H3 = (props: HeadingSpecificProps) => {
-  return <Heading level={3} size="24px" sx={{ mt: Spacing.XL, mb: Spacing.L_XL, textShadow: Glow.M }} {...props} />
+  return (
+    <Heading level={3} size="24px" sx={{ mt: Spacing.XL, mb: Spacing.L_XL, textShadow: buildShadow('M') }} {...props} />
+  )
 }
 
 export const H4 = (props: HeadingSpecificProps) => {
-  return <Heading level={4} size="20px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
+  return (
+    <Heading level={4} size="20px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
+  )
 }
 
 export const H5 = (props: HeadingSpecificProps) => {
-  return <Heading level={5} size="18px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
+  return (
+    <Heading level={5} size="18px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
+  )
 }
 
 export const H6 = (props: HeadingSpecificProps) => {
-  return <Heading level={6} size="16px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: Glow.S }} {...props} />
+  return (
+    <Heading level={6} size="16px" sx={{ mt: Spacing.XL, mb: Spacing.L, textShadow: buildShadow('S') }} {...props} />
+  )
 }

components/Icon.tsx

@@ -7,7 +7,7 @@ export type IconProps = {
   icon: keyof typeof Icons | ElementType
   size?: number | string
   direction?: 'right' | 'down' | 'left' | 'up'
-} & HTMLAttributes<HTMLElement>
+} & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const Icon = ({ icon, size = '1em', direction = 'right', ...props }: IconProps) => {
   const IconSvg =