[docs] Throw on 301 links

docs/data/base/components/click-away-listener/click-away-listener-pt.md

@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.</p>
 
-- 📦 [1.5 kB gzipped](/size-snapshot).
+- 📦 [1.5 kB gzipped](/size-snapshot/).
 - ⚛️ Suporte para portais
 
 [A paleta](/system/palette/) com funções de estilo.

docs/data/base/components/click-away-listener/click-away-listener-zh.md

@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。</p>
 
-- 📦 [1.5kB 已压缩的包](/size-snapshot)。
+- 📦 [1.5kB 已压缩的包](/size-snapshot/)。
 - ⚛️ 支持传送门组件
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/base/components/click-away-listener/click-away-listener.md

@@ -63,4 +63,4 @@ This is also required to fix a known issue in NVDA when using Firefox that preve
 
 ## Bundle size
 
-📦 [981 B gzipped](/size-snapshot).
+📦 [981 B gzipped](/size-snapshot/).

docs/data/base/components/popper/popper-pt.md

@@ -22,7 +22,7 @@ githubLabel: 'component: Popper'
 
 - Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/base/react-click-away-listener/)
 
-**Bundle size**: 📦 [8 kB gzipped](/size-snapshot).
+**Bundle size**: 📦 [8 kB gzipped](/size-snapshot/).
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

docs/data/base/components/popper/popper-zh.md

@@ -22,7 +22,7 @@ githubLabel: 'component: Popper'
 
 - Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/base/react-click-away-listener/)
 
-**Bundle size**: 📦 [8 kB gzipped](/size-snapshot).
+**Bundle size**: 📦 [8 kB gzipped](/size-snapshot/).
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 

docs/data/base/components/popper/popper.md

@@ -49,4 +49,4 @@ These two callbacks allow the popper to unmount the child content when closed an
 
 ## Bundle size
 
-📦 [8.1 kB gzipped](/size-snapshot).
+📦 [8.1 kB gzipped](/size-snapshot/).

docs/data/base/components/textarea-autosize/textarea-autosize-pt.md

@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">Um componente de texto para React que se ajusta conforme o conteúdo.</p>
 
-- 📦 [2.1 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot/)
 
 O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela.
 

docs/data/base/components/textarea-autosize/textarea-autosize-zh.md

@@ -10,7 +10,7 @@ packageName: '@mui/base'
 
 <p class="description">一个自适应内容大小的 React 文本框组件。</p>
 
-- 📦 [2.1kB 的压缩包](/size-snapshot)
+- 📦 [2.1kB 的压缩包](/size-snapshot/)
 
 当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。
 

docs/data/base/components/textarea-autosize/textarea-autosize.md

@@ -42,4 +42,4 @@ Use the `maxRows` prop to define the maximum height of the component:
 
 ## Bundle size
 
-📦 [1.5 kB gzipped](/size-snapshot).
+📦 [1.5 kB gzipped](/size-snapshot/).

docs/data/material/components/autocomplete/autocomplete-pt.md

@@ -122,7 +122,7 @@ O hook `useAutocomplete` também é reexportado de @mui/material por conveniênc
 import { createFilterOptions } from '@material-ui/core/Autocomplete';
 ```
 
-- 📦 [4.5 kB gzipado](/size-snapshot).
+- 📦 [4.5 kB gzipado](/size-snapshot/).
 
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 

docs/data/material/components/autocomplete/autocomplete-zh.md

@@ -122,7 +122,7 @@ import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```
 
-- 📦 [4.5kB 的压缩包](/size-snapshot)。
+- 📦 [4.5kB 的压缩包](/size-snapshot/)。
 
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 

docs/data/material/components/autocomplete/autocomplete.md

