From 4ea0a70f93fecfe18929153957dc12ae72c8a3b3 Mon Sep 17 00:00:00 2001
From: Ori Shalom <ori-shalom@users.noreply.github.com>
Date: Fri, 21 Jul 2023 20:22:26 +0300
Subject: [PATCH] fix(theme): canonical url should be not change after
 hydration if url accessed with/without trailing slash (#9130)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
---
 .../src/theme/SiteMetadata/index.tsx               | 14 ++++++++++++--
 .../src/utils/useAlternatePageUtils.ts             | 13 +++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
index 9a30c775ff..4a275e819c 100644
--- a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
@@ -16,6 +16,7 @@ import {
   keyboardFocusedClassName,
 } from '@docusaurus/theme-common/internal';
 import {useLocation} from '@docusaurus/router';
+import {applyTrailingSlash} from '@docusaurus/utils-common';
 import SearchMetadata from '@theme/SearchMetadata';
 
 // TODO move to SiteMetadataDefaults or theme-common ?
@@ -58,10 +59,19 @@ function AlternateLangHeaders(): JSX.Element {
 // Default canonical url inferred from current page location pathname
 function useDefaultCanonicalUrl() {
   const {
-    siteConfig: {url: siteUrl},
+    siteConfig: {url: siteUrl, baseUrl, trailingSlash},
   } = useDocusaurusContext();
+
+  // TODO using useLocation().pathname is not a super idea
+  // See https://github.com/facebook/docusaurus/issues/9170
   const {pathname} = useLocation();
-  return siteUrl + useBaseUrl(pathname);
+
+  const canonicalPathname = applyTrailingSlash(useBaseUrl(pathname), {
+    trailingSlash,
+    baseUrl,
+  });
+
+  return siteUrl + canonicalPathname;
 }
 
 // TODO move to SiteMetadataDefaults or theme-common ?
diff --git a/packages/docusaurus-theme-common/src/utils/useAlternatePageUtils.ts b/packages/docusaurus-theme-common/src/utils/useAlternatePageUtils.ts
index ae0e55dcdd..073aa8956f 100644
--- a/packages/docusaurus-theme-common/src/utils/useAlternatePageUtils.ts
+++ b/packages/docusaurus-theme-common/src/utils/useAlternatePageUtils.ts
@@ -7,6 +7,7 @@
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useLocation} from '@docusaurus/router';
+import {applyTrailingSlash} from '@docusaurus/utils-common';
 
 /**
  * Permits to obtain the url of the current page in another locale, useful to
@@ -35,17 +36,25 @@ export function useAlternatePageUtils(): {
   }) => string;
 } {
   const {
-    siteConfig: {baseUrl, url},
+    siteConfig: {baseUrl, url, trailingSlash},
     i18n: {defaultLocale, currentLocale},
   } = useDocusaurusContext();
+
+  // TODO using useLocation().pathname is not a super idea
+  // See https://github.com/facebook/docusaurus/issues/9170
   const {pathname} = useLocation();
 
+  const canonicalPathname = applyTrailingSlash(pathname, {
+    trailingSlash,
+    baseUrl,
+  });
+
   const baseUrlUnlocalized =
     currentLocale === defaultLocale
       ? baseUrl
       : baseUrl.replace(`/${currentLocale}/`, '/');
 
-  const pathnameSuffix = pathname.replace(baseUrl, '');
+  const pathnameSuffix = canonicalPathname.replace(baseUrl, '');
 
   function getLocalizedBaseUrl(locale: string) {
     return locale === defaultLocale