Fix for arabic translations (#179)

alexandriaroberts · benface · web-flow · commit 1296e8bce641 · 2022-08-11T13:23:54.000-04:00
* solution for an arabic fix

* fixed an error with locale type

* Co-locate code + make it DRY + type improvements

* some styles updates for arabic direction

* horizontal scroll fix and style updates

* small design tweak and background-image fix

* background image fixes

* arabic lang design fixes

* Use logical properties instead of left/right everywhere

Co-authored-by: Benoît Rouleau &lt;benoit.rouleau@icloud.com&gt;
diff --git a/components/Blockquote.tsx b/components/Blockquote.tsx
@@ -10,7 +10,7 @@ export const Blockquote = ({ children, ...props }: BlockquoteProps) => {
       sx={{
         my: Spacing.XL,
         p: Spacing.L_XL,
-        borderLeft: buildBorder('Purple', '4px'),
+        borderInlineStart: buildBorder('Purple', '4px'),
         bg: 'Purple8',
       }}
       {...props}
diff --git a/components/DocSearch.tsx b/components/DocSearch.tsx
@@ -76,11 +76,16 @@ export function DocSearch(props: DocSearchProps) {
           <Icon.Search size="14px" title="" sx={{ flexShrink: 0 }} />
           <Text.P14 size="14px">{props?.translations?.button?.buttonText ?? 'Search'}</Text.P14>
           {/* TODO: Remove `fontFamily: 'inherit'` when it's included in `@edgeandnode/components`'s global styles */}
-          <Text.P14 as="kbd" size="14px" color="White48" sx={{ ml: 'auto', px: Spacing.M, fontFamily: 'inherit' }}>
+          <Text.P14
+            as="kbd"
+            size="14px"
+            color="White48"
+            sx={{ marginInlineStart: 'auto', px: Spacing.M, fontFamily: 'inherit' }}
+          >
             <abbr title="Command" sx={{ textDecoration: 'none' }}>
               ⌘
             </abbr>
-            <span sx={{ ml: Spacing.S }}>K</span>
+            <span sx={{ marginInlineStart: Spacing.S }}>K</span>
           </Text.P14>
         </Flex.Row>
       </button>
@@ -128,8 +133,7 @@ export function DocSearch(props: DocSearchProps) {
               content: `''`,
               zIndex: 100,
               position: 'absolute',
-              left: Spacing.L_XL,
-              right: Spacing.L_XL,
+              insetInline: Spacing.L_XL,
               bottom: '-1px',
               borderBottom: buildBorder('White16')(theme),
               backgroundColor: 'var(--docsearch-modal-background)',
@@ -159,8 +163,8 @@ export function DocSearch(props: DocSearchProps) {
             },
           },
           '.DocSearch-Cancel': {
-            marginLeft: Spacing.L,
-            marginRight: Spacing.S,
+            marginInlineStart: Spacing.L,
+            marginInlineEnd: Spacing.S,
             color: 'inherit',
           },
           '.DocSearch-Dropdown': {
@@ -236,26 +240,22 @@ export function DocSearch(props: DocSearchProps) {
             textOverflow: 'ellipsis',
           },
           '.DocSearch-Hit-action': {
-            marginLeft: Spacing.L,
+            marginInlineStart: Spacing.L,
           },
           '.DocSearch-HitsFooter': {
             display: 'none',
           },
           '.DocSearch-Footer': {
             position: 'fixed',
             bottom: 0,
-            left: 0,
-            right: 0,
+            insetInline: 0,
             padding: Spacing.L,
             backgroundColor: 'transparent',
             boxShadow: 'none',
             '&::before': {
               content: `''`,
               position: 'absolute',
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
+              inset: 0,
               backgroundColor: 'var(--docsearch-modal-background)',
               opacity: Opacity['88%'],
               [`@media (min-width: ${BREAKPOINT})`]: {
diff --git a/components/Heading.tsx b/components/Heading.tsx
@@ -46,7 +46,7 @@ const BaseHeading = ({ level, id, className, children, ...props }: HeadingProps)
       {id ? (
         <span
           sx={{
-            ml: '0.35em',
+            marginInlineStart: '0.35em',
             opacity: Opacity['0%'],
             [`.${rootClass}:hover &, &:focus-within`]: { opacity: Opacity['100%'] },
             transition: buildTransition('OPACITY'),
diff --git a/components/List.tsx b/components/List.tsx
@@ -18,7 +18,7 @@ export const List = ({ as, children, ...props }: ListProps) => {
       sx={{
         mt: Spacing.L,
         mb: Spacing.L_XL,
-        pl: Spacing.XL,
+        paddingInlineStat: Spacing.XL,
         listStyleType: as === 'ol' ? 'decimal' : 'disc',
         '& > li': {
           display: 'list-item',
diff --git a/components/NavTree.tsx b/components/NavTree.tsx
@@ -9,6 +9,7 @@ import {
   IconProps,
   Spacing,
   buildTransition,
+  Locale,
 } from '@edgeandnode/components'
 import { keyframes } from '@emotion/react'
 import { SxProp } from 'theme-ui'
@@ -88,7 +89,7 @@ const NavTreeItem = ({
             size="12px"
             sx={{
               position: 'absolute',
-              left: Spacing.S,
+              insetInlineStart: Spacing.S,
               top: 0,
               bottom: 0,
               my: 'auto',
@@ -130,7 +131,7 @@ const NavTreeGroupHeading = ({ children, buttonProps = {}, ...props }: NavTreeGr
       <Collapsible.Trigger
         sx={{
           width: '100%',
-          px: Spacing.L_XL,
+          paddingInline: Spacing.L_XL,
           py: Spacing.M_L,
           color: context.open || context.active ? 'White88' : 'White64',
           '&:hover': { color: 'White' },
@@ -170,7 +171,7 @@ const NavTreeGroupContent = ({ children, ...props }: NavTreeGroupContentProps) =
       }}
       {...props}
     >
-      <ul sx={{ pl: Spacing.L }}>{children}</ul>
+      <ul sx={{ paddingInlineStart: Spacing.L }}>{children}</ul>
     </Collapsible.Content>
   )
 }
@@ -185,7 +186,7 @@ const NavTreeDivider = (props: NavTreeDividerProps) => {
 
 const NavTreeHeading = ({ children, ...props }: NavTreeHeadingProps) => {
   return (
-    <li sx={{ mt: Spacing.XL, mb: Spacing.M_L, pl: Spacing.L_XL }} {...props}>
+    <li sx={{ mt: Spacing.XL, mb: Spacing.M_L, paddingInlineStart: Spacing.L_XL }} {...props}>
       <Text.C12 color="White48">{children}</Text.C12>
     </li>
   )
diff --git a/layout/MDXLayout.tsx b/layout/MDXLayout.tsx
@@ -147,8 +147,8 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children }
             sx={{
               display: ['none', null, null, 'block'],
               mt: 'calc(-1 * var(--gds-header-height) * var(--gds-header-fixed))',
-              ml: '-8px',
-              mr: '24px',
+              marginInlineStart: '-8px',
+              marginInlineEnd: '24px',
             }}
           >
             <MDXLayoutNav />
@@ -187,8 +187,8 @@ export const MDXLayout = ({ pagePath, navItems, frontmatter, outline, children }
             sx={{
               display: ['none', null, null, 'block'],
               mt: 'calc(-1 * var(--gds-header-height) * var(--gds-header-fixed))',
-              ml: '40px',
-              mr: '-8px',
+              marginInlineStart: '40px',
+              marginInlineEnd: '-8px',
             }}
           >
             <MDXLayoutOutline />
diff --git a/layout/MDXLayoutNav.tsx b/layout/MDXLayoutNav.tsx
@@ -35,7 +35,7 @@ const DesktopWrapper = ({ children }: PropsWithChildren<{}>) => {
         position: 'sticky',
         top: 0,
         maxHeight: '100vh',
-        pr: Spacing.L_XL,
+        paddingInlineEnd: Spacing.L_XL,
         pt: Spacing.XL,
         pb: Spacing.L,
         overflowY: 'auto',
@@ -172,7 +172,10 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
               if ('children' in navItem) {
                 return (
                   <NavTree.Group active={currentPage?.path.startsWith(navItem.path)}>
-                    <NavTree.Group.Heading sx={mobile ? { py: 0 } : {}} buttonProps={{ sx: mobile ? {} : { pr: 0 } }}>
+                    <NavTree.Group.Heading
+                      sx={mobile ? { py: 0 } : {}}
+                      buttonProps={{ sx: mobile ? {} : { paddingInlineEnd: 0 } }}
+                    >
                       {navItem.title}
                     </NavTree.Group.Heading>
                     <NavTree.Group.Content>
@@ -182,7 +185,7 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
                           href={childNavItem.path}
                           active={currentPage?.path === childNavItem.path}
                           sx={mobile ? { py: 0 } : {}}
-                          linkProps={{ sx: mobile ? {} : { pr: 0 } }}
+                          linkProps={{ sx: mobile ? {} : { paddingInlineEnd: 0 } }}
                         >
                           {childNavItem.title}
                         </NavTree.Item>
@@ -196,8 +199,8 @@ export const MDXLayoutNav = ({ mobile = false }: { mobile?: boolean }) => {
                   href={navItem.path}
                   active={currentPage?.path === navItem.path}
                   sx={mobile ? { py: 0 } : {}}
-                  linkProps={{ sx: mobile ? {} : { pr: 0 } }}
-                  diamondProps={{ sx: mobile ? { left: '6px' } : {} }}
+                  linkProps={{ sx: mobile ? {} : { paddingInlineEnd: 0 } }}
+                  diamondProps={{ sx: mobile ? { insetInlineStart: '6px' } : {} }}
                 >
                   {navItem.title}
                 </NavTree.Item>
diff --git a/layout/MDXLayoutOutline.tsx b/layout/MDXLayoutOutline.tsx
@@ -37,7 +37,7 @@ export const MDXLayoutOutline = () => {
         <EditPageLink />
       </Flex.Row>
       <NewGDSDivider sx={{ my: Spacing.XL }} />
-      <nav sx={{ pr: '16px' }}>
+      <nav sx={{ paddingInlineEnd: '16px' }}>
         <Text.C10 as="header" color="White64" sx={{ mb: Spacing.M_L }}>
           {t('global.pageSections')}
         </Text.C10>
@@ -52,7 +52,7 @@ export const MDXLayoutOutline = () => {
                   href={`#${outlineItem.id}`}
                   sx={{
                     display: 'block',
-                    pl: `${8 * Math.max(0, outlineItem.level - 2)}px`,
+                    paddingInlineStart: `${8 * Math.max(0, outlineItem.level - 2)}px`,
                     py: '6px',
                     color: outlineItem.id === highlightedOutlineItemId ? 'White88' : undefined,
                     '&:hover': { color: 'White' },
diff --git a/layout/MDXLayoutPagination.tsx b/layout/MDXLayoutPagination.tsx
@@ -20,14 +20,14 @@ export const MDXLayoutPagination = () => {
               sx={{
                 display: 'block',
                 py: Spacing.L_XL,
-                pl: [0, null, Spacing.L_XL],
-                pr: Spacing.M_L,
+                paddingInlineStart: [0, null, Spacing.L_XL],
+                paddingInlineEnd: Spacing.M_L,
                 color: 'White64',
                 '&:hover': { color: 'White', textShadow: buildShadow('M') },
                 transition: buildTransition(),
               }}
             >
-              <Flex.Column align="start" gap={Spacing.S} sx={{ textAlign: 'left' }}>
+              <Flex.Column align="start" gap={Spacing.S} sx={{ textAlign: 'start' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
                   <Icon.ArrowLeft title="" size="12px" />
                   <Text.C10>{t('global.previous')}</Text.C10>
@@ -58,14 +58,14 @@ export const MDXLayoutPagination = () => {
               sx={{
                 display: 'block',
                 py: Spacing.L_XL,
-                pl: Spacing.M_L,
-                pr: [0, null, Spacing.L_XL],
+                paddingInlineStart: Spacing.M_L,
+                paddingInlineEnd: [0, null, Spacing.L_XL],
                 color: 'White64',
                 '&:hover': { color: 'White', textShadow: buildShadow('M') },
                 transition: buildTransition(),
               }}
             >
-              <Flex.Column align="end" gap={Spacing.S} sx={{ textAlign: 'right' }}>
+              <Flex.Column align="end" gap={Spacing.S} sx={{ textAlign: 'end' }}>
                 <Flex.Row align="center" gap={Spacing.S}>
                   <Text.C10>{t('global.next')}</Text.C10>
                   <Icon.ArrowRight title="" size="12px" />
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.1.0",
-    "@edgeandnode/components": "^22.11.2",
+    "@edgeandnode/components": "^22.11.4",
     "@emotion/react": "^11.9.3",
     "@mdx-js/loader": "^2.1.2",
     "@mdx-js/react": "^2.1.2",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -22,6 +22,7 @@ import useBus from 'use-bus'
 
 import { supportedLocales, translations, useI18n } from '@/i18n'
 import { EventType } from '../types'
+import { refreshHtmlAttributes } from './_document'
 
 const DEFAULT_SEO_PROPS: DefaultSeoProps = {
   title: 'The Graph Docs',
@@ -49,7 +50,7 @@ const DefaultSeoWithLocale = () => {
   const { locale } = useI18n()
 
   useEffect(() => {
-    document.documentElement.lang = locale
+    refreshHtmlAttributes(locale)
   }, [locale])
 
   const seoProps = useMemo(
@@ -115,25 +116,28 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
       >
         <DefaultSeoWithLocale />
         <ThemeProvider disableSmoothScrolling={isSearchOpen ? true : disableSmoothScrolling} headComponent={Head}>
-          <div
-            sx={{
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              top: 0,
-              minHeight: '768px',
-              backgroundImage: `url('${process.env.BASE_PATH}/img/page-background.png')`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center top',
-              '@media (min-width: 1440px)': {
-                aspectRatio: '1440/768',
-              },
-            }}
-          />
+          <div sx={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
+            <div
+              sx={{
+                position: 'absolute',
+                top: 0,
+                insetInline: 0,
+                minHeight: '768px',
+                backgroundImage: `url('${process.env.BASE_PATH}/img/page-background.png')`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center top',
+                '@media (min-width: 1440px)': {
+                  aspectRatio: '1440/768',
+                },
+              }}
+            />
+          </div>
           <Layout
             headerSticky
             headerContent={
-              <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
+              <div dir="ltr">
+                <NavigationMarketing activeRoute="/docs" NextLink={NextLink} rightAlignItems={[localeSwitcher]} />
+              </div>
             }
             mainContainer
             footerContent={<Footer localeSwitcher={localeSwitcher} />}
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -1,18 +1,26 @@
-import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'
-import { extractLocaleFromPath } from '@edgeandnode/components'
+import Document, { DocumentContext, DocumentInitialProps, Html, Head, Main, NextScript } from 'next/document'
+import { extractLocaleFromPath, Locale, objectEntries } from '@edgeandnode/components'
+
+type MyDocumentProps = DocumentInitialProps & {
+  locale: Locale
+}
 
 export default class MyDocument extends Document {
   static async getInitialProps(context: DocumentContext) {
     const { locale } = extractLocaleFromPath(context.asPath ?? context.pathname)
     const initialProps = await Document.getInitialProps(context)
-    return { ...initialProps, locale }
+    const documentProps: MyDocumentProps = {
+      ...initialProps,
+      locale,
+    }
+    return documentProps
   }
 
   render() {
-    const { locale } = this.props
+    const { locale } = this.props as MyDocumentProps
 
     return (
-      <Html lang={locale} data-theme="dark">
+      <Html {...getHtmlAttributes(locale)} data-theme="dark">
         <Head>
           <link
             rel="preconnect"
@@ -29,3 +37,14 @@ export default class MyDocument extends Document {
     )
   }
 }
+
+const getHtmlAttributes = (locale: Locale) => ({
+  lang: locale,
+  dir: locale == Locale.ARABIC ? 'rtl' : 'ltr',
+})
+
+export const refreshHtmlAttributes = (locale: Locale) => {
+  objectEntries(getHtmlAttributes(locale)).forEach(([attribute, value]) => {
+    document.documentElement[attribute] = value
+  })
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1141,10 +1141,10 @@
     numeral "^2.0.6"
     pluralize "^8.0.0"
 
-"@edgeandnode/components@^22.11.2":
-  version "22.11.2"
-  resolved "https://registry.yarnpkg.com/@edgeandnode/components/-/components-22.11.2.tgz#c76986a2365b5b8a177c43a1a14a5e47c2fbabec"
-  integrity sha512-ZCEfPggv5IVPWtThgxxgVOpXxWtcoStsRDOv2syyHc5OEpUPDUlQvt7r1S58rgbFfQiNXRkt1YNJHKU7fguqQQ==
+"@edgeandnode/components@^22.11.4":
+  version "22.11.4"
+  resolved "https://registry.yarnpkg.com/@edgeandnode/components/-/components-22.11.4.tgz#6ebd99bb6e8ea7cc23d8c8f174f40cc6d96dd132"
+  integrity sha512-Tjkj6qvo2gURWWT5hbQnWb7nNwKdPDVosS8KekiiW6FGFQXeJZwSmLOjzhdrB1zLSZ9Gg0izCYhdKaavayatCQ==
   dependencies:
     "@edgeandnode/common" "^5.1.2"
     "@emotion/react" "^11.8.2"
