[blog] Fix missing card

See how https://twitter.com/MUI_hq/status/1688919247504957440 doesn't have a card. It's a follow-up on #38258. I think that we should be able to fail the build if the card is missing, but too lazy.
mui · Sep 6, 2023 · db2332a · db2332a
1 parent d0a82a6
commit db2332a
Show file tree

Hide file tree

Showing 12 changed files with 664 additions and 642 deletions.
diff --git a/docs/pages/blog/discord-announcement.md b/docs/pages/blog/discord-announcement.md
@@ -7,7 +7,7 @@ tags: ['News']
 card: true
 ---
 
-<a href="https://mui.com/r/discord/"><img src="/static/blog/2023-discord-announcement/discord.png" width="1280" height="640" style="margin-bottom: 16px;" alt="Discord banner with link" /></a>
+<a href="https://mui.com/r/discord/"><img src="/static/blog/discord-announcement/discord.png" width="1280" height="640" style="margin-bottom: 16px;" alt="Discord banner with link" /></a>
 
 This year, one of our highest priorities has been to create a central hub for the MUI community.
 Up until now, our community has been scattered across discussions and interactions on [Twitter](https://twitter.com/MUI_hq), [LinkedIn](https://linkedin.com/company/mui), [GitHub](https://github.com/mui), and [Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).

diff --git a/docs/pages/blog/lab-tree-view-to-mui-x.md b/docs/pages/blog/lab-tree-view-to-mui-x.md
@@ -4,7 +4,7 @@ description: Migrate to the new package to start building with our powerful Tree
 date: 2023-08-21T00:00:00.000Z
 authors: ['flaviendelangle']
 tags: ['MUI X', 'News']
-card: true
+card: false
 ---
 
 After more than 4 years in the lab, the [Tree View](https://mui.com/x/react-tree-view/) components have found a new home as part of MUI X.

diff --git a/docs/pages/experiments/blog/blog.md b/docs/pages/experiments/blog/blog.md
@@ -3,7 +3,7 @@ title: Blog post title
 description: Our internationally distributed startup gathered on a remote island to get to know each other better. Here's what happened!
 date: 2022-07-28T00:00:00.000Z
 authors: ['samuelsycamore']
-card: true
+card: false
 tags: ['Company']
 ---
 

diff --git a/docs/public/static/blog/2023-discord-announcement/card.png b/docs/public/static/blog/2023-discord-announcement/card.png
diff --git a/docs/public/static/blog/discord-announcement/card.png b/docs/public/static/blog/discord-announcement/card.png
diff --git a/...log/2023-discord-announcement/discord.png → ...tic/blog/discord-announcement/discord.png b/...log/2023-discord-announcement/discord.png → ...tic/blog/discord-announcement/discord.png
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -247,7 +247,7 @@ function TopLayoutBlog(props) {
   const { description, rendered, title, headers } = docs.en;
   const finalTitle = title || headers.title;
   const router = useRouter();
-  const slug = router.pathname.replace(/\/blog\//, '');
+  const slug = router.pathname.replace(/(.*)\/(.*)/, '$2');
   const { canonicalAsServer } = pathnameToLanguage(router.asPath);
   const card =
     headers.card === 'true'

diff --git a/packages/markdown/loader.js b/packages/markdown/loader.js
@@ -1,6 +1,6 @@
 const { promises: fs, readdirSync } = require('fs');
 const path = require('path');
-const { prepareMarkdown } = require('./parseMarkdown');
+const prepareMarkdown = require('./prepareMarkdown');
 const extractImports = require('./extractImports');
 
 const notEnglishMarkdownRegExp = /-([a-z]{2})\.md$/;

diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -1,5 +1,4 @@
 const { marked } = require('marked');
-const kebabCase = require('lodash/kebabCase');
 const textToHash = require('./textToHash');
 const prism = require('./prism');
 
@@ -448,243 +447,12 @@ function createRender(context) {
   return render;
 }
 
-const BaseUIReexportedComponents = ['ClickAwayListener', 'NoSsr', 'Portal', 'TextareaAutosize'];
-
-/**
- * @param {string} productId
- * @example 'material'
- * @param {string} componentPkg
- * @example 'mui-base'
- * @param {string} component
- * @example 'Button'
- * @returns {string}
- */
-function resolveComponentApiUrl(productId, componentPkg, component) {
-  if (!productId) {
-    return `/api/${kebabCase(component)}/`;
-  }
-  if (productId === 'x-date-pickers') {
-    return `/x/api/date-pickers/${kebabCase(component)}/`;
-  }
-  if (productId === 'x-charts') {
-    return `/x/api/charts/${kebabCase(component)}/`;
-  }
-  if (productId === 'x-tree-view') {
-    return `/x/api/tree-view/${kebabCase(component)}/`;
-  }
-  if (componentPkg === 'mui-base' || BaseUIReexportedComponents.indexOf(component) >= 0) {
-    return `/base-ui/react-${kebabCase(component)}/components-api/#${kebabCase(component)}`;
-  }
-  return `/${productId}/api/${kebabCase(component)}/`;
-}
-
-/**
- * @param {object} config
- * @param {Array<{ markdown: string, filename: string, userLanguage: string }>} config.translations - Mapping of locale to its markdown
- * @param {string} config.fileRelativeContext - posix filename relative to repository root directory
- * @param {object} config.options - provided to the webpack loader
- */
-function prepareMarkdown(config) {
-  const { fileRelativeContext, translations, componentPackageMapping = {}, options } = config;
-
-  const demos = {};
-  /**
-   * @type {Record<string, { rendered: Array<string | { component: string } | { demo:string }> }>}
-   */
-  const docs = {};
-  const headingHashes = {};
-
-  translations
-    // Process the English markdown before the other locales.
-    // English ToC anchor links are used in all languages
-    .sort((a) => (a.userLanguage === 'en' ? -1 : 1))
-    .forEach((translation) => {
-      const { filename, markdown, userLanguage } = translation;
-      const headers = getHeaders(markdown);
-      const location = headers.filename || `/${fileRelativeContext}/${filename}`;
-      const title = headers.title || getTitle(markdown);
-      const description = headers.description || getDescription(markdown);
-
-      if (title == null || title === '') {
-        throw new Error(`docs-infra: Missing title in the page: ${location}\n`);
-      }
-
-      if (title.length > 70) {
-        throw new Error(
-          [
-            `docs-infra: The title "${title}" is too long (${title.length} characters).`,
-            'It needs to have fewer than 70 characters—ideally less than 60. For more details, see:',
-            'https://developers.google.com/search/docs/advanced/appearance/title-link',
-            '',
-          ].join('\n'),
-        );
-      }
-
-      if (description == null || description === '') {
-        throw new Error(`docs-infra: Missing description in the page: ${location}\n`);
-      }
-
-      if (description.length > 170) {
-        throw new Error(
-          [
-            `docs-infra: The description "${description}" is too long (${description.length} characters).`,
-            'It needs to have fewer than 170 characters—ideally less than 160. For more details, see:',
-            'https://ahrefs.com/blog/meta-description/#4-be-concise',
-            '',
-          ].join('\n'),
-        );
-      }
-
-      const contents = getContents(markdown);
-
-      if (headers.unstyled) {
-        contents.push(`
-## Unstyled
-
-:::success
-[Base UI](/base-ui/getting-started/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size.
-:::
-        `);
-      }
-
-      if (headers.components.length > 0) {
-        contents.push(`
-## API
-
-See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.
-
-${headers.components
-  .map((component) => {
-    const componentPkgMap = componentPackageMapping[headers.productId];
-    const componentPkg = componentPkgMap ? componentPkgMap[component] : null;
-    return `- [\`<${component} />\`](${resolveComponentApiUrl(
-      headers.productId,
-      componentPkg,
-      component,
-    )})`;
-  })
-  .join('\n')}
-${headers.hooks
-  .map((hook) => {
-    const componentPkgMap = componentPackageMapping[headers.productId];
-    const componentPkg = componentPkgMap ? componentPkgMap[hook] : null;
-    return `- [\`${hook}\`](${resolveComponentApiUrl(headers.productId, componentPkg, hook)})`;
-  })
-  .join('\n')}
-  `);
-      }
-
-      const toc = [];
-      const render = createRender({
-        headingHashes,
-        toc,
-        userLanguage,
-        location,
-        options,
-      });
-
-      const rendered = contents.map((content) => {
-        if (/^"(demo|component)": "(.*)"/.test(content)) {
-          try {
-            return JSON.parse(`{${content}}`);
-          } catch (err) {
-            console.error('JSON.parse fails with: ', `{${content}}`);
-            console.error(err);
-            return null;
-          }
-        }
-
-        const codeblock = getCodeblock(content);
-
-        if (codeblock) {
-          return codeblock;
-        }
-
-        return render(content);
-      });
-
-      // fragment link symbol
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="comment-link-icon" viewBox="0 0 24 24">
-      <path d="M5.025 14H6.95c.183 0 .35-.029.5-.087a1.24 1.24 0 0 0 .425-.288L13.65 7.9a.622.622 0 0 0 .2-.45.622.622 0 0 0-.2-.45l-2.3-2.3a.622.622 0 0 0-.45-.2.622.622 0 0 0-.45.2l-5.725 5.775a1.24 1.24 0 0 0-.287.425 1.37 1.37 0 0 0-.088.5v1.925c0 .184.067.342.2.475a.65.65 0 0 0 .475.2Zm5.325 0h5.725c.367 0 .68-.129.938-.387.258-.258.387-.57.387-.938 0-.366-.13-.679-.387-.937a1.277 1.277 0 0 0-.938-.388H13L10.35 14Zm-5.5 4.4-2.4 2.4c-.417.417-.896.509-1.437.275C.47 20.842.2 20.434.2 19.85V3.55c0-.733.258-1.358.775-1.875A2.554 2.554 0 0 1 2.85.9h16.3c.733 0 1.358.259 1.875.775.517.517.775 1.142.775 1.875v12.2c0 .734-.258 1.359-.775 1.875a2.554 2.554 0 0 1-1.875.775H4.85Z"/>
-      </symbol>
-      </svg>`,
-      );
-
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-        <symbol id="anchor-link-icon" viewBox="0 0 12 6">
-          <path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />
-        </symbol>
-    </svg>`,
-      );
-
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="copy-icon" viewBox="0 0 24 24">
-      <path d="M15 20H5V7c0-.55-.45-1-1-1s-1 .45-1 1v13c0 1.1.9 2 2 2h10c.55 0 1-.45 1-1s-.45-1-1-1zm5-4V4c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2zm-2 0H9V4h9v12z" />
-      +</symbol>
-      </svg>`,
-      );
-
-      rendered.unshift(`
-      <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="copied-icon" viewBox="0 0 24 24">
-        <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />
-      </symbol>
-      </svg>`);
-
-      // icons for callout (info, success, warning, error)
-
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="info-icon" viewBox="0 0 20 20">
-      <path d="M9.996 14c.21 0 .39-.072.535-.216a.72.72 0 0 0 .219-.534v-3.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.532-.216.734.734 0 0 0-.535.216.72.72 0 0 0-.219.534v3.5c0 .213.071.39.214.534a.72.72 0 0 0 .532.216Zm0-6.5c.21 0 .39-.071.535-.214a.714.714 0 0 0 .219-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.532-.219.736.736 0 0 0-.535.214.714.714 0 0 0-.219.532c0 .21.071.39.214.535.143.146.32.219.532.219Zm.01 10.5a7.81 7.81 0 0 1-3.11-.625 8.065 8.065 0 0 1-2.552-1.719 8.066 8.066 0 0 1-1.719-2.551A7.818 7.818 0 0 1 2 9.99c0-1.104.208-2.14.625-3.105a8.066 8.066 0 0 1 4.27-4.26A7.818 7.818 0 0 1 10.009 2a7.75 7.75 0 0 1 3.106.625 8.083 8.083 0 0 1 4.26 4.265A7.77 7.77 0 0 1 18 9.994a7.81 7.81 0 0 1-.625 3.11 8.066 8.066 0 0 1-1.719 2.552 8.083 8.083 0 0 1-2.546 1.719 7.77 7.77 0 0 1-3.104.625Z"/>
-      </symbol>
-      </svg>`,
-      );
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="success-icon" viewBox="0 0 20 20">
-      <path d="m8.938 10.875-1.25-1.23a.718.718 0 0 0-.521-.228.718.718 0 0 0-.521.229.73.73 0 0 0 0 1.062l1.77 1.771c.153.153.327.23.521.23a.718.718 0 0 0 .521-.23l3.896-3.896a.73.73 0 0 0 0-1.062.718.718 0 0 0-.52-.23.718.718 0 0 0-.521.23l-3.376 3.354ZM10 18a7.796 7.796 0 0 1-3.104-.625 8.065 8.065 0 0 1-2.552-1.719 8.064 8.064 0 0 1-1.719-2.552A7.797 7.797 0 0 1 2 10c0-1.111.208-2.15.625-3.115a8.064 8.064 0 0 1 4.27-4.26A7.797 7.797 0 0 1 10 2c1.111 0 2.15.208 3.115.625a8.096 8.096 0 0 1 4.26 4.26C17.792 7.851 18 8.89 18 10a7.797 7.797 0 0 1-.625 3.104 8.066 8.066 0 0 1-4.26 4.271A7.774 7.774 0 0 1 10 18Z"/>
-      </symbol>
-      </svg>`,
-      );
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="warning-icon" viewBox="0 0 20 20">
-      <path d="M2.33 17a.735.735 0 0 1-.665-.375.631.631 0 0 1-.094-.375.898.898 0 0 1 .115-.396L9.353 3.062a.621.621 0 0 1 .281-.27.85.85 0 0 1 .729 0 .622.622 0 0 1 .281.27l7.667 12.792c.07.125.108.257.114.396a.63.63 0 0 1-.093.375.842.842 0 0 1-.271.27.728.728 0 0 1-.394.105H2.33Zm7.664-2.5c.211 0 .39-.072.536-.214a.714.714 0 0 0 .218-.532.736.736 0 0 0-.214-.535.714.714 0 0 0-.531-.22.736.736 0 0 0-.536.215.714.714 0 0 0-.219.531c0 .212.072.39.215.536.143.146.32.219.531.219Zm0-2.5c.211 0 .39-.072.536-.216a.72.72 0 0 0 .218-.534v-2.5a.728.728 0 0 0-.214-.534.72.72 0 0 0-.531-.216.734.734 0 0 0-.536.216.72.72 0 0 0-.219.534v2.5c0 .212.072.39.215.534a.72.72 0 0 0 .531.216Z"/>
-      </symbol>
-      </svg>`,
-      );
-      rendered.unshift(
-        `<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-      <symbol id="error-icon" viewBox="0 0 20 20">
-      <path fill-rule="evenodd" d="M2 7.4v5.2a2 2 0 0 0 .586 1.414l3.4 3.4A2 2 0 0 0 7.4 18h5.2a2 2 0 0 0 1.414-.586l3.4-3.4A2 2 0 0 0 18 12.6V7.4a2 2 0 0 0-.586-1.414l-3.4-3.4A2 2 0 0 0 12.6 2H7.4a2 2 0 0 0-1.414.586l-3.4 3.4A2 2 0 0 0 2 7.4Zm11.03-.43a.75.75 0 0 1 0 1.06L11.06 10l1.97 1.97a.75.75 0 1 1-1.06 1.06L10 11.06l-1.97 1.97a.75.75 0 0 1-1.06-1.06L8.94 10 6.97 8.03a.75.75 0 0 1 1.06-1.06L10 8.94l1.97-1.97a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/>
-      </symbol>
-      </svg>`,
-      );
-      docs[userLanguage] = {
-        description,
-        location,
-        rendered,
-        toc,
-        title,
-        headers,
-      };
-    });
-
-  return { demos, docs };
-}
-
 module.exports = {
   createRender,
   getContents,
   getDescription,
   getCodeblock,
   getHeaders,
   getTitle,
-  prepareMarkdown,
   renderInline,
 };