Skip to content

Commit 8c0a058

Browse files
ksen0ksen0
committed
Keep all landing hero images; made hero image linked
1 parent 7c91a6d commit 8c0a058

File tree

7 files changed

+181
-19
lines changed

7 files changed

+181
-19
lines changed

‎src/components/PageHeader/HomePage.astro

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,16 @@ const { config } = Astro.props;
3737

3838
{
3939
config.data.heroImages.map((im, i) => (
40-
<Image
40+
<a href={im.linkTarget || undefined}>
41+
<Image
4142
containerClass={`relative hero-image-container ${i > 0 ? "hidden" : ""}`}
4243
class={"hero-image"}
4344
aspectRatio="none"
4445
src={im.image}
4546
alt={im.altText}
4647
loading={i > 0 ? "lazy" : "eager"}
4748
/>
49+
</a>
4850
))
4951
}
5052
</div>

‎src/content/homepage/en.yaml

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,41 @@
11
title: p5.js
22
heroImages:
3+
- image: ./images/hero.webp
4+
linkTarget: "https://archive.org/details/processing-community-catalog-2021"
5+
altText: Lauren Lee McCarthy reading the Processing Community Catalog.
6+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
7+
- image: ./images/p5for50plus.webp
8+
linkTarget: ""
9+
altText: Inhwa Yeom teaching p5.js to people aged 50+.
10+
caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
11+
- image: ./images/salon-2.webp
12+
linkTarget: ""
13+
altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
14+
caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
15+
- image: ./images/ccfest2018.webp
16+
linkTarget: ""
17+
altText: p5.js workshop participants coding while showing their projects on screen.
18+
caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
19+
- image: ./images/tunapanda.webp
20+
linkTarget: ""
21+
altText: Students learning to code while checking a p5.js book.
22+
caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
23+
- image: ./images/contributor-conf-2019_10.webp
24+
linkTarget: ""
25+
altText: Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access.
26+
caption: "p5.js will not add any new features except those that increase access."
27+
- image: ./images/contributor-conf-2015.webp
28+
linkTarget: ""
29+
altText: Participants jump, smile and throw their hands in the air on a green lawn.
30+
caption: "p5.js Contributors Conference 2015."
31+
- image: ./images/contributor-conf-2019-17.webp
32+
linkTarget: ""
33+
altText: Participants sit around a table with their laptops and observe code on a screen.
34+
caption: "p5.js Contributors Conference 2019."
335
- image: ./images/hello-p5-2024.png
436
linkTarget: "https://hello.p5js.org"
5-
altText: A TODO-try the other image, wth a different ALT
6-
caption: "Hello, p5.js! Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js. This interactive video works best on a desktop browser:"
37+
altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
38+
caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
739
heroText: >
840
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else!
941
referenceHeaderText: Explore the p5.js library reference

‎src/content/homepage/es.yaml

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,42 @@ title: p5.js
22
heroText: >
33
p5.js es una herramienta amigable para aprender a programar y hacer arte. Es una biblioteca de JavaScript libre y de código abierto construida por una comunidad inclusiva y solidaria. ¡p5.js da la bienvenida a artistas, diseñadores, principiantes, educadores y cualquier otra persona!
44
heroImages:
5-
- image: ./images/hero-cropped.png
6-
linkTarget: "http://hello.p5js.org"
7-
altText: This is a test
8-
caption: "This is a test <a href=hi>sdfasd</a> another test"
5+
- image: ./images/hero.webp
6+
linkTarget: "https://archive.org/details/processing-community-catalog-2021"
7+
altText: Lauren Lee McCarthy reading the Processing Community Catalog.
8+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
9+
- image: ./images/p5for50plus.webp
10+
linkTarget: ""
11+
altText: Inhwa Yeom teaching p5.js to people aged 50+.
12+
caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
13+
- image: ./images/salon-2.webp
14+
linkTarget: ""
15+
altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
16+
caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
17+
- image: ./images/ccfest2018.webp
18+
linkTarget: ""
19+
altText: p5.js workshop participants coding while showing their projects on screen.
20+
caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
21+
- image: ./images/tunapanda.webp
22+
linkTarget: ""
23+
altText: Students learning to code while checking a p5.js book.
24+
caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
25+
- image: ./images/contributor-conf-2019_10.webp
26+
linkTarget: ""
27+
altText: Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access.
28+
caption: "p5.js will not add any new features except those that increase access."
29+
- image: ./images/contributor-conf-2015.webp
30+
linkTarget: ""
31+
altText: Participants jump, smile and throw their hands in the air on a green lawn.
32+
caption: "p5.js Contributors Conference 2015."
33+
- image: ./images/contributor-conf-2019-17.webp
34+
linkTarget: ""
35+
altText: Participants sit around a table with their laptops and observe code on a screen.
36+
caption: "p5.js Contributors Conference 2019."
37+
- image: ./images/hello-p5-2024.png
38+
linkTarget: "https://hello.p5js.org"
39+
altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
40+
caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
941
referenceHeaderText: Explore the p5.js library reference
1042
examplesHeaderText: Learn p5.js with examples
1143
communityHeaderText: See the p5.js community in action

