applyTrailingSlash to hreflang as well + add comment to useLocation m…

…etadata problem
facebook · Jul 21, 2023 · 6474b3a · 6474b3a
1 parent 786d843
commit 6474b3a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx b/packages/docusaurus-theme-classic/src/theme/SiteMetadata/index.tsx
@@ -62,15 +62,15 @@ function useDefaultCanonicalUrl() {
     siteConfig: {url: siteUrl, baseUrl, trailingSlash},
   } = useDocusaurusContext();
 
-  // TODO using useLocation().pathname is not reliable to create a canonical url
-  // Ex: use CDN features so that 2 paths serve the same html file (/a and /b)
-  // Then we would obtain 2 distinct canonical urls after React hydration: bad
+  // TODO using useLocation().pathname is not a super idea
+  // See https://github.com/facebook/docusaurus/issues/9170
   const {pathname} = useLocation();
 
   const canonicalPathname = applyTrailingSlash(useBaseUrl(pathname), {
     trailingSlash,
     baseUrl,
   });
+
   return siteUrl + canonicalPathname;
 }
 

diff --git 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