@@ -135,7 +135,7 @@ The `useAutocomplete` hook is also reexported from @mui/material for convenience
 import useAutocomplete from '@mui/material/useAutocomplete';
 ```
 
-- 📦 [4.5 kB gzipped](/size-snapshot).
+- 📦 [4.5 kB gzipped](/size-snapshot/).
 
 {{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}}
 

docs/data/material/components/click-away-listener/click-away-listener-pt.md

@@ -9,7 +9,7 @@ githubLabel: 'component: ClickAwayListener'
 
 <p class="description">Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.</p>
 
-- 📦 [1.5 kB gzipped](/size-snapshot).
+- 📦 [1.5 kB gzipped](/size-snapshot/).
 - ⚛️ Suporte para portais
 
 [A paleta](/system/palette/) com funções de estilo.

docs/data/material/components/click-away-listener/click-away-listener-zh.md

@@ -9,7 +9,7 @@ githubLabel: 'component: ClickAwayListener'
 
 <p class="description">用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。</p>
 
-- 📦 [1.5kB 已压缩的包](/size-snapshot)。
+- 📦 [1.5kB 已压缩的包](/size-snapshot/)。
 - ⚛️ 支持传送门组件
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/material/components/click-away-listener/click-away-listener.md

@@ -9,7 +9,7 @@ githubLabel: 'component: ClickAwayListener'
 
 <p class="description">Detect if a click event happened outside of an element. It listens for clicks that occur somewhere in the document.</p>
 
-- 📦 [992 B gzipped](/size-snapshot).
+- 📦 [992 B gzipped](/size-snapshot/).
 - ⚛️ Supports portals
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/material/components/popper/popper-pt.md

@@ -15,7 +15,7 @@ Algumas características importantes do componente `Popper`:
 
 - 🕷 Popper é baseado na biblioteca de terceiros ([Popper.js](https://github.com/popperjs/popper-core)) para um posicionamento perfeito.
 - 💄 É uma API alternativa para react-popper. Visa a simplicidade.
-- 📦 [8 kB gzipped](/size-snapshot).
+- 📦 [8 kB gzipped](/size-snapshot/).
 - O elemento filho [`Portal`](/material-ui/react-portal/) no corpo do documento, evita problemas de renderização. Você pode desativar esse comportamento com `disablePortal`.
 - O scroll não e bloqueado como ocorre com o componente [`Popover`](/material-ui/react-popover/). O posicionamento do popper é atualizado com a área disponível no visor.
 - Clicar fora não oculta o componente `Popper`. Se você precisar desse comportamento, você pode usar o componente [`ClickAwayListener`](/material-ui/react-click-away-listener/) - veja o exemplo na [seção da documentação do menu](/material-ui/react-menu/#menulist-composition).

docs/data/material/components/popper/popper-zh.md

@@ -15,7 +15,7 @@ packageName: '@mui/base'
 
 - 🕷 Popper 依赖第三方库 ([Popper.js](https://github.com/popperjs/popper-core)) 来实现完美的定位。
 - 💄 这是 react-popper 的一个替代性 API。 它是为了简单性而设计。
-- 📦 [8kB 已压缩的包](/size-snapshot).
+- 📦 [8kB 已压缩的包](/size-snapshot/).
 - 为了避免渲染问题，子组件作为页面 body 的 [`Portal`](/material-ui/react-portal/)。 您可以使用 `disablePortal` 来禁用此行为。
 - 不同于 [`Popper`](/material-ui/react-popover/) 组件，你可以自由实现滚动（scroll）行为。 弹出提示的位置会随着视口中的可用面积而更新。
 - Clicking away 不会隐藏`弹出提示`组件。 若您需要这个功能，请使用 [`ClickAwayListener`](/material-ui/react-click-away-listener/) - 可以参照 [menu 文档章节](/material-ui/react-menu/#menulist-composition) 中的一个样例。

docs/data/material/components/popper/popper.md

@@ -14,7 +14,7 @@ Some important features of the `Popper` component:
 
 - 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/)) for perfect positioning.
 - 💄 It's an alternative API to react-popper. It aims for simplicity.
-- 📦 [24.9 kB gzipped](/size-snapshot).
+- 📦 [24.9 kB gzipped](/size-snapshot/).
 - The children is [`Portal`](/material-ui/react-portal/) to the body of the document to avoid rendering problems.
   You can disable this behavior with `disablePortal`.
 - The scroll isn't blocked like with the [`Popover`](/material-ui/react-popover/) component.

docs/data/material/components/textarea-autosize/textarea-autosize-pt.md

@@ -9,7 +9,7 @@ githubLabel: 'component: TextareaAutosize'
 
 <p class="description">Um componente de texto para React que se ajusta conforme o conteúdo.</p>
 
-- 📦 [2.1 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot/)
 
 O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela.
 

docs/data/material/components/textarea-autosize/textarea-autosize-zh.md

@@ -9,7 +9,7 @@ githubLabel: 'component: TextareaAutosize'
 
 <p class="description">一个自适应内容大小的 React 文本框组件。</p>
 
-- 📦 [2.1kB 的压缩包](/size-snapshot)
+- 📦 [2.1kB 的压缩包](/size-snapshot/)
 
 当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。
 

docs/data/material/components/textarea-autosize/textarea-autosize.md

@@ -9,7 +9,7 @@ githubLabel: 'component: TextareaAutosize'
 
 <p class="description">A textarea component for React which grows with content.</p>
 
-- 📦 [1.5 kB gzipped](/size-snapshot)
+- 📦 [1.5 kB gzipped](/size-snapshot/)
 
 The `TextareaAutosize` component automatically adjust the textarea height on keyboard and window resize events.
 

docs/data/material/components/use-media-query/use-media-query-pt.md

@@ -12,7 +12,7 @@ Algumas das principais características:
 
 - ⚛️ Tem uma API React idiomática.
 - 🚀 É performático, ele observa o documento para detectar quando suas consultas de mídia mudam, em vez de pesquisar os valores periodicamente.
-- 📦 [1 kB gzipped](/size-snapshot).
+- 📦 [1 kB gzipped](/size-snapshot/).
 - 🤖 Suporta a renderização do lado do servidor.
 
 [A paleta](/system/palette/) com funções de estilo.

docs/data/material/components/use-media-query/use-media-query-zh.md

@@ -12,7 +12,7 @@ githubLabel: 'hook: useMediaQuery'
 
 - ⚛️ 它有一个符合用户使用习惯的 React API。
 - 🚀 它是高性能的，原理是通过观测文档的媒体查询值发生更改，而不是使用定期轮询的方法来监听其结果。
-- 📦 [1kB 已压缩的包](/size-snapshot)。
+- 📦 [1kB 已压缩的包](/size-snapshot/)。
 - 🤖 它支持服务器端渲染。
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/material/components/use-media-query/use-media-query.md

@@ -12,7 +12,7 @@ Some of the key features:
 
 - ⚛️ It has an idiomatic React API.
 - 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
-- 📦 [1 kB gzipped](/size-snapshot).
+- 📦 [1 kB gzipped](/size-snapshot/).
 - 🤖 It supports server-side rendering.
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

docs/data/material/discover-more/showcase/appList.js

@@ -114,7 +114,7 @@ const appList = [
     description:
       'Modern Furniture & Accessories, designed in Canada, for everyday living.',
     image: 'eq3.jpg',
-    link: 'https://www.eq3.com/ca/en/',
+    link: 'https://www.eq3.com/ca/en',
     similarWebVisits: 256,
     dateAdded: '2018-01-34',
   },

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md

@@ -4,7 +4,7 @@
 
 ## Tamanho do pacote importa
 
-O tamanho do pacote do Material UI é levado muito a sério. Fotos contendo o tamanho do pacote são feitas em cada commit e partes críticas dos pacotes([veja a última foto](/size-snapshot)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
+O tamanho do pacote do Material UI é levado muito a sério. Fotos contendo o tamanho do pacote são feitas em cada commit e partes críticas dos pacotes([veja a última foto](/size-snapshot/)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
 
 ## Quando e como usar tree-shaking?
 

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md

@@ -4,7 +4,7 @@
 
 ## 打包文件的大小是很重要的
 
-The bundle size of MUI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) 。
+The bundle size of MUI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)). 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) 。
 
 ## 何时以及如何使用 tree-shaking?
 

docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -5,7 +5,7 @@
 ## Bundle size matters
 
 The bundle size of MUI is taken very seriously. Size snapshots are taken
-on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)).
+on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)).
 Combined with [dangerJS](https://danger.systems/js/) we can inspect
 [detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
 

docs/packages/markdown/parseMarkdown.js

@@ -37,6 +37,27 @@ function escape(html, encode) {
   return html;
 }
 
+function checkUrlHealth(href, linkText, context) {
+  // Skip links that are externals to MUI
+  if (!(href[0] === '/' || href.startsWith('https://mui.com/'))) {
+    return;
+  }
+
+  const url = new URL(href, 'https://mui.com/');
+
+  if (url.host === 'mui.com' && url.pathname[url.pathname.length - 1] !== '/') {
+    throw new Error(
+      [
+        'Missing trailing slash. The following link:',
+        `[${linkText}](${href}) in ${context.location} is missing a trailing slash, please add it.`,
+        '',
+        'See https://ahrefs.com/blog/trailing-slash/ for more details.',
+        '',
+      ].join('\n'),
+    );
+  }
+}
+
 /**
  * Extract information from the top of the markdown.
  * For instance, the following input:
@@ -133,7 +154,6 @@ function renderInline(markdown) {
 const noSEOadvantage = [
   'https://material.io/',
   'https://getbootstrap.com/',
-  'https://www.amazon.com/',
   'https://materialdesignicons.com/',
   'https://www.w3.org/',
   'https://tailwindcss.com/',
@@ -240,6 +260,8 @@ function createRender(context) {
 
       let finalHref = href;
 
+      checkUrlHealth(href, linkText, context);
+
       if (
         userLanguage !== 'en' &&
         href.indexOf('/') === 0 &&
@@ -325,6 +347,28 @@ function createRender(context) {
   return render;
 }
 
+/**
+ * @param {string} product
+ * @example 'material'
+ * @param {string} componentPkg
+ * @example 'mui-base'
+ * @param {string} component
+ * @example 'ButtonUnstyled'
+ * @returns {string}
+ */
+function resolveComponentApiUrl(product, componentPkg, component) {
+  if (!product) {
+    return `/api/${kebabCase(component)}/`;
+  }
+  if (product === 'date-pickers') {
+    return `/x/api/date-pickers/${kebabCase(component)}/`;
+  }
+  if (componentPkg === 'mui-base') {
+    return `/base/api/${kebabCase(component)}/`;
+  }
+  return `/${product}/api/${kebabCase(component)}/`;
+}
+
 /**
  * @param {object} config
  * @param {Array<{ markdown: string, filename: string, userLanguage: string }>} config.translations - Mapping of locale to its markdown
@@ -340,28 +384,6 @@ function prepareMarkdown(config) {
   const docs = {};
   const headingHashes = {};
 
-  /**
-   * @param {string} product
-   * @example 'material'
-   * @param {string} componentPkg
-   * @example 'mui-base'
-   * @param {string} component
-   * @example 'ButtonUnstyled'
-   * @returns {string}
-   */
-  function resolveComponentApiUrl(product, componentPkg, component) {
-    if (!product) {
-      return `/api/${kebabCase(component)}/`;
-    }
-    if (product === 'date-pickers') {
-      return `/x/api/date-pickers/${kebabCase(component)}/`;
-    }
-    if (componentPkg === 'mui-base') {
-      return `/base/api/${kebabCase(component)}/`;
-    }
-    return `/${product}/api/${kebabCase(component)}/`;
-  }
-
   translations
     // Process the English markdown before the other locales.
     // English ToC anchor links are used in all languages
@@ -399,8 +421,9 @@ ${headers.components
   `);
       }
 
+      const location = headers.filename || `/docs${pageFilename}/${filename}`;
       const toc = [];
-      const render = createRender({ headingHashes, toc, userLanguage });
+      const render = createRender({ headingHashes, toc, userLanguage, location });
 
       const rendered = contents.map((content) => {
         if (/^"(demo|component)": "(.*)"/.test(content)) {
@@ -425,7 +448,7 @@ ${headers.components
 
       docs[userLanguage] = {
         description,
-        location: headers.filename || `/docs${pageFilename}/${filename}`,
+        location,
         rendered,
         toc,
         title,