nodejs · ovflowd · Dec 20, 2022 · Dec 5, 2022 · Dec 5, 2022 · Dec 5, 2022
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -105,13 +105,6 @@ exports.createPages = async ({ graphql, actions }) => {
     learnYamlNavigationData
   );
 
-  const {
-    apiPages,
-    latestVersion,
-    navigationData: apiNavigationData,
-    defaultNavigationRedirects: apiRedirects,
-  } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
-
   createPage({
     path: learnPath,
     component: learnTemplate,
@@ -163,6 +156,13 @@ exports.createPages = async ({ graphql, actions }) => {
     });
   });
 
+  const {
+    apiPages,
+    latestVersion,
+    navigationData: apiNavigationData,
+    defaultNavigationRedirects: apiRedirects,
+  } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
+
   apiPages.forEach(page => {
     createPage({
       path: page.slug,
@@ -227,12 +227,21 @@ exports.onCreatePage = ({ page, actions }) => {
   // Recreates the page with the messages that ReactIntl needs
   // This will be passed to the ReactIntlProvider Component
   // Used within gatsby-browser.js and gatsby-ssr.js
+  const context = { ...page.context };
+  const locale = context.locale || nodeLocales.defaultLanguage;
+  const isLearnPage = context.categoryName === 'learn';
+  if (isLearnPage) {
+    const navigationLocale = context.navigationData[locale]
+      ? locale
+      : nodeLocales.defaultLanguage;
+    context.navigationData = context.navigationData[navigationLocale];
+  }
   createPage({
     ...page,
     context: {
-      ...page.context,
-      intlMessages: getMessagesForLocale(page.context.locale),
-      locale: page.context.locale || nodeLocales.defaultLanguage,
+      ...context,
+      intlMessages: getMessagesForLocale(context.locale),
+      locale,
     },
   });
 };

diff --git a/src/__fixtures__/page.tsx b/src/__fixtures__/page.tsx
@@ -1,14 +1,14 @@
 import {
   PaginationInfo,
   LearnTemplateContext,
-  NavigationData,
   PostTemplateData,
   PostTemplateContext,
   NodeReleaseData,
   PageTableOfContents,
   BlogCategory,
   BlogPost,
   ArticleData,
+  NavigationData,
 } from '../types';
 import mockMDXBodyContent from './mockMDXBodyContent';
 
@@ -120,6 +120,7 @@ export const createLearnPageContext = (): LearnTemplateContext =>
     next: createPaginationInfo(),
     previous: createPaginationInfo(),
     navigationData: createNavigationSectionData(),
+    locale: 'en',
   } as LearnTemplateContext);
 
 export const createBlogPageContext = (): PostTemplateContext => ({

diff --git a/src/types/pages/learn.ts b/src/types/pages/learn.ts
@@ -7,6 +7,7 @@ export interface LearnTemplateContext {
   next: PaginationInfo;
   previous: PaginationInfo;
   navigationData: NavigationData;
+  locale: string;
 }
 
 export interface LearnTemplateData {

diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js
@@ -1,3 +1,4 @@
+const { defaultLanguage } = require('../locales');
 const { iterateEdges, mapToNavigationData } = require('./createPageUtils');
 
 function getYamlPageIdentifier(relativePath) {
@@ -8,32 +9,76 @@ function getYamlPageIdentifier(relativePath) {
     : relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, '');
 }
 
-function createLearnPages(learnEdges, yamlNavigationData) {
-  const learnPages = [];
-  const navigationData = {};
+function getEdgesToLocaleMap(edges) {
+  const mapEdgesToLocale = new Map();
+  edges.forEach(edge => {
+    const { locale } = edge.node.fields;
+
+    if (!mapEdgesToLocale.has(locale)) {
+      mapEdgesToLocale.set(locale, []);
+    }
+
+    const localeEdges = mapEdgesToLocale.get(locale);
+    localeEdges.push(edge);
+    mapEdgesToLocale.set(locale, localeEdges);
+  });
+  return mapEdgesToLocale;
+}
 
-  const getLearnEdgeByPageId = pageId => edge =>
-    getYamlPageIdentifier(edge.node.parent.relativePath) === pageId;
+const getLearnEdgeByPageId = pageId => edge =>
+  getYamlPageIdentifier(edge.node.parent.relativePath) === pageId;
 
-  // Handles the Navigation Data only of Learn pages
-  yamlNavigationData.forEach(({ section, items }) => {
-    navigationData[section] = [];
+const getIteratedPagesForYaml = (yamlNavigation, edges) => {
+  const iteratedPagesForSection = {};
+  yamlNavigation.forEach(({ section, items }) => {
+    iteratedPagesForSection[section] = [];
 
     // This adds the items to the navigation section data based on the order defined within the YAML file
     // If the page doesn't exist it will be set as null and then removed via Array.filter()
     const iteratedPages = iterateEdges(
       items
         // Iterates the items of the section and retrieve their respective edges
         // then we transform them into pages and add to the navigation data
-        .map(pageId => learnEdges.find(getLearnEdgeByPageId(pageId)))
+        // since learnPages are language independent we will use default edges
+        .map(pageId => edges.find(getLearnEdgeByPageId(pageId)))
         .filter(edge => edge && edge.node)
     );
 
+    iteratedPagesForSection[section] = iteratedPages;
+  });
+  return iteratedPagesForSection;
+};
+
+function getNavigationData(yamlNavigation, edges) {
+  const navigationData = {};
+  const iteratedPageForYaml = getIteratedPagesForYaml(yamlNavigation, edges);
+  Object.entries(iteratedPageForYaml).forEach(([section, iteratedPages]) => {
     navigationData[section] = iteratedPages.map(mapToNavigationData);
+  });
+  return navigationData;
+}
 
-    // Then we push them to the resulting learn pages object
+function getLearnPages(yamlNavigation, edges) {
+  const learnPages = [];
+  const iteratedPageForYaml = getIteratedPagesForYaml(yamlNavigation, edges);
+  Object.values(iteratedPageForYaml).forEach(iteratedPages => {
     learnPages.push(...iteratedPages);
   });
+  return learnPages;
+}
+
+function createLearnPages(learnEdges, yamlNavigationData) {
+  const mapEdgesToLocale = getEdgesToLocaleMap(learnEdges);
+  const learnPages = getLearnPages(
+    yamlNavigationData,
+    mapEdgesToLocale.get(defaultLanguage)
+  );
+
+  const navigationData = {};
+
+  mapEdgesToLocale.forEach((edges, locale) => {
+    navigationData[locale] = getNavigationData(yamlNavigationData, edges);
+  });
 
   return { learnPages, navigationData };
 }

diff --git a/util-node/queries/createLearnQuery.js b/util-node/queries/createLearnQuery.js
@@ -17,6 +17,7 @@ module.exports = `
         fields {
           slug
           categoryName
+          locale
         }
       }
       next {
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ module.exports = ` @@
             fields {
               slug
               categoryName
+              locale
             }
           }
           next {
@@ Expand Down @@