From eae951ade71605a22bf6f4d863b70f49d1f6c9db Mon Sep 17 00:00:00 2001 From: Agrim Jain Date: Tue, 28 May 2024 12:51:46 +0400 Subject: [PATCH] url issue --- .../MobileSidebar/PrimaryMenu/index.tsx | 51 +++++----------- .../LocaleDropdownNavbarItem/index.tsx | 61 ++++++++----------- 2 files changed, 42 insertions(+), 70 deletions(-) diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx index 8831a3fa3..e32d84cdf 100644 --- a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx +++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx @@ -38,55 +38,36 @@ export default function CustomMobileSidebar() { i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs }, } = useDocusaurusContext(); - const constructHref = (locale) => { - if (pathname === '/') { - return locale === 'en' ? '/' : `/${locale}`; - } else { - const firstSlashIndex = pathname.indexOf('/'); - const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); - let newPathname = pathname; - - if (secondSlashIndex === -1) { - newPathname = - locale === 'en' || pathname === '/en' - ? pathname.substring(firstSlashIndex) - : `/${locale}${pathname}`; + const replaceLocaleInPath = (path, newLocale) => { + const segments = path.split('/').filter(Boolean); + if (locales.includes(segments[0])) { + if (newLocale === 'en') { + segments.shift(); } else { - const currentLocaleInPath = pathname.substring(1, secondSlashIndex); - const isValidLocale = locales.includes(currentLocaleInPath); - - if (isValidLocale && locale === 'en') { - return pathname.substring(secondSlashIndex); - } else if (isValidLocale) { - return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); - } else if (locale !== 'en') { - return `/${locale}${pathname}`; - } else { - return pathname; - } + segments[0] = newLocale; } - - return newPathname; + } else if (newLocale !== 'en') { + segments.unshift(newLocale); } - }; - - const handleLocaleChange = (newLocale) => { - const newPathname = constructHref(newLocale); - window.history.pushState(null, '', newPathname); + return '/' + segments.join('/'); }; const localeItems = locales.map((locale) => { - const newPathname = constructHref(locale); - + const newPathname = replaceLocaleInPath(pathname, locale); return { label: localeConfigs[locale].label, lang: locale, - to: newPathname, + to: `${newPathname}${search}${hash}`, className: classnames({ 'dropdown__link--active': locale === currentLocale }), onClick: () => handleLocaleChange(locale), }; }); + const handleLocaleChange = (newLocale) => { + const newPathname = replaceLocaleInPath(pathname, newLocale); + window.history.pushState(null, '', newPathname); + }; + const getShortNames = (locale) => { switch (locale) { case 'en': diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 5780f66c4..e0251d3d9 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -1,7 +1,10 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; import { useLocation } from '@docusaurus/router'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; +import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; +import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import classnames from 'classnames'; import './locale-dropdown-navbar-item.scss'; @@ -9,50 +12,38 @@ export default function LocaleDropdownNavbarItem({ dropdownItemsBefore = [], dropdownItemsAfter = [], ...props -}) { +}: Props): JSX.Element { const { i18n: { currentLocale, locales, localeConfigs }, } = useDocusaurusContext(); - const { pathname } = useLocation(); + const alternatePageUtils = useAlternatePageUtils(); + const { pathname, search, hash } = useLocation(); - const constructHref = (locale) => { - if (pathname === '/') { - return locale === 'en' ? '/' : `/${locale}`; - } else { - const firstSlashIndex = pathname.indexOf('/'); - const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1); - - if (secondSlashIndex === -1) { - return locale === 'en' ? pathname.substring(firstSlashIndex) : `/${locale}${pathname}`; // Correct for single slash case + const replaceLocale = (path, newLocale) => { + const segments = path.split('/'); + if (locales.includes(segments[1])) { + if (newLocale === 'en') { + segments.splice(1, 1); } else { - const currentLocaleInPath = pathname.substring(1, secondSlashIndex); - const isValidLocale = locales.includes(currentLocaleInPath); - - if (isValidLocale && locale === 'en') { - return pathname.substring(secondSlashIndex); - } else if (isValidLocale) { - return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`); - } else if (locale !== 'en') { - return `/${locale}${pathname}`; - } else { - return pathname; - } + segments[1] = newLocale; } + } else if (newLocale !== 'en') { + segments.splice(1, 0, newLocale); } + return segments.join('/'); }; - const handleLocaleChange = (newLocale) => { - const newPathname = constructHref(newLocale); - window.history.pushState({ path: newPathname }, '', newPathname); - }; - - const localeItems = locales.map((locale) => ({ - label: localeConfigs[locale].label, - lang: localeConfigs[locale].htmlLang, - onClick: () => handleLocaleChange(locale), - className: classnames({ 'dropdown__link--active': locale === currentLocale }), - href: constructHref(locale), - })); + const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { + const newPath = replaceLocale(pathname, locale); + return { + label: localeConfigs[locale].label, + lang: localeConfigs[locale].htmlLang, + to: `${newPath}${search}${hash}`, + target: '_self', + autoAddBaseUrl: false, + className: classnames({ 'dropdown__link--active': locale === currentLocale }), + }; + }); const getShortNames = (locale) => { switch (locale) {