‎src/content/homepage/hi.yaml

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,42 @@ title: p5.js
22
heroText: >
33
p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। p5.js कलाकारों, डिज़ाइनरों, नौसिखिया, शिक्षकों और किसी अन्य का भी स्वागत करता है!
44
heroImages:
5-
- image: ./images/hero-cropped.png
6-
linkTarget: "http://hello.p5js.org"
7-
altText: This is a test
8-
caption: "This is a test <a href=hi>sdfasd</a> another test"
5+
- image: ./images/hero.webp
6+
linkTarget: "https://archive.org/details/processing-community-catalog-2021"
7+
altText: Lauren Lee McCarthy reading the Processing Community Catalog.
8+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
9+
- image: ./images/p5for50plus.webp
10+
linkTarget: ""
11+
altText: Inhwa Yeom teaching p5.js to people aged 50+.
12+
caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
13+
- image: ./images/salon-2.webp
14+
linkTarget: ""
15+
altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
16+
caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
17+
- image: ./images/ccfest2018.webp
18+
linkTarget: ""
19+
altText: p5.js workshop participants coding while showing their projects on screen.
20+
caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
21+
- image: ./images/tunapanda.webp
22+
linkTarget: ""
23+
altText: Students learning to code while checking a p5.js book.
24+
caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
25+
- image: ./images/contributor-conf-2019_10.webp
26+
linkTarget: ""
27+
altText: Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access.
28+
caption: "p5.js will not add any new features except those that increase access."
29+
- image: ./images/contributor-conf-2015.webp
30+
linkTarget: ""
31+
altText: Participants jump, smile and throw their hands in the air on a green lawn.
32+
caption: "p5.js Contributors Conference 2015."
33+
- image: ./images/contributor-conf-2019-17.webp
34+
linkTarget: ""
35+
altText: Participants sit around a table with their laptops and observe code on a screen.
36+
caption: "p5.js Contributors Conference 2019."
37+
- image: ./images/hello-p5-2024.png
38+
linkTarget: "https://hello.p5js.org"
39+
altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
40+
caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
941
referenceHeaderText: Explore the p5.js library reference
1042
examplesHeaderText: Learn p5.js with examples
1143
communityHeaderText: See the p5.js community in action

‎src/content/homepage/images/hello-p5-2024.png

-357 KB
Loading

