From 6d610b2c0b05ca5bf4097e2504215c6b169b8f9f Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Mon, 5 Dec 2022 23:51:29 +0530 Subject: [PATCH 1/8] fix: sidebar language to have proper english --- gatsby-node.js | 15 ++++++++------- util-node/createLearnPages.js | 18 +++++++++++++++++- util-node/queries/createLearnQuery.js | 1 + 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 7945292598..2479331a97 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -100,18 +100,12 @@ exports.createPages = async ({ graphql, actions }) => { const { blogPages, blogPosts, getPaginatedPosts } = createBlogPages(blogEdges); + // TODO: slugs are language independent const { learnPages, navigationData: learnNavigationData } = createLearnPages( learnEdges, learnYamlNavigationData ); - const { - apiPages, - latestVersion, - navigationData: apiNavigationData, - defaultNavigationRedirects: apiRedirects, - } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData); - createPage({ path: learnPath, component: learnTemplate, @@ -163,6 +157,13 @@ exports.createPages = async ({ graphql, actions }) => { }); }); + const { + apiPages, + latestVersion, + navigationData: apiNavigationData, + defaultNavigationRedirects: apiRedirects, + } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData); + apiPages.forEach(page => { createPage({ path: page.slug, diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index ee4aa46b9c..e2653f8484 100644 --- 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) { @@ -11,6 +12,19 @@ function getYamlPageIdentifier(relativePath) { function createLearnPages(learnEdges, yamlNavigationData) { const learnPages = []; const navigationData = {}; + // TODO: group locale : pagID edges + const localeEdgeMap = new Map(); + + learnEdges.forEach(edge => { + const edgeLocale = edge.node.fields.locale; + if(!localeEdgeMap.has(edgeLocale)) { + localeEdgeMap.set(edgeLocale, []); + } + const localeEdges = localeEdgeMap.get(edgeLocale); + localeEdgeMap.set(edgeLocale, localeEdges.concat(edge)); + }); + + const defaultLocaleEdges = localeEdgeMap.get(defaultLanguage) const getLearnEdgeByPageId = pageId => edge => getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; @@ -25,10 +39,12 @@ function createLearnPages(learnEdges, yamlNavigationData) { 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 => defaultLocaleEdges.find(getLearnEdgeByPageId(pageId))) .filter(edge => edge && edge.node) ); + // TODO: locale based navigation data navigationData[section] = iteratedPages.map(mapToNavigationData); // Then we push them to the resulting learn pages object diff --git a/util-node/queries/createLearnQuery.js b/util-node/queries/createLearnQuery.js index 3f26b228ae..d21fd0f8b5 100644 --- a/util-node/queries/createLearnQuery.js +++ b/util-node/queries/createLearnQuery.js @@ -17,6 +17,7 @@ module.exports = ` fields { slug categoryName + locale } } next { From 77fe899c3f06ed0663bfc08ca148dc978d4d19b3 Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 6 Dec 2022 00:31:58 +0530 Subject: [PATCH 2/8] fix: navigation locale --- gatsby-node.js | 1 - src/hooks/useLocaleBasedNavigation.ts | 15 ++++++++ src/templates/learn.tsx | 38 +++++++++++--------- src/types/navigation.ts | 6 ++++ src/types/pages/learn.ts | 5 +-- util-node/createLearnPages.js | 50 ++++++++++++++++----------- 6 files changed, 74 insertions(+), 41 deletions(-) create mode 100644 src/hooks/useLocaleBasedNavigation.ts diff --git a/gatsby-node.js b/gatsby-node.js index 2479331a97..50ebe0c51e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -100,7 +100,6 @@ exports.createPages = async ({ graphql, actions }) => { const { blogPages, blogPosts, getPaginatedPosts } = createBlogPages(blogEdges); - // TODO: slugs are language independent const { learnPages, navigationData: learnNavigationData } = createLearnPages( learnEdges, learnYamlNavigationData diff --git a/src/hooks/useLocaleBasedNavigation.ts b/src/hooks/useLocaleBasedNavigation.ts new file mode 100644 index 0000000000..5bf9a12fbb --- /dev/null +++ b/src/hooks/useLocaleBasedNavigation.ts @@ -0,0 +1,15 @@ +import { defaultLanguage } from "../../locales"; +import { NavigationDataWithLocale } from "../types"; + +export function useLocaleBasedNavigation(navigations:NavigationDataWithLocale, locale:string) { + let navigationLocale = locale; + const navigationData = {}; + + Object.entries(navigations).forEach(([sectionTitle, localeSections]) => { + if(!(locale in localeSections)) { + navigationLocale = defaultLanguage; + } + navigationData[sectionTitle] = localeSections[navigationLocale]; + }); + return navigationData; +} \ No newline at end of file diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index 6d5dbe867b..bc47e2d5c9 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -5,6 +5,7 @@ import DefaultLayout from '../layouts/default'; import LearnNavigation from '../navigations/learn'; import { connectGraphQlCustom } from '../connectGraphQlArticle'; import { LearnTemplateContext, LearnTemplateData } from '../types'; +import { useLocaleBasedNavigation } from '../hooks/useLocaleBasedNavigation'; interface Props { data: LearnTemplateData; @@ -21,23 +22,26 @@ const LearnLayout = ({ fields: { authors }, }, }, - pageContext: { slug, next, previous, relativePath, navigationData }, -}: Props): JSX.Element => ( - -
- -
-
- -); + pageContext: { slug, next, previous, relativePath, navigationData, locale }, +}: Props): JSX.Element => { + const currLocaleNavigationData = useLocaleBasedNavigation(navigationData, locale); + return ( + +
+ +
+
+ + ) +}; export default connectGraphQlCustom(LearnLayout); diff --git a/src/types/navigation.ts b/src/types/navigation.ts index 75df27be0f..e1cc61774e 100644 --- a/src/types/navigation.ts +++ b/src/types/navigation.ts @@ -12,3 +12,9 @@ export interface NavigationItemData { export interface NavigationData { [index: string]: NavigationItemData[]; } + +export interface NavigationDataWithLocale { + [index: string]: { + [locale: string]: NavigationItemData[]; + } +} \ No newline at end of file diff --git a/src/types/pages/learn.ts b/src/types/pages/learn.ts index 88e7487452..522bc779a5 100644 --- a/src/types/pages/learn.ts +++ b/src/types/pages/learn.ts @@ -1,12 +1,13 @@ import { PageTableOfContents, PaginationInfo } from '../markdown'; -import { NavigationData } from '../navigation'; +import { NavigationDataWithLocale } from '../navigation'; export interface LearnTemplateContext { slug: string; relativePath: string; next: PaginationInfo; previous: PaginationInfo; - navigationData: NavigationData; + navigationData: NavigationDataWithLocale; + locale: string; } export interface LearnTemplateData { diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index e2653f8484..56ad79f0d2 100644 --- a/util-node/createLearnPages.js +++ b/util-node/createLearnPages.js @@ -9,10 +9,28 @@ function getYamlPageIdentifier(relativePath) { : relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, ''); } +function getIteratedPagesForLocale(items, localeEdgeMap, locale = defaultLanguage) { + const getLearnEdgeByPageId = pageId => edge => + getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; + + const defaultLocaleEdges = localeEdgeMap.get(locale) + // 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 + // since learnPages are language independent we will use default edges + .map(pageId => defaultLocaleEdges.find(getLearnEdgeByPageId(pageId))) + .filter(edge => edge && edge.node) + ); + return iteratedPages; +} + function createLearnPages(learnEdges, yamlNavigationData) { const learnPages = []; const navigationData = {}; - // TODO: group locale : pagID edges + const localeEdgeMap = new Map(); learnEdges.forEach(edge => { @@ -24,28 +42,18 @@ function createLearnPages(learnEdges, yamlNavigationData) { localeEdgeMap.set(edgeLocale, localeEdges.concat(edge)); }); - const defaultLocaleEdges = localeEdgeMap.get(defaultLanguage) - - const getLearnEdgeByPageId = pageId => edge => - getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; - // Handles the Navigation Data only of Learn pages yamlNavigationData.forEach(({ section, items }) => { - navigationData[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 - // since learnPages are language independent we will use default edges - .map(pageId => defaultLocaleEdges.find(getLearnEdgeByPageId(pageId))) - .filter(edge => edge && edge.node) - ); - - // TODO: locale based navigation data - navigationData[section] = iteratedPages.map(mapToNavigationData); + const iteratedPages = getIteratedPagesForLocale(items, localeEdgeMap, defaultLanguage); + + navigationData[section] = {}; + localeEdgeMap.forEach((_, locale) => { + if(!(locale in navigationData[section])) { + navigationData[section][locale] = {}; + } + const localeIteratedPages = getIteratedPagesForLocale(items, localeEdgeMap, locale); + navigationData[section][locale] = localeIteratedPages.map(mapToNavigationData); + }) // Then we push them to the resulting learn pages object learnPages.push(...iteratedPages); From 70c6ca26fbccf8dac371b7c0c98d9ff0e2ec35c9 Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 6 Dec 2022 00:56:31 +0530 Subject: [PATCH 3/8] fix: Variable name for useLocaleBasedNavigations --- src/hooks/useLocaleBasedNavigation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useLocaleBasedNavigation.ts b/src/hooks/useLocaleBasedNavigation.ts index 5bf9a12fbb..a229e16e0f 100644 --- a/src/hooks/useLocaleBasedNavigation.ts +++ b/src/hooks/useLocaleBasedNavigation.ts @@ -1,11 +1,11 @@ import { defaultLanguage } from "../../locales"; import { NavigationDataWithLocale } from "../types"; -export function useLocaleBasedNavigation(navigations:NavigationDataWithLocale, locale:string) { +export function useLocaleBasedNavigation(navigationWithLocale:NavigationDataWithLocale, locale:string) { let navigationLocale = locale; const navigationData = {}; - Object.entries(navigations).forEach(([sectionTitle, localeSections]) => { + Object.entries(navigationWithLocale).forEach(([sectionTitle, localeSections]) => { if(!(locale in localeSections)) { navigationLocale = defaultLanguage; } From 85bf1fb7b532a24b3e6eb7e2c0d86ba72e29d91a Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 6 Dec 2022 09:54:15 +0530 Subject: [PATCH 4/8] fix: Linting --- gatsby-node.js | 2 +- src/__fixtures__/page.tsx | 51 +++++++++++++++------------ src/hooks/useLocaleBasedNavigation.ts | 23 +++++++----- src/templates/learn.tsx | 12 +++++-- src/types/navigation.ts | 4 +-- src/types/pages/post.ts | 4 +-- util-node/createLearnPages.js | 31 +++++++++++----- 7 files changed, 78 insertions(+), 49 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 50ebe0c51e..c5aadc758e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -162,7 +162,7 @@ exports.createPages = async ({ graphql, actions }) => { navigationData: apiNavigationData, defaultNavigationRedirects: apiRedirects, } = createApiPages(apiEdges, apiTypesNavigationData, nodeReleasesData); - + apiPages.forEach(page => { createPage({ path: page.slug, diff --git a/src/__fixtures__/page.tsx b/src/__fixtures__/page.tsx index 4b53a96189..f67d6422d5 100644 --- a/src/__fixtures__/page.tsx +++ b/src/__fixtures__/page.tsx @@ -1,7 +1,6 @@ import { PaginationInfo, LearnTemplateContext, - NavigationData, PostTemplateData, PostTemplateContext, NodeReleaseData, @@ -9,6 +8,7 @@ import { BlogCategory, BlogPost, ArticleData, + NavigationDataWithLocale, } from '../types'; import mockMDXBodyContent from './mockMDXBodyContent'; @@ -25,29 +25,33 @@ export const createPaginationInfo = (): PaginationInfo => title: 'test-title', } as PaginationInfo); -export const createNavigationSectionData = (): NavigationData => +export const createNavigationSectionData = (): NavigationDataWithLocale => ({ - 'test-section': [ - { - slug: 'test-slug-1', - title: 'test-title-1', - }, - { - title: 'test-title-2', - slug: 'test-slug-2', - }, - ], - 'test-section2': [ - { - slug: 'test-slug-3', - title: 'test-title-3', - }, - { - title: 'test-title-4', - slug: 'test-slug-4', - }, - ], - } as NavigationData); + 'test-section': { + en: [ + { + slug: 'test-slug-1', + title: 'test-title-1', + }, + { + title: 'test-title-2', + slug: 'test-slug-2', + }, + ], + }, + 'test-section2': { + en: [ + { + slug: 'test-slug-3', + title: 'test-title-3', + }, + { + title: 'test-title-4', + slug: 'test-slug-4', + }, + ], + }, + } as NavigationDataWithLocale); export const createLearnPageData = () => ({ data: { @@ -120,6 +124,7 @@ export const createLearnPageContext = (): LearnTemplateContext => next: createPaginationInfo(), previous: createPaginationInfo(), navigationData: createNavigationSectionData(), + locale: 'en', } as LearnTemplateContext); export const createBlogPageContext = (): PostTemplateContext => ({ diff --git a/src/hooks/useLocaleBasedNavigation.ts b/src/hooks/useLocaleBasedNavigation.ts index a229e16e0f..be62f904ff 100644 --- a/src/hooks/useLocaleBasedNavigation.ts +++ b/src/hooks/useLocaleBasedNavigation.ts @@ -1,15 +1,20 @@ -import { defaultLanguage } from "../../locales"; -import { NavigationDataWithLocale } from "../types"; +import { defaultLanguage } from '../../locales'; +import { NavigationDataWithLocale } from '../types'; -export function useLocaleBasedNavigation(navigationWithLocale:NavigationDataWithLocale, locale:string) { +export function useLocaleBasedNavigation( + navigationWithLocale: NavigationDataWithLocale, + locale: string +) { let navigationLocale = locale; const navigationData = {}; - Object.entries(navigationWithLocale).forEach(([sectionTitle, localeSections]) => { - if(!(locale in localeSections)) { - navigationLocale = defaultLanguage; + Object.entries(navigationWithLocale).forEach( + ([sectionTitle, localeSections]) => { + if (!(locale in localeSections)) { + navigationLocale = defaultLanguage; + } + navigationData[sectionTitle] = localeSections[navigationLocale]; } - navigationData[sectionTitle] = localeSections[navigationLocale]; - }); + ); return navigationData; -} \ No newline at end of file +} diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index bc47e2d5c9..7c24de79c5 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -24,11 +24,17 @@ const LearnLayout = ({ }, pageContext: { slug, next, previous, relativePath, navigationData, locale }, }: Props): JSX.Element => { - const currLocaleNavigationData = useLocaleBasedNavigation(navigationData, locale); + const currLocaleNavigationData = useLocaleBasedNavigation( + navigationData, + locale + ); return (
- +
- ) + ); }; export default connectGraphQlCustom(LearnLayout); diff --git a/src/types/navigation.ts b/src/types/navigation.ts index e1cc61774e..11e6b49f07 100644 --- a/src/types/navigation.ts +++ b/src/types/navigation.ts @@ -16,5 +16,5 @@ export interface NavigationData { export interface NavigationDataWithLocale { [index: string]: { [locale: string]: NavigationItemData[]; - } -} \ No newline at end of file + }; +} diff --git a/src/types/pages/post.ts b/src/types/pages/post.ts index de6e86faa0..45d00babca 100644 --- a/src/types/pages/post.ts +++ b/src/types/pages/post.ts @@ -1,6 +1,6 @@ import { BlogPost, BlogPostAuthor } from '../blog'; import { PaginationInfo } from '../markdown'; -import { NavigationData } from '../navigation'; +import { NavigationDataWithLocale } from '../navigation'; export interface PostTemplateData { mdx: { @@ -16,6 +16,6 @@ export interface PostTemplateContext { relativePath: string; next: PaginationInfo; previous: PaginationInfo; - navigationData: NavigationData; + navigationData: NavigationDataWithLocale; recent: BlogPost[]; } diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index 56ad79f0d2..428c744276 100644 --- a/util-node/createLearnPages.js +++ b/util-node/createLearnPages.js @@ -9,11 +9,15 @@ function getYamlPageIdentifier(relativePath) { : relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, ''); } -function getIteratedPagesForLocale(items, localeEdgeMap, locale = defaultLanguage) { +function getIteratedPagesForLocale( + items, + localeEdgeMap, + locale = defaultLanguage +) { const getLearnEdgeByPageId = pageId => edge => - getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; + getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; - const defaultLocaleEdges = localeEdgeMap.get(locale) + const defaultLocaleEdges = localeEdgeMap.get(locale); // 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( @@ -35,7 +39,7 @@ function createLearnPages(learnEdges, yamlNavigationData) { learnEdges.forEach(edge => { const edgeLocale = edge.node.fields.locale; - if(!localeEdgeMap.has(edgeLocale)) { + if (!localeEdgeMap.has(edgeLocale)) { localeEdgeMap.set(edgeLocale, []); } const localeEdges = localeEdgeMap.get(edgeLocale); @@ -44,16 +48,25 @@ function createLearnPages(learnEdges, yamlNavigationData) { // Handles the Navigation Data only of Learn pages yamlNavigationData.forEach(({ section, items }) => { - const iteratedPages = getIteratedPagesForLocale(items, localeEdgeMap, defaultLanguage); + const iteratedPages = getIteratedPagesForLocale( + items, + localeEdgeMap, + defaultLanguage + ); navigationData[section] = {}; localeEdgeMap.forEach((_, locale) => { - if(!(locale in navigationData[section])) { + if (!(locale in navigationData[section])) { navigationData[section][locale] = {}; } - const localeIteratedPages = getIteratedPagesForLocale(items, localeEdgeMap, locale); - navigationData[section][locale] = localeIteratedPages.map(mapToNavigationData); - }) + const localeIteratedPages = getIteratedPagesForLocale( + items, + localeEdgeMap, + locale + ); + navigationData[section][locale] = + localeIteratedPages.map(mapToNavigationData); + }); // Then we push them to the resulting learn pages object learnPages.push(...iteratedPages); From db771f05b286903e54aa02828ccc58a1639e3dba Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 6 Dec 2022 22:16:02 +0530 Subject: [PATCH 5/8] fix: navigation locale in creation stage --- gatsby-node.js | 26 +++++++++++--- src/__fixtures__/page.tsx | 50 ++++++++++++--------------- src/hooks/useLocaleBasedNavigation.ts | 20 ----------- src/templates/learn.tsx | 44 +++++++++-------------- src/types/navigation.ts | 6 ---- src/types/pages/learn.ts | 4 +-- src/types/pages/post.ts | 4 +-- util-node/createLearnPages.js | 10 +++--- 8 files changed, 71 insertions(+), 93 deletions(-) delete mode 100644 src/hooks/useLocaleBasedNavigation.ts diff --git a/gatsby-node.js b/gatsby-node.js index c5aadc758e..dd1ad870ac 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -108,14 +108,22 @@ exports.createPages = async ({ graphql, actions }) => { createPage({ path: learnPath, component: learnTemplate, - context: { ...learnPages[0], navigationData: learnNavigationData }, + context: { + ...learnPages[0], + navigationData: learnNavigationData, + isLearnPage: true, + }, }); learnPages.forEach(page => { createPage({ path: page.slug, component: learnTemplate, - context: { ...page, navigationData: learnNavigationData }, + context: { + ...page, + navigationData: learnNavigationData, + isLearnPage: true, + }, }); }); @@ -227,12 +235,20 @@ 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; + if (context.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 index f67d6422d5..0119433de1 100644 --- a/src/__fixtures__/page.tsx +++ b/src/__fixtures__/page.tsx @@ -8,7 +8,7 @@ import { BlogCategory, BlogPost, ArticleData, - NavigationDataWithLocale, + NavigationData, } from '../types'; import mockMDXBodyContent from './mockMDXBodyContent'; @@ -25,33 +25,29 @@ export const createPaginationInfo = (): PaginationInfo => title: 'test-title', } as PaginationInfo); -export const createNavigationSectionData = (): NavigationDataWithLocale => +export const createNavigationSectionData = (): NavigationData => ({ - 'test-section': { - en: [ - { - slug: 'test-slug-1', - title: 'test-title-1', - }, - { - title: 'test-title-2', - slug: 'test-slug-2', - }, - ], - }, - 'test-section2': { - en: [ - { - slug: 'test-slug-3', - title: 'test-title-3', - }, - { - title: 'test-title-4', - slug: 'test-slug-4', - }, - ], - }, - } as NavigationDataWithLocale); + 'test-section': [ + { + slug: 'test-slug-1', + title: 'test-title-1', + }, + { + title: 'test-title-2', + slug: 'test-slug-2', + }, + ], + 'test-section2': [ + { + slug: 'test-slug-3', + title: 'test-title-3', + }, + { + title: 'test-title-4', + slug: 'test-slug-4', + }, + ], + } as NavigationData); export const createLearnPageData = () => ({ data: { diff --git a/src/hooks/useLocaleBasedNavigation.ts b/src/hooks/useLocaleBasedNavigation.ts deleted file mode 100644 index be62f904ff..0000000000 --- a/src/hooks/useLocaleBasedNavigation.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { defaultLanguage } from '../../locales'; -import { NavigationDataWithLocale } from '../types'; - -export function useLocaleBasedNavigation( - navigationWithLocale: NavigationDataWithLocale, - locale: string -) { - let navigationLocale = locale; - const navigationData = {}; - - Object.entries(navigationWithLocale).forEach( - ([sectionTitle, localeSections]) => { - if (!(locale in localeSections)) { - navigationLocale = defaultLanguage; - } - navigationData[sectionTitle] = localeSections[navigationLocale]; - } - ); - return navigationData; -} diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index 7c24de79c5..6d5dbe867b 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -5,7 +5,6 @@ import DefaultLayout from '../layouts/default'; import LearnNavigation from '../navigations/learn'; import { connectGraphQlCustom } from '../connectGraphQlArticle'; import { LearnTemplateContext, LearnTemplateData } from '../types'; -import { useLocaleBasedNavigation } from '../hooks/useLocaleBasedNavigation'; interface Props { data: LearnTemplateData; @@ -22,32 +21,23 @@ const LearnLayout = ({ fields: { authors }, }, }, - pageContext: { slug, next, previous, relativePath, navigationData, locale }, -}: Props): JSX.Element => { - const currLocaleNavigationData = useLocaleBasedNavigation( - navigationData, - locale - ); - return ( - -
- -
-
- - ); -}; + pageContext: { slug, next, previous, relativePath, navigationData }, +}: Props): JSX.Element => ( + +
+ +
+
+ +); export default connectGraphQlCustom(LearnLayout); diff --git a/src/types/navigation.ts b/src/types/navigation.ts index 11e6b49f07..75df27be0f 100644 --- a/src/types/navigation.ts +++ b/src/types/navigation.ts @@ -12,9 +12,3 @@ export interface NavigationItemData { export interface NavigationData { [index: string]: NavigationItemData[]; } - -export interface NavigationDataWithLocale { - [index: string]: { - [locale: string]: NavigationItemData[]; - }; -} diff --git a/src/types/pages/learn.ts b/src/types/pages/learn.ts index 522bc779a5..9db082960d 100644 --- a/src/types/pages/learn.ts +++ b/src/types/pages/learn.ts @@ -1,12 +1,12 @@ import { PageTableOfContents, PaginationInfo } from '../markdown'; -import { NavigationDataWithLocale } from '../navigation'; +import { NavigationData } from '../navigation'; export interface LearnTemplateContext { slug: string; relativePath: string; next: PaginationInfo; previous: PaginationInfo; - navigationData: NavigationDataWithLocale; + navigationData: NavigationData; locale: string; } diff --git a/src/types/pages/post.ts b/src/types/pages/post.ts index 45d00babca..de6e86faa0 100644 --- a/src/types/pages/post.ts +++ b/src/types/pages/post.ts @@ -1,6 +1,6 @@ import { BlogPost, BlogPostAuthor } from '../blog'; import { PaginationInfo } from '../markdown'; -import { NavigationDataWithLocale } from '../navigation'; +import { NavigationData } from '../navigation'; export interface PostTemplateData { mdx: { @@ -16,6 +16,6 @@ export interface PostTemplateContext { relativePath: string; next: PaginationInfo; previous: PaginationInfo; - navigationData: NavigationDataWithLocale; + navigationData: NavigationData; recent: BlogPost[]; } diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index 428c744276..0a76633e9e 100644 --- a/util-node/createLearnPages.js +++ b/util-node/createLearnPages.js @@ -54,17 +54,19 @@ function createLearnPages(learnEdges, yamlNavigationData) { defaultLanguage ); - navigationData[section] = {}; localeEdgeMap.forEach((_, locale) => { - if (!(locale in navigationData[section])) { - navigationData[section][locale] = {}; + if (!navigationData[locale]) { + navigationData[locale] = {}; + } + if (!navigationData[locale][section]) { + navigationData[locale][section] = {}; } const localeIteratedPages = getIteratedPagesForLocale( items, localeEdgeMap, locale ); - navigationData[section][locale] = + navigationData[locale][section] = localeIteratedPages.map(mapToNavigationData); }); From 0ad2e88ae14cfa1731024013b3df005b00fa2d64 Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 6 Dec 2022 23:24:00 +0530 Subject: [PATCH 6/8] fix: remove isLearnPage from context --- gatsby-node.js | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index dd1ad870ac..56743701fa 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -108,22 +108,14 @@ exports.createPages = async ({ graphql, actions }) => { createPage({ path: learnPath, component: learnTemplate, - context: { - ...learnPages[0], - navigationData: learnNavigationData, - isLearnPage: true, - }, + context: { ...learnPages[0], navigationData: learnNavigationData }, }); learnPages.forEach(page => { createPage({ path: page.slug, component: learnTemplate, - context: { - ...page, - navigationData: learnNavigationData, - isLearnPage: true, - }, + context: { ...page, navigationData: learnNavigationData }, }); }); @@ -237,7 +229,8 @@ exports.onCreatePage = ({ page, actions }) => { // Used within gatsby-browser.js and gatsby-ssr.js const context = { ...page.context }; const locale = context.locale || nodeLocales.defaultLanguage; - if (context.isLearnPage) { + const isLearnPage = context.categoryName === 'learn'; + if (isLearnPage) { const navigationLocale = context.navigationData[locale] ? locale : nodeLocales.defaultLanguage; From d0118a08420088b08c0800e09a128d2b59dee76d Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Sun, 18 Dec 2022 20:59:17 +0530 Subject: [PATCH 7/8] refactor: createLearnPages function --- util-node/createLearnPages.js | 115 +++++++++++++++++----------------- 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index 0a76633e9e..3ea946ad08 100644 --- a/util-node/createLearnPages.js +++ b/util-node/createLearnPages.js @@ -9,71 +9,74 @@ function getYamlPageIdentifier(relativePath) { : relativePath.replace(/(\.[a-z]+)?\.(mdx|md)/, ''); } -function getIteratedPagesForLocale( - items, - localeEdgeMap, - locale = defaultLanguage -) { - const getLearnEdgeByPageId = pageId => edge => - getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; - - const defaultLocaleEdges = localeEdgeMap.get(locale); - // 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 - // since learnPages are language independent we will use default edges - .map(pageId => defaultLocaleEdges.find(getLearnEdgeByPageId(pageId))) - .filter(edge => edge && edge.node) - ); - return iteratedPages; -} +function getEdgesToLocaleMap(edges) { + const mapEdgesToLocale = new Map(); + edges.forEach(edge => { + const {locale} = edge.node.fields; -function createLearnPages(learnEdges, yamlNavigationData) { - const learnPages = []; - const navigationData = {}; + if(!mapEdgesToLocale.has(locale)) { + mapEdgesToLocale.set(locale, []); + } - const localeEdgeMap = new Map(); + const localeEdges = mapEdgesToLocale.get(locale); + localeEdges.push(edge); + mapEdgesToLocale.set(locale, localeEdges); + }) + return mapEdgesToLocale; +} - learnEdges.forEach(edge => { - const edgeLocale = edge.node.fields.locale; - if (!localeEdgeMap.has(edgeLocale)) { - localeEdgeMap.set(edgeLocale, []); - } - const localeEdges = localeEdgeMap.get(edgeLocale); - localeEdgeMap.set(edgeLocale, localeEdges.concat(edge)); - }); +const getLearnEdgeByPageId = pageId => edge => + getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; - // Handles the Navigation Data only of Learn pages - yamlNavigationData.forEach(({ section, items }) => { - const iteratedPages = getIteratedPagesForLocale( - items, - localeEdgeMap, - defaultLanguage +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 + // since learnPages are language independent we will use default edges + .map(pageId => edges.find(getLearnEdgeByPageId(pageId))) + .filter(edge => edge && edge.node) ); - localeEdgeMap.forEach((_, locale) => { - if (!navigationData[locale]) { - navigationData[locale] = {}; - } - if (!navigationData[locale][section]) { - navigationData[locale][section] = {}; - } - const localeIteratedPages = getIteratedPagesForLocale( - items, - localeEdgeMap, - locale - ); - navigationData[locale][section] = - localeIteratedPages.map(mapToNavigationData); - }); + 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 - learnPages.push(...iteratedPages); +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 }; } From 426e9db01c89b3d0506c2a0d067ef70d43fd3051 Mon Sep 17 00:00:00 2001 From: Ravi Lamkoti Date: Tue, 20 Dec 2022 12:38:55 +0530 Subject: [PATCH 8/8] fix: formating of createLearnPages --- util-node/createLearnPages.js | 41 +++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/util-node/createLearnPages.js b/util-node/createLearnPages.js index 3ea946ad08..819e627ec5 100644 --- a/util-node/createLearnPages.js +++ b/util-node/createLearnPages.js @@ -10,29 +10,29 @@ function getYamlPageIdentifier(relativePath) { } function getEdgesToLocaleMap(edges) { - const mapEdgesToLocale = new Map(); + const mapEdgesToLocale = new Map(); edges.forEach(edge => { - const {locale} = edge.node.fields; + const { locale } = edge.node.fields; - if(!mapEdgesToLocale.has(locale)) { + 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; + getYamlPageIdentifier(edge.node.parent.relativePath) === pageId; const getIteratedPagesForYaml = (yamlNavigation, edges) => { - const iteratedPagesForSection = {} + 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( @@ -44,39 +44,42 @@ const getIteratedPagesForYaml = (yamlNavigation, edges) => { .filter(edge => edge && edge.node) ); - iteratedPagesForSection[section] = iteratedPages - }) - return iteratedPagesForSection -} + 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) + navigationData[section] = iteratedPages.map(mapToNavigationData); }); - return navigationData + return navigationData; } function getLearnPages(yamlNavigation, edges) { const learnPages = []; const iteratedPageForYaml = getIteratedPagesForYaml(yamlNavigation, edges); - Object.values(iteratedPageForYaml).forEach((iteratedPages) => { - learnPages.push(...iteratedPages) + 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 learnPages = getLearnPages( + yamlNavigationData, + mapEdgesToLocale.get(defaultLanguage) + ); const navigationData = {}; - + mapEdgesToLocale.forEach((edges, locale) => { navigationData[locale] = getNavigationData(yamlNavigationData, edges); - }) - + }); + return { learnPages, navigationData }; }