From 7d3b5a5bdfd868346689f06e5f212e3b992d1421 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Fri, 15 Mar 2024 09:26:00 -0300 Subject: [PATCH] [docs-infra] Add a feature list "component" (#41484) Co-authored-by: alexandre --- docs/data/docs-infra/pages.ts | 1 + .../experiments/docs/custom-components.js | 7 +++ .../experiments/docs/custom-components.md | 19 ++++++++ .../src/modules/components/MarkdownElement.js | 22 +++++++++ packages/markdown/parseMarkdown.js | 46 +++++++++++++------ packages/markdown/prepareMarkdown.js | 8 +++- 6 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 docs/pages/experiments/docs/custom-components.js create mode 100644 docs/pages/experiments/docs/custom-components.md diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts index d8dbb02f3d954f..0cd74435bba91f 100644 --- a/docs/data/docs-infra/pages.ts +++ b/docs/data/docs-infra/pages.ts @@ -14,6 +14,7 @@ const pages: readonly MuiPage[] = [ children: [ { pathname: '/experiments/docs/callouts' }, { pathname: '/experiments/docs/codeblock' }, + { pathname: '/experiments/docs/custom-components' }, { pathname: '/experiments/docs/demos' }, { pathname: '/experiments/docs/data-grid-premium', title: 'API DataGridPremium' }, ], diff --git a/docs/pages/experiments/docs/custom-components.js b/docs/pages/experiments/docs/custom-components.js new file mode 100644 index 00000000000000..56cac9e3ca0c30 --- /dev/null +++ b/docs/pages/experiments/docs/custom-components.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from './custom-components.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/experiments/docs/custom-components.md b/docs/pages/experiments/docs/custom-components.md new file mode 100644 index 00000000000000..18548cb1b10dda --- /dev/null +++ b/docs/pages/experiments/docs/custom-components.md @@ -0,0 +1,19 @@ +# Custom components + +

They're either custom markdown components or passed through directly via "components".

+ +## Header chips + +{{"component": "modules/components/ComponentLinkHeader.js"}} + +## Feature list + +Available through the custom `` tag. + + +- Manages modal stacking when one-at-a-time just isn't enough. +- Creates a backdrop, for disabling interaction below the modal.est +- It disables scrolling of the page content while open. +- It properly manages focus; moving to the modal content, and keeping it there until the modal is closed. +- Adds the appropriate ARIA roles automatically. + diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 5f6b77ba819c19..f8dfcdf9154314 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -609,6 +609,21 @@ const Root = styled('div')( marginBottom: theme.spacing(1), }, }, + '& .feature-list': { + padding: 0, + listStyle: 'none', + '& li': { + marginBottom: 6, + display: 'flex', + alignItems: 'center', + gap: 12, + '::before': { + content: `url('/static/branding/pricing/yes-light.svg')`, + width: '18px', + height: '18px', + }, + }, + }, '& .MuiCode-title': { padding: theme.spacing(1.5), display: 'flex', @@ -777,6 +792,13 @@ const Root = styled('div')( backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`, }, }, + '& .feature-list': { + '& li': { + '::before': { + content: `url('/static/branding/pricing/yes-dark.svg')`, + }, + }, + }, }, }), ); diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 87a2d78deff74e..a9848f583dce47 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -188,6 +188,7 @@ function getContents(markdown) { .replace(headerRegExp, '') // Remove header information .split(/^{{("(?:demo|component)":.*)}}$/gm) // Split markdown into an array, separating demos .flatMap((text) => text.split(/^()$/gmsu)) + .flatMap((text) => text.split(/^()$/gmsu)) .filter((content) => !emptyRegExp.test(content)); // Remove empty lines return rep; } @@ -212,23 +213,37 @@ function getDescription(markdown) { } function getCodeblock(content) { - if (content.startsWith(']*storageKey=["|'](\S*)["|'].*>/m)?.[1]; - const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map( - ([, language, tab, code]) => ({ language, tab, code }), - ); - - const blocksData = blocks.filter( - (block) => block.tab !== undefined && !emptyRegExp.test(block.code), - ); + if (!content.startsWith(']*storageKey=["|'](\S*)["|'].*>/m)?.[1]; + const blocks = [...content.matchAll(/^```(\S*) (\S*)\n(.*?)\n```/gmsu)].map( + ([, language, tab, code]) => ({ language, tab, code }), + ); + + const blocksData = blocks.filter( + (block) => block.tab !== undefined && !emptyRegExp.test(block.code), + ); + + return { + type: 'codeblock', + data: blocksData, + storageKey, + }; +} - return { - type: 'codeblock', - data: blocksData, - storageKey, - }; +function getFeatureList(content) { + if (!content.startsWith(' line.startsWith('- ')) + .map((line) => line.slice(2)); + + return ['
    ', ...lines.map((line) => `
  • ${line}
    • `), '
'].join( + '', + ); } /** @@ -476,6 +491,7 @@ module.exports = { getContents, getDescription, getCodeblock, + getFeatureList, getHeaders, getTitle, renderMarkdown, diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index c66fbfebfc21cc..caaa61d0fbbd97 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -7,6 +7,7 @@ const { getContents, getDescription, getCodeblock, + getFeatureList, getHeaders, getTitle, } = require('./parseMarkdown'); @@ -155,13 +156,18 @@ ${headers.hooks return null; } } - const codeblock = getCodeblock(content); if (codeblock) { return codeblock; } + const featureList = getFeatureList(content); + + if (featureList) { + return featureList; + } + return render(content); });