Skip to content

Commit

Permalink
docs: serve samples for released version from jsdelivr (#9687)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pskelin
pskelin authored Aug 14, 2024
1 parent 2cb21f4 commit 1963495
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 43 deletions.
21 changes: 12 additions & 9 deletions packages/website/build-scripts/icons-generation/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
`;


Expand All @@ -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 += `
Expand Down Expand Up @@ -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);
4 changes: 4 additions & 0 deletions packages/website/docusaurus.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 4 additions & 3 deletions packages/website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/\"",
Expand All @@ -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",
Expand Down
71 changes: 41 additions & 30 deletions packages/website/src/components/Editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
Expand All @@ -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 }
}
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -428,7 +439,7 @@ ${fixAssetPaths(_js)}`,
<ShareIcon className={`${styles.btn__icon}`}/>
Share
</button>

</div>
</div>
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/website/src/theme/DocSidebar/Input/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down

0 comments on commit 1963495

Please sign in to comment.