From ec0901845a6fbc27d5fd2afce7e4669178ed4ae4 Mon Sep 17 00:00:00 2001 From: Peter Skelin Date: Thu, 15 Aug 2024 08:31:01 +0300 Subject: [PATCH] docs: serve samples for released version from jsdelivr (#9691) --- .../build-scripts/icons-generation/index.mjs | 21 +++--- packages/website/docusaurus.config.ts | 4 ++ packages/website/package.json | 4 +- .../website/src/components/Editor/index.js | 67 ++++++++++++------- 4 files changed, 59 insertions(+), 37 deletions(-) diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs index ac960115f25a..9fa9d068d4a5 100644 --- a/packages/website/build-scripts/icons-generation/index.mjs +++ b/packages/website/build-scripts/icons-generation/index.mjs @@ -64,9 +64,9 @@ import Link from '@docusaurus/Link'; ` const additionalImports = ` -import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg"; -import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg"; -import PictureSvg from "../local-cdn/local-cdn/icons/dist/v5/picture.svg"; +import CopySvg from "@ui5/webcomponents-icons/dist/v5/copy.svg"; +import AcceptSvg from "@ui5/webcomponents-icons/dist/v5/accept.svg"; +import PictureSvg from "@ui5/webcomponents-icons/dist/v5/picture.svg"; `; @@ -81,10 +81,10 @@ const _generateIconsPage = (sourceDir, config) => { const iconNameImport = `${fileNameImportName}SvgName`; const svgImport = `${capitalize(fileNameImportName)}Svg`; - + imports += ` - import ${iconNameImport} from "../local-cdn/local-cdn/${config.dir}/dist/${fileName}.js"; - import ${svgImport} from "../local-cdn/local-cdn/${config.dir}/dist/${config.version}/${fileName}.svg"; + import ${iconNameImport} from "${config.npmPackage}/dist/${fileName}.js"; + import ${svgImport} from "${config.npmPackage}/dist/${config.version}/${fileName}.svg"; `; icons += ` @@ -186,7 +186,10 @@ ${classDef}`; writeFile(config.dir, content); }; +function findRoot(pkgName) { + return path.dirname(import.meta.resolve(`${pkgName}/package.json`)).replace("file://", ""); +} -generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), SAPIconsConfig); -generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), SAPTNTIconsConfig); -generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), SAPBSIconsConfig); +generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons"), "dist/v5"), SAPIconsConfig); +generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons-tnt"), "dist/v3"), SAPTNTIconsConfig); +generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons-business-suite"), "dist/v2"), SAPBSIconsConfig); diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts index 1f079562d36b..7968d15e0705 100644 --- a/packages/website/docusaurus.config.ts +++ b/packages/website/docusaurus.config.ts @@ -30,6 +30,10 @@ const getFullURL = () => { const config: Config = { + customFields: { + ui5Version: packageJson.version, + ui5DeploymentType: process.env.DEPLOYMENT_TYPE, + }, title: 'UI5 Web Components', tagline: 'An open-source UI components library for building enterprise-ready applications!', favicon: 'img/favicon.ico', diff --git a/packages/website/package.json b/packages/website/package.json index 6ddb97876bdc..d01fd8dcb882 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -7,9 +7,9 @@ "generate-api-reference": "rimraf ./docs/components/fiori && rimraf ./docs/components/main && node ./build-scripts/api-reference-generation/index.mjs", "generate-documentation": "rimraf ./docs/docs && node ./build-scripts/documentation-generation/index.mjs", "generate-icons": "rimraf ./icons && rimraf ./icons-tnt && rimraf ./icons-business-suite && node ./build-scripts/icons-generation/index.mjs", - "generate-all": "yarn generate-api-reference && yarn generate-documentation && yarn generate-local-cdn && yarn generate-icons", + "generate-all": "yarn generate-api-reference && yarn generate-documentation && yarn generate-icons", "docusaurus": "docusaurus", - "start": "yarn generate-all && docusaurus start", + "start": "yarn generate-all && yarn generate-local-cdn && docusaurus start", "build": "yarn generate-all && docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy", diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js index 08504ed2b9da..8e8d6fa3fac5 100644 --- a/packages/website/src/components/Editor/index.js +++ b/packages/website/src/components/Editor/index.js @@ -8,12 +8,12 @@ import styles from "./index.module.css"; import { ThemeContext, ContentDensityContext, TextDirectionContext } from "@site/src/theme/Root"; import { encodeToBase64, decodeFromBase64 } from "./share.js"; import clsx from "clsx"; -import ShareIcon from "../../../local-cdn/local-cdn/icons/dist/v5/share-2.svg"; +import ShareIcon from "@ui5/webcomponents-icons/dist/v5/share-2.svg"; import { Splitter } from 'react-splitter-light'; -import DownloadIcon from "../../../local-cdn/local-cdn/icons/dist/v5/download-from-cloud.svg"; -import EditIcon from "../../../local-cdn/local-cdn/icons/dist/v5/edit.svg"; -import ActionIcon from "../../../local-cdn/local-cdn/icons/dist/v5/action.svg"; -import HideIcon from "../../../local-cdn/local-cdn/icons/dist/v5/hide.svg"; +import DownloadIcon from "@ui5/webcomponents-icons/dist/v5/download-from-cloud.svg"; +import EditIcon from "@ui5/webcomponents-icons/dist/v5/edit.svg"; +import ActionIcon from "@ui5/webcomponents-icons/dist/v5/action.svg"; +import HideIcon from "@ui5/webcomponents-icons/dist/v5/hide.svg"; import downloadSample from './download.js'; import ExamplesMenu from '../ExamplesMenu/index.tsx'; @@ -61,22 +61,44 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare = const [copied, setCopied] = useState(false); const [ activeExample, setActiveExample ] = useState(""); + function calcImports() { + if (process.env.NODE_ENV === 'development' || siteConfig.customFields.ui5DeploymentType === "nightly") { + return { + "@ui5/webcomponents/": `${getHostBaseUrl()}local-cdn/main/`, + "@ui5/webcomponents-ai/": `${getHostBaseUrl()}local-cdn/ai/`, + "@ui5/webcomponents-fiori/": `${getHostBaseUrl()}local-cdn/fiori/`, + "@ui5/webcomponents-compat/": `${getHostBaseUrl()}local-cdn/compat/`, + "@ui5/webcomponents-base/": `${getHostBaseUrl()}local-cdn/base/`, + "@ui5/webcomponents-icons/": `${getHostBaseUrl()}local-cdn/icons/`, + "@ui5/webcomponents-localization/": `${getHostBaseUrl()}local-cdn/localization/`, + "@ui5/webcomponents-theming/": `${getHostBaseUrl()}local-cdn/theming/`, + "lit-html": `${getHostBaseUrl()}local-cdn/lit-html/lit-html.js`, + "lit-html/": `${getHostBaseUrl()}local-cdn/lit-html/`, + "@zxing/library/": `${getHostBaseUrl()}local-cdn/zxing/`, + }; + } else { + return { + "@ui5/webcomponents/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-ai/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-ai@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-fiori/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-fiori@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-compat/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-compat@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-base/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-base@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-icons/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-icons@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-localization/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-localization@${siteConfig.customFields.ui5Version}/`, + "@ui5/webcomponents-theming/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-theming@${siteConfig.customFields.ui5Version}/`, + "lit-html": `https://cdn.jsdelivr.net/npm/lit-html@2`, + "lit-html/": `https://cdn.jsdelivr.net/npm/lit-html@2/`, + "@zxing/library/": `https://cdn.jsdelivr.net/npm/@zxing/library@0/`, + }; + } + } + function addImportMap(html) { return html.replace("", `