From 9868babf7576adc00d168bb241563205b00cbf03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 25 Aug 2023 19:05:16 +0200 Subject: [PATCH 1/5] fix(mdx-loader): improve mdxJsxTextElementToHtml (#9262) --- .../__fixtures__/non-text-content.md | 2 + .../__snapshots__/index.test.ts.snap | 7 ++++ .../src/remark/utils/index.ts | 41 ++++++++++++++++--- 3 files changed, 45 insertions(+), 5 deletions(-) diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md index 2ea62a2bbaf6..94814d8d9be8 100644 --- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md +++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__fixtures__/non-text-content.md @@ -7,3 +7,5 @@ ## HTML ## `inline.code()` + +## some styled heading test diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap index 8af155e2c96d..5cad7ef21337 100644 --- a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/__snapshots__/index.test.ts.snap @@ -171,6 +171,11 @@ exports[`toc remark plugin works on non text phrasing content 1`] = ` value: 'inline.code()', id: 'inlinecode', level: 2 + }, + { + value: 'some styled heading test', + id: 'some-styled-heading--test', + level: 2 } ] @@ -183,6 +188,8 @@ exports[`toc remark plugin works on non text phrasing content 1`] = ` ## HTML ## \`inline.code()\` + +## some styled heading test " `; diff --git a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts index da3c40209997..46e959176239 100644 --- a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts +++ b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts @@ -8,26 +8,57 @@ import escapeHtml from 'escape-html'; import type {Parent} from 'unist'; import type {PhrasingContent, Heading} from 'mdast'; -// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721 -import type {MdxJsxAttributeValueExpression} from 'mdast-util-mdx'; +import type { + MdxJsxAttribute, + MdxJsxAttributeValueExpression, + MdxJsxTextElement, + // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721 +} from 'mdast-util-mdx'; export function stringifyContent( node: Parent, - toString: (param: unknown) => string, // TODO weird but works): string { + toString: (param: unknown) => string, // TODO weird but works ): string { return (node.children as PhrasingContent[]) .map((item) => toValue(item, toString)) .join(''); } +// TODO This is really a workaround, and not super reliable +// For now we only support serializing tagName, className and content +// Can we implement the TOC with real JSX nodes instead of html strings later? +function mdxJsxTextElementToHtml( + element: MdxJsxTextElement, + toString: (param: unknown) => string, // TODO weird but works +): string { + const tag = element.name; + + const attributes = element.attributes.filter( + (child): child is MdxJsxAttribute => child.type === 'mdxJsxAttribute', + ); + + const classAttribute = + attributes.find((attr) => attr.name === 'className') ?? + attributes.find((attr) => attr.name === 'class'); + + const classAttributeString = classAttribute + ? `class="${escapeHtml(String(classAttribute.value))}"` + : ``; + + const allAttributes = classAttributeString ? ` ${classAttributeString}` : ''; + + const content = stringifyContent(element, toString); + + return `<${tag}${allAttributes}>${content}`; +} + export function toValue( node: PhrasingContent | Heading, toString: (param: unknown) => string, // TODO weird but works ): string { switch (node.type) { case 'mdxJsxTextElement': { - const tag = node.name; - return `<${tag}>${stringifyContent(node, toString)}`; + return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString); } case 'text': return escapeHtml(node.value); From a145205848a461b4c69cd5f3277dd9f05ad26052 Mon Sep 17 00:00:00 2001 From: Coupy Date: Thu, 31 Aug 2023 19:28:23 +0900 Subject: [PATCH 2/5] docs: fix typo in docs-introduction (#9267) --- .../docs/guides/docs/docs-introduction.mdx | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/website/docs/guides/docs/docs-introduction.mdx b/website/docs/guides/docs/docs-introduction.mdx index 250342e26b80..42b756a9f09f 100644 --- a/website/docs/guides/docs/docs-introduction.mdx +++ b/website/docs/guides/docs/docs-introduction.mdx @@ -47,16 +47,18 @@ Assume that you have the following in your configuration: module.exports = { // ... presets: [ - '@docusaurus/preset-classic', - { - docs: { - /* docs plugin options */ + [ + '@docusaurus/preset-classic', + { + docs: { + /* docs plugin options */ + }, + blog: { + /* blog plugin options */ + }, + // ... }, - blog: { - /* blog plugin options */ - }, - // ... - }, + ], ], }; ``` @@ -67,17 +69,19 @@ To enter docs-only mode, change it to like this: module.exports = { // ... presets: [ - '@docusaurus/preset-classic', - { - docs: { + [ + '@docusaurus/preset-classic', + { + docs: { + // highlight-next-line + routeBasePath: '/', // Serve the docs at the site's root + /* other docs plugin options */ + }, // highlight-next-line - routeBasePath: '/', // Serve the docs at the site's root - /* other docs plugin options */ + blog: false, // Optional: disable the blog plugin + // ... }, - // highlight-next-line - blog: false, // Optional: disable the blog plugin - // ... - }, + ], ], }; ``` From bc150d2c8563f045e80d9164a8104517fbae5abc Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Thu, 31 Aug 2023 12:57:29 +0200 Subject: [PATCH 3/5] ci: only install Chromium for Playwright Argos tests (#9264) --- .github/workflows/argos.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/argos.yml b/.github/workflows/argos.yml index 580a60dacf88..7ad905499fbe 100644 --- a/.github/workflows/argos.yml +++ b/.github/workflows/argos.yml @@ -42,7 +42,7 @@ jobs: run: yarn install --frozen-lockfile - name: Install Playwright browsers - run: npx playwright install --with-deps + run: npx playwright install --with-deps chromium - name: Build website fast run: yarn build:website:fast From 08f3a1163a6622418375fa5c372810acaf3f9063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Thu, 31 Aug 2023 12:59:27 +0200 Subject: [PATCH 4/5] chore: refactor argos stylesheet + hide flaky producthunt badge (#9259) --- argos/tests/screenshot.css | 31 +++++++++++++++++++--- project-words.txt | 4 +++ website/src/components/ProductHuntCard.tsx | 4 ++- 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css index 7b9a374559a0..c13d3bca314c 100644 --- a/argos/tests/screenshot.css +++ b/argos/tests/screenshot.css @@ -6,14 +6,22 @@ */ /* -Hide some things in Argos screenshots because they are a source of flakiness +We need to hide some elements in Argos/Playwright screenshots +Those elements are source of flakiness due to nondeterministic rendering +They don't consistently render exactly the same across CI runs */ + +/******* DOCUSAURUS GLOBAL / THEME *******/ + +/* Iframes can load lazily */ iframe, -article.yt-lite, +/* Avatar images can be flaky due to using external sources: GitHub/Unavatar */ .avatar__photo, +/* Gifs load lazily and are animated */ img[src$='.gif'], -h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b), +/* Algolia Keyboard shortcuts appear with a little delay */ .DocSearch-Button-Keys > kbd, +/* The live playground preview can often display dates/counters */ [class*='playgroundPreview'] { visibility: hidden; } @@ -32,3 +40,20 @@ Mermaid diagrams are rendered client-side and produce layout shifts .docusaurus-mermaid-container { display: none; } + +/******* DOCUSAURUS WEBSITE SPECIFIC *******/ + +/* ProductHunt vote counter can increment at any time */ +.producthunt-badge-widget { + visibility: hidden; +} + +/* YouTube player lite can load video lazily */ +article.yt-lite { + visibility: hidden; +} + +/* Can't remember why we need this one :/ */ +h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b) { + visibility: hidden; +} diff --git a/project-words.txt b/project-words.txt index 635b97d04b91..4e8076b252c2 100644 --- a/project-words.txt +++ b/project-words.txt @@ -419,3 +419,7 @@ hastscript Flightcontrol Fargate Flightcontrol's +producthunt +Gifs +Iframes +Unavatar diff --git a/website/src/components/ProductHuntCard.tsx b/website/src/components/ProductHuntCard.tsx index c7ecbcc9735b..d223f47e96d3 100644 --- a/website/src/components/ProductHuntCard.tsx +++ b/website/src/components/ProductHuntCard.tsx @@ -7,6 +7,7 @@ import type {ComponentProps} from 'react'; import React from 'react'; +import clsx from 'clsx'; import Link from '@docusaurus/Link'; export default function ProductHuntCard({ @@ -19,9 +20,10 @@ export default function ProductHuntCard({ return ( Docusaurus 2.0 - Build optimized websites quickly, focus on your content. | Product Hunt Date: Thu, 31 Aug 2023 13:56:07 +0200 Subject: [PATCH 5/5] chore: remove useless Argos screenshot css (#9273) --- argos/tests/screenshot.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css index c13d3bca314c..89f5f924ae0e 100644 --- a/argos/tests/screenshot.css +++ b/argos/tests/screenshot.css @@ -52,8 +52,3 @@ Mermaid diagrams are rendered client-side and produce layout shifts article.yt-lite { visibility: hidden; } - -/* Can't remember why we need this one :/ */ -h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b) { - visibility: hidden; -}