chore(website): Fixing getting started and typography pages - FRONT-3…

…925 (#2832)
ec-europa · Apr 18, 2023 · f4dc379 · f4dc379 · github-actions · Apr 18, 2023
1 parent 9c79829
commit f4dc379
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 129 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -69,6 +69,7 @@ jobs:
           publish-dir: 'dist/website'
           github-token: ${{ secrets.GITHUB_TOKEN }}
         env:
+          NETLIFY: true
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
   deploy-release-branch:
@@ -93,5 +94,6 @@ jobs:
           publish-dir: 'dist/website'
           github-token: ${{ secrets.GITHUB_TOKEN }}
         env:
+          NETLIFY: true
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -15,19 +15,21 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16.14.0
+      - name: Get tag
+        id: tag
+        uses: dawidd6/action-get-tag@v1
       - name: Install dependencies
         run: yarn install --frozen-lockfile
+      - name: Build presets
+        run: yarn dist:presets
+      - name: Generate sri file
+        run: node scripts/sri.js ${{ steps.tag.outputs.tag }}
       - name: Build release
         run: PUBLIC_URL=/component-library yarn dist
-      - name: Get tag
-        id: tag
-        uses: dawidd6/action-get-tag@v1
       - name: Set version
         run: echo ${{ steps.tag.outputs.tag }} > dist/website/.version
       - name: Set commit
         run: echo ${{ github.sha }} > dist/website/.commit
-      - name: Generate sri file
-        run: node scripts/sri.js ${{ steps.tag.outputs.tag }}
       - name: Deploy to cdn
         uses: keithweaver/aws-s3-github-action@v1.0.0
         with:

diff --git a/.prettierignore b/.prettierignore
@@ -21,3 +21,6 @@ src/website/src/pages/ec/components/navigation/link/docs/code.mdx
 
 # SyntaxError: Void elements do not have end tags
 src/website/src/pages/ec/components/index.mdx
+
+src/website/src/pages/ec/guidelines/typography/index.mdx
+src/website/src/pages/eu/guidelines/typography/index.mdx
diff --git a/scripts/sri.js b/scripts/sri.js
@@ -34,7 +34,7 @@ files.forEach((file) => {
 fs.writeFileSync(
   `${path.resolve(
     __dirname,
-    '../dist/packages'
+    '../scripts'
   )}/europa-component-library-${version}-sri.json`,
   prettier.format(JSON.stringify(hashes), { parser: 'json' })
 );
diff --git a/...ite/src/pages/ec/getting-started/index.md → ...te/src/pages/ec/getting-started/index.mdx b/...ite/src/pages/ec/getting-started/index.md → ...te/src/pages/ec/getting-started/index.mdx
@@ -49,7 +49,6 @@ Here is an example of default HTML file using ECL:
     />
   </head>
   <body>
-
     <!-- content of your page here -->
 
     <script
@@ -77,11 +76,17 @@ Therefore **moment.js needs to be loaded or bundled by the application or websit
 
 <details>
   <summary>SRI hashes (click to expand)</summary>
-  
+
   <ul>
-    <li>for `ecl-ec.css`: <code>{process.env.ECL_EC_CSS}</code></li>
-    <li>for `ecl-ec-print.css`: <code>{process.env.ECL_EC_PRINT_CSS}</code></li>
-    <li>for `ecl-ec.js`: <code>{process.env.ECL_EC_JS}</code></li>
+    <li>
+      for `ecl-ec.css`: <code>{process.env.ECL_EC_CSS}</code>
+    </li>
+    <li>
+      for `ecl-ec-print.css`: <code>{process.env.ECL_EC_PRINT_CSS}</code>
+    </li>
+    <li>
+      for `ecl-ec.js`: <code>{process.env.ECL_EC_JS}</code>
+    </li>
   </ul>
 </details>
 
@@ -95,17 +100,21 @@ There are several optional CSS files, located in `ec/styles/optional`, which can
 
 <details>
   <summary>SRI hashes for optional files (click to expand)</summary>
-  
+
   <ul>
-    <li>for `ecl-reset.css`: <code>{process.env.ECL_RESET_CSS}</code></li>
-    <li>for `ecl-ec-default.css`: <code>{process.env.ECL_EC_DEFAULT_CSS}</code></li>
+    <li>
+      for `ecl-reset.css`: <code>{process.env.ECL_RESET_CSS}</code>
+    </li>
+    <li>
+      for `ecl-ec-default.css`: <code>{process.env.ECL_EC_DEFAULT_CSS}</code>
+    </li>
   </ul>
 </details>
 
 ### Additional information
 
 - to integrate ECL components, copy the markup from the component you want and paste it in the `<body>`. This markup can be found on this website and on <Link to="/playground/ec/" label="the playground" />.
-TWIG templates are also [provided on npm](https://www.npmjs.com/org/ecl) for easy integration.
+  TWIG templates are also [provided on npm](https://www.npmjs.com/org/ecl) for easy integration.
 - make sure that you are correctly loading the icons and the logo by using the right paths. You will usually find these assets under the `/images` folder of the preset you're using. We advise you to host the SVG sprites on the same domain as your website in order to avoid the `Unsafe attempt to load URL` kind of errors. If you still want to use the SVG sprite from the CDN, you can use [svg4everybody](https://github.com/jonathantneal/svg4everybody) and itinitialize it with: `svg4everybody({ polyfill: true });`.
 - before going live, make sure to embed the [Cookie Consent Kit](https://webgate.ec.europa.eu/fpfis/wikis/display/webtools/Cookie%20Consent%20Kit%20-%20Technical%20details).
 - all useful information concerning releases content can be found on the [release page](https://github.com/ec-europa/europa-component-library/releases)

diff --git a/...c/pages/ec/guidelines/typography/index.md → .../pages/ec/guidelines/typography/index.mdx b/...c/pages/ec/guidelines/typography/index.md → .../pages/ec/guidelines/typography/index.mdx
@@ -2,6 +2,7 @@
 title: Typography
 order: 1
 ---
+
 import Playground from '@ecl/website-components/Playground';
 import { RemToPixels } from '@ecl/website-components';
 
@@ -43,12 +44,8 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-3xl ecl-u-type-bold">
-      The quick brown fox jumps over the lazy dog
-    </div>
-    <div className="ecl-u-type-4xl ecl-u-type-bold ecl-u-mt-m">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-3xl ecl-u-type-bold">The quick brown fox jumps over the lazy dog</div>
+    <div className="ecl-u-type-4xl ecl-u-type-bold ecl-u-mt-m">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -61,12 +58,8 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-2xl ecl-u-type-bold">
-      The quick brown fox jumps over the lazy dog
-    </div>
-    <div className="ecl-u-type-3xl ecl-u-type-bold ecl-u-mt-m">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-2xl ecl-u-type-bold">The quick brown fox jumps over the lazy dog</div>
+    <div className="ecl-u-type-3xl ecl-u-type-bold ecl-u-mt-m">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -79,12 +72,8 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-xl ecl-u-type-bold">
-      The quick brown fox jumps over the lazy dog
-    </div>
-    <div className="ecl-u-type-2xl ecl-u-type-bold ecl-u-mt-m">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-xl ecl-u-type-bold">The quick brown fox jumps over the lazy dog</div>
+    <div className="ecl-u-type-2xl ecl-u-type-bold ecl-u-mt-m">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -97,12 +86,8 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-l ecl-u-type-bold">
-      The quick brown fox jumps over the lazy dog
-    </div>
-    <div className="ecl-u-type-prolonged-xl ecl-u-type-bold ecl-u-mt-m">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-l ecl-u-type-bold">The quick brown fox jumps over the lazy dog</div>
+    <div className="ecl-u-type-prolonged-xl ecl-u-type-bold ecl-u-mt-m">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -115,9 +100,7 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-m ecl-u-type-bold">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-m ecl-u-type-bold">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -133,12 +116,8 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-l">
-      The quick brown fox jumps over the lazy dog
-    </div>
-    <div className="ecl-u-type-prolonged-xl">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-l">The quick brown fox jumps over the lazy dog</div>
+    <div className="ecl-u-type-prolonged-xl">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -151,9 +130,7 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-m">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-m">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -165,9 +142,7 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-s">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-s">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 
@@ -179,9 +154,7 @@ Line-length is the number of characters displayed in a single line. Lines that a
 
 <Playground hideCode>
   <div className="ecl-u-ph-m ecl-u-pv-xl">
-    <div className="ecl-u-type-prolonged-xs">
-      The quick brown fox jumps over the lazy dog
-    </div>
+    <div className="ecl-u-type-prolonged-xs">The quick brown fox jumps over the lazy dog</div>
   </div>
 </Playground>
 

diff --git a/...ite/src/pages/eu/getting-started/index.md → ...te/src/pages/eu/getting-started/index.mdx b/...ite/src/pages/eu/getting-started/index.md → ...te/src/pages/eu/getting-started/index.mdx
@@ -49,7 +49,6 @@ Here is an example of default HTML file using ECL:
     />
   </head>
   <body>
-
     <!-- content of your page here -->
 
     <script
@@ -63,6 +62,7 @@ Here is an example of default HTML file using ECL:
   </body>
 </html>
 ```
+
 ### moment.js
 
 As explained in a more technical language in the [datepicker api page](/eu/components/forms/datepicker/api/) ECL uses [Pikaday](https://github.com/Pikaday/Pikaday) which requires [moment.js](https://momentjs.com/) and this library is not bundled by ECL.
@@ -76,11 +76,18 @@ Therefore **moment.js needs to be loaded or bundled by the application or websit
 
 <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-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>
   </ul>
 </details>
 
@@ -94,17 +101,21 @@ There are several optional CSS files, located in `eu/styles/optional`, which can
 
 <details>
   <summary>SRI hashes for optional files (click to expand)</summary>
-  
+
   <ul>
-    <li>for `ecl-reset.css`: <code>{process.env.ECL_RESET_CSS}</code></li>
-    <li>for `ecl-eu-default.css`: <code>{process.env.ECL_EU_DEFAULT_CSS}</code></li>
+    <li>
+      for `ecl-reset.css`: <code>{process.env.ECL_RESET_CSS}</code>
+    </li>
+    <li>
+      for `ecl-eu-default.css`: <code>{process.env.ECL_EU_DEFAULT_CSS}</code>
+    </li>
   </ul>
 </details>
 
 ### Additional information
 
 - to integrate ECL components, copy the markup from the component you want and paste it in the `<body>`. This markup can be found on this website and on <Link to="/playground/eu/" label="the playground" />.
-TWIG templates are also [provided on npm](https://www.npmjs.com/org/ecl) for easy integration.
+  TWIG templates are also [provided on npm](https://www.npmjs.com/org/ecl) for easy integration.
 - make sure that you are correctly loading the icons and the logo by using the right paths. You will usually find these assets under the `/images` folder of the preset you're using. We advise you to host the SVG sprites on the same domain as your website in order to avoid the `Unsafe attempt to load URL` kind of errors. If you still want to use the SVG sprite from the CDN, you can use [svg4everybody](https://github.com/jonathantneal/svg4everybody) and itinitialize it with: `svg4everybody({ polyfill: true });`.
 - before going live, make sure to embed the [Cookie Consent Kit](https://webgate.ec.europa.eu/fpfis/wikis/display/webtools/Cookie%20Consent%20Kit%20-%20Technical%20details).
 - all useful information concerning releases content can be found on the [release page](https://github.com/ec-europa/europa-component-library/releases)