Add Edit Page link

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 =

components/Image.tsx

@@ -1,6 +1,6 @@
 import { ImgHTMLAttributes } from 'react'
 
-export type ImageProps = ImgHTMLAttributes<HTMLImageElement>
+export type ImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>
 
 export const Image = ({ src, ...props }: ImageProps) => {
   // If the URL is internal, automatically prepend the base path

components/Link.tsx

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes } from 'react'
 import NextLink, { LinkProps as NextLinkProps } from 'next/link'
-import { useTheme } from '@edgeandnode/components'
+import { useTheme, buildShadow } from '@edgeandnode/components'
 
 import { Locale } from '@/locale'
 import { useLocale } from '@/hooks'
@@ -72,7 +72,7 @@ export const LinkInline = (props: LinkProps) => {
           backgroundImage: `linear-gradient(to bottom, ${theme.colors!.Purple}, ${theme.colors!.Purple})`,
           backgroundPosition: '0% 95%',
           color: 'White',
-          textShadow: `${theme.colors!.Purple64} 0px 0px 16px`,
+          textShadow: buildShadow('S'),
         },
         transition: 'background-position 200ms, color 200ms, text-shadow 200ms',
       }}

components/NavTree.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes, createContext, Context, useState, useContext } from 'react'
 import * as Collapsible from '@radix-ui/react-collapsible'
-import { Flex, Spacing, Opacities } from '@edgeandnode/components'
+import { Flex, Spacing, Opacity } from '@edgeandnode/components'
 import { keyframes } from '@emotion/react'
 import { SxProp } from 'theme-ui'
 
@@ -37,7 +37,7 @@ export type NavTreeDividerProps = Omit<HTMLAttributes<HTMLElement>, 'children'>
 const NavTree = ({ children, textProps, ...props }: NavTreeProps) => {
   return (
     <Flex.Column {...props}>
-      <Text weight="SemiBold" size="14px" as="ul" role="list" {...textProps}>
+      <Text weight="Semibold" size="14px" as="ul" role="list" {...textProps}>
         {children}
       </Text>
     </Flex.Column>
@@ -64,8 +64,8 @@ const NavTreeItem = ({
           display: 'block',
           px: Spacing.L_XL,
           py: Spacing.M_L,
-          opacity: !active ? Opacities[64] : undefined,
-          '&:hover': { opacity: Opacities[100] },
+          opacity: !active ? Opacity['64%'] : undefined,
+          '&:hover': { opacity: Opacity['100%'] },
           transition: 'opacity 200ms',
           ...linkSx,
         }}
@@ -118,19 +118,18 @@ const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGr
           width: '100%',
           px: Spacing.L_XL,
           py: Spacing.M_L,
-          opacity: context.open || context.active ? Opacities[100] : Opacities[64],
-          '&:hover': { opacity: Opacities[100] },
+          opacity: context.open || context.active ? Opacity['100%'] : Opacity['64%'],
+          '&:hover': { opacity: Opacity['100%'] },
           transition: 'opacity 200ms',
           ...buttonSx,
         }}
         {...buttonOtherProps}
       >
-        <Flex.Row as="span" justify="space-between" align="center">
+        <Flex.Row as="span" justify="space-between" align="center" gap={Spacing.L}>
           <span>{children}</span>
           <Flex.Column
             as="span"
             sx={{
-              ml: Spacing.L,
               flex: 'none',
               transform: context.open ? 'rotate(90deg)' : 'rotate(0deg)',
               transition: 'transform 200ms',
@@ -162,13 +161,7 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
 }
 
 const NavTreeDivider = (props: NavTreeDividerProps) => {
-  return (
-    <li
-      aria-hidden="true"
-      sx={{ my: Spacing.M, borderTop: (theme) => `1px solid ${theme.colors!.White16}` }}
-      {...props}
-    />
-  )
+  return <li aria-hidden="true" sx={{ my: Spacing.M, borderTop: 'White16' }} {...props} />
 }
 
 NavTree.Item = NavTreeItem

components/Table.tsx

@@ -1,13 +1,13 @@
 import { HTMLAttributes } from 'react'
-import { Spacing, FontWeight, Opacities, darkModeColors } from '@edgeandnode/components'
+import { Spacing, FontWeight, Opacity, darkModeColors } from '@edgeandnode/components'
 import Color from 'color'
 
 import { Text } from '@/components'
 
 // 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
 const WhiteColor = Color(darkModeColors.White)
 const MidnightColor = Color(darkModeColors.Midnight)
-const BorderColor = MidnightColor.mix(WhiteColor, Opacities[16])
+const BorderColor = MidnightColor.mix(WhiteColor, Opacity['16%'])
 
 export type TableProps = Omit<HTMLAttributes<HTMLTableElement>, 'color'>
 
@@ -23,7 +23,7 @@ export const Table = ({ children, ...props }: TableProps) => {
           },
           '& th': {
             bg: 'White4',
-            fontWeight: FontWeight.SemiBold,
+            fontWeight: FontWeight.Semibold,
             textAlign: 'center',
           },
         }}