Update dependencies (#279)

Author: benface

i18n.ts

@@ -9,16 +9,22 @@ import vi from '@/pages/vi/translations'
 import zh from '@/pages/zh/translations'
 
 const appLocales = [
-  Locale.ENGLISH,
   Locale.ARABIC,
+  Locale.ENGLISH,
   Locale.SPANISH,
   Locale.JAPANESE,
   Locale.KOREAN,
   Locale.VIETNAMESE,
   Locale.CHINESE,
 ] as const
 
-export type AppLocale = (typeof appLocales)[number]
+type Mutable<T> = {
+  -readonly [P in keyof T]: T[P]
+}
+
+export const supportedLocales = appLocales as Mutable<typeof appLocales>
+
+export type AppLocale = (typeof supportedLocales)[number]
 
 export type AppTranslations = Translations & {
   [key in AppLocale]: {
@@ -27,11 +33,9 @@ export type AppTranslations = Translations & {
   }
 }
 
-export const supportedLocales = appLocales as unknown as Locale[]
-
 export const translations = {
-  en,
   ar,
+  en,
   es,
   ja,
   ko,

layout/MDXLayoutNav.tsx

@@ -3,7 +3,7 @@ import * as Collapsible from '@radix-ui/react-collapsible'
 import { useRouter } from 'next/router'
 import { Fragment, PropsWithChildren, useContext, useEffect, useState } from 'react'
 
-import { BorderRadius, buildTransition, Flex, Icon, Spacing, Text } from '@edgeandnode/components'
+import { BorderRadius, buildTransition, Flex, Icon, NestedStrings, Spacing, Text } from '@edgeandnode/components'
 
 import { DocSearch, Link, NavTree } from '@/components'
 import { useI18n } from '@/i18n'
@@ -166,7 +166,7 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
               window.open(itemUrl, '_blank', 'noopener')
             },
           }}
-          translations={translations.docsearch}
+          translations={translations.docsearch as NestedStrings}
           placeholder={t('docsearch.button.buttonText')}
         />
       </div>

navigation/navigation.ts

@@ -1,3 +1,5 @@
+import { translate } from '@edgeandnode/components'
+
 import { AppLocale, translations } from '@/i18n'
 
 import { NavItemDefinition } from './types'
@@ -13,7 +15,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     slug: 'about',
   },
   {
-    title: translations[locale].global.navigation.theGraphNetwork,
+    title: translate(translations, locale, 'global.navigation.theGraphNetwork'),
     slug: 'network',
     children: [
       {
@@ -58,10 +60,10 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     divider: true,
   },
   {
-    heading: translations[locale].global.navigation.subgraphs,
+    heading: translate(translations, locale, 'global.navigation.subgraphs'),
   },
   {
-    title: translations[locale].global.navigation.developing,
+    title: translate(translations, locale, 'global.navigation.developing'),
     slug: 'developing',
     children: [
       {
@@ -85,7 +87,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     ],
   },
   {
-    title: translations[locale].global.navigation.deploying,
+    title: translate(translations, locale, 'global.navigation.deploying'),
     slug: 'deploying',
     children: [
       {
@@ -106,7 +108,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     ],
   },
   {
-    title: translations[locale].global.navigation.publishing,
+    title: translate(translations, locale, 'global.navigation.publishing'),
     slug: 'publishing',
     children: [
       {
@@ -115,7 +117,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     ],
   },
   {
-    title: translations[locale].global.navigation.managing,
+    title: translate(translations, locale, 'global.navigation.managing'),
     slug: 'managing',
     children: [
       {
@@ -127,7 +129,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     ],
   },
   {
-    title: translations[locale].global.navigation.querying,
+    title: translate(translations, locale, 'global.navigation.querying'),
     slug: 'querying',
     children: [
       {
@@ -154,7 +156,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     ],
   },
   {
-    title: translations[locale].global.navigation.cookbook,
+    title: translate(translations, locale, 'global.navigation.cookbook'),
     slug: 'cookbook',
     children: [
       {
@@ -187,7 +189,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     divider: true,
   },
   {
-    heading: translations[locale].global.navigation.indexing,
+    heading: translate(translations, locale, 'global.navigation.indexing'),
   },
   {
     slug: 'operating-graph-node',
@@ -202,7 +204,7 @@ export const navigation = (locale: AppLocale): NavItemDefinition[] => [
     divider: true,
   },
   {
-    title: translations[locale].global.navigation.releaseNotes,
+    title: translate(translations, locale, 'global.navigation.releaseNotes'),
     slug: 'release-notes',
     children: [
       {

package.json

@@ -21,10 +21,10 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.3.3",
-    "@edgeandnode/components": "^25.1.0",
+    "@edgeandnode/components": "^25.2.0",
     "@emotion/react": "^11.10.5",
-    "@mdx-js/loader": "^2.2.1",
-    "@mdx-js/react": "^2.2.1",
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^12.3.4",
     "@radix-ui/react-collapsible": "1.0.1",
     "@radix-ui/react-popover": "^1.0.3",
@@ -36,10 +36,10 @@
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-intersection-observer": "^9.4.1",
+    "react-intersection-observer": "^9.4.2",
     "react-use": "^17.4.0",
     "remark-gfm": "^3.0.1",
-    "theme-ui": "^0.15.4",
+    "theme-ui": "^0.15.5",
     "use-bus": "^2.5.2"
   },
   "devDependencies": {
@@ -53,11 +53,11 @@
     "@types/react-dom": "^17.0.18",
     "acorn": "^8.8.2",
     "acorn-jsx": "^5.3.2",
-    "eslint": "^8.33.0",
+    "eslint": "^8.34.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.1",
     "path": "^0.12.7",
-    "prettier": "^2.8.3",
+    "prettier": "^2.8.4",
     "remark-frontmatter": "^4.0.1",
     "remark-mdx-frontmatter": "^2.1.1",
     "serialize-as-code": "^2.0.2",

pages/[locale]/index.tsx

@@ -1,15 +1,24 @@
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
 import { useMemo } from 'react'
 
-import { BorderRadius, buildBorder, buildShadow, buildTransition, Flex, Spacing, Text } from '@edgeandnode/components'
+import {
+  BorderRadius,
+  buildBorder,
+  buildShadow,
+  buildTransition,
+  Flex,
+  Spacing,
+  Text,
+  translate,
+} from '@edgeandnode/components'
 
 import { Heading, Image, Link, LinkInline, Paragraph } from '@/components'
 import { AppLocale, supportedLocales, translations, useI18n } from '@/i18n'
 import { Frontmatter, MDXLayout, OutlineItem } from '@/layout'
 import { getNavItems, NavItem } from '@/navigation'
 
 export const frontmatter = (locale: AppLocale): Frontmatter => ({
-  title: translations[locale].index.title,
+  title: translate(translations, locale, 'index.title'),
 })
 
 // TODO: Make DRY