From 2caf23d49bbe134ef447f05b80aeeb8881e544f1 Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Tue, 5 Mar 2024 15:56:03 +0100 Subject: [PATCH 1/4] Add component --- docusaurus.config.ts | 34 +++++++++++++++ package-lock.json | 66 ++++++++++++++++++++++++++++++ package.json | 4 ++ src/components/CodeInput/index.tsx | 32 +++++++++++++++ 4 files changed, 136 insertions(+) create mode 100644 src/components/CodeInput/index.tsx diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 0823a16ead9..9cf35518c10 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -3,6 +3,7 @@ import { themes as prismThemes } from 'prism-react-renderer'; import type { Config } from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; import type * as DocsPlugin from '@docusaurus/plugin-content-docs'; +import type { Configuration as WebpackConfiguration } from 'webpack'; import { version as webUiVersion } from './open-video-ui/external/web-ui/package.json'; import path from 'path'; import fs from 'fs'; @@ -108,6 +109,39 @@ const config: Config = { }, } satisfies DocsPlugin.Options, ], + () => ({ + name: 'webpack-plugin', + configureWebpack() { + return { + module: { + // https://github.com/WebCoder49/code-input only exports to the global scope. + // Insert some `import` and `export` statements where needed. + rules: [ + { + test: require.resolve('@webcoder49/code-input/code-input'), + loader: 'exports-loader', + options: { + type: 'commonjs', + exports: 'single codeInput', + }, + }, + { + test: require.resolve('@webcoder49/code-input/plugins/indent'), + loader: 'imports-loader', + options: { + type: 'commonjs', + imports: { + syntax: 'single', + name: 'codeInput', + moduleName: '@webcoder49/code-input/code-input', + }, + }, + }, + ], + }, + } satisfies WebpackConfiguration; + }, + }), ], markdown: { diff --git a/package-lock.json b/package-lock.json index d5ec2d39e05..ace9d5a2d1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,8 +11,10 @@ "@docusaurus/core": "3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", + "@webcoder49/code-input": "^2.2.1", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", + "prismjs": "^1.29.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -21,6 +23,8 @@ "@docusaurus/tsconfig": "3.1.1", "@docusaurus/types": "3.1.1", "dotenv": "^16.4.4", + "exports-loader": "^5.0.0", + "imports-loader": "^5.0.0", "prettier": "^3.2.4", "serve-handler": "^6.1.5", "typescript": "~5.3.3" @@ -3789,6 +3793,11 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webcoder49/code-input": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@webcoder49/code-input/-/code-input-2.2.1.tgz", + "integrity": "sha512-1B+wLZhBR1wyuD1bUICgNZNy5VA/z1YReMmsaGvdEHaV/Jfc7EB/4wnQ+78vEfxx0SZvHyosCivAmfmaq6tIHg==" + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -6022,6 +6031,34 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exports-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/exports-loader/-/exports-loader-5.0.0.tgz", + "integrity": "sha512-W15EyyytBwd30yCCieTCqZSCUvU/o3etj2IUItSMjVQEzAf5xOQx8JL9iMo7ERnuAzIA6eapGSFWl7E9F+Wy9g==", + "dev": true, + "dependencies": { + "source-map": "^0.6.1" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/exports-loader/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/express": { "version": "4.18.2", "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", @@ -7455,6 +7492,26 @@ "node": ">=8" } }, + "node_modules/imports-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/imports-loader/-/imports-loader-5.0.0.tgz", + "integrity": "sha512-tXgL8xxZFjOjQLLiE7my00UUQfktg4G8fdpXcZphL0bJWbk9eCxKKFaCwmFRcwyRJQl95GXBL1DoE1rCS/tcPw==", + "dev": true, + "dependencies": { + "source-map-js": "^1.0.2", + "strip-comments": "^2.0.1" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/imurmurhash": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", @@ -13216,6 +13273,15 @@ "node": ">=0.10.0" } }, + "node_modules/strip-comments": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz", + "integrity": "sha512-ZprKx+bBLXv067WTCALv8SSz5l2+XhpYCsVtSqlMnkAXMWDq+/ekVbl1ghqP9rUHTzv6sm/DwCOiYutU/yp1fw==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/strip-final-newline": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz", diff --git a/package.json b/package.json index 95901885ca6..8833bdc034c 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,10 @@ "@docusaurus/core": "3.1.1", "@docusaurus/preset-classic": "3.1.1", "@mdx-js/react": "^3.0.0", + "@webcoder49/code-input": "^2.2.1", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", + "prismjs": "^1.29.0", "react": "^18.0.0", "react-dom": "^18.0.0" }, @@ -28,6 +30,8 @@ "@docusaurus/tsconfig": "3.1.1", "@docusaurus/types": "3.1.1", "dotenv": "^16.4.4", + "exports-loader": "^5.0.0", + "imports-loader": "^5.0.0", "prettier": "^3.2.4", "serve-handler": "^6.1.5", "typescript": "~5.3.3" diff --git a/src/components/CodeInput/index.tsx b/src/components/CodeInput/index.tsx new file mode 100644 index 00000000000..8b941bda99f --- /dev/null +++ b/src/components/CodeInput/index.tsx @@ -0,0 +1,32 @@ +import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'; +import React, { type DetailedHTMLProps, type HTMLAttributes } from 'react'; +import Prism from 'prismjs'; +import * as codeInput from '@webcoder49/code-input/code-input'; +import '@webcoder49/code-input/plugins/indent'; +import 'prismjs/themes/prism-okaidia.min.css'; +import '@webcoder49/code-input/code-input.min.css'; + +if (ExecutionEnvironment.canUseDOM) { + codeInput.registerTemplate('syntax-highlighted', codeInput.templates.prism(Prism, [new codeInput.plugins.Indent(true, 4)])); +} + +export interface CodeInputElement extends codeInput.CodeInput { + value: string; +} + +export interface Props extends DetailedHTMLProps, CodeInputElement> { + template?: string; + value?: string; +} + +declare module 'react' { + namespace JSX { + interface IntrinsicElements { + 'code-input': Props; + } + } +} + +export function CodeInput(props: Props) { + return ; +} From 2549634cad4aee513130a102220fc188d476de8c Mon Sep 17 00:00:00 2001 From: Mattias Buelens Date: Tue, 5 Mar 2024 17:29:30 +0100 Subject: [PATCH 2/4] Use cdn.theoplayer.com in examples --- theoplayer/static/theoplayer/v6/examples/basic/demo.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/theoplayer/static/theoplayer/v6/examples/basic/demo.html b/theoplayer/static/theoplayer/v6/examples/basic/demo.html index c84f9418647..9f632cf75fa 100644 --- a/theoplayer/static/theoplayer/v6/examples/basic/demo.html +++ b/theoplayer/static/theoplayer/v6/examples/basic/demo.html @@ -13,18 +13,18 @@ width: 100%; } - - + +