Skip to content

Commit 1b9995e

Browse files
johnrich85matthiasrohmer
johnrich85
and
matthiasrohmer
authored
Percy revamp. (GoogleChrome#9383)
* Prevents percy from being triggered unnecessarily. * First pass at adding a sample landing page * Adds social links to the sample landing page * Replaces the old percy targets with what currently exists from the new set * Adds the collection page to the pagesToTest list. * Fixes lint issue * Moves the test-post to the handbook and adds as a percy target * Fixes html * Adds no index to content-types * Excludes items with noindex from author pages * Adds the new content types to the index page * Orders the content-types page * Fixes spacing * Update src/site/_collections/hooks/utils.js Co-authored-by: Matthias Rohmer <[email protected]> * Use anchors/alias rather than duplicating paths * Revert "Use anchors/alias rather than duplicating paths" This reverts commit f773a5f. * Adds excludeFromTags to example post * Removes unnecessary redirect Co-authored-by: Matthias Rohmer <[email protected]>
1 parent cf8c405 commit 1b9995e

File tree

10 files changed

+218
-90
lines changed

10 files changed

+218
-90
lines changed

‎.github/workflows/percy-workflow.yml

+19-8
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,32 @@ on:
77
branches:
88
- main
99
paths:
10+
- '**.scss'
11+
- 'package.json'
12+
- 'src/component-library/**'
13+
- 'src/fonts/**'
14+
- 'src/build/**.js'
1015
- 'src/**.js'
16+
- '!src/site/_collections/**.js'
17+
- '!src/site/_data/**.js'
18+
- '!src/site/content/**.js'
1119
- 'shared/**.js'
12-
- '!src/site/_data/countries.js'
13-
- 'package.json'
14-
- '**.njk'
15-
- '**.scss'
20+
- 'src/site/content/en/handbook/content-types/**'
21+
1622
pull_request:
1723
paths:
1824
- '.github/workflows/percy-workflow.yml'
25+
- '**.scss'
26+
- 'package.json'
27+
- 'src/component-library/**'
28+
- 'src/fonts/**'
29+
- 'src/build/**.js'
1930
- 'src/**.js'
31+
- '!src/site/_collections/**.js'
32+
- '!src/site/_data/**.js'
33+
- '!src/site/content/**.js'
2034
- 'shared/**.js'
21-
- '!src/site/_data/countries.js'
22-
- 'package.json'
23-
- '**.njk'
24-
- '**.scss'
35+
- 'src/site/content/en/handbook/content-types/**'
2536

2637
jobs:
2738
percy:

‎redirects.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -666,7 +666,7 @@ redirects:
666666
destination: https://developer.chrome.com/docs/lighthouse/accessibility/offscreen-content-hidden/
667667
- source: /use-landmarks
668668
destination: https://developer.chrome.com/docs/lighthouse/accessibility/use-landmarks/
669-
669+
670670
# Redirects for Lighthouse best practices content.
671671
- source: /lighthouse-best-practices
672672
destination: https://developer.chrome.com/docs/lighthouse/best-practices/

‎src/site/_collections/blog-posts-descending.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,5 @@ const {isLive} = require('../_filters/is-live');
2121
* @returns {EleventyCollectionItem[]}
2222
*/
2323
module.exports = (collection) => {
24-
const tag = process.env.PERCY ? 'test-post' : 'blog';
25-
return collection.getFilteredByTag(tag).filter(isLive).reverse();
24+
return collection.getFilteredByTag('blog').filter(isLive).reverse();
2625
};

‎src/site/_collections/hooks/authors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const authorsIndex = (authors) => {
4545
* @param {string} lang
4646
* @return {Paginated[]}
4747
*/
48-
const authorsIndividual = (authors, lang) => individual(authors, lang);
48+
const authorsIndividual = (authors, lang) => individual(authors, lang, true);
4949

5050
module.exports = {
5151
feed: authorsFeed,

‎src/site/_collections/hooks/utils.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,21 @@ const index = (items, href, testItems) => {
6868
/**
6969
* @param {VirtualCollectionItem[]} items
7070
* @param {string} lang
71+
* @param {boolean} indexedOnly
7172
* @return {Paginated[]}
7273
*/
73-
const individual = (items, lang) => {
74+
const individual = (items, lang, indexedOnly = false) => {
7475
let paginated = [];
7576

7677
for (const item of items) {
77-
if (item.elements.length > 0) {
78+
let elements = item.elements;
79+
if (indexedOnly) {
80+
elements = elements.filter((element) => element.data.noindex !== true);
81+
}
82+
83+
if (elements.length > 0) {
7884
paginated = paginated.concat(
79-
addPagination(filterByLang(item.elements, lang), item),
85+
addPagination(filterByLang(elements, lang), item),
8086
);
8187
}
8288
}

‎src/site/content/en/handbook/content-types/content-types.11tydata.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
noindex: true,
3+
};

‎src/site/content/en/handbook/content-types/example-landing-page/index.njk

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
layout: landing-page
3+
title: A sample landing page
4+
description: This page is used for visual testing of the landing-page layout and also showcases it's capabilities
5+
headlineAction:
6+
url: /handbook/content-types/example-landing-page/
7+
text: Test
8+
paged:
9+
elements:
10+
- data:
11+
title: >-
12+
A post without a thumbnail
13+
subhead: >-
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
15+
In et eros volutpat, commodo neque quis, egestas tortor
16+
url: /handbook/content-types/example-landing-page/
17+
thumbnail:
18+
alt: Lorem Ipsum
19+
authors:
20+
- razvancaliman
21+
tags:
22+
date: 2022-11-10
23+
updated: 2022-11-12
24+
draft: false
25+
- data:
26+
title: >-
27+
If a post has a thumbnail then it will use this layout
28+
subhead: >-
29+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30+
In et eros volutpat, commodo neque quis, egestas tortor
31+
url: /handbook/content-types/example-landing-page/
32+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
33+
alt: Lorem Ipsum
34+
authors:
35+
- razvancaliman
36+
tags:
37+
date: 2022-11-10
38+
updated: 2022-11-12
39+
draft: false
40+
- data:
41+
title: >-
42+
This is what a post looks like with two authors
43+
subhead: >-
44+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
45+
In et eros volutpat, commodo neque quis, egestas tortor
46+
url: /handbook/content-types/example-landing-page/
47+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
48+
alt: Lorem Ipsum
49+
authors:
50+
- razvancaliman
51+
- christiancantrell
52+
tags:
53+
date: 2022-11-10
54+
updated: 2022-11-12
55+
draft: false
56+
- data:
57+
title: >-
58+
This is what a post looks like with multiple authors
59+
subhead: >-
60+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
61+
In et eros volutpat, commodo neque quis, egestas tortor
62+
url: /handbook/content-types/example-landing-page/
63+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
64+
alt: Lorem Ipsum
65+
authors:
66+
- razvancaliman
67+
- christiancantrell
68+
- malteubl
69+
tags:
70+
date: 2022-11-10
71+
updated: 2022-11-12
72+
draft: false
73+
- data:
74+
title: >-
75+
This is what a post looks like with a single tag
76+
subhead: >-
77+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
78+
In et eros volutpat, commodo neque quis, egestas tortor
79+
url: /handbook/content-types/example-landing-page/
80+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
81+
alt: Lorem Ipsum
82+
authors:
83+
- razvancaliman
84+
tags:
85+
- progressive-web-apps
86+
date: 2022-11-10
87+
updated: 2022-11-12
88+
draft: false
89+
- data:
90+
title: >-
91+
This is what a post looks like with multiple tags
92+
subhead: >-
93+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
94+
In et eros volutpat, commodo neque quis, egestas tortor
95+
url: /handbook/content-types/example-landing-page/
96+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
97+
alt: Lorem Ipsum
98+
authors:
99+
- razvancaliman
100+
tags:
101+
- progressive-web-apps
102+
- performance
103+
date: 2022-11-10
104+
updated: 2022-11-12
105+
draft: false
106+
- data:
107+
title: >-
108+
This is what a post looks like without a subhead
109+
subhead:
110+
url: /handbook/content-types/example-landing-page/
111+
thumbnail: image/vgdbNJBYHma2o62ZqYmcnkq3j0o1/yG6HcKRIK416ewhINL0T.jpg
112+
alt: Lorem Ipsum
113+
authors:
114+
- razvancaliman
115+
tags:
116+
date: 2022-11-10
117+
updated: 2022-11-12
118+
draft: false
119+
pages: 1
120+
---
121+
122+
<div class="gap-top-size-3">
123+
<div class="cluster flex-justify-center">
124+
<a href="/handbook/content-types/example-landing-page/" target="_blank">
125+
<img src="/images/icons/language.svg" alt="Homepage" width="32" height="32">
126+
</a>
127+
128+
<a href="/handbook/content-types/example-landing-page/" target="_blank">
129+
<img src="/images/icons/twitter.svg" alt="Twitter" width="32" height="32">
130+
</a>
131+
132+
<a href="/handbook/content-types/example-landing-page/" target="_blank">
133+
<img src="/images/icons/github.svg" alt="GitHub" width="32" height="32">
134+
</a>
135+
136+
<a href="/handbook/content-types/example-landing-page/" target="_blank">
137+
<img src="/images/icons/glitch.svg" alt="Glitch" width="32" height="32">
138+
</a>
139+
140+
<a href="/handbook/content-types/example-landing-page/" target="_blank">
141+
<img src="/images/icons/rss.svg" alt="RSS Feed" width="32" height="32">
142+
</a>
143+
</div>
144+
</div>
145+
146+
{% include 'partials/paged-next.njk' %}
147+

‎src/site/content/en/blog/test-post/index.md renamed to ‎src/site/content/en/handbook/content-types/example-post/index.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
layout: post
3+
permalink: /handbook/content-types/example-post
34
title: An example blog post used for screenshot testing.
45
subhead: |
56
A catchy subhead that previews the content and is a bit wordy to test what
@@ -56,9 +57,10 @@ alt: A description of the hero image for screen reader users.
5657
# alt: Provide an alt for your thumbnail.
5758

5859
tags:
59-
- blog # blog is a required tag for the article to show up in the blog.
6060
- accessibility
6161
- ux
62+
63+
excludeFromTags: true
6264
---
6365

6466
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa
@@ -457,6 +459,8 @@ quam sem.
457459
a massa sit amet ullamcorper.
458460
</p>
459461
<cite>
462+
by Jon Doe
463+
</cite>
460464
</pullquote>
461465

462466
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum a massa

‎src/site/content/en/handbook/content-types/index.md

+26-15
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,31 @@ description: |
66
The content types available to use on web.dev.
77
---
88

9+
## Codelabs
10+
**Format:** Multi-step instructions paired with an embedded [sample app](/handbook/markup-sample-app)
11+
12+
**Typical use case:** Showing how to do small, fairly distinct development tasks
13+
14+
**Placement on the site:** Always associated with a post, which serves as the landing page for the codelab
15+
16+
**Length:** Typically less than 1,000–1,500 words
17+
18+
**[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-codelab)**
19+
20+
**Examples:**
21+
* [Creating WebP images with the command line](/codelab-serve-images-webp)
22+
* [Minify and compress network payloads with gzip](/reduce-network-payloads-using-text-compression)
23+
24+
## Collection
25+
26+
**Examples:**
27+
* [Example collection](/handbook/content-types/example-collection)
28+
29+
## Landing page
30+
31+
**Examples:**
32+
* [Example landing page](/handbook/content-types/example-landing-page)
33+
934
## Posts
1035
**Format:** Primarily informational with instructions included as appropriate
1136

@@ -25,20 +50,6 @@ description: |
2550
**[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-post)**
2651

2752
**Examples:**
53+
* [Example post](/handbook/content-types/example-post)
2854
* [Are long JavaScript tasks delaying your Time to Interactive?](/long-tasks-devtools)
2955
* [Code splitting with React.lazy and Suspense](/code-splitting-suspense)
30-
31-
## Codelabs
32-
**Format:** Multi-step instructions paired with an embedded [sample app](/handbook/markup-sample-app)
33-
34-
**Typical use case:** Showing how to do small, fairly distinct development tasks
35-
36-
**Placement on the site:** Always associated with a post, which serves as the landing page for the codelab
37-
38-
**Length:** Typically less than 1,000–1,500 words
39-
40-
**[Template](https://github.com/GoogleChrome/web.dev/tree/master/src/site/_drafts/_template-codelab)**
41-
42-
**Examples:**
43-
* [Creating WebP images with the command line](/codelab-serve-images-webp)
44-
* [Minify and compress network payloads with gzip](/reduce-network-payloads-using-text-compression)

0 commit comments

Comments
 (0)