Skip to content

Commit

Permalink
Improve localization for blog, blog listing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@viphan007
viphan007 committed Jun 18, 2024
1 parent c7fa739 commit 4330586
Show file tree
Hide file tree
Showing 13 changed files with 143 additions and 95 deletions.
125 changes: 109 additions & 16 deletions gatsby-node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ exports.createPages = async ({ graphql, actions }) => {
slug
categories {
name
slug
}
}
}
Expand Down Expand Up @@ -134,6 +135,13 @@ exports.createPages = async ({ graphql, actions }) => {
})
})
}

if (localizedPages.includes('/news/')) {
newsCategories.forEach(
page => page.name && localizedPages.push(`/news/${page.name}/`)
)
}

const legalsQuery = await graphql(`
{
allMdx {
Expand Down Expand Up @@ -270,7 +278,7 @@ exports.createPages = async ({ graphql, actions }) => {
h2FontSize,
node_locale,
localizedPages,
sharedCopy: sharedCopy[node_locale]
sharedCopy: sharedCopy[node_locale],
},
})
return
Expand All @@ -286,6 +294,40 @@ exports.createPages = async ({ graphql, actions }) => {
const categoryPath = index
? `${baseCategoryPath}page/${index + 1}/`
: baseCategoryPath

if (showLanguageSelector && translation) {
LOCALES_TRANSLATE.forEach(locale => {
const localeSlug = `/${locale.code}${categoryPath}`
createPage({
path: localeSlug,
component: path.resolve(mapTemplateLayout(pageType)),
context: {
headerId,
footerId,
seoId,
modules: moduleIds,
themeColor,
pathBuild: localeSlug,
isFaqLayout,
h2FontSize,
localizedPages,
limit: itemsPerPage,
skip: index * itemsPerPage,
categoryId: cat.categoryId,
category: cat.name,
totalItems: cat.total,
currentPage: index + 1,
totalPages,
sharedCopy: sharedCopy[node_locale],
slug: categoryPath,
translation,
locale: locale.code,
node_locale: locale.code,
newsCategories,
},
})
})
}
createPage({
path: categoryPath,
component: path.resolve(mapTemplateLayout(pageType)),
Expand All @@ -298,7 +340,6 @@ exports.createPages = async ({ graphql, actions }) => {
pathBuild: categoryPath,
isFaqLayout,
h2FontSize,
node_locale,
localizedPages,
limit: itemsPerPage,
skip: index * itemsPerPage,
Expand All @@ -307,7 +348,10 @@ exports.createPages = async ({ graphql, actions }) => {
totalItems: cat.total,
currentPage: index + 1,
totalPages,
sharedCopy: sharedCopy[node_locale]
sharedCopy: sharedCopy[node_locale],
translation,
node_locale,
newsCategories,
},
})
})
Expand Down Expand Up @@ -342,7 +386,7 @@ exports.createPages = async ({ graphql, actions }) => {
h2FontSize,
node_locale,
localizedPages,
sharedCopy: sharedCopy[node_locale]
sharedCopy: sharedCopy[node_locale],
},
})
return
Expand Down Expand Up @@ -370,7 +414,7 @@ exports.createPages = async ({ graphql, actions }) => {
locale: locale.code,
node_locale: locale.code,
localizedPages,
sharedCopy: sharedCopy[locale.code]
sharedCopy: sharedCopy[locale.code],
},
})
})
Expand All @@ -393,7 +437,7 @@ exports.createPages = async ({ graphql, actions }) => {
translation,
node_locale,
localizedPages,
sharedCopy: sharedCopy[node_locale]
sharedCopy: sharedCopy[node_locale],
},
})
})
Expand All @@ -418,6 +462,7 @@ exports.createPages = async ({ graphql, actions }) => {
slug
categories {
name
slug
}
translation
node_locale
Expand Down Expand Up @@ -498,7 +543,7 @@ exports.createPages = async ({ graphql, actions }) => {
pathBuild: slug,
node_locale,
localizedPages,
sharedCopy: sharedCopy[node_locale]
sharedCopy: sharedCopy[node_locale],
},
})
})
Expand All @@ -518,7 +563,9 @@ exports.createPages = async ({ graphql, actions }) => {
}

exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
const { DEFAULT_LOCALE_CODE } = await import('./src/lib/config.mjs')
const { DEFAULT_LOCALE_CODE, LOCALES_TRANSLATE } = await import(
'./src/lib/config.mjs'
)
const { redirects, program, config } = store.getState()
buildSitemap({
query: `
Expand Down Expand Up @@ -548,20 +595,31 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
}
allContentfulNews(filter: {isPrivate: {eq: false}, node_locale: {eq: "${DEFAULT_LOCALE_CODE}"}}) {
nodes {
contentful_id
title
slug
categories {
name
slug
}
translation
publishDate(formatString: "YYYY-MM-DD")
}
}
allContentfulNewsLocalized: allContentfulNews(filter: {isPrivate: {eq: false}, translation: {eq: true}, node_locale: {ne: "${DEFAULT_LOCALE_CODE}"}}) {
nodes {
contentful_id
title
node_locale
}
}
allPrivateContentfulNews: allContentfulNews(filter: {isPrivate: {eq: true}, node_locale: {eq: "${DEFAULT_LOCALE_CODE}"}}) {
nodes {
title
slug
categories {
name
slug
}
}
}
Expand All @@ -572,6 +630,7 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
title
categories {
name
slug
}
}
}
Expand Down Expand Up @@ -621,16 +680,26 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
`/pyusd`,
`/dev-404-page*`,
`/404*`,
`/es/`,
`/ar/`,
`/zh-CN/`,
`/de/`,
`/hi-IN/`,
`/it/`,
`/ja/`,
`/ko/`,
`/ru/`,
`/es/`,
`/tr/`,
`/pcm-NG/`,
`/news/page/+([0-9])`,
`/news/*/page/+([0-9])`,
`/es/news/**`,
`/de/news/**`,
`/zh-CN/news/**`,
`/ar/news/**`,
`/hi-IN/news/**`,
`/it/news/**`,
`/ja/news/**`,
`/ko/news/**`,
`/ru/news/**`,
`/es/news/**`,
`/tr/news/**`,
`/pcm-NG/news/**`,
]
return !excludePages.some(exclude => minimatch(path, exclude))
},
Expand All @@ -645,8 +714,10 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
resolvePages: ({
site,
allContentfulNews,
allContentfulNewsLocalized,
allContentfulNewsNonCanonical,
}) => {
const localizedNews = allContentfulNewsLocalized.nodes
const siteTitle = site.siteMetadata.title
const privatePages = []
allContentfulNewsNonCanonical.nodes.forEach(page => {
Expand All @@ -658,6 +729,27 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
const newsUrl = getNewsUrl(page)
if (privatePages.indexOf(newsUrl) === -1) {
allNews.push({ ...page, path: newsUrl })

if (page.translation) {
LOCALES_TRANSLATE.forEach(locale => {
const localeSlug = `/${locale.code}${newsUrl}`
let localeTitle = page.title
localizedNews.forEach(news => {
if (
news.contentful_id === page.contentful_id &&
news.node_locale === locale.code
) {
localeTitle = news.title
}
})
allNews.push({
...page,
path: localeSlug,
title: localeTitle,
locale: locale.code,
})
})
}
}
})
return allNews.map(page => {
Expand All @@ -666,21 +758,22 @@ exports.onPostBuild = async ({ graphql, store, pathPrefix, reporter }) => {
siteTitle,
publishDate: page.publishDate,
title: page.title,
locale: page.locale,
}
})
},
urlsetAnchorAttributes:
'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"' +
' xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"' +
' xmlns:xhtml="http://www.w3.org/1999/xhtml"',
serializer: ({ path, siteTitle, publishDate, title }) => ({
serializer: ({ path, siteTitle, publishDate, title, locale }) => ({
loc: path,
changefreq: 'daily',
priority: path === '' ? '1' : '0.8',
'news:news': {
'news:publication': {
'news:name': siteTitle,
'news:language': 'en',
'news:language': locale || 'en-US',
},
'news:publication_date': publishDate,
'news:title': title,
Expand Down
1 change: 1 addition & 0 deletions src/components/Contentful/ContentfulLayoutModuleContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const ContentfulModuleContainer = props => {
? modules.map(item => ({
label: item.title,
id: previewMode ? item.title : item.contentful_id,
slug: item.modules?.[0]?.slug,
content: (
<TabContent>
{contentfulModuleToComponent({
Expand Down
12 changes: 6 additions & 6 deletions src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
import {
DEFAULT_LOCALE_CODE,
LOCALES,
PREVIEW_LOCALES,
GB_BLOCKED_PATHS,
} from '../lib/config.mjs'
import ContextClientSide from '../Context/ContextClientSide'
Expand Down Expand Up @@ -137,12 +136,15 @@ const StyledHeader = props => {
let localizedPath

if (locale.code === DEFAULT_LOCALE_CODE) {
localizedPath = pathname.replace(/^\/(ar|zh-CN|de|es)/, '')
localizedPath = pathname.replace(
/^\/(zh-CN|hi-IN|it|ja|ko|ru|es|tr|pcm-NG)/,
''
)
} else {
const newLocale = locale.code === DEFAULT_LOCALE_CODE ? '' : locale.code

localizedPath = `/${newLocale}${pathname.replace(
/^\/(ar|zh-CN|de|es)\//,
/^\/(zh-CN|hi-IN|it|ja|ko|ru|es|tr|pcm-NG)\//,
'/'
)}`
}
Expand All @@ -154,8 +156,6 @@ const StyledHeader = props => {
ldClient?.flush()
}

const LANGUAGES = previewMode ? PREVIEW_LOCALES : LOCALES

// Apply UK(GB) specific temporary geo-blocking rules
useEffect(() => {
if (country !== 'GB') {
Expand Down Expand Up @@ -333,7 +333,7 @@ const StyledHeader = props => {
</NavMenuMain>

<NavMenuChild active={menuActive === 'language-selector'}>
{LANGUAGES.map(locale => (
{LOCALES.map(locale => (
<span
key={locale.code}
onClick={() => onChangeLocale(locale)}
Expand Down
1 change: 1 addition & 0 deletions src/components/Tab/TabHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const TabHeader = props => {
setActiveStateId,
isTabParam,
} = props

const { header: headerREF } = React.useContext(Context)
const { headerRef } = headerREF || {}
const { heroContainer: heroContainerREF } = React.useContext(Context)
Expand Down
6 changes: 4 additions & 2 deletions src/components/Tab/TabHeaderItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
import React from 'react'
import styled, { withTheme } from 'styled-components'
import { Link } from 'gatsby'
import Link from '../Link'
import lowerCase from 'lodash/lowerCase'

const TabHeaderItem = props => {
const {
activeId,
label,
slug,
id,
typeLayout,
setActiveStateId,
isTabParam,
} = props

const changeTab = () => {
setActiveStateId(id)
}

if (isTabParam) {
const newsCategory = encodeURIComponent(lowerCase(label))
const newsCategory = encodeURIComponent(lowerCase(slug))
let newsCategoryUrl = `/news/${newsCategory}/`
if (newsCategory === 'latest') {
newsCategoryUrl = '/news/'
Expand Down
5 changes: 2 additions & 3 deletions src/components/Tab/TabWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const TabWrapper = props => {

if (newsCategory && isTabParam) {
const tabActive = tabs.find(
({ label }) => encodeURIComponent(lowerCase(label)) === newsCategory
({ slug }) => encodeURIComponent(lowerCase(slug)) === newsCategory
)
setActiveStateId(tabActive?.id)
return
Expand All @@ -38,8 +38,7 @@ const TabWrapper = props => {
const newsCategory = pathname.match('/news/([^/]*)/?')
if (newsCategory) {
const tabActive = tabs.find(
({ label }) =>
encodeURIComponent(lowerCase(label)) === newsCategory[1]
({ slug }) => encodeURIComponent(lowerCase(slug)) === newsCategory[1]
)
setActiveStateId(tabActive?.id || activeTabDefault)
return
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const Layout = props => {
},
]}
>
<html lang={mapCodeToHtmlLang(locale, previewMode)} />
<html lang={mapCodeToHtmlLang(locale)} />
</Helmet>
{children}
</Wrapper>
Expand Down
Loading

0 comments on commit 4330586

Please sign in to comment.