From 44e12f4abfa94b61b64e62b8b5db759f355bb730 Mon Sep 17 00:00:00 2001 From: planctus Date: Wed, 18 Dec 2024 09:51:59 +0200 Subject: [PATCH] chore(docs): Fixing getting started pages in the website --- src/presets/ec/package.json | 7 ++++ src/presets/eu/package.json | 7 ++++ .../src/pages/ec/getting-started/index.mdx | 10 ++++-- .../src/pages/eu/getting-started/index.mdx | 32 ++++++++++++++++--- src/website/webpack.config.prod.js | 6 ++++ 5 files changed, 55 insertions(+), 7 deletions(-) diff --git a/src/presets/ec/package.json b/src/presets/ec/package.json index 402433e8d9..a164276a12 100644 --- a/src/presets/ec/package.json +++ b/src/presets/ec/package.json @@ -5,7 +5,14 @@ "version": "4.9.0", "description": "ECL EC preset", "main": "dist/scripts/ecl-ec.js", + "module": "dist/scripts/ecl-esm-ec.js", "style": "dist/styles/ecl-ec.css", + "exports": { + ".": { + "require": "./dist/scripts/ecl-ec.js", + "import": "./dist/scripts/ecl-esm-ec.js" + } + }, "publishConfig": { "access": "public" }, diff --git a/src/presets/eu/package.json b/src/presets/eu/package.json index 375e135dd0..2e72b21b07 100644 --- a/src/presets/eu/package.json +++ b/src/presets/eu/package.json @@ -5,7 +5,14 @@ "version": "4.9.0", "description": "ECL EU preset", "main": "dist/scripts/ecl-eu.js", + "module": "dist/scripts/ecl-esm-eu.js", "style": "dist/styles/ecl-eu.css", + "exports": { + ".": { + "require": "./dist/scripts/ecl-eu.js", + "import": "./dist/scripts/ecl-esm-eu.js" + } + }, "publishConfig": { "access": "public" }, diff --git a/src/website/src/pages/ec/getting-started/index.mdx b/src/website/src/pages/ec/getting-started/index.mdx index 4cd8886e52..38f47b4598 100644 --- a/src/website/src/pages/ec/getting-started/index.mdx +++ b/src/website/src/pages/ec/getting-started/index.mdx @@ -112,14 +112,18 @@ They can be found in the [release page](https://github.com/ec-europa/europa-comp diff --git a/src/website/src/pages/eu/getting-started/index.mdx b/src/website/src/pages/eu/getting-started/index.mdx index 90e28000ef..2f8f96b134 100644 --- a/src/website/src/pages/eu/getting-started/index.mdx +++ b/src/website/src/pages/eu/getting-started/index.mdx @@ -96,13 +96,37 @@ Ex: - {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-ec-default.css`} + {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-eu-default.css`} Download a `preset-eu` package to see all the files available to know how to reach them in the CDN, the file system is the same. +For more security, use the SRI hashes corresponding to the files when using them from the CDN. +They can be found in the [release page](https://github.com/ec-europa/europa-component-library/releases), in a json file, but here are the most common ones: + +
+ SRI hashes (click to expand) + + +
+ When using the CDN for icons and logos, be aware that it's not possible to serve svgs from an external domain without using some workaround, see the "Additional information" below. For different reasons, starting from performances and network traffic, **the recommended way of using ECL is to fetch its resources for then hosting them in the same domain where they are going to be used**. @@ -174,11 +198,11 @@ ECL releases npm packages for: diff --git a/src/website/webpack.config.prod.js b/src/website/webpack.config.prod.js index 9136ca09f3..c62d380160 100644 --- a/src/website/webpack.config.prod.js +++ b/src/website/webpack.config.prod.js @@ -357,6 +357,9 @@ module.exports = { 'process.env.ECL_EC_JS': JSON.stringify( (sri['ecl-ec.js'] || []).join(' ') || 'n/a', ), + 'process.env.ECL_ESM_EC_JS': JSON.stringify( + (sri['ecl-esm-ec.js'] || []).join(' ') || 'n/a', + ), 'process.env.ECL_EU_CSS': JSON.stringify( (sri['ecl-eu.css'] || []).join(' ') || 'n/a', ), @@ -372,6 +375,9 @@ module.exports = { 'process.env.ECL_EU_JS': JSON.stringify( (sri['ecl-eu.js'] || []).join(' ') || 'n/a', ), + 'process.env.ECL_ESM_EU_JS': JSON.stringify( + (sri['ecl-esm-eu.js'] || []).join(' ') || 'n/a', + ), 'process.env.ECL_RESET_CSS': JSON.stringify( (sri['ecl-reset.css'] || []).join(' ') || 'n/a', ),