chore(website): Using the existing ECL_VERSION to dynamically refer t…

…o the proper url of the CDN - FRONT-4671 (#3700)

* chore(website): Using the existing ECL_VERSION to dynamically refer to the proper url of the CDN

* chore(website): Trying different approach

* chore(website): Tested, working solution

* chore(website): Prettier

* chore(website): Adding ecl-link class

* chore(website): Fixing links with dynamic version set

src/website/src/pages/ec/getting-started/index.mdx

@@ -4,6 +4,7 @@ title: Getting started
 ---
 
 import { Link } from '@ecl/website-components';
+import { ECL_VERSION } from '../../../preval/getVersion';
 
 The Europa Component Library is a design system defining the visual identity of the European Commission on the web.
 
@@ -92,7 +93,14 @@ There are also other optional css files distributed that can be used, pikaday is
 ECL is also distributing its presets on a CDN, all the files distributed in the package mentioned before are also available there, this is the pattern to reach them:
 `https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}`
 
-Ex: https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.9.1/ec/styles/optional/ecl-ec-default.css
+Ex:
+
+<a
+  className="ecl-link"
+  href={`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/optional/ecl-ec-default.css`}
+>
+  {`https://cdn1.fpfis.tech.ec.europa.eu/ecl/v${ECL_VERSION}/ec/styles/optional/ecl-ec-default.css`}
+</a>
 
 Download a `preset-ec` package from the release page to see all the files available so to know how to reach them in the CDN, the file system is the same.
 

src/website/src/pages/eu/getting-started/index.mdx

@@ -4,6 +4,7 @@ title: Getting started
 ---
 
 import { Link } from '@ecl/website-components';
+import { ECL_VERSION } from '../../../preval/getVersion';
 
 The Europa Component Library is a design system for the European Commission and websites managed by the Commission.
 
@@ -91,7 +92,14 @@ There are also other optional css files distributed that can be used, moment.js
 ECL is also distributing its presets on a CDN, all the files distributed in the package mentioned before are also available in the CDN, this is the pattern to reach them:
 `https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{system}/{path/to/the/asset}`
 
-Ex: https://cdn1.fpfis.tech.ec.europa.eu/ecl/v3.9.1/eu/styles/optional/ecl-eu-default.css
+Ex:
+
+<a
+  className="ecl-link"
+  href={`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-ec-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.
 

src/website/src/preval/getVersion.js

@@ -0,0 +1 @@
+export const { ECL_VERSION } = { ECL_VERSION: process.env.ECL_VERSION };

src/website/webpack.config.prod.js

@@ -37,10 +37,7 @@ const environmentModulePath = require.resolve(
 process.env.BABEL_ENV = 'production';
 process.env.NODE_ENV = 'production';
 
-let eclVersion = lernaJson.version;
-if (process.env.PULL_REQUEST && process.env.GITHUB_EVENT_NUMBER) {
-  eclVersion += ` - PR ${process.env.GITHUB_EVENT_NUMBER}`;
-}
+const eclVersion = lernaJson.version;
 
 let sri = {};
 if ('CI' in process.env && process.env.GITHUB_REF.includes('refs/tags/')) {