Skip to content

Commit d108d03

Browse files
RavenColEvolaymen94AugustinMauroyovflowd
authored
Fix Navigation Locale (nodejs#3076)
* fix: sidebar language to have proper english * fix: navigation locale * fix: Variable name for useLocaleBasedNavigations * fix: Linting * fix: navigation locale in creation stage * fix: remove isLearnPage from context * refactor: createLearnPages function * fix: formating of createLearnPages Co-authored-by: Aymen Naghmouchi <aymenadvance@gmail.com> Co-authored-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Co-authored-by: Claudio Wunder <cwunder@gnome.org>
1 parent 736cab8 commit d108d03

5 files changed

Lines changed: 78 additions & 21 deletions

File tree

‎gatsby-node.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -105,13 +105,6 @@ exports.createPages = async ({ graphql, actions }) => {
105105
learnYamlNavigationData
106106
);
107107

108-
const {
109-
apiPages,
110-
latestVersion,
111-
navigationData: apiNavigationData,
112-
defaultNavigationRedirects: apiRedirects,
113-
} = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
114-
115108
createPage({
116109
path: learnPath,
117110
component: learnTemplate,
@@ -163,6 +156,13 @@ exports.createPages = async ({ graphql, actions }) => {
163156
});
164157
});
165158

159+
const {
160+
apiPages,
161+
latestVersion,
162+
navigationData: apiNavigationData,
163+
defaultNavigationRedirects: apiRedirects,
164+
} = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData);
165+
166166
apiPages.forEach(page => {
167167
createPage({
168168
path: page.slug,
@@ -227,12 +227,21 @@ exports.onCreatePage = ({ page, actions }) => {
227227
// Recreates the page with the messages that ReactIntl needs
228228
// This will be passed to the ReactIntlProvider Component
229229
// Used within gatsby-browser.js and gatsby-ssr.js
230+
const context = { ...page.context };
231+
const locale = context.locale || nodeLocales.defaultLanguage;
232+
const isLearnPage = context.categoryName === 'learn';
233+
if (isLearnPage) {
234+
const navigationLocale = context.navigationData[locale]
235+
? locale
236+
: nodeLocales.defaultLanguage;
237+
context.navigationData = context.navigationData[navigationLocale];
238+
}
230239
createPage({
231240
...page,
232241
context: {
233-
...page.context,
234-
intlMessages: getMessagesForLocale(page.context.locale),
235-
locale: page.context.locale || nodeLocales.defaultLanguage,
242+
...context,
243+
intlMessages: getMessagesForLocale(context.locale),
244+
locale,
236245
},
237246
});
238247
};

‎src/__fixtures__/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {
22
PaginationInfo,
33
LearnTemplateContext,
4-
NavigationData,
54
PostTemplateData,
65
PostTemplateContext,
76
NodeReleaseData,
87
PageTableOfContents,
98
BlogCategory,
109
BlogPost,
1110
ArticleData,
11+
NavigationData,
1212
} from '../types';
1313
import mockMDXBodyContent from './mockMDXBodyContent';
1414

@@ -120,6 +120,7 @@ export const createLearnPageContext = (): LearnTemplateContext =>
120120
next: createPaginationInfo(),
121121
previous: createPaginationInfo(),
122122
navigationData: createNavigationSectionData(),
123+
locale: 'en',
123124
} as LearnTemplateContext);
124125

125126
export const createBlogPageContext = (): PostTemplateContext => ({

‎src/types/pages/learn.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export interface LearnTemplateContext {
77
next: PaginationInfo;
88
previous: PaginationInfo;
99
navigationData: NavigationData;
10+
locale: string;
1011
}
1112

1213
export interface LearnTemplateData {

‎util-node/createLearnPages.js‎

Lines changed: 55 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
const { defaultLanguage } = require('../locales');
12
const { iterateEdges, mapToNavigationData } = require('./createPageUtils');
23

34
function getYamlPageIdentifier(relativePath) {
@@ -8,32 +9,76 @@ function getYamlPageIdentifier(relativePath) {
89
: relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, '');
910
}
1011

11-
function createLearnPages(learnEdges, yamlNavigationData) {
12-
const learnPages = [];
13-
const navigationData = {};
12+
function getEdgesToLocaleMap(edges) {
13+
const mapEdgesToLocale = new Map();
14+
edges.forEach(edge => {
15+
const { locale } = edge.node.fields;
16+
17+
if (!mapEdgesToLocale.has(locale)) {
18+
mapEdgesToLocale.set(locale, []);
19+
}
20+
21+
const localeEdges = mapEdgesToLocale.get(locale);
22+
localeEdges.push(edge);
23+
mapEdgesToLocale.set(locale, localeEdges);
24+
});
25+
return mapEdgesToLocale;
26+
}
1427

15-
const getLearnEdgeByPageId = pageId => edge =>
16-
getYamlPageIdentifier(edge.node.parent.relativePath) === pageId;
28+
const getLearnEdgeByPageId = pageId => edge =>
29+
getYamlPageIdentifier(edge.node.parent.relativePath) === pageId;
1730

18-
// Handles the Navigation Data only of Learn pages
19-
yamlNavigationData.forEach(({ section, items }) => {
20-
navigationData[section] = [];
31+
const getIteratedPagesForYaml = (yamlNavigation, edges) => {
32+
const iteratedPagesForSection = {};
33+
yamlNavigation.forEach(({ section, items }) => {
34+
iteratedPagesForSection[section] = [];
2135

2236
// This adds the items to the navigation section data based on the order defined within the YAML file
2337
// If the page doesn't exist it will be set as null and then removed via Array.filter()
2438
const iteratedPages = iterateEdges(
2539
items
2640
// Iterates the items of the section and retrieve their respective edges
2741
// then we transform them into pages and add to the navigation data
28-
.map(pageId => learnEdges.find(getLearnEdgeByPageId(pageId)))
42+
// since learnPages are language independent we will use default edges
43+
.map(pageId => edges.find(getLearnEdgeByPageId(pageId)))
2944
.filter(edge => edge && edge.node)
3045
);
3146

47+
iteratedPagesForSection[section] = iteratedPages;
48+
});
49+
return iteratedPagesForSection;
50+
};
51+
52+
function getNavigationData(yamlNavigation, edges) {
53+
const navigationData = {};
54+
const iteratedPageForYaml = getIteratedPagesForYaml(yamlNavigation, edges);
55+
Object.entries(iteratedPageForYaml).forEach(([section, iteratedPages]) => {
3256
navigationData[section] = iteratedPages.map(mapToNavigationData);
57+
});
58+
return navigationData;
59+
}
3360

34-
// Then we push them to the resulting learn pages object
61+
function getLearnPages(yamlNavigation, edges) {
62+
const learnPages = [];
63+
const iteratedPageForYaml = getIteratedPagesForYaml(yamlNavigation, edges);
64+
Object.values(iteratedPageForYaml).forEach(iteratedPages => {
3565
learnPages.push(...iteratedPages);
3666
});
67+
return learnPages;
68+
}
69+
70+
function createLearnPages(learnEdges, yamlNavigationData) {
71+
const mapEdgesToLocale = getEdgesToLocaleMap(learnEdges);
72+
const learnPages = getLearnPages(
73+
yamlNavigationData,
74+
mapEdgesToLocale.get(defaultLanguage)
75+
);
76+
77+
const navigationData = {};
78+
79+
mapEdgesToLocale.forEach((edges, locale) => {
80+
navigationData[locale] = getNavigationData(yamlNavigationData, edges);
81+
});
3782

3883
return { learnPages, navigationData };
3984
}

‎util-node/queries/createLearnQuery.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ module.exports = `
1717
fields {
1818
slug
1919
categoryName
20+
locale
2021
}
2122
}
2223
next {

0 commit comments

Comments
 (0)