[docs-infra] Catch duplicated trailing splashes in links (mui#38758)

Signed-off-by: Olivier Tassinari <[email protected]>

docs/.link-check-errors.txt

@@ -1,4 +1,4 @@
 Broken links found by `yarn docs:link-check` that exist:
 
 - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨
-- https://mui.com/size-snapshot
+- https://mui.com/size-snapshot/

docs/pages/blog/first-look-at-joy.md

@@ -22,7 +22,7 @@ Material UI is MUI's React implementation of Google's Material Design.
 
 Over time Material UI has established itself as the go-to library for quickly breathing life into products, mostly thanks to its design, customizability, and documentation.
 However, the components do come by default with the 2018 Google look and feel that is no longer as popular as it once was.
-And as we've confirmed with [our latest developer survey](/blog/2021-developer-survey-results/#what-are-your-most-important-criteria-for-choosing-a-ui-library/), design quality is one of the most important elements that developers consider when choosing a UI library.
+And as we've confirmed with [our latest developer survey](/blog/2021-developer-survey-results/#what-are-your-most-important-criteria-for-choosing-a-ui-library), design quality is one of the most important elements that developers consider when choosing a UI library.
 
 ## Why not just build a new Material UI theme?
 

docs/scripts/reportBrokenLinks.js

@@ -6,7 +6,7 @@ const { marked } = require('marked');
 const { LANGUAGES_IGNORE_PAGES } = require('../config');
 
 // Use renderer to extract all links into a markdown document
-const getPageLinks = (markdown) => {
+function getPageLinks(markdown) {
   const hrefs = [];
 
   const renderer = new marked.Renderer();
@@ -17,10 +17,10 @@ const getPageLinks = (markdown) => {
   };
   marked(markdown, { mangle: false, headerIds: false, renderer });
   return hrefs;
-};
+}
 
 // List all .js files in a folder
-const getJsFilesInFolder = (folderPath) => {
+function getJsFilesInFolder(folderPath) {
   const files = fse.readdirSync(folderPath, { withFileTypes: true });
   return files.reduce((acc, file) => {
     if (file.isDirectory()) {
@@ -32,7 +32,7 @@ const getJsFilesInFolder = (folderPath) => {
     }
     return acc;
   }, []);
-};
+}
 
 // Returns url assuming it's "./docs/pages/x/..." becomes  "mui.com/x/..."
 const jsFilePathToUrl = (jsFilePath) => {
@@ -41,10 +41,10 @@ const jsFilePathToUrl = (jsFilePath) => {
 
   const root = folder.slice(jsFilePath.indexOf('/pages') + '/pages'.length);
   const suffix = path.extname(file);
-  let page = `/${file.slice(0, file.length - suffix.length)}`;
+  let page = `/${file.slice(0, file.length - suffix.length)}/`;
 
-  if (page === '/index') {
-    page = '';
+  if (page === '/index/') {
+    page = '/';
   }
 
   return `${root}${page}`;
@@ -146,18 +146,16 @@ const parseDocFolder = (folderPath, availableLinks = {}, usedLinks = {}) => {
   mdFiles.forEach(({ fileName, url }) => {
     const { hashes, links } = getLinksAndAnchors(fileName);
 
-    links
-      .map((link) => (link[link.length - 1] === '/' ? link.slice(0, link.length - 1) : link))
-      .forEach((link) => {
-        if (usedLinks[link] === undefined) {
-          usedLinks[link] = [fileName];
-        } else {
-          usedLinks[link].push(fileName);
-        }
-      });
+    links.forEach((link) => {
+      if (usedLinks[link] === undefined) {
+        usedLinks[link] = [fileName];
+      } else {
+        usedLinks[link].push(fileName);
+      }
+    });
 
     hashes.forEach((hash) => {
-      availableLinks[`${url}/#${hash}`] = true;
+      availableLinks[`${url}#${hash}`] = true;
     });
   });
 };

packages/markdown/parseMarkdown.js

@@ -55,6 +55,18 @@ function escape(html, encode) {
 function checkUrlHealth(href, linkText, context) {
   const url = new URL(href, 'https://mui.com/');
 
+  if (/\/{2,}$/.test(url.pathname)) {
+    throw new Error(
+      [
+        'docs-infra: Duplicated trailing slashes. The following link:',
+        `[${linkText}](${href}) in ${context.location} has duplicated trailing slashes, please only add one.`,
+        '',
+        'See https://ahrefs.com/blog/trailing-slash/ for more details.',
+        '',
+      ].join('\n'),
+    );
+  }
+
   // External links to MUI, ignore
   if (url.host !== 'mui.com') {
     return;

packages/markdown/prepareMarkdown.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import prepareMarkdown from './prepareMarkdown';
 
-describe('parseMarkdown', () => {
+describe('prepareMarkdown', () => {
   const defaultParams = {
     fileRelativeContext: 'test/bar',
     options: {
@@ -396,4 +396,22 @@ npm install @mui/material
 Use "bash" instead.
 `);
   });
+
+  it('should report duplicated trailing splashes', () => {
+    const markdown = `
+# Localization
+
+<p class="description">Foo</p>
+
+[foo](/foo/)
+[bar](/bar//#foo)
+`;
+
+    expect(() => {
+      prepareMarkdown({
+        ...defaultParams,
+        translations: [{ filename: 'index.md', markdown, userLanguage: 'en' }],
+      });
+    }).to.throw(`docs-infra: Duplicated trailing slashes.`);
+  });
 });