diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx index 359d77fec4..caffe1600c 100644 --- a/components/article/PlatformPicker.tsx +++ b/components/article/PlatformPicker.tsx @@ -51,7 +51,7 @@ type Props = { } export const PlatformPicker = ({ variant = 'subnav' }: Props) => { const router = useRouter() - const { query, asPath } = router + const { query, asPath, locale } = router const { defaultPlatform, detectedPlatforms } = useArticleContext() const [currentPlatform, setCurrentPlatform] = useState(defaultPlatform || '') @@ -91,7 +91,10 @@ export const PlatformPicker = ({ variant = 'subnav' }: Props) => { const [pathRoot, pathQuery = ''] = asPath.split('?') const params = new URLSearchParams(pathQuery) params.set(platformQueryKey, platform) - router.push({ pathname: pathRoot, query: params.toString() }, undefined, { shallow: true }) + router.push({ pathname: pathRoot, query: params.toString() }, undefined, { + shallow: true, + locale, + }) sendEvent({ type: EventType.preference, diff --git a/components/article/ToolPicker.tsx b/components/article/ToolPicker.tsx index 31c5b3e8b5..71e7018d73 100644 --- a/components/article/ToolPicker.tsx +++ b/components/article/ToolPicker.tsx @@ -53,7 +53,7 @@ type Props = { } export const ToolPicker = ({ variant = 'subnav' }: Props) => { const router = useRouter() - const { asPath, query } = router + const { asPath, query, locale } = router // allTools comes from the ArticleContext which contains the list of tools available const { defaultTool, detectedTools, allTools } = useArticleContext() const [currentTool, setCurrentTool] = useState(getDefaultTool(defaultTool, detectedTools)) @@ -97,7 +97,10 @@ export const ToolPicker = ({ variant = 'subnav' }: Props) => { const [pathRoot, pathQuery = ''] = asPath.split('?') const params = new URLSearchParams(pathQuery) params.set(toolQueryKey, tool) - router.push({ pathname: pathRoot, query: params.toString() }, undefined, { shallow: true }) + router.push({ pathname: pathRoot, query: params.toString() }, undefined, { + shallow: true, + locale, + }) sendEvent({ type: EventType.preference, diff --git a/components/guides/ArticleCards.tsx b/components/guides/ArticleCards.tsx index 0c8672f896..3ce7ff169f 100644 --- a/components/guides/ArticleCards.tsx +++ b/components/guides/ArticleCards.tsx @@ -63,69 +63,73 @@ export const ArticleCards = () => { return (
- -
-
-
clickDropdown(typesRef)} - onKeyDown={() => clickDropdown(typesRef)} - role="button" - tabIndex={-1} - className="text-uppercase f6 color-fg-muted d-block" - > - {t('filters.type')} +
+ + +
+
clickDropdown(typesRef)} + onKeyDown={() => clickDropdown(typesRef)} + role="button" + tabIndex={-1} + className="text-uppercase f6 color-fg-muted d-block" + > + {t('filters.type')} +
+ + + {typeFilter ? typeFilter.text : t('filters.all')} + + + + {types.map((type) => { + return ( + setTypeFilter(type)} key={type.text}> + {type.text} + + ) + })} + + +
- - {typeFilter ? typeFilter.text : t('filters.all')} - - - {types.map((type) => { - return ( - setTypeFilter(type)} key={type.text}> - {type.text} - - ) - })} - - - -
-
-
clickDropdown(topicsRef)} - onKeyDown={() => clickDropdown(topicsRef)} - role="button" - tabIndex={-1} - className="text-uppercase f6 color-fg-muted d-block" - > - {t('filters.topic')} +
+
clickDropdown(topicsRef)} + onKeyDown={() => clickDropdown(topicsRef)} + role="button" + tabIndex={-1} + className="text-uppercase f6 color-fg-muted d-block" + > + {t('filters.topic')} +
+ + + {topicFilter ? topicFilter.text : t('filters.all')} + + + + {topics.map((topic) => { + return ( + setTopicFilter(topic)} key={topic.text}> + {topic.text} + + ) + })} + + +
- - - {topicFilter ? topicFilter.text : t('filters.all')} - - - - {topics.map((topic) => { - return ( - setTopicFilter(topic)} key={topic.text}> - {topic.text} - - ) - })} - - - -
- + -
- {guides.length === 0 - ? t('guides_found.none') - : guides.length === 1 - ? t('guides_found.one') - : t('guides_found.multiple').replace('{n}', guides.length)} +
+ {guides.length === 0 + ? t('guides_found.none') + : guides.length === 1 + ? t('guides_found.one') + : t('guides_found.multiple').replace('{n}', guides.length)} +
    @@ -144,6 +148,7 @@ export const ArticleCards = () => { {guides.length > numVisible && (