‎src/content/homepage/ko.yaml

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,42 @@ title: p5.js
22
heroText: >
33
p5.js는 코딩을 배우고 예술을 만드는 친근한 도구입니다. 이는 포용적이고 육성적인 커뮤니티에 의해 만들어진 무료 오픈소스 자바스크립트 라이브러리입니다. p5.js는 예술가, 디자이너, 초심자, 교육자 및 여러분 모두를 환영합니다!
44
heroImages:
5-
- image: ./images/hero-cropped.png
6-
linkTarget: "http://hello.p5js.org"
7-
altText: This is a test
8-
caption: "This is a test <a href=hi>sdfasd</a> another test"
5+
- image: ./images/hero.webp
6+
linkTarget: "https://archive.org/details/processing-community-catalog-2021"
7+
altText: Lauren Lee McCarthy reading the Processing Community Catalog.
8+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
9+
- image: ./images/p5for50plus.webp
10+
linkTarget: ""
11+
altText: Inhwa Yeom teaching p5.js to people aged 50+.
12+
caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
13+
- image: ./images/salon-2.webp
14+
linkTarget: ""
15+
altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
16+
caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
17+
- image: ./images/ccfest2018.webp
18+
linkTarget: ""
19+
altText: p5.js workshop participants coding while showing their projects on screen.
20+
caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
21+
- image: ./images/tunapanda.webp
22+
linkTarget: ""
23+
altText: Students learning to code while checking a p5.js book.
24+
caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
25+
- image: ./images/contributor-conf-2019_10.webp
26+
linkTarget: ""
27+
altText: Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access.
28+
caption: "p5.js will not add any new features except those that increase access."
29+
- image: ./images/contributor-conf-2015.webp
30+
linkTarget: ""
31+
altText: Participants jump, smile and throw their hands in the air on a green lawn.
32+
caption: "p5.js Contributors Conference 2015."
33+
- image: ./images/contributor-conf-2019-17.webp
34+
linkTarget: ""
35+
altText: Participants sit around a table with their laptops and observe code on a screen.
36+
caption: "p5.js Contributors Conference 2019."
37+
- image: ./images/hello-p5-2024.png
38+
linkTarget: "https://hello.p5js.org"
39+
altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
40+
caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
941
referenceHeaderText: Explore the p5.js library reference
1042
examplesHeaderText: Learn p5.js with examples
1143
communityHeaderText: See the p5.js community in action

‎src/content/homepage/zh-Hans.yaml

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,42 @@ title: p5.js
22
heroText: >
33
p5.js 是一款旨在帮助人们学习编程并进行艺术创作的友好工具。作为一个免费的开源 JavaScript 库，它由一个充满包容和关怀的社区共同打造。无论是艺术家、设计师、初学者、教育者，还是其他任何人，p5.js 都欢迎你的加入！
44
heroImages:
5-
- image: ./images/hero-cropped.png
6-
linkTarget: "http://hello.p5js.org"
7-
altText: This is a test
8-
caption: "This is a test <a href=hi>sdfasd</a> another test"
5+
- image: ./images/hero.webp
6+
linkTarget: "https://archive.org/details/processing-community-catalog-2021"
7+
altText: Lauren Lee McCarthy reading the Processing Community Catalog.
8+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
9+
- image: ./images/p5for50plus.webp
10+
linkTarget: ""
11+
altText: Inhwa Yeom teaching p5.js to people aged 50+.
12+
caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
13+
- image: ./images/salon-2.webp
14+
linkTarget: ""
15+
altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
16+
caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
17+
- image: ./images/ccfest2018.webp
18+
linkTarget: ""
19+
altText: p5.js workshop participants coding while showing their projects on screen.
20+
caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
21+
- image: ./images/tunapanda.webp
22+
linkTarget: ""
23+
altText: Students learning to code while checking a p5.js book.
24+
caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
25+
- image: ./images/contributor-conf-2019_10.webp
26+
linkTarget: ""
27+
altText: Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access.
28+
caption: "p5.js will not add any new features except those that increase access."
29+
- image: ./images/contributor-conf-2015.webp
30+
linkTarget: ""
31+
altText: Participants jump, smile and throw their hands in the air on a green lawn.
32+
caption: "p5.js Contributors Conference 2015."
33+
- image: ./images/contributor-conf-2019-17.webp
34+
linkTarget: ""
35+
altText: Participants sit around a table with their laptops and observe code on a screen.
36+
caption: "p5.js Contributors Conference 2019."
37+
- image: ./images/hello-p5-2024.png
38+
linkTarget: "https://hello.p5js.org"
39+
altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
40+
caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
941
referenceHeaderText: Explore the p5.js library reference
1042
examplesHeaderText: Learn p5.js with examples
1143
communityHeaderText: See the p5.js community in action

0 commit comments

Comments
 (0)