diff --git a/common-theme/assets/styles/04-components/page-footer.scss b/common-theme/assets/styles/04-components/page-footer.scss index 69c63e144..5b7f976cb 100644 --- a/common-theme/assets/styles/04-components/page-footer.scss +++ b/common-theme/assets/styles/04-components/page-footer.scss @@ -6,9 +6,6 @@ justify-content: center; align-items: center; text-transform: lowercase; - } - - &__this { - color: var(--theme-color--accent-shade); + font: var(--theme-font--system); } } diff --git a/common-theme/layouts/partials/block/link.html b/common-theme/layouts/partials/block/link.html index 0986280a2..d4b5f5bef 100644 --- a/common-theme/layouts/partials/block/link.html +++ b/common-theme/layouts/partials/block/link.html @@ -12,7 +12,8 @@ {{ with $chip }} {{ $blockData.name }} {{ end }}

{{ $blockData.name }}

diff --git a/org-cyf-guides/content/testing/lighthouse/index.md b/org-cyf-guides/content/testing/lighthouse/index.md new file mode 100644 index 000000000..85760509f --- /dev/null +++ b/org-cyf-guides/content/testing/lighthouse/index.md @@ -0,0 +1,50 @@ ++++ +title="Lighthouse Audits" +description="Learn how to audit your webpage" +emoji="🔦" +[[blocks]] +name="Lighthouse Guide" +src="https://developer.chrome.com/docs/lighthouse/overview#devtools" +caption="Lighthouse Documentation in Chrome DevTools" ++++ + +[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more. At {{}}, we require all web pages you write to score 100 for Accessibility as a minimum standard. + +## How to run an audit + +1. Open a webpage in Chrome. +2. Right-click on the page and select [`Inspect`](https://developer.chrome.com/docs/devtools/open). +3. Click on the [`Lighthouse`](https://developer.chrome.com/docs/lighthouse/overview#devtools) tab. +4. Under `Categories`, check `Accessibility`. (Uncheck the other categories for now to make your report simpler.) +5. Click the `Analyze page load` button. + +## How to read and use the report + +Lighthouse is your friend! Lighthouse will go through your code and show you how to fix everything. Under the top score, you will see a list of items that need fixing. You must click on the triangle to see the details. + +
+ + +#### Click on the disclosure triangle to open the details + + + +Each item will have a description of the problem and why it matters for users. It will identify the exact location of the problem in your code and link you to [a detailed explanation of how to fix it](https://dequeuniversity.com/rules/axe/4.10/color-contrast). + +![Lighthouse report](lighthouse-anatomy.png) + +
+ +### Fix the issues one by one + +Work through the list of issues one by one. Fix **one error** and re-run the audit to check your progress. + +> [!TIP] +> If you can't fix an issue, open a draft PR and ask for help. We are here to help each other! + +## Try it out + +1. Open any HTML project in [VS Code](https://code.visualstudio.com/). +1. Launch the index with [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). +1. Inspect the page and run a Lighthouse audit. +1. Revise your code to solve the problem and improve the score. diff --git a/org-cyf-guides/content/testing/lighthouse/lighthouse-anatomy.png b/org-cyf-guides/content/testing/lighthouse/lighthouse-anatomy.png new file mode 100644 index 000000000..e6b046c34 Binary files /dev/null and b/org-cyf-guides/content/testing/lighthouse/lighthouse-anatomy.png differ diff --git a/org-cyf-guides/content/testing/intro/index.md b/org-cyf-guides/content/testing/unit-testing/index.md similarity index 98% rename from org-cyf-guides/content/testing/intro/index.md rename to org-cyf-guides/content/testing/unit-testing/index.md index 64a2b6dbf..321b0b148 100644 --- a/org-cyf-guides/content/testing/intro/index.md +++ b/org-cyf-guides/content/testing/unit-testing/index.md @@ -1,5 +1,5 @@ +++ -title="Testing" +title="Unit Testing with Jest" description="Learn how to test your code" emoji="🧪" +++ @@ -233,16 +233,16 @@ This should run our tests and then provide us with feedback about how our code i Consider an extract from the test file `countWords.test.js` -![Test case for countWords](./test-case.png) +![Test case for countWords](test-case.png) After the test has run, we will get some feedback from Jest depending on whether the test passed or failed. If the test fails then we should expect to see something like this: -![Failing test case for countWords](./test-fail-case.png) +![Failing test case for countWords](test-fail-case.png) If the test passes, then we should get some feedback that looks like this: -![Passing test case for countWords](./test-pass-case.png) +![Passing test case for countWords](test-pass-case.png) Jest aims to give feedback that makes it simple to see why test has failed. It shows us several things: diff --git a/org-cyf-guides/content/testing/intro/test-case.png b/org-cyf-guides/content/testing/unit-testing/test-case.png similarity index 100% rename from org-cyf-guides/content/testing/intro/test-case.png rename to org-cyf-guides/content/testing/unit-testing/test-case.png diff --git a/org-cyf-guides/content/testing/intro/test-fail-case.png b/org-cyf-guides/content/testing/unit-testing/test-fail-case.png similarity index 100% rename from org-cyf-guides/content/testing/intro/test-fail-case.png rename to org-cyf-guides/content/testing/unit-testing/test-fail-case.png diff --git a/org-cyf-guides/content/testing/intro/test-pass-case.png b/org-cyf-guides/content/testing/unit-testing/test-pass-case.png similarity index 100% rename from org-cyf-guides/content/testing/intro/test-pass-case.png rename to org-cyf-guides/content/testing/unit-testing/test-pass-case.png