docs: serve samples for released version from jsdelivr

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);

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',

packages/website/package.json

@@ -7,11 +7,12 @@
     "generate-api-reference": "rimraf ./docs/components/fiori && rimraf ./docs/components/main && rimraf ./docs/components/compat && rimraf ./docs/components/ai && 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-local-env": "yarn generate-api-reference && yarn generate-documentation && yarn generate-local-cdn && yarn generate-icons",
+    "generate-local-env": "yarn generate-api-reference && yarn generate-documentation && yarn generate-icons",
     "generate-production-env": "yarn generate-local-env && rimraf ./static/pages && rimraf ./static/assets && yarn copy:pages:compat && yarn copy:pages:ai && yarn copy:pages:fiori && yarn copy:pages:main",
     "docusaurus": "docusaurus",
-    "start": "yarn generate-local-env && docusaurus start",
+    "start": "yarn generate-local-cdn && yarn generate-local-env && docusaurus start",
     "build": "yarn generate-production-env && docusaurus build",
+    "build:with:cdn": "yarn generate-local-cdn && yarn build",
     "copy:pages:compat": "copy-and-watch \"../compat/dist/assets/**/*\" \"./static/assets/\" && copy-and-watch \"../compat/dist/test/pages/**/*\" \"./static/packages/compat/test/pages/\"",
     "copy:pages:ai": "copy-and-watch \"../ai/dist/assets/**/*\" \"./static/assets/\" && copy-and-watch \"../ai/dist/test/pages/**/*\" \"./static/packages/ai/test/pages/\"",
     "copy:pages:main": "copy-and-watch \"../main/dist/assets/**/*\" \"./static/assets/\" && copy-and-watch \"../main/dist/test/pages/**/*\" \"./static/packages/main/test/pages/\"",
@@ -24,7 +25,7 @@
     "write-heading-ids": "docusaurus write-heading-ids",
     "typecheck": "tsc",
     "ci:build": "dotenv -e .env.latest -- yarn build",
-    "ci:build:nightly": "dotenv -e .env -- yarn build"
+    "ci:build:nightly": "dotenv -e .env -- yarn build:with:cdn"
   },
   "dependencies": {
     "@docusaurus/core": "3.1.1",

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,24 +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("<head>", `
 <head>
     <script type="importmap">
       {
-        "imports": {
-          "@ui5/webcomponents/": "${getHostBaseUrl()}local-cdn/main/",
-          "@ui5/webcomponents-ai/": "${getHostBaseUrl()}local-cdn/ai/",
-          "@ui5/webcomponents-fiori/": "${getHostBaseUrl()}local-cdn/fiori/",
-          "@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/umd/": "${getHostBaseUrl()}local-cdn/zxing/umd/",
-          "@zxing/library/esm5/": "${getHostBaseUrl()}local-cdn/zxing/esm5/"
-        }
+        "imports": ${JSON.stringify(calcImports())}
       }
     </script>
     <style>
@@ -101,7 +121,7 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
     if (activeExample === "hello-world") {
       return { html: hellowWorldHTML, js: hellowWorldTS }
     }
-    
+
     if (activeExample === "counter") {
       return { html: counterHTML, js: counterTS }
     }
@@ -230,16 +250,7 @@ ${fixAssetPaths(_js)}`,
         },
       },
       importMap: {
-        "imports": {
-          "@ui5/webcomponents/": `${getHostBaseUrl()}local-cdn/main/`,
-          "@ui5/webcomponents-fiori/": `${getHostBaseUrl()}local-cdn/fiori/`,
-          "@ui5/webcomponents-compat/": `${getHostBaseUrl()}local-cdn/compat/`,
-          "@ui5/webcomponents-ai/": `${getHostBaseUrl()}local-cdn/ai/`,
-          "@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/`
-        }
+        "imports": calcImports(),
       }
     }
     if (newConfig.files["main.css"].hidden) {
@@ -428,7 +439,7 @@ ${fixAssetPaths(_js)}`,
                 <ShareIcon className={`${styles.btn__icon}`}/>
                   Share
                 </button>
-               
+
               </div>
             </div>
           </>

packages/website/src/theme/DocSidebar/Input/index.js

@@ -7,7 +7,7 @@ const Input = ({ sidebar, updateItems }) => {
         <input
           className="filter"
           type='search'
-          autocomplete='off'
+          autoComplete='off'
           onChange={(e) => {
             const coppiedArray = filter(JSON.parse(JSON.stringify(sidebar)), e.target.value);