Add JSON files for global translations + make the index page translatable + misc. improvements & fixes (#44)

* 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

* Show language switcher

* Update `@edgeandnode/components` + lots of i18n improvements

* Deploy `develop` to staging

* Add Vietnamese locale

* Update dependencies

* Do not deploy subsequent `develop` commits to staging

* Hide language switcher

Author: benface

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "import/no-anonymous-default-export": "off",
+    "react/self-closing-comp": "error",
     "@next/next/no-img-element": "off"
   }
 }

components/Blockquote.tsx

@@ -1,7 +1,5 @@
 import { HTMLAttributes } from 'react'
-import { Spacing, buildBorder } from '@edgeandnode/components'
-
-import { Text, TextProps } from '@/components'
+import { Text, TextProps, Spacing, buildBorder } from '@edgeandnode/components'
 
 export type BlockquoteProps = Omit<TextProps & HTMLAttributes<HTMLQuoteElement>, 'color'>
 
@@ -12,11 +10,8 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
       sx={{
         my: Spacing.XL,
         p: Spacing.L_XL,
-        borderLeft: buildBorder('Purple', '4px' as any),
+        borderLeft: buildBorder('Purple', '4px'),
         bg: 'Purple8',
-        '& > p': {
-          my: 0,
-        },
       }}
       {...props}
     >

components/Diamond.tsx

@@ -1,4 +1,9 @@
+import { useI18n } from '@/hooks'
+
+// TODO: Refactor this component
 export const Difficulty = ({ level }: { level: string }) => {
+  const { translations } = useI18n()
+
   return (
     <div
       sx={{
@@ -16,7 +21,7 @@ export const Difficulty = ({ level }: { level: string }) => {
           margin: 0,
         }}
       >
-        Technical Level Required
+        {translations.global.technicalLevelRequired}
       </p>
       <div
         sx={{

components/Difficulty.tsx

@@ -1,18 +1,30 @@
 import { HTMLAttributes } from 'react'
-import { Spacing, BorderRadius, Flex, Icon, buildShadow } from '@edgeandnode/components'
+import {
+  Text,
+  Flex,
+  Icon,
+  Spacing,
+  BorderRadius,
+  Opacity,
+  buildShadow,
+  buildTransition,
+  useUniqueId,
+} from '@edgeandnode/components'
 
-import { Text, Link } from '@/components'
-import { useLocale } from '@/hooks'
+import { Link } from '@/components'
+import { useI18n } from '@/hooks'
 
 export type EditPageLinkProps = {
   mobile?: boolean
 } & Omit<HTMLAttributes<HTMLElement>, 'children'>
 
 export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) => {
-  const { currentLocale, currentPathWithoutLocale } = useLocale()
+  const { currentLocale, currentPathWithoutLocale, translations } = useI18n()
+  const linkClass = useUniqueId('class')
 
   return (
     <Link
+      className={linkClass}
       href={`https://github.com/graphprotocol/docs/blob/main/pages/${currentLocale}${currentPathWithoutLocale}${
         currentPathWithoutLocale.endsWith('/') ? 'index' : ''
       }.mdx`}
@@ -22,14 +34,22 @@ export const EditPageLink = ({ mobile = false, ...props }: EditPageLinkProps) =>
         py: Spacing.S,
         borderRadius: BorderRadius.S,
         '&:hover': { color: 'White', textShadow: buildShadow('M') },
-        transition: 'color 200ms, text-shadow 200ms',
+        transition: buildTransition(),
       }}
+      {...props}
     >
       <Flex.Row as="span" align="center" gap={Spacing.M}>
         <Icon.LogoGitHub />
-        <Text weight={mobile ? 'Semibold' : 'Normal'} size={mobile ? '16px' : '14px'}>
-          Edit page
+        <Text weight="Semibold" size={mobile ? '16px' : '14px'}>
+          {translations.global.editPage}
         </Text>
+        <Icon.ExternalLink
+          sx={{
+            opacity: Opacity['0%'],
+            [`.${linkClass}:hover &`]: { opacity: Opacity['32%'] },
+            transition: buildTransition('OPACITY'),
+          }}
+        />
       </Flex.Row>
     </Link>
   )