feat: add trailing slashes to sidebar, breadcrumbs, top level links and hreflang tag

Author: vi-nastya

gatsby-node.js

@@ -18,7 +18,7 @@ const {
   getDocSection,
   buildBreadcrumbs,
   dedupePath,
-  noTrailingSlash,
+  addTrailingSlash,
   removeEnPrefix,
   translatePath,
   getSlug,
@@ -179,7 +179,7 @@ function getSupplementaryPagesProps({
         return {
           path: compose(
             removeEnPrefix,
-            noTrailingSlash,
+            addTrailingSlash,
             dedupePath,
             slugify,
           )(path),
@@ -222,15 +222,16 @@ function getSupplementaryPagesProps({
         return {
           path: compose(
             removeEnPrefix,
-            noTrailingSlash,
+            addTrailingSlash,
             dedupePath,
             slugify,
           )(path),
           component: Path.resolve('./src/templates/docs/breadcrumb-stub.js'),
           context: {
             sidebarTree: getGuidesSidebar(locale),
             breadcrumbs: breadcrumbs.filter(
-              (item) => !SUPPORTED_LOCALES.includes(item.path.replace('/', '')),
+              (item) =>
+                !SUPPORTED_LOCALES.includes(item.path.replace(/\//g, '')),
             ),
             title: meta.title,
             navLinks: generateTopLevelLinks(topLevelLinks),
@@ -273,7 +274,7 @@ function getTopLevelPagesProps({
       }
 
       return {
-        path: slug === 'guides' ? `/` : `/${slug}`,
+        path: slug === 'guides' ? `/` : `/${slug}/`,
         component: Path.resolve(`./src/templates/docs/${slug}.js`),
         context: {
           sidebarTree: getSidebar(name),
@@ -283,7 +284,7 @@ function getTopLevelPagesProps({
     })
     .concat(
       SUPPORTED_LOCALES.map((locale) => ({
-        path: locale === 'en' ? '/' : `/${locale}`,
+        path: locale === 'en' ? '/' : `/${locale}/`,
         component: Path.resolve(`./src/templates/docs/guides.js`),
         context: {
           sidebarTree: getGuidesSidebar(locale),
@@ -332,7 +333,7 @@ function getDocPagesProps({
       const strippedDirectory = stripDirectoryPath(relativeDirectory, 'docs');
       const path = `${strippedDirectory}/${title.replace(/\//g, '-')}`;
 
-      const slug = customSlug || getSlug(path);
+      const slug = customSlug ? addTrailingSlash(customSlug) : getSlug(path);
       // path collision check
       if (!pathCollisionDetectorInstance.add({ path: slug, name }).isUnique()) {
         // skip the page creation if there is already a page with identical url
@@ -425,7 +426,7 @@ function getGuidesPagesProps({
           ? getSlug(path)
           : getTranslatedSlug(relativeDirectory, title, pageLocale, 'guides');
 
-      const pageSlug = customSlug || slug;
+      const pageSlug = customSlug ? addTrailingSlash(customSlug) : slug;
 
       // path collision check
       if (!pathCollisionDetectorInstance.add({ path: slug, name }).isUnique()) {
@@ -480,7 +481,7 @@ function getGuidesPagesProps({
           remarkNode: extendedRemarkNode,
           sidebarTree,
           breadcrumbs: breadcrumbs.filter(
-            (item) => !SUPPORTED_LOCALES.includes(item.path.replace('/', '')),
+            (item) => !SUPPORTED_LOCALES.includes(item.path.replace(/\//g, '')),
           ),
           navLinks: generateTopLevelLinks(topLevelLinks),
           locale: pageLocale,
@@ -594,7 +595,7 @@ async function createDocPages({
     .filter((name) => name !== 'Cloud REST API')
     .map((name) => ({
       label: name === 'cloud' ? 'Cloud Docs' : name.toUpperCase(),
-      to: name === 'guides' ? `/` : `/${slugify(name)}`,
+      to: name === 'guides' ? `/` : `/${slugify(name)}/`,
     }));
 
   getDocPagesProps({
@@ -634,14 +635,14 @@ const createRedirects = ({ actions }) => {
   const { createRedirect } = actions;
 
   createRedirect({
-    fromPath: '/getting-started/welcome',
+    fromPath: '/getting-started/welcome/',
     toPath: '/',
     redirectInBrowser: true,
     isPermanent: true,
   });
   createRedirect({
-    fromPath: '/es/empezando/bienvenido',
-    toPath: '/es',
+    fromPath: '/es/empezando/bienvenido/',
+    toPath: '/es/',
     redirectInBrowser: true,
     isPermanent: true,
   });

src/components/shared/seo/seo.view.js

@@ -49,13 +49,13 @@ export const SEO = ({
     let esPathname = pageTranslations.es.path;
     let enPathname = pageTranslations.en.path;
 
-    if (esPathname.endsWith('/')) {
-      // gatsby-plugin-react-helmet-canonical-urls.noTrailingSlash
-      esPathname = esPathname.substring(0, esPathname.length - 1);
+    if (!esPathname.endsWith('/')) {
+      // make sure each link has trailing slash
+      esPathname = `${esPathname}/`;
     }
-    if (enPathname.endsWith('/')) {
-      // gatsby-plugin-react-helmet-canonical-urls.noTrailingSlash
-      enPathname = enPathname.substring(0, enPathname.length - 1);
+    if (!enPathname.endsWith('/')) {
+      // make sure each link has trailing slash
+      enPathname = `${enPathname}/`;
     }
     hrefLangAttributes.es.href += esPathname;
     hrefLangAttributes.en.href += enPathname;

src/utils/utils.node.js

@@ -9,6 +9,13 @@ const DEFAULT_LOCALE = 'en';
 // create a container;
 const utils = {};
 
+// ensures that no trailing slash is left
+const noTrailingSlash = (path) =>
+  path === '/' ? '/' : path.replace(/(.+)\/$/, '$1');
+
+// ensures that path has a trailing slash
+const addTrailingSlash = (path) => path.replace(/\/$|$/, `/`);
+
 const translatePathPart = (item, locale) => {
   if (
     typeof pathTranslations[item] !== 'undefined' &&
@@ -44,7 +51,7 @@ const buildBreadcrumbs = (path) => {
     }
     return {
       name,
-      path: slug,
+      path: addTrailingSlash(slug),
     };
   });
 };
@@ -205,14 +212,10 @@ const redirectWelcome = (path) =>
     .replace(/en\/getting-started\/welcome/i, '')
     .replace(/empezando\/bienvenido/i, '');
 
-// ensures that no trailing slash is left
-const noTrailingSlash = (path) =>
-  path === '/' ? '/' : path.replace(/(.+)\/$/, '$1');
-
 const getSlug = (path) => {
   const slug = compose(
     removeEnPrefix,
-    noTrailingSlash,
+    addTrailingSlash,
     redirectWelcome,
     dedupePath,
     unorderify,
@@ -234,7 +237,7 @@ const getTranslatedSlug = (
   const translatedPath = translatePath(path, locale);
 
   const slug = compose(
-    noTrailingSlash,
+    addTrailingSlash,
     redirectWelcome,
     dedupePath,
     slugify,
@@ -244,6 +247,9 @@ const getTranslatedSlug = (
 };
 
 Object.defineProperties(utils, {
+  addTrailingSlash: {
+    value: addTrailingSlash,
+  },
   noTrailingSlash: {
     value: noTrailingSlash,
   },