feat(I18n): simplify page translation logic

* generate page translations in gatsby-node upfront and feed them via fields * add PageTranslations fragment * no gatsby-config field mapping needed * no constructing and sorting of page translation links in MainLayout in the users browser anymore
GaiAma · Nov 11, 2018 · 83ef404 · 83ef404
1 parent b29290f
commit 83ef404
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 123 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -14,8 +14,6 @@ module.exports = {
     version,
   },
   mapping: {
-    'MarkdownRemark.fields.translations': `MarkdownRemark`,
-    'JavascriptFrontmatter.fields.translations': `JavascriptFrontmatter`,
     'MarkdownRemark.fields.suggested': `MarkdownRemark`,
     'MarkdownRemark.fields.newer': `MarkdownRemark`,
     'MarkdownRemark.fields.older': `MarkdownRemark`,

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -174,7 +174,38 @@ exports.createPages = async ({ actions, getNodes, graphql }) => {
       createNodeField({
         node,
         name: `translations`,
-        value: array.filter(n => n.id !== node.id).map(node => node.id),
+        value: array
+          .map(n => {
+            const lang = Languages.find(
+              x => x.frontmatter.id === n.frontmatter.lang
+            )
+            if (!lang) return null
+            return Object.assign({}, lang.frontmatter, {
+              to: n.fields.url,
+              fields: {
+                url: n.fields.url,
+              },
+              frontmatter: {
+                title: n.frontmatter.title,
+                lang: n.frontmatter.lang,
+                slug: n.frontmatter.slug,
+                cover: {
+                  publicURL: n.frontmatter.cover
+                    ? n.frontmatter.cover.publicURL
+                    : ``,
+                },
+              },
+            })
+          }) //.filter(n => n.id !== node.id).map(node => node.id),
+          .filter(n => n)
+          .sort(
+            (a, b) =>
+              a.frontmatter.lang < b.frontmatter.lang
+                ? -1
+                : a.frontmatter.lang > b.frontmatter.lang
+                  ? 1
+                  : 0
+          ),
       })
 
       // set up short url redirects

diff --git a/src/components/MainLayout/fragments.js b/src/components/MainLayout/fragments.js
@@ -149,4 +149,24 @@ export const Fragments = graphql`
       }
     }
   }
+
+  fragment PageTranslations on JavascriptFrontmatter {
+    fields {
+      translations {
+        id
+        lc
+        title
+        titleShort
+        to
+        fields {
+          url
+        }
+        frontmatter {
+          title
+          lang
+          slug
+        }
+      }
+    }
+  }
 `
diff --git a/src/components/MainLayout/index.js b/src/components/MainLayout/index.js
@@ -71,28 +71,6 @@ const generateMetaMenu = ({ translations, getLang, menuItems }) =>
 //   [lang]: { translations: messages }
 // })
 
-const getTranslations = page =>
-  [
-    ...(page.fields.translations || []),
-    {
-      fields: {
-        url: page.fields.url,
-      },
-      frontmatter: {
-        lang: page.frontmatter.lang,
-        slug: page.frontmatter.slug,
-        title: page.frontmatter.title,
-      },
-    },
-  ].sort(
-    (a, b) =>
-      a.frontmatter.lang < b.frontmatter.lang
-        ? -1
-        : a.frontmatter.lang > b.frontmatter.lang
-          ? 1
-          : 0
-  )
-
 // i18n.init({
 //   initImmediate: false,
 //   fallbackLng: `en`,
@@ -147,7 +125,7 @@ class MainLayout extends Component {
 
     const lang = pageContext.lang
     // const i18nStore = getI18nStore(lang, pageContext.messages)
-    const translations = getTranslations(page)
+    const translations = page.fields.translations
     const getLang = getLangFactory(languages.edges)
     const menuItems = menu.edges || []
     const mainMenu = generateMainMenu(menuItems)
@@ -196,11 +174,8 @@ class MainLayout extends Component {
             property="og:url"
             content={`${site.siteMetadata.siteUrl}${page.fields.url}`}
           />
-          <meta
-            property="og:locale"
-            content={getLang(page.frontmatter.lang).lc}
-          />
-          {getLang(page.frontmatter.lang, true).map(x => (
+          <meta property="og:locale" content={getLang(lang).lc} />
+          {getLang(lang, true).map(x => (
             <meta property="og:locale:alternate" content={x.lc} key={x.lc} />
           ))}
           <meta

diff --git a/src/templates/AboutPage.js b/src/templates/AboutPage.js
@@ -223,18 +223,9 @@ export const query = graphql`
     ...Accounts
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/BlogPage.js b/src/templates/BlogPage.js
@@ -227,18 +227,9 @@ export const query = graphql`
     ...Accounts
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/ContactPage.js b/src/templates/ContactPage.js
@@ -219,18 +219,9 @@ export const query = graphql`
     ...Accounts
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/DonatePage.js b/src/templates/DonatePage.js
@@ -87,18 +87,9 @@ export const query = graphql`
     ...SupportWidget
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/ErrorPage.js b/src/templates/ErrorPage.js
@@ -29,15 +29,7 @@ export const query = graphql`
     page: javascriptFrontmatter(
       frontmatter: { slug: { eq: $slug }, lang: { eq: $lang } }
     ) {
-      fields {
-        translations {
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
-      }
+      ...PageTranslations
       frontmatter {
         title
         lang

diff --git a/src/templates/GalleryPage.js b/src/templates/GalleryPage.js
@@ -236,6 +236,7 @@
 //     ...Paginator
 
 //     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+// ...PageTranslations
 //       fields {
 // url
 //         translations {

diff --git a/src/templates/HomePage.js b/src/templates/HomePage.js
@@ -280,18 +280,9 @@ export const query = graphql`
     ...SupportWidget
 
     page: javascriptFrontmatter(fields: { url: { eq: $url } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/PaypalSuccessPage.js b/src/templates/PaypalSuccessPage.js
@@ -65,18 +65,9 @@ export const query = graphql`
     ...newstickerLandscape
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/SimplePage.js b/src/templates/SimplePage.js
@@ -29,18 +29,9 @@ export const query = graphql`
     ...Accounts
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-          }
-        }
       }
       frontmatter {
         title

diff --git a/src/templates/SupportPage.js b/src/templates/SupportPage.js
@@ -473,21 +473,9 @@ export const query = graphql`
     ...SupportWidget
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
+      ...PageTranslations
       fields {
         url
-        translations {
-          fields {
-            url
-          }
-          frontmatter {
-            title
-            lang
-            slug
-            cover {
-              publicURL
-            }
-          }
-        }
       }
       frontmatter {
         title