Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(website): Fixing getting started and typography pages - FRONT-3925 #2832

Merged
merged 17 commits into from
Apr 18, 2023
Merged

chore(website): Fixing getting started and typography pages - FRONT-3925 #2832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8d6fe21
chore(website): Fixing getting started and typography pages
planctus Apr 13, 2023
ba5b634
chore(website): Fixing typography guidelines, adding to ignore for pr…
planctus Apr 14, 2023
2ac16e7
chore(website): Trying to fix eclVersion
planctus Apr 14, 2023
2150332
chore(website): Trying to fix eclVersion
planctus Apr 14, 2023
6eaac88
chore(website): Trying to fix eclVersion
planctus Apr 14, 2023
89251dc
chore(website): Trying to fix eclVersion
planctus Apr 14, 2023
0eb10e0
chore(website): Trying to fix eclVersion
planctus Apr 14, 2023
e6ebb3b
chore(website): Fixing config file
planctus Apr 14, 2023
5ccbc79
chore(website): Changing order of tasks in production workflow
planctus Apr 14, 2023
cdaa1d1
chore(website): Adding dist:presets to the production workflow
planctus Apr 14, 2023
b2ebd86
chore(website): Moving sri to dist
planctus Apr 16, 2023
bc41a47
Merge branch 'v3-dev' into chore-fixing-website-pages
planctus Apr 17, 2023
bd27771
chore(website): Different approach
planctus Apr 17, 2023
437f3e2
Merge branch 'chore-fixing-website-pages' of github.com:ec-europa/eur…
planctus Apr 17, 2023
62dd8fc
chore(website): fixing workflow file
planctus Apr 17, 2023
0bacda9
chore(website): fixing path to sri file
planctus Apr 17, 2023
d63669b
Merge branch 'v3-dev' into chore-fixing-website-pages
planctus Apr 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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 }}
12 changes: 7 additions & 5 deletions .github/workflows/production.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 3 additions & 0 deletions .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion scripts/sri.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' })
);
27 changes: 18 additions & 9 deletions ...ite/src/pages/ec/getting-started/index.md → ...te/src/pages/ec/getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ Here is an example of default HTML file using ECL:
/>
</head>
<body>

<!-- content of your page here -->

<script
Expand Down Expand Up @@ -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>

Expand All @@ -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)
Expand Down
57 changes: 15 additions & 42 deletions ...c/pages/ec/guidelines/typography/index.md → .../pages/ec/guidelines/typography/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: Typography
order: 1
---

import Playground from '@ecl/website-components/Playground';
import { RemToPixels } from '@ecl/website-components';

Expand Down Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down
29 changes: 20 additions & 9 deletions ...ite/src/pages/eu/getting-started/index.md → ...te/src/pages/eu/getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ Here is an example of default HTML file using ECL:
/>
</head>
<body>

<!-- content of your page here -->

<script
Expand All @@ -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.
Expand All @@ -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>

Expand All @@ -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)
Expand Down
Loading