chore(docs): Fixing getting started pages in the website

ec-europa · Dec 18, 2024 · 44e12f4 · 44e12f4
1 parent c7084fc
commit 44e12f4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 7 deletions.
diff --git 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
@@ -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
@@ -112,14 +112,18 @@ They can be found in the [release page](https://github.com/ec-europa/europa-comp
 
   <ul>
     <li>
-      for `ecl-eu.css`: <code>{process.env.ECL_EU_CSS}</code>
+      for `ecl-ec.css`: <code>{process.env.ECL_EC_CSS}</code>
     </li>
     <li>
-      for `ecl-eu-print.css`: <code>{process.env.ECL_EU_PRINT_CSS}</code>
+      for `ecl-ec-print.css`: <code>{process.env.ECL_EC_PRINT_CSS}</code>
     </li>
     <li>
       {' '}
-      for `ecl-eu.js`: <code>{process.env.ECL_EU_JS}</code>
+      for `ecl-ec.js`: <code>{process.env.ECL_EC_JS}</code>
+    </li>
+    <li>
+      {' '}
+      for `ecl-esm-ec.js`: <code>{process.env.ECL_ESM_EC_JS}</code>
     </li>
   </ul>
 </details>

diff --git 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:
 
 <a
   className="ecl-link"
-  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-ec-default.css`}
+  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/eu/styles/optional/ecl-eu-default.css`}
 >
-  {`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`}
 </a>
 
 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:
+
+<details>
+  <summary>SRI hashes (click to expand)</summary>
+
+  <ul>
+    <li>
+      for `ecl-eu.css`: <code>{process.env.ECL_EU_CSS}</code>
+    </li>
+    <li>
+      for `ecl-eu-print.css`: <code>{process.env.ECL_EU_PRINT_CSS}</code>
+    </li>
+    <li>
+      {' '}
+      for `ecl-eu.js`: <code>{process.env.ECL_EU_JS}</code>
+    </li>
+    <li>
+      {' '}
+      for `ecl-esm-eu.js`: <code>{process.env.ECL_ESM_EU_JS}</code>
+    </li>
+  </ul>
+</details>
+
 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:
 
   <ul>
     <li>builder (used to compile css and js) `@ecl/builder`</li>
-    <li>presets (EC and EU) `@ecl/preset-eu`</li>
+    <li>presets (EU) `@ecl/preset-eu`</li>
     <li>vanilla components (css and js) `@ecl/vanilla-component-{name}`</li>
     <li>twig components (twig template) `@ecl/twig-component-{name}`</li>
     <li>spec packages (data used in the demos) `@ecl/specs-component-{name}`</li>
-    <li>resources packages `@ecl/resources-ec-{name}`</li>
+    <li>resources packages `@ecl/resources-eu-{name}`</li>
   </ul>
 </details>
 

diff --git 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',
       ),