From 9a715e0978dcc5e317f666e2e0504f46a7423db9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 10 Sep 2023 15:21:29 +0200 Subject: [PATCH] [docs-infra] Catch duplicated trailing splashes in links (#38758) Signed-off-by: Olivier Tassinari --- docs/.link-check-errors.txt | 2 +- docs/pages/blog/first-look-at-joy.md | 2 +- docs/scripts/reportBrokenLinks.js | 32 +++++++++++------------ packages/markdown/parseMarkdown.js | 12 +++++++++ packages/markdown/prepareMarkdown.test.js | 20 +++++++++++++- 5 files changed, 48 insertions(+), 20 deletions(-) diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index 4f82b8fd7ece91..56651fd0545f7e 100644 --- a/docs/.link-check-errors.txt +++ b/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/ diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md index 66d237cb5694bb..1e2ff5c23e8f1d 100644 --- a/docs/pages/blog/first-look-at-joy.md +++ b/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? diff --git a/docs/scripts/reportBrokenLinks.js b/docs/scripts/reportBrokenLinks.js index 809f6b525e5824..4b291750815399 100644 --- a/docs/scripts/reportBrokenLinks.js +++ b/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; }); }); }; diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 1a920d842d3884..1b6eb99a152148 100644 --- a/packages/markdown/parseMarkdown.js +++ b/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; diff --git a/packages/markdown/prepareMarkdown.test.js b/packages/markdown/prepareMarkdown.test.js index 00abbd5faa9d4a..0acb80e3d798c5 100644 --- a/packages/markdown/prepareMarkdown.test.js +++ b/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 + +

Foo

+ +[foo](/foo/) +[bar](/bar//#foo) +`; + + expect(() => { + prepareMarkdown({ + ...defaultParams, + translations: [{ filename: 'index.md', markdown, userLanguage: 'en' }], + }); + }).to.throw(`docs-infra: Duplicated trailing slashes.`); + }); });