diff --git a/.cspell.json b/.cspell.json index f55f6265d1..efddcf2a00 100644 --- a/.cspell.json +++ b/.cspell.json @@ -23,6 +23,7 @@ "CHANGELOG.md", "patches", "packages/docusaurus-theme-translations/locales", + "packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy", "package.json", "yarn.lock", "project-words.txt", diff --git a/.eslintignore b/.eslintignore index 6273a95b15..6aa6a0b9f8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -22,3 +22,6 @@ packages/create-docusaurus/templates/facebook website/_dogfooding/_swizzle_theme_tests website/_dogfooding/_asset-tests/badSyntax.js + + +packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy diff --git a/.eslintrc.js b/.eslintrc.js index 17eff79121..502c615068 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -298,7 +298,7 @@ module.exports = { 'jest/expect-expect': OFF, 'jest/no-large-snapshots': [ WARNING, - {maxSize: Infinity, inlineMaxSize: 10}, + {maxSize: Infinity, inlineMaxSize: 50}, ], 'jest/no-test-return-statement': ERROR, 'jest/prefer-expect-resolves': WARNING, diff --git a/.github/workflows/argos.yml b/.github/workflows/argos.yml index 4493405645..f075231358 100644 --- a/.github/workflows/argos.yml +++ b/.github/workflows/argos.yml @@ -30,7 +30,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* diff --git a/.github/workflows/build-blog-only.yml b/.github/workflows/build-blog-only.yml index 71ae7a80b2..afc9ba0fba 100644 --- a/.github/workflows/build-blog-only.yml +++ b/.github/workflows/build-blog-only.yml @@ -24,7 +24,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/build-hash-router.yml b/.github/workflows/build-hash-router.yml index 7ac7d8b148..3c4fd35aca 100644 --- a/.github/workflows/build-hash-router.yml +++ b/.github/workflows/build-hash-router.yml @@ -27,7 +27,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/build-perf.yml b/.github/workflows/build-perf.yml index 4c98263b91..933de79985 100644 --- a/.github/workflows/build-perf.yml +++ b/.github/workflows/build-perf.yml @@ -43,7 +43,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn @@ -75,7 +75,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/canary-release.yml b/.github/workflows/canary-release.yml index 37d935ef5d..e29dfcd332 100644 --- a/.github/workflows/canary-release.yml +++ b/.github/workflows/canary-release.yml @@ -24,7 +24,7 @@ jobs: with: fetch-depth: 0 # Needed to get the commit number with "git rev-list --count HEAD" - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/continuous-releases.yml b/.github/workflows/continuous-releases.yml index c6510df788..cb892c445a 100644 --- a/.github/workflows/continuous-releases.yml +++ b/.github/workflows/continuous-releases.yml @@ -21,7 +21,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index c25f347e7d..872531af0a 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -15,4 +15,4 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Dependency Review - uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # 4.5.0 + uses: actions/dependency-review-action@ce3cf9537a52e8119d91fd484ab5b8a807627bf8 # 4.6.0 diff --git a/.github/workflows/lighthouse-report.yml b/.github/workflows/lighthouse-report.yml index 0f30f8e391..3e268ccafa 100644 --- a/.github/workflows/lighthouse-report.yml +++ b/.github/workflows/lighthouse-report.yml @@ -24,7 +24,7 @@ jobs: uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index d7891556f4..1a7d6abded 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -22,7 +22,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/showcase-test.yml b/.github/workflows/showcase-test.yml index e2deffb053..fa852b42c7 100644 --- a/.github/workflows/showcase-test.yml +++ b/.github/workflows/showcase-test.yml @@ -24,7 +24,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/tests-e2e.yml b/.github/workflows/tests-e2e.yml index 7428d65a84..58d6c3e42a 100644 --- a/.github/workflows/tests-e2e.yml +++ b/.github/workflows/tests-e2e.yml @@ -43,7 +43,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: ${{ matrix.node }} cache: yarn @@ -84,7 +84,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js LTS - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn @@ -153,7 +153,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js LTS - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn @@ -193,7 +193,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js LTS - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/tests-swizzle.yml b/.github/workflows/tests-swizzle.yml index 28bd4988c6..a6afccc8bc 100644 --- a/.github/workflows/tests-swizzle.yml +++ b/.github/workflows/tests-swizzle.yml @@ -28,7 +28,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Set up Node LTS - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: lts/* cache: yarn diff --git a/.github/workflows/tests-windows.yml b/.github/workflows/tests-windows.yml index 5607646e12..e8fe11cc51 100644 --- a/.github/workflows/tests-windows.yml +++ b/.github/workflows/tests-windows.yml @@ -34,7 +34,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: ${{ matrix.node }} - name: Installation diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 11a99731b8..ee5776a1a1 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -32,7 +32,7 @@ jobs: - name: Checkout uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1 - name: Use Node.js ${{ matrix.node }} - uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0 + uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0 with: node-version: ${{ matrix.node }} cache: yarn diff --git a/.gitignore b/.gitignore index 51636c8c18..d44178396a 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,6 @@ website/i18n/**/* #!website/i18n/fr/**/* .netlify + +website/rspack-tracing.json +website/bundler-cpu-profile.json diff --git a/admin/scripts/resizeImage.js b/admin/scripts/resizeImage.js index 59baff0de3..09bf4f4ee5 100644 --- a/admin/scripts/resizeImage.js +++ b/admin/scripts/resizeImage.js @@ -9,9 +9,9 @@ import fs from 'fs-extra'; import path from 'path'; import {fileURLToPath} from 'url'; import {program} from 'commander'; -import logger from '@docusaurus/logger'; +import {logger} from '@docusaurus/logger'; import sharp from 'sharp'; -import imageSize from 'image-size'; +import {imageSizeFromFile} from 'image-size/fromFile'; // You can use it as: // @@ -64,7 +64,7 @@ program await Promise.all( images.map(async (imgPath) => { - const {width, height} = imageSize(imgPath); + const {width, height} = await imageSizeFromFile(imgPath); const targetWidth = options.width ?? (imgPath.includes(showcasePath) ? 640 : 1000); const targetHeight = diff --git a/package.json b/package.json index ceb6c4a189..73dc95d848 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "scripts": { "start": "yarn build:packages && yarn start:website", "start:website": "yarn workspace website start", + "start:website:profile": "DOCUSAURUS_BUNDLER_CPU_PROFILE=true DOCUSAURUS_RSPACK_TRACE=true yarn workspace website start", "start:website:baseUrl": "yarn workspace website start:baseUrl", "start:website:blogOnly": "yarn workspace website start:blogOnly", "start:website:deployPreview": "cross-env NETLIFY=true CONTEXT='deploy-preview' yarn workspace website start", @@ -22,6 +23,7 @@ "build": "yarn build:packages && yarn build:website", "build:packages": "lerna run build --no-private", "build:website": "yarn workspace website build", + "build:website:profile": "DOCUSAURUS_BUNDLER_CPU_PROFILE=true DOCUSAURUS_RSPACK_TRACE=true yarn workspace website build", "build:website:baseUrl": "yarn workspace website build:baseUrl", "build:website:blogOnly": "yarn workspace website build:blogOnly", "build:website:deployPreview:testWrap": "yarn workspace website test:swizzle:wrap:ts", @@ -102,7 +104,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-regexp": "^1.15.0", "husky": "^8.0.3", - "image-size": "^1.0.2", + "image-size": "^2.0.2", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "jest-serializer-ansi-escapes": "^3.0.0", diff --git a/packages/docusaurus-faster/package.json b/packages/docusaurus-faster/package.json index cd99577359..9bf846fbad 100644 --- a/packages/docusaurus-faster/package.json +++ b/packages/docusaurus-faster/package.json @@ -19,7 +19,7 @@ "license": "MIT", "dependencies": { "@docusaurus/types": "3.7.0", - "@rspack/core": "^1.2.5", + "@rspack/core": "^1.3.3", "@swc/core": "^1.7.39", "@swc/html": "^1.7.39", "browserslist": "^4.24.2", diff --git a/packages/docusaurus-faster/src/index.ts b/packages/docusaurus-faster/src/index.ts index cba2c68730..ba0b2ae8c9 100644 --- a/packages/docusaurus-faster/src/index.ts +++ b/packages/docusaurus-faster/src/index.ts @@ -11,6 +11,16 @@ import browserslist from 'browserslist'; import {minify as swcHtmlMinifier} from '@swc/html'; import type {JsMinifyOptions, Options as SwcOptions} from '@swc/core'; +// See https://rspack.dev/contribute/development/profiling +// File can be opened with https://ui.perfetto.dev/ +if (process.env.DOCUSAURUS_RSPACK_TRACE) { + Rspack.experiments.globalTrace.register( + 'trace', + 'chrome', + './rspack-tracing.json', + ); +} + export const swcLoader = require.resolve('swc-loader'); export const getSwcLoaderOptions = ({ diff --git a/packages/docusaurus-mdx-loader/package.json b/packages/docusaurus-mdx-loader/package.json index fa135a39f1..3c2e7cb9d3 100644 --- a/packages/docusaurus-mdx-loader/package.json +++ b/packages/docusaurus-mdx-loader/package.json @@ -27,7 +27,7 @@ "estree-util-value-to-estree": "^3.0.1", "file-loader": "^6.2.0", "fs-extra": "^11.1.1", - "image-size": "^1.0.2", + "image-size": "^2.0.2", "mdast-util-mdx": "^3.0.0", "mdast-util-to-string": "^4.0.0", "rehype-raw": "^7.0.0", diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/utils.test.ts b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/utils.test.ts new file mode 100644 index 0000000000..32592d89fa --- /dev/null +++ b/packages/docusaurus-mdx-loader/src/remark/toc/__tests__/utils.test.ts @@ -0,0 +1,126 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {toHeadingHTMLValue} from '../utils'; +import type {Heading} from 'mdast'; + +describe('toHeadingHTMLValue', () => { + async function convert(heading: Heading): Promise { + const {toString} = await import('mdast-util-to-string'); + return toHeadingHTMLValue(heading, toString); + } + + it('converts a simple heading', async () => { + const heading: Heading = { + type: 'heading', + depth: 2, + children: [ + { + type: 'text', + value: 'Some heading text', + }, + ], + }; + + await expect(convert(heading)).resolves.toMatchInlineSnapshot( + `"Some heading text"`, + ); + }); + + it('converts a heading with b tag', async () => { + const heading: Heading = { + type: 'heading', + depth: 2, + children: [ + { + type: 'mdxJsxTextElement', + name: 'b', + attributes: [], + children: [ + { + type: 'text', + value: 'Some title', + }, + ], + }, + ], + }; + + await expect(convert(heading)).resolves.toMatchInlineSnapshot( + `"Some title"`, + ); + }); + + it('converts a heading with span tag + className', async () => { + const heading: Heading = { + type: 'heading', + depth: 2, + children: [ + { + type: 'mdxJsxTextElement', + name: 'span', + attributes: [ + { + type: 'mdxJsxAttribute', + name: 'className', + value: 'my-class', + }, + ], + children: [ + { + type: 'text', + value: 'Some title', + }, + ], + }, + ], + }; + + await expect(convert(heading)).resolves.toMatchInlineSnapshot( + `"Some title"`, + ); + }); + + it('converts a heading - remove img tag', async () => { + const heading: Heading = { + type: 'heading', + depth: 2, + children: [ + { + type: 'mdxJsxTextElement', + name: 'img', + attributes: [ + { + type: 'mdxJsxAttribute', + name: 'src', + value: '/img/slash-introducing.svg', + }, + { + type: 'mdxJsxAttribute', + name: 'height', + value: '32', + }, + { + type: 'mdxJsxAttribute', + name: 'alt', + value: 'test', + }, + ], + children: [], + }, + { + type: 'text', + value: ' Some title', + }, + ], + }; + + await expect(convert(heading)).resolves.toMatchInlineSnapshot( + `"Some title"`, + ); + }); +}); diff --git a/packages/docusaurus-mdx-loader/src/remark/toc/utils.ts b/packages/docusaurus-mdx-loader/src/remark/toc/utils.ts index 59e860119f..b8200c6e48 100644 --- a/packages/docusaurus-mdx-loader/src/remark/toc/utils.ts +++ b/packages/docusaurus-mdx-loader/src/remark/toc/utils.ts @@ -5,9 +5,13 @@ * LICENSE file in the root directory of this source tree. */ -import {toValue} from '../utils'; -import type {Node} from 'unist'; -import type {MdxjsEsm} from 'mdast-util-mdx'; +import escapeHtml from 'escape-html'; +import type {Node, Parent} from 'unist'; +import type { + MdxjsEsm, + MdxJsxAttribute, + MdxJsxTextElement, +} from 'mdast-util-mdx'; import type {TOCHeading, TOCItem, TOCItems, TOCSlice} from './types'; import type { Program, @@ -15,6 +19,7 @@ import type { ImportDeclaration, ImportSpecifier, } from 'estree'; +import type {Heading, PhrasingContent} from 'mdast'; export function getImportDeclarations(program: Program): ImportDeclaration[] { return program.body.filter( @@ -118,7 +123,7 @@ export async function createTOCExportNodeAST({ const {toString} = await import('mdast-util-to-string'); const {valueToEstree} = await import('estree-util-value-to-estree'); const value: TOCItem = { - value: toValue(heading, toString), + value: toHeadingHTMLValue(heading, toString), id: heading.data!.id!, level: heading.depth, }; @@ -172,3 +177,73 @@ export async function createTOCExportNodeAST({ }, }; } + +function stringifyChildren( + node: Parent, + toString: (param: unknown) => string, // TODO temporary, due to ESM +): string { + return (node.children as PhrasingContent[]) + .map((item) => toHeadingHTMLValue(item, toString)) + .join('') + .trim(); +} + +// 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 temporary, due to ESM +): string { + const tag = element.name; + + // See https://github.com/facebook/docusaurus/issues/11003#issuecomment-2733925363 + if (tag === 'img') { + return ''; + } + + 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 = stringifyChildren(element, toString); + + return `<${tag}${allAttributes}>${content}`; +} + +export function toHeadingHTMLValue( + node: PhrasingContent | Heading | MdxJsxTextElement, + toString: (param: unknown) => string, // TODO temporary, due to ESM +): string { + switch (node.type) { + case 'mdxJsxTextElement': { + return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString); + } + case 'text': + return escapeHtml(node.value); + case 'heading': + return stringifyChildren(node, toString); + case 'inlineCode': + return `${escapeHtml(node.value)}`; + case 'emphasis': + return `${stringifyChildren(node, toString)}`; + case 'strong': + return `${stringifyChildren(node, toString)}`; + case 'delete': + return `${stringifyChildren(node, toString)}`; + case 'link': + return stringifyChildren(node, toString); + default: + return toString(node); + } +} diff --git a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts index a13bebf922..adf59a40ad 100644 --- a/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts +++ b/packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts @@ -8,7 +8,6 @@ import path from 'path'; import url from 'url'; import fs from 'fs-extra'; -import {promisify} from 'util'; import { toMessageRelativeFilePath, posixPath, @@ -17,7 +16,7 @@ import { getFileLoaderUtils, } from '@docusaurus/utils'; import escapeHtml from 'escape-html'; -import sizeOf from 'image-size'; +import {imageSizeFromFile} from 'image-size/fromFile'; import logger from '@docusaurus/logger'; import {assetRequireAttributeValue, transformNode} from '../utils'; import type {Plugin, Transformer} from 'unified'; @@ -80,7 +79,7 @@ async function toImageRequireNode( } try { - const size = (await promisify(sizeOf)(imagePath))!; + const size = (await imageSizeFromFile(imagePath))!; if (size.width) { attributes.push({ type: 'mdxJsxAttribute', diff --git a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts index e191bbfa2e..898f0617a4 100644 --- a/packages/docusaurus-mdx-loader/src/remark/utils/index.ts +++ b/packages/docusaurus-mdx-loader/src/remark/utils/index.ts @@ -5,14 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -import escapeHtml from 'escape-html'; -import type {Parent, Node} from 'unist'; -import type {PhrasingContent, Heading} from 'mdast'; -import type { - MdxJsxAttribute, - MdxJsxAttributeValueExpression, - MdxJsxTextElement, -} from 'mdast-util-mdx'; +import type {Node} from 'unist'; +import type {MdxJsxAttributeValueExpression} from 'mdast-util-mdx'; /** * Util to transform one node type to another node type @@ -35,70 +29,6 @@ export function transformNode( return node as NewNode; } -export function stringifyContent( - node: Parent, - 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 | MdxJsxTextElement, - toString: (param: unknown) => string, // TODO weird but works -): string { - switch (node.type) { - case 'mdxJsxTextElement': { - return mdxJsxTextElementToHtml(node as MdxJsxTextElement, toString); - } - case 'text': - return escapeHtml(node.value); - case 'heading': - return stringifyContent(node, toString); - case 'inlineCode': - return `${escapeHtml(node.value)}`; - case 'emphasis': - return `${stringifyContent(node, toString)}`; - case 'strong': - return `${stringifyContent(node, toString)}`; - case 'delete': - return `${stringifyContent(node, toString)}`; - case 'link': - return stringifyContent(node, toString); - default: - return toString(node); - } -} - export function assetRequireAttributeValue( requireString: string, hash: string, diff --git a/packages/docusaurus-module-type-aliases/package.json b/packages/docusaurus-module-type-aliases/package.json index 43fdebdcbf..a95d5742d7 100644 --- a/packages/docusaurus-module-type-aliases/package.json +++ b/packages/docusaurus-module-type-aliases/package.json @@ -17,7 +17,7 @@ "@types/react": "*", "@types/react-router-config": "*", "@types/react-router-dom": "*", - "react-helmet-async": "npm:@slorber/react-helmet-async@*", + "react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0", "react-loadable": "npm:@docusaurus/react-loadable@6.0.0" }, "peerDependencies": { diff --git a/packages/docusaurus-plugin-content-blog/assets/atom.xsl b/packages/docusaurus-plugin-content-blog/assets/atom.xsl index 271895cf77..b4b2d9619c 100644 --- a/packages/docusaurus-plugin-content-blog/assets/atom.xsl +++ b/packages/docusaurus-plugin-content-blog/assets/atom.xsl @@ -71,7 +71,7 @@
-

diff --git a/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts b/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts index 9a1a256587..9bc8afaf2c 100644 --- a/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts +++ b/packages/docusaurus-plugin-content-blog/src/__tests__/authorsSocials.test.ts @@ -23,7 +23,6 @@ describe('normalizeSocials', () => { mastodon: 'Mastodon', }; - // eslint-disable-next-line jest/no-large-snapshots expect(normalizeSocials(socials)).toMatchInlineSnapshot(` { "bluesky": "https://bsky.app/profile/gingergeek.co.uk", diff --git a/packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/validation.test.ts b/packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/validation.test.ts index 6620705ff7..47055ffce7 100644 --- a/packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/validation.test.ts +++ b/packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/validation.test.ts @@ -42,19 +42,16 @@ describe('validateSidebars', () => { }); it('sidebar category wrong label', () => { - expect( - () => - validateSidebars({ - docs: [ - { - type: 'category', - label: true, - items: [{type: 'doc', id: 'doc1'}], - }, - ], - }), - - // eslint-disable-next-line jest/no-large-snapshots + expect(() => + validateSidebars({ + docs: [ + { + type: 'category', + label: true, + items: [{type: 'doc', id: 'doc1'}], + }, + ], + }), ).toThrowErrorMatchingInlineSnapshot(` "{ "type": "category", diff --git a/packages/docusaurus-plugin-ideal-image/package.json b/packages/docusaurus-plugin-ideal-image/package.json index 8374d3549d..8e6f93cd41 100644 --- a/packages/docusaurus-plugin-ideal-image/package.json +++ b/packages/docusaurus-plugin-ideal-image/package.json @@ -26,8 +26,6 @@ "@docusaurus/theme-translations": "3.7.0", "@docusaurus/types": "3.7.0", "@docusaurus/utils-validation": "3.7.0", - "@slorber/react-ideal-image": "^0.0.14", - "react-waypoint": "^10.3.0", "sharp": "^0.32.3", "tslib": "^2.6.0", "webpack": "^5.88.1" diff --git a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts b/packages/docusaurus-plugin-ideal-image/src/deps.d.ts deleted file mode 100644 index 13f80f4841..0000000000 --- a/packages/docusaurus-plugin-ideal-image/src/deps.d.ts +++ /dev/null @@ -1,124 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -/// - -/** - * @see https://github.com/endiliey/react-ideal-image/blob/master/index.d.ts - * Note: the original type definition is WRONG. getIcon & getMessage receive - * full state object. - */ -declare module '@slorber/react-ideal-image' { - import type { - ComponentProps, - ComponentType, - CSSProperties, - ReactNode, - } from 'react'; - - export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error'; - - export type State = { - pickedSrc: { - size: number; - }; - loadInfo: 404 | null; - loadState: LoadingState; - }; - - export type IconKey = - | 'load' - | 'loading' - | 'loaded' - | 'error' - | 'noicon' - | 'offline'; - - export type SrcType = { - width: number; - src?: string; - size?: number; - format?: 'webp' | 'jpeg' | 'png' | 'gif'; - }; - - type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript'; - - export interface ImageProps - extends Omit, 'srcSet' | 'placeholder'> { - /** - * This function decides what icon to show based on the current state of the - * component. - */ - getIcon?: (state: State) => IconKey; - /** - * This function decides what message to show based on the icon (returned - * from `getIcon` prop) and the current state of the component. - */ - getMessage?: (icon: IconKey, state: State) => string | null; - /** - * This function is called as soon as the component enters the viewport and - * is used to generate urls based on width and format if `props.srcSet` - * doesn't provide `src` field. - */ - getUrl?: (srcType: SrcType) => string; - /** - * The Height of the image in px. - */ - height: number; - /** - * This provides a map of the icons. By default, the component uses icons - * from material design, Implemented as React components with the SVG - * element. You can customize icons - */ - icons?: Partial<{[icon in IconKey]: ComponentType}>; - /** - * This prop takes one of the 2 options, xhr and image. - * Read more about it: - * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download - */ - loader?: 'xhr' | 'image'; - /** - * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip - */ - placeholder: {color: string} | {lqip: string}; - /** - * This function decides if image should be downloaded automatically. The - * default function returns false for a 2g network, for a 3g network it - * decides based on `props.threshold` and for a 4g network it returns true - * by default. - */ - shouldAutoDownload?: (options: { - connection?: 'slow-2g' | '2g' | '3g' | '4g'; - size?: number; - threshold?: number; - possiblySlowNetwork?: boolean; - }) => boolean; - /** - * This provides an array of sources of different format and size of the - * image. Read more about it: - * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset - */ - srcSet: SrcType[]; - /** - * This provides a theme to the component. By default, the component uses - * inline styles, but it is also possible to use CSS modules and override - * all styles. - */ - theme?: Partial<{[key in ThemeKey]: string | CSSProperties}>; - /** - * Tells how much to wait in milliseconds until consider the download to be - * slow. - */ - threshold?: number; - /** - * Width of the image in px. - */ - width: number; - } - - export default function IdealImage(props: ImageProps): ReactNode; -} diff --git a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts index 28191e9816..4739e8a3e8 100644 --- a/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts +++ b/packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts @@ -5,6 +5,8 @@ * LICENSE file in the root directory of this source tree. */ +/// + declare module '@docusaurus/plugin-ideal-image' { export type PluginOptions = { /** @@ -74,3 +76,122 @@ declare module '@theme/IdealImage' { } export default function IdealImage(props: Props): ReactNode; } + +declare module '@theme/IdealImageLegacy' { + /** + * @see https://github.com/endiliey/react-ideal-image/blob/master/index.d.ts + * Note: the original type definition is WRONG. getIcon & getMessage receive + * full state object. + */ + + import type { + ComponentProps, + ComponentType, + CSSProperties, + ReactNode, + } from 'react'; + + export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error'; + + export type State = { + pickedSrc: { + size: number; + }; + loadInfo: 404 | null; + loadState: LoadingState; + }; + + export type IconKey = + | 'load' + | 'loading' + | 'loaded' + | 'error' + | 'noicon' + | 'offline'; + + export type SrcType = { + width: number; + src?: string; + size?: number; + format?: 'webp' | 'jpeg' | 'png' | 'gif'; + }; + + type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript'; + + export interface ImageProps + extends Omit, 'srcSet' | 'placeholder'> { + /** + * This function decides what icon to show based on the current state of the + * component. + */ + getIcon?: (state: State) => IconKey; + /** + * This function decides what message to show based on the icon (returned + * from `getIcon` prop) and the current state of the component. + */ + getMessage?: (icon: IconKey, state: State) => string | null; + /** + * This function is called as soon as the component enters the viewport and + * is used to generate urls based on width and format if `props.srcSet` + * doesn't provide `src` field. + */ + getUrl?: (srcType: SrcType) => string; + /** + * The Height of the image in px. + */ + height: number; + /** + * This provides a map of the icons. By default, the component uses icons + * from material design, Implemented as React components with the SVG + * element. You can customize icons + */ + icons?: Partial<{[icon in IconKey]: ComponentType}>; + /** + * This prop takes one of the 2 options, xhr and image. + * Read more about it: + * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download + */ + loader?: 'xhr' | 'image'; + /** + * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip + */ + placeholder: {color: string} | {lqip: string}; + /** + * This function decides if image should be downloaded automatically. The + * default function returns false for a 2g network, for a 3g network it + * decides based on `props.threshold` and for a 4g network it returns true + * by default. + */ + shouldAutoDownload?: (options: { + connection?: 'slow-2g' | '2g' | '3g' | '4g'; + size?: number; + threshold?: number; + possiblySlowNetwork?: boolean; + }) => boolean; + /** + * This provides an array of sources of different format and size of the + * image. Read more about it: + * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset + */ + srcSet: SrcType[]; + /** + * This provides a theme to the component. By default, the component uses + * inline styles, but it is also possible to use CSS modules and override + * all styles. + */ + theme?: Partial<{[key in ThemeKey]: string | CSSProperties}>; + /** + * Tells how much to wait in milliseconds until consider the download to be + * slow. + */ + threshold?: number; + /** + * Width of the image in px. + */ + width: number; + } + + export interface Props extends ImageProps {} + + export default function IdealImageLegacy(props: ImageProps): ReactNode; +} diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx index a983927ec4..7cc1e0e619 100644 --- a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx @@ -6,11 +6,11 @@ */ import React, {type ReactNode} from 'react'; +import {translate} from '@docusaurus/Translate'; import ReactIdealImage, { type IconKey, type State, -} from '@slorber/react-ideal-image'; -import {translate} from '@docusaurus/Translate'; +} from '@theme/IdealImageLegacy'; import type {Props} from '@theme/IdealImage'; @@ -93,7 +93,6 @@ export default function IdealImage(props: Props): ReactNode { return ( + + + +`; + +exports[`Loading icon Should render a snapshot that is good 1`] = ` + + + + +`; + +exports[`Offline icon Should render a snapshot that is good 1`] = ` + + + + +`; + +exports[`Warning icon Should render a snapshot that is good 1`] = ` + + + + +`; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/composeStyle.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/composeStyle.js new file mode 100644 index 0000000000..c70bcaa2fb --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/composeStyle.js @@ -0,0 +1,32 @@ +import compose from '../components/composeStyle'; + +describe('composeStyle', () => { + it('Should combine object classes into one className string', () => { + const theme = { + base: 'base', + element: 'base__element', + }; + const result = compose(theme.base, theme.element); + expect(result.className).toEqual(`${theme.base} ${theme.element}`); + }); + + it('Should return a styles object unmodified', () => { + const style = { + color: 'blue', + margin: '1em 0', + }; + const result = compose(style); + const expected = style; + expect(result.style).toEqual(expected); + }); + + it('Should throw an error if given a parameter not an object or string', () => { + const number = 1; + try { + compose(number); + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe(`Unexpected value ${number}`); + } + }); +}); diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.js new file mode 100644 index 0000000000..f3fac03a39 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.js @@ -0,0 +1,185 @@ +import { + // guessMaxImageWidth, + bytesToSize, + selectSrc, + fallbackParams, +} from '../components/helpers'; + +/* +describe('guessMaxImageWidth', () => { + it('Should calculate the maximum image width', () => { + const dimensions = { + width: 400, + height: 100, + } + const mockedWindow = { + screen: { + width: 100, + }, + innerWidth: 1024, + innerHeight: 768, + } + const expected = dimensions.width + const result = guessMaxImageWidth(dimensions, mockedWindow) + + expect(result).toEqual(expected) + }) + + it('Should calculate the maximum image width with screen changes', () => { + const dimensions = { + width: 400, + height: 100, + } + const mockedWindow = { + screen: { + width: 100, + }, + innerWidth: 50, + innerHeight: 30, + } + const expected = + (dimensions.width / mockedWindow.innerWidth) * mockedWindow.screen.width + const result = guessMaxImageWidth(dimensions, mockedWindow) + + expect(result).toEqual(expected) + }) + + it('Should calculate the maximum image width with screen changes and scroll', () => { + const body = document.getElementsByTagName('body')[0] + Object.defineProperty(body, 'clientHeight', { + get: () => { + return 400 + }, + }) + const dimensions = { + width: 400, + height: 100, + } + const mockedWindow = { + screen: { + width: 100, + }, + innerWidth: 50, + innerHeight: 100, + } + const expected = 450 + const result = guessMaxImageWidth(dimensions, mockedWindow) + + expect(result).toEqual(expected) + }) +}) +*/ + +describe('bytesToSize', () => { + const bitsInKB = 1024; + const bitsInMB = bitsInKB * bitsInKB; + + it('Should correctly calculate size less than a single byte', () => { + const bytes = 4; + const result = bytesToSize(bytes); + expect(result).toEqual(`${bytes} Bytes`); + }); + + it('Should correctly calculate size one bit less than a kilobyte', () => { + const bytes = bitsInKB - 1; + const result = bytesToSize(bytes); + expect(result).toEqual(`${bytes} Bytes`); + }); + + it('Should correctly calculate size of exactly a kilobyte', () => { + const expected = '1.0 KB'; + const result = bytesToSize(bitsInKB); + expect(result).toEqual(expected); + }); + + it('Should correctly calculate decimal value of exactly a kilobyte plus 100 bits', () => { + const expected = '1.1 KB'; + const result = bytesToSize(bitsInKB + 100); + expect(result).toEqual(expected); + }); + + it('Should correctly calculate size of exactly a megabybte', () => { + const expected = '1.0 MB'; + const result = bytesToSize(bitsInMB); + expect(result).toEqual(expected); + }); +}); + +describe('selectSrc', () => { + it('Should throw if provided no srcSet', () => { + const props = { + srcSet: [], + }; + try { + selectSrc(props); + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe('Need at least one item in srcSet'); + } + }); + + it('Should throw if provided no supported formats in srcSet', () => { + const props = { + srcSet: [{format: 'webp'}], + }; + try { + selectSrc(props); + expect(true).toBe(false); + } catch (e) { + expect(e.message).toBe( + 'Need at least one supported format item in srcSet', + ); + } + }); + + it('Should select the right source with an image greater than the max width', () => { + const srcThatShouldBeSelected = {format: 'jpeg', width: 100}; + const props = { + srcSet: [srcThatShouldBeSelected], + maxImageWidth: 100, + }; + const expected = srcThatShouldBeSelected; + const result = selectSrc(props); + expect(result).toEqual(expected); + }); + + it('Should select the right source with an image less than the max width', () => { + const srcThatShouldBeSelected = {format: 'jpeg', width: 99}; + const srcThatShouldNotBeSelected = {format: 'jpeg', width: 98}; + const props = { + srcSet: [srcThatShouldBeSelected, srcThatShouldNotBeSelected], + maxImageWidth: 100, + }; + const expected = srcThatShouldBeSelected; + const result = selectSrc(props); + expect(result).toEqual(expected); + }); + + it('Should use webp images if supported', () => { + const srcThatShouldBeSelected = {format: 'webp', width: 99}; + const srcThatShouldNotBeSelected = {format: 'webp', width: 98}; + const props = { + srcSet: [srcThatShouldBeSelected, srcThatShouldNotBeSelected], + supportsWebp: true, + maxImageWidth: 100, + }; + const expected = srcThatShouldBeSelected; + const result = selectSrc(props); + expect(result).toEqual(expected); + }); +}); + +/* +describe('fallbackParams', () => { + it('Should return an empty object when run in the browser environment', () => { + const result = fallbackParams({ + srcSet: [ + { + format: 'webp', + }, + ], + }); + expect(result).toEqual({}); + }); +}); + */ diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.node.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.node.js new file mode 100644 index 0000000000..bb9b39a321 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/helpers.node.js @@ -0,0 +1,42 @@ +/** + * @jest-environment node + */ + +import {guessMaxImageWidth, fallbackParams} from '../components/helpers'; + +describe('guessMaxImageWidth', () => { + const expected = 0; + it(`Should return ${expected} when run in the node environment`, () => { + const result = guessMaxImageWidth({width: 100}); + expect(result).toEqual(expected); + }); +}); + +describe('FallbackParams', () => { + const props = { + srcSet: [ + { + format: 'webp', + }, + { + format: 'jpeg', + }, + { + format: 'png', + }, + ], + getUrl: jest.fn(), + }; + + it('Should return an object when run in the node environment', () => { + const result = fallbackParams(props); + expect(result).not.toEqual({}); + expect(props.getUrl).toHaveBeenCalledWith({ + format: 'jpeg', + }); + expect(props.getUrl).toHaveBeenCalledWith({ + format: 'png', + }); + expect(result.ssr).toEqual(true); + }); +}); diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/icon.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/icon.js new file mode 100644 index 0000000000..980243b317 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/icon.js @@ -0,0 +1,36 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import Download from '../components/Icon/Download'; +import Loading from '../components/Icon/Loading'; +import Offline from '../components/Icon/Offline'; +import Warning from '../components/Icon/Warning'; + +const snapshotTestDescription = 'Should render a snapshot that is good'; + +describe('Download icon', () => { + it(snapshotTestDescription, () => { + const download = renderer.create().toJSON(); + expect(download).toMatchSnapshot(); + }); +}); + +describe('Loading icon', () => { + it(snapshotTestDescription, () => { + const loading = renderer.create().toJSON(); + expect(loading).toMatchSnapshot(); + }); +}); + +describe('Offline icon', () => { + it(snapshotTestDescription, () => { + const offline = renderer.create().toJSON(); + expect(offline).toMatchSnapshot(); + }); +}); + +describe('Warning icon', () => { + it(snapshotTestDescription, () => { + const warning = renderer.create().toJSON(); + expect(warning).toMatchSnapshot(); + }); +}); diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Download.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Download.js new file mode 100644 index 0000000000..ac9876766a --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Download.js @@ -0,0 +1,15 @@ +// This icon is from "material design icons" +// It is licensed under Apache License 2.0 +// Full text is available here +// https://github.com/google/material-design-icons/blob/master/LICENSE +import React from 'react'; +import Icon from './index'; + +const Download = (props) => ( + +); + +export default Download; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Loading.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Loading.js new file mode 100644 index 0000000000..dbc8d05e61 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Loading.js @@ -0,0 +1,15 @@ +// This icon is from "material design icons" +// It is licensed under Apache License 2.0 +// Full text is available here +// https://github.com/google/material-design-icons/blob/master/LICENSE +import React from 'react'; +import Icon from './index'; + +const Loading = (props) => ( + +); + +export default Loading; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Offline.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Offline.js new file mode 100644 index 0000000000..b704f74c61 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Offline.js @@ -0,0 +1,15 @@ +// This icon is from "material design icons" +// It is licensed under Apache License 2.0 +// Full text is available here +// https://github.com/google/material-design-icons/blob/master/LICENSE +import React from 'react'; +import Icon from './index'; + +const Offline = (props) => ( + +); + +export default Offline; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Warning.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Warning.js new file mode 100644 index 0000000000..3bee0034c6 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/Warning.js @@ -0,0 +1,15 @@ +// This icon is from "material design icons" +// It is licensed under Apache License 2.0 +// Full text is available here +// https://github.com/google/material-design-icons/blob/master/LICENSE +import React from 'react'; +import Icon from './index'; + +const Warning = (props) => ( + +); + +export default Warning; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/index.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/index.js new file mode 100644 index 0000000000..11593b154e --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Icon/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +// import PropTypes from 'prop-types' + +const Icon = ({size = 24, fill = '#000', className, path}) => ( + + + + +); + +/* +Icon.propTypes = { + size: PropTypes.number, + fill: PropTypes.string, + className: PropTypes.string, + path: PropTypes.string.isRequired, +} + */ + +export default Icon; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/index.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/index.js new file mode 100644 index 0000000000..5bf57e0535 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/index.js @@ -0,0 +1,352 @@ +import React, {Component} from 'react'; +import {Waypoint} from './waypoint'; +import Media from '../Media'; +import {icons, loadStates} from '../constants'; +import {xhrLoader, imageLoader, timeout, combineCancel} from '../loaders'; +import { + guessMaxImageWidth, + bytesToSize, + supportsWebp, + ssr, + nativeConnection, + selectSrc, + fallbackParams, +} from '../helpers'; + +const {initial, loading, loaded, error} = loadStates; + +const defaultShouldAutoDownload = ({ + connection, + size, + threshold, + possiblySlowNetwork, +}) => { + if (possiblySlowNetwork) return false; + if (!connection) return true; + const {downlink, rtt, effectiveType} = connection; + switch (effectiveType) { + case 'slow-2g': + case '2g': + return false; + case '3g': + if (downlink && size && threshold) { + return (size * 8) / (downlink * 1000) + rtt < threshold; + } + return false; + case '4g': + default: + return true; + } +}; + +const defaultGetMessage = (icon, state) => { + switch (icon) { + case icons.noicon: + case icons.loaded: + return null; + case icons.loading: + return 'Loading...'; + case icons.load: + // we can show `alt` here + const {pickedSrc} = state; + const {size} = pickedSrc; + if (size) { + return [ + 'Click to load (', + {bytesToSize(size)}, + ')', + ]; + } else { + return 'Click to load'; + } + case icons.offline: + return 'Your browser is offline. Image not loaded'; + case icons.error: + const {loadInfo} = state; + if (loadInfo === 404) { + return '404. Image not found'; + } else { + return 'Error. Click to reload'; + } + default: + throw new Error(`Wrong icon: ${icon}`); + } +}; + +const defaultGetIcon = (state) => { + const {loadState, onLine, overThreshold, userTriggered} = state; + if (ssr) return icons.noicon; + switch (loadState) { + case loaded: + return icons.loaded; + case loading: + return overThreshold ? icons.loading : icons.noicon; + case initial: + if (onLine) { + const {shouldAutoDownload} = state; + if (shouldAutoDownload === undefined) return icons.noicon; + return userTriggered || !shouldAutoDownload ? icons.load : icons.noicon; + } else { + return icons.offline; + } + case error: + return onLine ? icons.error : icons.offline; + default: + throw new Error(`Wrong state: ${loadState}`); + } +}; + +export default class IdealImage extends Component { + constructor(props) { + super(props); + // TODO: validate props.srcSet + this.state = { + loadState: initial, + connection: nativeConnection + ? { + downlink: navigator.connection.downlink, // megabits per second + rtt: navigator.connection.rtt, // ms + effectiveType: navigator.connection.effectiveType, // 'slow-2g', '2g', '3g', or '4g' + } + : null, + onLine: true, + overThreshold: false, + inViewport: false, + userTriggered: false, + possiblySlowNetwork: false, + }; + } + + /* + static propTypes = { + /!** how much to wait in ms until concider download to slow *!/ + threshold: PropTypes.number, + /!** function to generate src based on width and format *!/ + getUrl: PropTypes.func, + /!** array of sources *!/ + srcSet: PropTypes.arrayOf( + PropTypes.shape({ + width: PropTypes.number.isRequired, + src: PropTypes.string, + size: PropTypes.number, + format: PropTypes.oneOf(['jpeg', 'jpg', 'webp', 'png', 'gif']), + }), + ).isRequired, + /!** function which decides if image should be downloaded *!/ + shouldAutoDownload: PropTypes.func, + /!** function which decides what message to show *!/ + getMessage: PropTypes.func, + /!** function which decides what icon to show *!/ + getIcon: PropTypes.func, + /!** type of loader *!/ + loader: PropTypes.oneOf(['image', 'xhr']), + /!** Width of the image in px *!/ + width: PropTypes.number.isRequired, + /!** Height of the image in px *!/ + height: PropTypes.number.isRequired, + placeholder: PropTypes.oneOfType([ + PropTypes.shape({ + /!** Solid color placeholder *!/ + color: PropTypes.string.isRequired, + }), + PropTypes.shape({ + /!** + * [Low Quality Image Placeholder](https://github.com/zouhir/lqip) + * [SVG-Based Image Placeholder](https://github.com/technopagan/sqip) + * base64 encoded image of low quality + *!/ + lqip: PropTypes.string.isRequired, + }), + ]).isRequired, + /!** Map of icons *!/ + icons: PropTypes.object.isRequired, + /!** theme object - CSS Modules or React styles *!/ + theme: PropTypes.object.isRequired, + }*/ + + static defaultProps = { + shouldAutoDownload: defaultShouldAutoDownload, + getMessage: defaultGetMessage, + getIcon: defaultGetIcon, + loader: 'xhr', + }; + + componentDidMount() { + if (nativeConnection) { + this.updateConnection = () => { + if (!navigator.onLine) return; + if (this.state.loadState === initial) { + this.setState({ + connection: { + effectiveType: navigator.connection.effectiveType, + downlink: navigator.connection.downlink, + rtt: navigator.connection.rtt, + }, + }); + } + }; + navigator.connection.addEventListener('onchange', this.updateConnection); + } else if (this.props.threshold) { + this.possiblySlowNetworkListener = (e) => { + if (this.state.loadState !== initial) return; + const {possiblySlowNetwork} = e.detail; + if (!this.state.possiblySlowNetwork && possiblySlowNetwork) { + this.setState({possiblySlowNetwork}); + } + }; + window.document.addEventListener( + 'possiblySlowNetwork', + this.possiblySlowNetworkListener, + ); + } + this.updateOnlineStatus = () => this.setState({onLine: navigator.onLine}); + this.updateOnlineStatus(); + window.addEventListener('online', this.updateOnlineStatus); + window.addEventListener('offline', this.updateOnlineStatus); + } + + componentWillUnmount() { + this.clear(); + if (nativeConnection) { + navigator.connection.removeEventListener( + 'onchange', + this.updateConnection, + ); + } else if (this.props.threshold) { + window.document.removeEventListener( + 'possiblySlowNetwork', + this.possiblySlowNetworkListener, + ); + } + window.removeEventListener('online', this.updateOnlineStatus); + window.removeEventListener('offline', this.updateOnlineStatus); + } + + onClick = () => { + const {loadState, onLine, overThreshold} = this.state; + if (!onLine) return; + switch (loadState) { + case loading: + if (overThreshold) this.cancel(true); + return; + case loaded: + // nothing + return; + case initial: + case error: + this.load(true); + return; + default: + throw new Error(`Wrong state: ${loadState}`); + } + }; + + clear() { + if (this.loader) { + this.loader.cancel(); + this.loader = undefined; + } + } + + cancel(userTriggered) { + if (loading !== this.state.loadState) return; + this.clear(); + this.loadStateChange(initial, userTriggered); + } + + loadStateChange(loadState, userTriggered, loadInfo = null) { + this.setState({ + loadState, + overThreshold: false, + userTriggered: !!userTriggered, + loadInfo, + }); + } + + load = (userTriggered) => { + const {loadState, url} = this.state; + if (ssr || loaded === loadState || loading === loadState) return; + this.loadStateChange(loading, userTriggered); + + const {threshold} = this.props; + const loader = + this.props.loader === 'xhr' ? xhrLoader(url) : imageLoader(url); + loader + .then(() => { + this.clear(); + this.loadStateChange(loaded, false); + }) + .catch((e) => { + this.clear(); + if (e.status === 404) { + this.loadStateChange(error, false, 404); + } else { + this.loadStateChange(error, false); + } + }); + + if (threshold) { + const timeoutLoader = timeout(threshold); + timeoutLoader.then(() => { + if (!this.loader) return; + window.document.dispatchEvent( + new CustomEvent('possiblySlowNetwork', { + detail: {possiblySlowNetwork: true}, + }), + ); + this.setState({overThreshold: true}); + if (!this.state.userTriggered) this.cancel(true); + }); + this.loader = combineCancel(loader, timeoutLoader); + } else { + this.loader = loader; + } + }; + + onEnter = () => { + if (this.state.inViewport) return; + this.setState({inViewport: true}); + const pickedSrc = selectSrc({ + srcSet: this.props.srcSet, + maxImageWidth: + this.props.srcSet.length > 1 + ? guessMaxImageWidth(this.state.dimensions) // eslint-disable-line react/no-access-state-in-setstate + : 0, + supportsWebp, + }); + const {getUrl} = this.props; + const url = getUrl ? getUrl(pickedSrc) : pickedSrc.src; + const shouldAutoDownload = this.props.shouldAutoDownload({ + ...this.state, // eslint-disable-line react/no-access-state-in-setstate + size: pickedSrc.size, + }); + this.setState({pickedSrc, shouldAutoDownload, url}, () => { + if (shouldAutoDownload) this.load(false); + }); + }; + + onLeave = () => { + if (this.state.loadState === loading && !this.state.userTriggered) { + this.setState({inViewport: false}); + this.cancel(false); + } + }; + + render() { + const icon = this.props.getIcon(this.state); + const message = this.props.getMessage(icon, this.state); + return ( + + this.setState({dimensions})} + message={message} + /> + + ); + } +} diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/waypoint.tsx b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/waypoint.tsx new file mode 100644 index 0000000000..c5d3ba33bc --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImage/waypoint.tsx @@ -0,0 +1,254 @@ +/* +This is a slimmed down copy of https://github.com/civiccc/react-waypoint +The MIT License (MIT) +Copyright (c) 2015 Brigade + */ + +import React, {createRef, ReactNode} from 'react'; + +type ScrollContainer = Window | HTMLElement; + +function addEventListener( + element: ScrollContainer, + type: 'scroll' | 'resize', + listener: () => void, + options: AddEventListenerOptions, +) { + element.addEventListener(type, listener, options); + return () => element.removeEventListener(type, listener, options); +} + +// Because waypoint may fire before the setState() updates due to batching +// queueMicrotask is a better option than setTimeout() or React.flushSync() +// See https://github.com/facebook/docusaurus/issues/11018 +// See https://github.com/civiccc/react-waypoint/blob/0905ac5a073131147c96dd0694bd6f1b6ee8bc97/src/onNextTick.js +function subscribeMicrotask(callback: () => void) { + let subscribed = true; + queueMicrotask(() => { + if (subscribed) callback(); + }); + return () => (subscribed = false); +} + +type Position = 'above' | 'inside' | 'below' | 'invisible'; + +type Props = { + topOffset: number; + bottomOffset: number; + onEnter: () => void; + onLeave: () => void; + children: ReactNode; +}; + +export function Waypoint(props: Props) { + return typeof window !== 'undefined' ? ( + {props.children} + ) : ( + props.children + ); +} + +// TODO maybe replace this with IntersectionObserver later? +// IntersectionObserver doesn't support the "fast scroll" thing +// but it's probably not a big deal +class WaypointClient extends React.Component { + static defaultProps = { + topOffset: 0, + bottomOffset: 0, + onEnter() {}, + onLeave() {}, + }; + + scrollableAncestor?: ScrollContainer; + previousPosition: Position | null = null; + unsubscribe?: () => void; + + innerRef = createRef(); + + override componentDidMount() { + this.scrollableAncestor = findScrollableAncestor(this.innerRef.current!); + + const unsubscribeScroll = addEventListener( + this.scrollableAncestor!, + 'scroll', + this._handleScroll, + {passive: true}, + ); + + const unsubscribeResize = addEventListener( + window, + 'resize', + this._handleScroll, + {passive: true}, + ); + + const unsubscribeInitialScroll = subscribeMicrotask(() => { + this._handleScroll(); + }); + + this.unsubscribe = () => { + unsubscribeScroll(); + unsubscribeResize(); + unsubscribeInitialScroll(); + }; + } + + override componentDidUpdate() { + this._handleScroll(); + } + + override componentWillUnmount() { + this.unsubscribe?.(); + } + + _handleScroll = () => { + const node = this.innerRef.current; + const {topOffset, bottomOffset, onEnter, onLeave} = this.props; + + const bounds = getBounds({ + node: node!, + scrollableAncestor: this.scrollableAncestor!, + topOffset, + bottomOffset, + }); + + const currentPosition = getCurrentPosition(bounds); + const previousPosition = this.previousPosition; + this.previousPosition = currentPosition; + + if (previousPosition === currentPosition) { + return; + } + + if (currentPosition === 'inside') { + onEnter(); + } else if (previousPosition === 'inside') { + onLeave(); + } + + const isRapidScrollDown = + previousPosition === 'below' && currentPosition === 'above'; + const isRapidScrollUp = + previousPosition === 'above' && currentPosition === 'below'; + if (isRapidScrollDown || isRapidScrollUp) { + onEnter(); + onLeave(); + } + }; + + override render() { + // @ts-expect-error: fix this implicit API + return React.cloneElement(this.props.children, {innerRef: this.innerRef}); + } +} + +/** + * Traverses up the DOM to find an ancestor container which has an overflow + * style that allows for scrolling. + * + * @return {Object} the closest ancestor element with an overflow style that + * allows for scrolling. If none is found, the `window` object is returned + * as a fallback. + */ +function findScrollableAncestor(inputNode: HTMLElement): ScrollContainer { + let node: HTMLElement = inputNode; + + while (node.parentNode) { + // @ts-expect-error: it's fine + node = node.parentNode!; + + if (node === document.body) { + // We've reached all the way to the root node. + return window; + } + + const style = window.getComputedStyle(node); + const overflow = + style.getPropertyValue('overflow-y') || + style.getPropertyValue('overflow'); + + if ( + overflow === 'auto' || + overflow === 'scroll' || + overflow === 'overlay' + ) { + return node; + } + } + + // A scrollable ancestor element was not found, which means that we need to + // do stuff on window. + return window; +} + +type Bounds = { + top: number; + bottom: number; + viewportTop: number; + viewportBottom: number; +}; + +function getBounds({ + node, + scrollableAncestor, + topOffset, + bottomOffset, +}: { + node: Element; + scrollableAncestor: ScrollContainer; + topOffset: number; + bottomOffset: number; +}): Bounds { + const {top, bottom} = node.getBoundingClientRect(); + + let contextHeight; + let contextScrollTop; + if (scrollableAncestor === window) { + contextHeight = window.innerHeight; + contextScrollTop = 0; + } else { + const ancestorElement = scrollableAncestor as HTMLElement; + contextHeight = ancestorElement.offsetHeight; + contextScrollTop = ancestorElement.getBoundingClientRect().top; + } + + const contextBottom = contextScrollTop + contextHeight; + + return { + top, + bottom, + viewportTop: contextScrollTop + topOffset, + viewportBottom: contextBottom - bottomOffset, + }; +} + +function getCurrentPosition(bounds: Bounds): Position { + if (bounds.viewportBottom - bounds.viewportTop === 0) { + return 'invisible'; + } + // top is within the viewport + if (bounds.viewportTop <= bounds.top && bounds.top <= bounds.viewportBottom) { + return 'inside'; + } + // bottom is within the viewport + if ( + bounds.viewportTop <= bounds.bottom && + bounds.bottom <= bounds.viewportBottom + ) { + return 'inside'; + } + // top is above the viewport and bottom is below the viewport + if ( + bounds.top <= bounds.viewportTop && + bounds.viewportBottom <= bounds.bottom + ) { + return 'inside'; + } + if (bounds.viewportBottom < bounds.top) { + return 'below'; + } + if (bounds.top < bounds.viewportTop) { + return 'above'; + } + return 'invisible'; +} diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImageWithDefaults/index.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImageWithDefaults/index.js new file mode 100644 index 0000000000..b485fe1c65 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/IdealImageWithDefaults/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import IdealImage from '../IdealImage'; +import icons from '../icons'; +import theme from '../theme'; + +const IdealImageWithDefaults = ({ + icons: iconsProp = icons, + theme: themeProp = theme, + ...props +}) => ; + +export default IdealImageWithDefaults; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Media/index.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Media/index.js new file mode 100644 index 0000000000..9cea933ecb --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/Media/index.js @@ -0,0 +1,169 @@ +import React, {PureComponent} from 'react'; +// import PropTypes from 'prop-types' +import compose from '../composeStyle'; +import {icons as defaultIcons} from '../constants'; + +const {load, loading, loaded, error, noicon, offline} = defaultIcons; + +export default class Media extends PureComponent { + /*static propTypes = { + /!** URL of the image *!/ + src: PropTypes.string.isRequired, + /!** Width of the image in px *!/ + width: PropTypes.number.isRequired, + /!** Height of the image in px *!/ + height: PropTypes.number.isRequired, + placeholder: PropTypes.oneOfType([ + PropTypes.shape({ + /!** Solid color placeholder *!/ + color: PropTypes.string.isRequired, + }), + PropTypes.shape({ + /!** + * [Low Quality Image Placeholder](https://github.com/zouhir/lqip) + * [SVG-Based Image Placeholder](https://github.com/technopagan/sqip) + * base64 encoded image of low quality + *!/ + lqip: PropTypes.string.isRequired, + }), + ]).isRequired, + /!** display icon *!/ + icon: PropTypes.oneOf([load, loading, loaded, error, noicon, offline]) + .isRequired, + /!** Map of icons *!/ + icons: PropTypes.object.isRequired, + /!** theme object - CSS Modules or React styles *!/ + theme: PropTypes.object.isRequired, + /!** Alternative text *!/ + alt: PropTypes.string, + /!** Color of the icon *!/ + iconColor: PropTypes.string, + /!** Size of the icon in px *!/ + iconSize: PropTypes.number, + /!** React's style attribute for root element of the component *!/ + style: PropTypes.object, + /!** React's className attribute for root element of the component *!/ + className: PropTypes.string, + /!** On click handler *!/ + onClick: PropTypes.func, + /!** callback to get dimensions of the placeholder *!/ + onDimensions: PropTypes.func, + /!** message to show below the icon *!/ + message: PropTypes.node, + /!** reference for Waypoint *!/ + innerRef: PropTypes.func, + /!** noscript image src *!/ + nsSrc: PropTypes.string, + /!** noscript image srcSet *!/ + nsSrcSet: PropTypes.string, + }*/ + + static defaultProps = { + iconColor: '#fff', + iconSize: 64, + }; + + constructor(props) { + super(props); + this.state = {isMounted: false}; + } + + componentDidMount() { + this.setState({isMounted: true}); + + if (this.props.onDimensions && this.dimensionElement) + /* Firefox returns 0 for both clientWidth and clientHeight. + To fix this we can check the parentNode's clientWidth and clientHeight as a fallback. */ + this.props.onDimensions({ + width: + this.dimensionElement.clientWidth || + this.dimensionElement.parentNode.clientWidth, + height: + this.dimensionElement.clientHeight || + this.dimensionElement.parentNode.clientHeight, + }); + } + + renderIcon(props) { + const {icon, icons, iconColor: fill, iconSize: size, theme} = props; + const iconToRender = icons[icon]; + if (!iconToRender) return null; + const styleOrClass = compose( + {width: size + 100, height: size, color: fill}, + theme.icon, + ); + return React.createElement('div', styleOrClass, [ + React.createElement(iconToRender, {fill, size, key: 'icon'}), + React.createElement('br', {key: 'br'}), + this.props.message, + ]); + } + + renderImage(props) { + return props.icon === loaded ? ( + {props.alt} + ) : ( + (this.dimensionElement = ref)} + /> + ); + } + + renderNoscript(props) { + // render noscript in ssr + hydration to avoid hydration mismatch error + return this.state.isMounted ? null : ( + {props.alt} + + ); + } + + render() { + const props = this.props; + const {placeholder, theme} = props; + let background; + if (props.icon === loaded) { + background = {}; + } else if (placeholder.lqip) { + background = { + backgroundImage: `url("${placeholder.lqip}")`, + }; + } else { + background = { + backgroundColor: placeholder.color, + }; + } + return ( +
+ {this.renderImage(props)} + {this.renderNoscript(props)} + {this.renderIcon(props)} +
+ ); + } +} diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/README.md b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/README.md new file mode 100644 index 0000000000..a69473f61e --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/README.md @@ -0,0 +1,89 @@ +All possible states of the component + +```js +const lqip = + 'data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAA4DASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUG/8QAIRAAAQQDAAEFAAAAAAAAAAAAAQIDBREABAYhEjEyQVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAE/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQACIRH/2gAMAwEAAhEDEQA/AMJ2DG+7Dw0nz8gsx+uyhlxnWdLakOlfzpIF3aRf1WT5t96P5+N1ug9Tu7ZWS8q1gG6B8H2FDz+YxhjUrEOdZ//Z'; + +const sqip = + "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4774 3024'%3e%3cfilter id='b'%3e%3cfeGaussianBlur stdDeviation='12' /%3e%3c/filter%3e%3cpath fill='%23515a57' d='M0 0h4774v3021H0z'/%3e%3cg filter='url(%23b)' transform='translate(9.3 9.3) scale(18.64844)' fill-opacity='.5'%3e%3cellipse fill='whitefef' rx='1' ry='1' transform='matrix(74.55002 60.89891 -21.7939 26.67923 151.8 104.4)'/%3e%3cellipse fill='black80c' cx='216' cy='49' rx='59' ry='59'/%3e%3cellipse fill='black60e' cx='22' cy='60' rx='46' ry='89'/%3e%3cellipse fill='%23ffebd5' cx='110' cy='66' rx='42' ry='28'/%3e%3cellipse fill='whiteff9' rx='1' ry='1' transform='rotate(33.3 -113.2 392.6) scale(42.337 17.49703)'/%3e%3cellipse fill='%23031f1e' rx='1' ry='1' transform='matrix(163.4651 -64.93326 6.77862 17.06471 111 16.4)'/%3e%3cpath fill='whitefea' d='M66 74l9 39 16-44z'/%3e%3cellipse fill='%23a28364' rx='1' ry='1' transform='rotate(-32.4 253.2 -179) scale(30.79511 43.65381)'/%3e%3cpath fill='%231a232c' d='M40 139l61-57 33 95z'/%3e%3cpath fill='%230a222b' d='M249.8 153.3l-48.1-48 32.5-32.6 48.1 48z'/%3e%3c/g%3e%3c/svg%3e"; + + + + + + + + + + + + + + + + + + + + + +
+ load + + + + noicon + + +
loading + + offline + +
loaded + + error + +
; +``` diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/index.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/index.js new file mode 100644 index 0000000000..65e3dab73d --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/MediaWithDefaults/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import Media from '../Media'; +import icons from '../icons'; +import theme from '../theme'; + +const MediaWithDefaults = ({ + icons: iconsProp = icons, + theme: themeProp = theme, + ...props +}) => ; + +export default MediaWithDefaults; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/composeStyle.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/composeStyle.js new file mode 100644 index 0000000000..5adf6fa701 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/composeStyle.js @@ -0,0 +1,37 @@ +/** + * Composes styles and/or classes + * + * For classes it will concat them in in one string + * and return as `className` property. + * Alternative is https://github.com/JedWatson/classnames + * + * For objects it will merge them in one object + * and return as `style` property. + * + * Usage: + * Asume you have `theme` object, which can be css-module + * or object or other css-in-js compatible with css-module + * + * link + * + * @returns {{className: string, style: object}} - params for React component + */ +export default (...stylesOrClasses) => { + const classes = []; + let style; + for (const obj of stylesOrClasses) { + if (obj instanceof Object) { + Object.assign(style || (style = {}), obj); + } else if (obj === undefined || obj === false) { + // ignore + } else if (typeof obj === 'string') { + classes.push(obj); + } else { + throw new Error(`Unexpected value ${obj}`); + } + } + return { + className: classes.length > 1 ? classes.join(' ') : classes[0], + style, + }; +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/constants.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/constants.js new file mode 100644 index 0000000000..328ac72014 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/constants.js @@ -0,0 +1,24 @@ +const load = 'load'; +const loading = 'loading'; +const loaded = 'loaded'; +const error = 'error'; +const noicon = 'noicon'; +const offline = 'offline'; + +export const icons = { + load, + loading, + loaded, + error, + noicon, + offline, +}; + +const initial = 'initial'; + +export const loadStates = { + initial, + loading, + loaded, + error, +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/helpers.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/helpers.js new file mode 100644 index 0000000000..f2c06f1602 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/helpers.js @@ -0,0 +1,142 @@ +export const ssr = + typeof window === 'undefined' || window.navigator.userAgent === 'ReactSnap'; + +export const nativeConnection = !ssr && !!window.navigator.connection; + +// export const getScreenWidth = () => { +// if (ssr) return 0 +// const devicePixelRatio = window.devicePixelRatio || 1 +// const {screen} = window +// const {width} = screen +// // const angle = (screen.orientation && screen.orientation.angle) || 0 +// // return Math.max(width, height) +// // const rotated = Math.floor(angle / 90) % 2 !== 0 +// // return (rotated ? height : width) * devicePixelRatio +// return width * devicePixelRatio +// } +// export const screenWidth = getScreenWidth() + +export const guessMaxImageWidth = (dimensions, w) => { + if (ssr) return 0; + + // Default to window object but don't use window as a default + // parameter so that this can be used on the server as well + if (!w) { + w = window; + } + + const imgWidth = dimensions.width; + + const {screen} = w; + const sWidth = screen.width; + const sHeight = screen.height; + + const {documentElement} = document; + const windowWidth = w.innerWidth || documentElement.clientWidth; + const windowHeight = w.innerHeight || documentElement.clientHeight; + const devicePixelRatio = w.devicePixelRatio || 1; + + const windowResized = sWidth > windowWidth; + + let result; + if (windowResized) { + const body = document.getElementsByTagName('body')[0]; + const scrollWidth = windowWidth - imgWidth; + const isScroll = + body.clientHeight > windowHeight || body.clientHeight > sHeight; + if (isScroll && scrollWidth <= 15) { + result = sWidth - scrollWidth; + } else { + result = (imgWidth / windowWidth) * sWidth; + } + } else { + result = imgWidth; + } + + return result * devicePixelRatio; +}; + +export const bytesToSize = (bytes) => { + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; + if (bytes === 0) return 'n/a'; + const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10); + if (i === 0) return `${bytes} ${sizes[i]}`; + return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`; +}; + +// async function supportsWebp() { +// if (typeof createImageBitmap === 'undefined' || typeof fetch === 'undefined') +// return false +// return fetch( +// 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=', +// ) +// .then(response => response.blob()) +// .then(blob => createImageBitmap(blob).then(() => true, () => false)) +// } +// let webp = undefined +// const webpPromise = supportsWebp() +// webpPromise.then(x => (webp = x)) +// export default () => { +// if (webp === undefined) return webpPromise +// return { +// then: callback => callback(webp), +// } +// } + +const detectWebpSupport = () => { + if (ssr) return false; + const elem = document.createElement('canvas'); + if (elem.getContext && elem.getContext('2d')) { + // was able or not to get WebP representation + return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0; + } else { + // very old browser like IE 8, canvas not supported + return false; + } +}; + +export const supportsWebp = detectWebpSupport(); + +const isWebp = (x) => + x.format === 'webp' || (x.src && x.src.match(/\.webp($|\?.*)/i)); + +// eslint-disable-next-line no-shadow +export const selectSrc = ({srcSet, maxImageWidth, supportsWebp}) => { + if (srcSet.length === 0) throw new Error('Need at least one item in srcSet'); + let supportedFormat, width; + if (supportsWebp) { + supportedFormat = srcSet.filter(isWebp); + if (supportedFormat.length === 0) supportedFormat = srcSet; + } else { + supportedFormat = srcSet.filter((x) => !isWebp(x)); + if (supportedFormat.length === 0) + throw new Error('Need at least one supported format item in srcSet'); + } + let widths = supportedFormat.filter((x) => x.width >= maxImageWidth); + if (widths.length === 0) { + widths = supportedFormat; + width = Math.max.apply( + null, + widths.map((x) => x.width), + ); + } else { + width = Math.min.apply( + null, + widths.map((x) => x.width), + ); + } + return supportedFormat.filter((x) => x.width === width)[0]; +}; + +export const fallbackParams = ({srcSet, getUrl}) => { + if (!ssr) return {}; + const notWebp = srcSet.filter((x) => !isWebp(x)); + const first = notWebp[0]; + return { + nsSrcSet: notWebp + .map((x) => `${getUrl ? getUrl(x) : x.src} ${x.width}w`) + .join(','), + nsSrc: getUrl ? getUrl(first) : first.src, + ssr, + }; +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/icons.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/icons.js new file mode 100644 index 0000000000..309afd59f0 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/icons.js @@ -0,0 +1,16 @@ +import DownloadIcon from './Icon/Download'; +import OfflineIcon from './Icon/Offline'; +import WarningIcon from './Icon/Warning'; +import LoadingIcon from './Icon/Loading'; +import {icons} from './constants'; + +const {load, loading, loaded, error, noicon, offline} = icons; + +export default { + [load]: DownloadIcon, + [loading]: LoadingIcon, + [loaded]: null, + [error]: WarningIcon, + [noicon]: null, + [offline]: OfflineIcon, +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/loaders.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/loaders.js new file mode 100644 index 0000000000..a0345feaf7 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/loaders.js @@ -0,0 +1,112 @@ +// There is an issue with cancelable interface +// It is not obvious that +// `image(src)` has `cancel` function +// but `image(src).then()` doesn't + +import {unfetch, UnfetchAbortController} from './unfetch'; + +/** + * returns new "promise" with cancel function combined + * + * @param {Promise} p1 - first "promise" with cancel + * @param {Promise} p2 - second "promise" with cancel + * @returns {Promise} - new "promise" with cancel + */ +export const combineCancel = (p1, p2) => { + if (!p2) return p1; + const result = p1.then( + (x) => x, + (x) => x, + ); + result.cancel = () => { + p1.cancel(); + p2.cancel(); + }; + return result; +}; + +export const timeout = (threshold) => { + let timerId; + const result = new Promise((resolve) => { + timerId = setTimeout(resolve, threshold); + }); + result.cancel = () => { + // there is a bug with cancel somewhere in the code + // if (!timerId) throw new Error('Already canceled') + clearTimeout(timerId); + timerId = undefined; + }; + return result; +}; + +// Caveat: image loader can not cancel download in some browsers +export const imageLoader = (src) => { + let img = new Image(); + const result = new Promise((resolve, reject) => { + img.onload = resolve; + // eslint-disable-next-line no-multi-assign + img.onabort = img.onerror = () => reject({}); + img.src = src; + }); + result.cancel = () => { + if (!img) throw new Error('Already canceled'); + // eslint-disable-next-line no-multi-assign + img.onload = img.onabort = img.onerror = undefined; + img.src = ''; + img = undefined; + }; + return result; +}; + +// Caveat: XHR loader can cause errors because of 'Access-Control-Allow-Origin' +// Caveat: we still need imageLoader to do actual decoding, +// but if images are uncachable this will lead to two requests +export const xhrLoader = (url, options) => { + let controller = new UnfetchAbortController(); + const signal = controller.signal; + const result = new Promise((resolve, reject) => + unfetch(url, {...options, signal}).then((response) => { + if (response.ok) { + response + .blob() + .then(() => imageLoader(url)) + .then(resolve); + } else { + reject({status: response.status}); + } + }, reject), + ); + result.cancel = () => { + if (!controller) throw new Error('Already canceled'); + controller.abort(); + controller = undefined; + }; + return result; +}; + +// Caveat: AbortController only supported in Chrome 66+ +// Caveat: we still need imageLoader to do actual decoding, +// but if images are uncachable this will lead to two requests +// export const fetchLoader = (url, options) => { +// let controller = new AbortController() +// const signal = controller.signal +// const result = new Promise((resolve, reject) => +// fetch(url, {...options, signal}).then(response => { +// if (response.ok) { +// options && options.onMeta && options.onMeta(response.headers) +// response +// .blob() +// .then(() => imageLoader(url)) +// .then(resolve) +// } else { +// reject({status: response.status}) +// } +// }, reject), +// ) +// result.cancel = () => { +// if (!controller) throw new Error('Already canceled') +// controller.abort() +// controller = undefined +// } +// return result +// } diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.js new file mode 100644 index 0000000000..f967ae3224 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.js @@ -0,0 +1,26 @@ +export default { + placeholder: { + backgroundSize: 'cover', + backgroundRepeat: 'no-repeat', + position: 'relative', + }, + img: { + width: '100%', + height: 'auto', + maxWidth: '100%', + /* TODO: fix bug in styles */ + marginBottom: '-4px', + }, + icon: { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + textAlign: 'center', + }, + noscript: { + position: 'absolute', + top: 0, + left: 0, + }, +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.module.css b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.module.css new file mode 100644 index 0000000000..52fc55af26 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/theme.module.css @@ -0,0 +1,35 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.placeholder { + background-size: cover; + background-repeat: no-repeat; + position: relative; +} + +.img { + width: 100%; + height: auto; + max-width: 100%; + /* TODO: fix bug in styles */ + margin-bottom: -4px; + transform: translate3d(0, 0, 0); +} + +.icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.noscript { + position: absolute; + top: 0; + left: 0; +} diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/unfetch.js b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/unfetch.js new file mode 100644 index 0000000000..3b5f10b0de --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/components/unfetch.js @@ -0,0 +1,74 @@ +export class UnfetchAbortController { + constructor() { + this.signal = {onabort: () => {}}; + this.abort = () => this.signal.onabort(); + } +} + +// modified version of https://github.com/developit/unfetch +// - ponyfill intead of polyfill +// - add support for AbortController +export const unfetch = (url, options) => { + options = options || {}; + return new Promise((resolve, reject) => { + const request = new XMLHttpRequest(); + + request.open(options.method || 'get', url, true); + + // eslint-disable-next-line guard-for-in + for (const i in options.headers) { + request.setRequestHeader(i, options.headers[i]); + } + + request.withCredentials = options.credentials === 'include'; + + request.onload = () => { + resolve(response()); + }; + + request.onerror = reject; + + if (options.signal) + options.signal.onabort = () => { + // eslint-disable-next-line no-multi-assign + request.onerror = request.onload = undefined; + request.abort(); + }; + + request.send(options.body); + + function response() { + const keys = []; + const all = []; + const headers = {}; + let header; + + request + .getAllResponseHeaders() + .replace(/^(.*?):\s*?([\s\S]*?)$/gm, (m, key, value) => { + keys.push((key = key.toLowerCase())); + all.push([key, value]); + header = headers[key]; + headers[key] = header ? `${header},${value}` : value; + }); + + return { + // eslint-disable-next-line no-bitwise + ok: ((request.status / 100) | 0) === 2, // 200-299 + status: request.status, + statusText: request.statusText, + url: request.responseURL, + clone: response, + text: () => Promise.resolve(request.responseText), + json: () => Promise.resolve(request.responseText).then(JSON.parse), + blob: () => Promise.resolve(new Blob([request.response])), + headers: { + keys: () => keys, + entries: () => all, + get: (n) => headers[n.toLowerCase()], + has: (n) => n.toLowerCase() in headers, + }, + }; + } + }); +}; diff --git a/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/index.tsx b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/index.tsx new file mode 100644 index 0000000000..70a74434b4 --- /dev/null +++ b/packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/index.tsx @@ -0,0 +1,3 @@ +import IdealImageWithDefaults from './components/IdealImageWithDefaults'; + +export default IdealImageWithDefaults; diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts index 60363ec484..a91f953fe4 100644 --- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts +++ b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts @@ -159,7 +159,7 @@ export default function getSwizzleConfig(): SwizzleConfig { 'CodeBlock/Content': { actions: { eject: 'unsafe', - wrap: 'forbidden', + wrap: 'unsafe', }, description: 'The folder containing components responsible for rendering different types of CodeBlock content.', diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 78c25c3e48..d005b05806 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -410,7 +410,7 @@ declare module '@theme/CodeBlock' { readonly children: ReactNode; readonly className?: string; readonly metastring?: string; - readonly title?: string; + readonly title?: ReactNode; readonly language?: string; readonly showLineNumbers?: boolean | number; } @@ -426,17 +426,76 @@ declare module '@theme/CodeInline' { export default function CodeInline(props: Props): ReactNode; } -declare module '@theme/CodeBlock/CopyButton' { +declare module '@theme/CodeBlock/Provider' { import type {ReactNode} from 'react'; export interface Props { - readonly code: string; + readonly children: ReactNode; + } + + export default function CodeBlockProvider(props: Props): ReactNode; +} + +declare module '@theme/CodeBlock/Title' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly children: ReactNode; + } + + export default function CodeBlockTitle(props: Props): ReactNode; +} + +declare module '@theme/CodeBlock/Layout' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly className?: string; + } + + export default function CodeBlockLayout(props: Props): ReactNode; +} + +declare module '@theme/CodeBlock/Buttons' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly className?: string; + } + + export default function CodeBlockButtons(props: Props): ReactNode; +} + +declare module '@theme/CodeBlock/Buttons/Button' { + import type {ComponentProps, ReactNode} from 'react'; + + export interface Props extends ComponentProps<'button'> { readonly className?: string; } export default function CopyButton(props: Props): ReactNode; } +declare module '@theme/CodeBlock/Buttons/CopyButton' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly className?: string; + } + + export default function CodeBlockButtonCopy(props: Props): ReactNode; +} + +declare module '@theme/CodeBlock/Buttons/WordWrapButton' { + import type {ReactNode} from 'react'; + + export interface Props { + readonly className?: string; + } + + export default function CodeBlockButtonWordWrap(props: Props): ReactNode; +} + declare module '@theme/CodeBlock/Container' { import type {ReactNode} from 'react'; import type {ComponentProps} from 'react'; @@ -447,13 +506,23 @@ declare module '@theme/CodeBlock/Container' { }: {as: T} & ComponentProps): ReactNode; } +declare module '@theme/CodeBlock/Content' { + import type {ReactNode} from 'react'; + + export interface Props { + className?: string; + } + + export default function CodeBlockContent(props: Props): ReactNode; +} + declare module '@theme/CodeBlock/Content/Element' { import type {ReactNode} from 'react'; import type {Props} from '@theme/CodeBlock'; export type {Props}; - export default function CodeBlockElementContent(props: Props): ReactNode; + export default function CodeBlockContentElement(props: Props): ReactNode; } declare module '@theme/CodeBlock/Content/String' { @@ -464,7 +533,7 @@ declare module '@theme/CodeBlock/Content/String' { readonly children: string; } - export default function CodeBlockStringContent(props: Props): ReactNode; + export default function CodeBlockContentString(props: Props): ReactNode; } declare module '@theme/CodeBlock/Line' { @@ -488,16 +557,16 @@ declare module '@theme/CodeBlock/Line' { export default function CodeBlockLine(props: Props): ReactNode; } -declare module '@theme/CodeBlock/WordWrapButton' { +declare module '@theme/CodeBlock/Line/Token' { import type {ReactNode} from 'react'; + import type {Token, TokenOutputProps} from 'prism-react-renderer'; - export interface Props { - readonly className?: string; - readonly onClick: React.MouseEventHandler; - readonly isEnabled: boolean; + export interface Props extends TokenOutputProps { + readonly token: Token; + readonly line: Token[]; } - export default function WordWrapButton(props: Props): ReactNode; + export default function CodeBlockLine(props: Props): ReactNode; } declare module '@theme/DocCard' { @@ -1181,19 +1250,40 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' { import type {ReactNode} from 'react'; import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; - export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & { + export type DefaultNavbarItemProps = NavbarNavLinkProps & { readonly isDropdownItem?: boolean; readonly className?: string; readonly position?: 'left' | 'right'; }; - export interface Props extends DesktopOrMobileNavBarItemProps { + // TODO Docusaurus v4, remove old type name + export type DesktopOrMobileNavBarItemProps = DefaultNavbarItemProps; + + export interface Props extends DefaultNavbarItemProps { readonly mobile?: boolean; } export default function DefaultNavbarItem(props: Props): ReactNode; } +declare module '@theme/NavbarItem/DefaultNavbarItem/Mobile' { + import type {ReactNode} from 'react'; + import type {DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; + + export interface Props extends DefaultNavbarItemProps {} + + export default function DefaultNavbarItemMobile(props: Props): ReactNode; +} + +declare module '@theme/NavbarItem/DefaultNavbarItem/Desktop' { + import type {ReactNode} from 'react'; + import type {DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem'; + + export interface Props extends DefaultNavbarItemProps {} + + export default function DefaultNavbarItemDesktop(props: Props): ReactNode; +} + declare module '@theme/NavbarItem/NavbarNavLink' { import type {ReactNode} from 'react'; import type {Props as LinkProps} from '@docusaurus/Link'; @@ -1216,19 +1306,40 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' { import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink'; import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; - export type DesktopOrMobileNavBarItemProps = NavbarNavLinkProps & { + export type DropdownNavbarItemProps = NavbarNavLinkProps & { readonly position?: 'left' | 'right'; readonly items: readonly LinkLikeNavbarItemProps[]; readonly className?: string; }; - export interface Props extends DesktopOrMobileNavBarItemProps { + // TODO Docusaurus v4, remove old type name + export type DesktopOrMobileNavBarItemProps = DropdownNavbarItemProps; + + export interface Props extends DropdownNavbarItemProps { readonly mobile?: boolean; } export default function DropdownNavbarItem(props: Props): ReactNode; } +declare module '@theme/NavbarItem/DropdownNavbarItem/Mobile' { + import type {ReactNode} from 'react'; + import type {DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem'; + + export interface Props extends DropdownNavbarItemProps {} + + export default function DropdownNavbarItemMobile(props: Props): ReactNode; +} + +declare module '@theme/NavbarItem/DropdownNavbarItem/Desktop' { + import type {ReactNode} from 'react'; + import type {DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem'; + + export interface Props extends DropdownNavbarItemProps {} + + export default function DropdownNavbarItemDesktop(props: Props): ReactNode; +} + declare module '@theme/NavbarItem/SearchNavbarItem' { import type {ReactNode} from 'react'; diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/Button/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/Button/index.tsx new file mode 100644 index 0000000000..167bd3395d --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/Button/index.tsx @@ -0,0 +1,19 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import type {Props} from '@theme/CodeBlock/Buttons/Button'; + +export default function CodeBlockButton({ + className, + ...props +}: Props): ReactNode { + return ( + + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/CopyButton/styles.module.css similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/styles.module.css rename to packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/CopyButton/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/WordWrapButton/index.tsx similarity index 59% rename from packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx rename to packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/WordWrapButton/index.tsx index eddb120c9b..1ca6519f36 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/WordWrapButton/index.tsx @@ -8,16 +8,21 @@ import React, {type ReactNode} from 'react'; import clsx from 'clsx'; import {translate} from '@docusaurus/Translate'; -import type {Props} from '@theme/CodeBlock/WordWrapButton'; +import {useCodeBlockContext} from '@docusaurus/theme-common/internal'; +import Button from '@theme/CodeBlock/Buttons/Button'; +import type {Props} from '@theme/CodeBlock/Buttons/WordWrapButton'; import IconWordWrap from '@theme/Icon/WordWrap'; import styles from './styles.module.css'; -export default function WordWrapButton({ - className, - onClick, - isEnabled, -}: Props): ReactNode { +export default function WordWrapButton({className}: Props): ReactNode { + const {wordWrap} = useCodeBlockContext(); + + const canShowButton = wordWrap.isEnabled || wordWrap.isCodeScrollable; + if (!canShowButton) { + return false; + } + const title = translate({ id: 'theme.CodeBlock.wordWrapToggle', message: 'Toggle word wrap', @@ -26,17 +31,15 @@ export default function WordWrapButton({ }); return ( - + ); } diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/WordWrapButton/styles.module.css similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/styles.module.css rename to packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/WordWrapButton/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/index.tsx new file mode 100644 index 0000000000..5372dc8410 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/index.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +import BrowserOnly from '@docusaurus/BrowserOnly'; + +import CopyButton from '@theme/CodeBlock/Buttons/CopyButton'; +import WordWrapButton from '@theme/CodeBlock/Buttons/WordWrapButton'; +import type {Props} from '@theme/CodeBlock/Buttons'; + +import styles from './styles.module.css'; + +// Code block buttons are not server-rendered on purpose +// Adding them to the initial HTML is useless and expensive (due to JSX SVG) +// They are hidden by default and require React to become interactive +export default function CodeBlockButtons({className}: Props): ReactNode { + return ( + + {() => ( +
+ + +
+ )} + + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/styles.module.css new file mode 100644 index 0000000000..20acffe8fe --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Buttons/styles.module.css @@ -0,0 +1,37 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.buttonGroup { + display: flex; + column-gap: 0.2rem; + position: absolute; + /* rtl:ignore */ + right: calc(var(--ifm-pre-padding) / 2); + top: calc(var(--ifm-pre-padding) / 2); +} + +.buttonGroup button { + display: flex; + align-items: center; + background: var(--prism-background-color); + color: var(--prism-color); + border: 1px solid var(--ifm-color-emphasis-300); + border-radius: var(--ifm-global-radius); + padding: 0.4rem; + line-height: 0; + transition: opacity var(--ifm-transition-fast) ease-in-out; + opacity: 0; +} + +.buttonGroup button:focus-visible, +.buttonGroup button:hover { + opacity: 1 !important; +} + +:global(.theme-code-block:hover) .buttonGroup button { + opacity: 0.4; +} diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx index a856aee703..e0a952bcb3 100644 --- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx +++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.tsx @@ -12,8 +12,10 @@ import type {Props} from '@theme/CodeBlock/Content/Element'; import styles from './styles.module.css'; -// 
 tags in markdown map to CodeBlocks. They may contain JSX children. When
-// the children is not a simple string, we just return a styled block without
+// TODO Docusaurus v4: move this component at the root?
+// This component only handles a rare edge-case: 
 in MDX
+// 
 tags in markdown map to CodeBlocks. They may contain JSX children.
+// When children is not a simple string, we just return a styled block without
 // actually highlighting.
 export default function CodeBlockJSX({children, className}: Props): ReactNode {
   return (
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
index fb6c6763df..8e43172134 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx
@@ -6,126 +6,37 @@
  */
 
 import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
+import {useThemeConfig} from '@docusaurus/theme-common';
 import {
-  parseCodeBlockTitle,
-  parseLanguage,
-  parseLines,
-  getLineNumbersStart,
+  CodeBlockContextProvider,
+  type CodeBlockMetadata,
+  createCodeBlockMetadata,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {Highlight, type Language} from 'prism-react-renderer';
-import Line from '@theme/CodeBlock/Line';
-import CopyButton from '@theme/CodeBlock/CopyButton';
-import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
-import Container from '@theme/CodeBlock/Container';
 import type {Props} from '@theme/CodeBlock/Content/String';
+import CodeBlockLayout from '@theme/CodeBlock/Layout';
 
-import styles from './styles.module.css';
-
-// Prism languages are always lowercase
-// We want to fail-safe and allow both "php" and "PHP"
-// See https://github.com/facebook/docusaurus/issues/9012
-function normalizeLanguage(language: string | undefined): string | undefined {
-  return language?.toLowerCase();
+function useCodeBlockMetadata(props: Props): CodeBlockMetadata {
+  const {prism} = useThemeConfig();
+  return createCodeBlockMetadata({
+    code: props.children,
+    className: props.className,
+    metastring: props.metastring,
+    magicComments: prism.magicComments,
+    defaultLanguage: prism.defaultLanguage,
+    language: props.language,
+    title: props.title,
+    showLineNumbers: props.showLineNumbers,
+  });
 }
 
-export default function CodeBlockString({
-  children,
-  className: blockClassName = '',
-  metastring,
-  title: titleProp,
-  showLineNumbers: showLineNumbersProp,
-  language: languageProp,
-}: Props): ReactNode {
-  const {
-    prism: {defaultLanguage, magicComments},
-  } = useThemeConfig();
-  const language = normalizeLanguage(
-    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage,
-  );
-
-  const prismTheme = usePrismTheme();
+// TODO Docusaurus v4: move this component at the root?
+export default function CodeBlockString(props: Props): ReactNode {
+  const metadata = useCodeBlockMetadata(props);
   const wordWrap = useCodeWordWrap();
-  const isBrowser = useIsBrowser();
-
-  // We still parse the metastring in case we want to support more syntax in the
-  // future. Note that MDX doesn't strip quotes when parsing metastring:
-  // "title=\"xyz\"" => title: "\"xyz\""
-  const title = parseCodeBlockTitle(metastring) || titleProp;
-
-  const {lineClassNames, code} = parseLines(children, {
-    metastring,
-    language,
-    magicComments,
-  });
-  const lineNumbersStart = getLineNumbersStart({
-    showLineNumbers: showLineNumbersProp,
-    metastring,
-  });
-
   return (
-    
-      {title && 
{title}
}
-      

-        
-          {({className, style, tokens, getLineProps, getTokenProps}) => (
-            
-              
-                {tokens.map((line, i) => (
-                  
-                ))}
-              
-            

-          )}
-        
-        {isBrowser ? (
-          

-            {(wordWrap.isEnabled || wordWrap.isCodeScrollable) && (
-               wordWrap.toggle()}
-                isEnabled={wordWrap.isEnabled}
-              />
-            )}
-            
-          

-        ) : null}
-      

-    
+    
+      
+    
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/index.tsx
new file mode 100644
index 0000000000..dec2ddd8f2
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/index.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ComponentProps, type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import {usePrismTheme} from '@docusaurus/theme-common';
+import {Highlight} from 'prism-react-renderer';
+import type {Props} from '@theme/CodeBlock/Content';
+import Line from '@theme/CodeBlock/Line';
+
+import styles from './styles.module.css';
+
+// TODO Docusaurus v4: remove useless forwardRef
+const Pre = React.forwardRef>(
+  (props, ref) => {
+    return (
+      
+    );
+  },
+);
+
+function Code(props: ComponentProps<'code'>) {
+  const {metadata} = useCodeBlockContext();
+  return (
+    
+  );
+}
+
+export default function CodeBlockContent({
+  className: classNameProp,
+}: Props): ReactNode {
+  const {metadata, wordWrap} = useCodeBlockContext();
+  const prismTheme = usePrismTheme();
+  const {code, language, lineNumbersStart, lineClassNames} = metadata;
+  return (
+    
+      {({className, style, tokens: lines, getLineProps, getTokenProps}) => (
+        
+          
+            {lines.map((line, i) => (
+              
+            ))}
+          
+        

+      )}
+    
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
index 3760c530c4..48030df78a 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/styles.module.css
@@ -5,33 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.codeBlockContent {
-  position: relative;
-  /* rtl:ignore */
-  direction: ltr;
-  border-radius: inherit;
-}
-
-.codeBlockTitle {
-  border-bottom: 1px solid var(--ifm-color-emphasis-300);
-  font-size: var(--ifm-code-font-size);
-  font-weight: 500;
-  padding: 0.75rem var(--ifm-pre-padding);
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
 .codeBlock {
   --ifm-pre-background: var(--prism-background-color);
   margin: 0;
   padding: 0;
 }
 
-.codeBlockTitle + .codeBlockContent .codeBlock {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .codeBlockStandalone {
   padding: 0;
 }
@@ -54,34 +33,3 @@
     white-space: pre-wrap;
   }
 }
-
-.buttonGroup {
-  display: flex;
-  column-gap: 0.2rem;
-  position: absolute;
-  /* rtl:ignore */
-  right: calc(var(--ifm-pre-padding) / 2);
-  top: calc(var(--ifm-pre-padding) / 2);
-}
-
-.buttonGroup button {
-  display: flex;
-  align-items: center;
-  background: var(--prism-background-color);
-  color: var(--prism-color);
-  border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
-  padding: 0.4rem;
-  line-height: 0;
-  transition: opacity var(--ifm-transition-fast) ease-in-out;
-  opacity: 0;
-}
-
-.buttonGroup button:focus-visible,
-.buttonGroup button:hover {
-  opacity: 1 !important;
-}
-
-:global(.theme-code-block:hover) .buttonGroup button {
-  opacity: 0.4;
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/index.tsx
new file mode 100644
index 0000000000..100532faca
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/index.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useCodeBlockContext} from '@docusaurus/theme-common/internal';
+import Container from '@theme/CodeBlock/Container';
+import Title from '@theme/CodeBlock/Title';
+import Content from '@theme/CodeBlock/Content';
+import type {Props} from '@theme/CodeBlock/Layout';
+import Buttons from '@theme/CodeBlock/Buttons';
+
+import styles from './styles.module.css';
+
+export default function CodeBlockLayout({className}: Props): ReactNode {
+  const {metadata} = useCodeBlockContext();
+  return (
+    
+      {metadata.title && (
+        

+          {metadata.title}
+        

+      )}
+      

+        
+        
+      

+    
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/styles.module.css b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/styles.module.css
new file mode 100644
index 0000000000..74cdb53870
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Layout/styles.module.css
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.codeBlockContent {
+  position: relative;
+  /* rtl:ignore */
+  direction: ltr;
+  border-radius: inherit;
+}
+
+.codeBlockTitle {
+  border-bottom: 1px solid var(--ifm-color-emphasis-300);
+  font-size: var(--ifm-code-font-size);
+  font-weight: 500;
+  padding: 0.75rem var(--ifm-pre-padding);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.codeBlockTitle + .codeBlockContent .codeBlock {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/Token/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/Token/index.tsx
new file mode 100644
index 0000000000..cdbfcb88b4
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/Token/index.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import type {Props} from '@theme/CodeBlock/Line/Token';
+
+// Pass-through components that users can swizzle and customize
+export default function CodeBlockLineToken({
+  line,
+  token,
+  ...props
+}: Props): ReactNode {
+  return ;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
index e56bba27ed..80000b80d3 100644
--- a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/index.tsx
@@ -7,6 +7,7 @@
 
 import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
+import LineToken from '@theme/CodeBlock/Line/Token';
 import type {Props} from '@theme/CodeBlock/Line';
 
 import styles from './styles.module.css';
@@ -40,9 +41,14 @@ export default function CodeBlockLine({
     className: clsx(classNames, showLineNumbers && styles.codeLine),
   });
 
-  const lineTokens = line.map((token, key) => (
-    
-  ));
+  const lineTokens = line.map((token, key) => {
+    const tokenProps = getTokenProps({token});
+    return (
+      
+        {tokenProps.children}
+      
+    );
+  });
 
   return (
     
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/Title/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Title/index.tsx
new file mode 100644
index 0000000000..4b1559e0b1
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeBlock/Title/index.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {ReactNode} from 'react';
+
+import type {Props} from '@theme/CodeBlock/Title';
+
+// Just a pass-through component that users can swizzle and customize
+export default function CodeBlockTitle({children}: Props): ReactNode {
+  return children;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
deleted file mode 100644
index 5db484cf14..0000000000
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
-import type {
-  DesktopOrMobileNavBarItemProps,
-  Props,
-} from '@theme/NavbarItem/DefaultNavbarItem';
-
-function DefaultNavbarItemDesktop({
-  className,
-  isDropdownItem = false,
-  ...props
-}: DesktopOrMobileNavBarItemProps) {
-  const element = (
-    
-  );
-
-  if (isDropdownItem) {
-    return 
  • {element}
    • ;
-  }
-
-  return element;
-}
-
-function DefaultNavbarItemMobile({
-  className,
-  isDropdownItem,
-  ...props
-}: DesktopOrMobileNavBarItemProps) {
-  return (
-    
  • 
-      
-    
    • 
-  );
-}
-
-export default function DefaultNavbarItem({
-  mobile = false,
-  position, // Need to destructure position from props so that it doesn't get passed on.
-  ...props
-}: Props): ReactNode {
-  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
-  return (
-    
-  );
-}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx
new file mode 100644
index 0000000000..de9ab826e0
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Desktop/index.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+
+export default function DefaultNavbarItemDesktop({
+  className,
+  isDropdownItem = false,
+  ...props
+}: Props): ReactNode {
+  const element = (
+    
+  );
+
+  if (isDropdownItem) {
+    return 
  • {element}
    • ;
+  }
+
+  return element;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx
new file mode 100644
index 0000000000..5d37c0487d
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/Mobile/index.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+
+export default function DefaultNavbarItemMobile({
+  className,
+  isDropdownItem,
+  ...props
+}: Props): ReactNode {
+  return (
+    
  • 
+      
+    
    • 
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/index.tsx
new file mode 100644
index 0000000000..ff8992bf8d
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem/index.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import DefaultNavbarItemMobile from '@theme/NavbarItem/DefaultNavbarItem/Mobile';
+import DefaultNavbarItemDesktop from '@theme/NavbarItem/DefaultNavbarItem/Desktop';
+import type {Props} from '@theme/NavbarItem/DefaultNavbarItem';
+
+export default function DefaultNavbarItem({
+  mobile = false,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  ...props
+}: Props): ReactNode {
+  const Comp = mobile ? DefaultNavbarItemMobile : DefaultNavbarItemDesktop;
+  return (
+    
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx
new file mode 100644
index 0000000000..0ecc3b9fc6
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useState, useRef, useEffect, type ReactNode} from 'react';
+import clsx from 'clsx';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem from '@theme/NavbarItem';
+import type {Props} from '@theme/NavbarItem/DropdownNavbarItem/Desktop';
+
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}: Props): ReactNode {
+  const dropdownRef = useRef(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
+      if (
+        !dropdownRef.current ||
+        dropdownRef.current.contains(event.target as Node)
+      ) {
+        return;
+      }
+      setShowDropdown(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  return (
+    
    
+       tag focusable in case no link target
+        // See https://github.com/facebook/docusaurus/pull/6003
+        // There's probably a better solution though...
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(!showDropdown);
+          }
+        }}>
+        {props.children ?? props.label}
+      
+      
      
+        {items.map((childItemProps, i) => (
+          
+        ))}
+      
    
+    
    
+  );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx
new file mode 100644
index 0000000000..ef59dcdf82
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DropdownNavbarItem/Mobile/index.tsx
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {useEffect, type ReactNode, type ComponentProps} from 'react';
+import clsx from 'clsx';
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common';
+import {isSamePath, useLocalPathname} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItem, {type LinkLikeNavbarItemProps} from '@theme/NavbarItem';
+import type {Props} from '@theme/NavbarItem/DropdownNavbarItem/Mobile';
+import styles from './styles.module.css';
+
+function isItemActive(
+  item: LinkLikeNavbarItemProps,
+  localPathname: string,
+): boolean {
+  if (isSamePath(item.to, localPathname)) {
+    return true;
+  }
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+    return true;
+  }
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true;
+  }
+  return false;
+}
+
+function containsActiveItems(
+  items: readonly LinkLikeNavbarItemProps[],
+  localPathname: string,
+): boolean {
+  return items.some((item) => isItemActive(item, localPathname));
+}
+
+function CollapseButton({
+  collapsed,
+  onClick,
+}: {
+  collapsed: boolean;
+  onClick: ComponentProps<'button'>['onClick'];
+}) {
+  return (
+