Keep all landing hero images; made hero image linked

processing · Jan 15, 2025 · 8c0a058 · 8c0a058
1 parent 7c91a6d
commit 8c0a058
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 19 deletions.
diff --git a/src/components/PageHeader/HomePage.astro b/src/components/PageHeader/HomePage.astro
@@ -37,14 +37,16 @@ const { config } = Astro.props;
 
   {
     config.data.heroImages.map((im, i) => (
-        <Image
+      <a href={im.linkTarget || undefined}>
+      <Image
           containerClass={`relative hero-image-container ${i > 0 ? "hidden" : ""}`}
           class={"hero-image"}
           aspectRatio="none"
           src={im.image}
           alt={im.altText}
           loading={i > 0 ? "lazy" : "eager"}
         />
+      </a>
     ))
   }
 </div>

diff --git a/src/content/homepage/en.yaml b/src/content/homepage/en.yaml
@@ -1,9 +1,41 @@
 title: p5.js
 heroImages:
+  - image: ./images/hero.webp
+    linkTarget: "https://archive.org/details/processing-community-catalog-2021"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    linkTarget: ""
+    altText: Inhwa Yeom teaching p5.js to people aged 50+.
+    caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
+  - image: ./images/salon-2.webp
+    linkTarget: ""
+    altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
+    caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
+  - image: ./images/ccfest2018.webp
+    linkTarget: ""
+    altText: p5.js workshop participants coding while showing their projects on screen.
+    caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
+  - image: ./images/tunapanda.webp
+    linkTarget: ""
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
+  - image: ./images/contributor-conf-2019_10.webp
+    linkTarget: ""
+    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.
+    caption: "p5.js will not add any new features except those that increase access."
+  - image: ./images/contributor-conf-2015.webp
+    linkTarget: ""
+    altText: Participants jump, smile and throw their hands in the air on a green lawn.
+    caption: "p5.js Contributors Conference 2015."
+  - image: ./images/contributor-conf-2019-17.webp
+    linkTarget: ""
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
   - image: ./images/hello-p5-2024.png
     linkTarget: "https://hello.p5js.org" 
-    altText: A TODO-try the other image, wth a different ALT
-    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:"
+    altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
+    caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
 heroText: >
   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!
 referenceHeaderText: Explore the p5.js library reference

diff --git a/src/content/homepage/es.yaml b/src/content/homepage/es.yaml
@@ -2,10 +2,42 @@ title: p5.js
 heroText: >
   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!
 heroImages:
-  - image: ./images/hero-cropped.png
-    linkTarget: "http://hello.p5js.org" 
-    altText: This is a test 
-    caption: "This is a test <a href=hi>sdfasd</a> another test"
+  - image: ./images/hero.webp
+    linkTarget: "https://archive.org/details/processing-community-catalog-2021"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    linkTarget: ""
+    altText: Inhwa Yeom teaching p5.js to people aged 50+.
+    caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
+  - image: ./images/salon-2.webp
+    linkTarget: ""
+    altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
+    caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
+  - image: ./images/ccfest2018.webp
+    linkTarget: ""
+    altText: p5.js workshop participants coding while showing their projects on screen.
+    caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
+  - image: ./images/tunapanda.webp
+    linkTarget: ""
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
+  - image: ./images/contributor-conf-2019_10.webp
+    linkTarget: ""
+    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.
+    caption: "p5.js will not add any new features except those that increase access."
+  - image: ./images/contributor-conf-2015.webp
+    linkTarget: ""
+    altText: Participants jump, smile and throw their hands in the air on a green lawn.
+    caption: "p5.js Contributors Conference 2015."
+  - image: ./images/contributor-conf-2019-17.webp
+    linkTarget: ""
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
+  - image: ./images/hello-p5-2024.png
+    linkTarget: "https://hello.p5js.org" 
+    altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
+    caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
 referenceHeaderText: Explore the p5.js library reference
 examplesHeaderText: Learn p5.js with examples
 communityHeaderText: See the p5.js community in action

diff --git a/src/content/homepage/hi.yaml b/src/content/homepage/hi.yaml
@@ -2,10 +2,42 @@ title: p5.js
 heroText: >
   p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। p5.js कलाकारों, डिज़ाइनरों, नौसिखिया, शिक्षकों और किसी अन्य का भी स्वागत करता है!
 heroImages:
-  - image: ./images/hero-cropped.png
-    linkTarget: "http://hello.p5js.org" 
-    altText: This is a test 
-    caption: "This is a test <a href=hi>sdfasd</a> another test"
+  - image: ./images/hero.webp
+    linkTarget: "https://archive.org/details/processing-community-catalog-2021"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    linkTarget: ""
+    altText: Inhwa Yeom teaching p5.js to people aged 50+.
+    caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
+  - image: ./images/salon-2.webp
+    linkTarget: ""
+    altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
+    caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
+  - image: ./images/ccfest2018.webp
+    linkTarget: ""
+    altText: p5.js workshop participants coding while showing their projects on screen.
+    caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
+  - image: ./images/tunapanda.webp
+    linkTarget: ""
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
+  - image: ./images/contributor-conf-2019_10.webp
+    linkTarget: ""
+    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.
+    caption: "p5.js will not add any new features except those that increase access."
+  - image: ./images/contributor-conf-2015.webp
+    linkTarget: ""
+    altText: Participants jump, smile and throw their hands in the air on a green lawn.
+    caption: "p5.js Contributors Conference 2015."
+  - image: ./images/contributor-conf-2019-17.webp
+    linkTarget: ""
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
+  - image: ./images/hello-p5-2024.png
+    linkTarget: "https://hello.p5js.org" 
+    altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
+    caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
 referenceHeaderText: Explore the p5.js library reference
 examplesHeaderText: Learn p5.js with examples
 communityHeaderText: See the p5.js community in action

diff --git a/src/content/homepage/images/hello-p5-2024.png b/src/content/homepage/images/hello-p5-2024.png
diff --git a/src/content/homepage/ko.yaml b/src/content/homepage/ko.yaml
@@ -2,10 +2,42 @@ title: p5.js
 heroText: >
   p5.js는 코딩을 배우고 예술을 만드는 친근한 도구입니다. 이는 포용적이고 육성적인 커뮤니티에 의해 만들어진 무료 오픈소스 자바스크립트 라이브러리입니다. p5.js는 예술가, 디자이너, 초심자, 교육자 및 여러분 모두를 환영합니다!
 heroImages:
-  - image: ./images/hero-cropped.png
-    linkTarget: "http://hello.p5js.org" 
-    altText: This is a test 
-    caption: "This is a test <a href=hi>sdfasd</a> another test"
+  - image: ./images/hero.webp
+    linkTarget: "https://archive.org/details/processing-community-catalog-2021"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    linkTarget: ""
+    altText: Inhwa Yeom teaching p5.js to people aged 50+.
+    caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
+  - image: ./images/salon-2.webp
+    linkTarget: ""
+    altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
+    caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
+  - image: ./images/ccfest2018.webp
+    linkTarget: ""
+    altText: p5.js workshop participants coding while showing their projects on screen.
+    caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
+  - image: ./images/tunapanda.webp
+    linkTarget: ""
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
+  - image: ./images/contributor-conf-2019_10.webp
+    linkTarget: ""
+    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.
+    caption: "p5.js will not add any new features except those that increase access."
+  - image: ./images/contributor-conf-2015.webp
+    linkTarget: ""
+    altText: Participants jump, smile and throw their hands in the air on a green lawn.
+    caption: "p5.js Contributors Conference 2015."
+  - image: ./images/contributor-conf-2019-17.webp
+    linkTarget: ""
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
+  - image: ./images/hello-p5-2024.png
+    linkTarget: "https://hello.p5js.org" 
+    altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
+    caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
 referenceHeaderText: Explore the p5.js library reference
 examplesHeaderText: Learn p5.js with examples
 communityHeaderText: See the p5.js community in action

diff --git a/src/content/homepage/zh-Hans.yaml b/src/content/homepage/zh-Hans.yaml
@@ -2,10 +2,42 @@ title: p5.js
 heroText: >
   p5.js 是一款旨在帮助人们学习编程并进行艺术创作的友好工具。作为一个免费的开源 JavaScript 库，它由一个充满包容和关怀的社区共同打造。无论是艺术家、设计师、初学者、教育者，还是其他任何人，p5.js 都欢迎你的加入！
 heroImages:
-  - image: ./images/hero-cropped.png
-    linkTarget: "http://hello.p5js.org" 
-    altText: This is a test 
-    caption: "This is a test <a href=hi>sdfasd</a> another test"
+  - image: ./images/hero.webp
+    linkTarget: "https://archive.org/details/processing-community-catalog-2021"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    linkTarget: ""
+    altText: Inhwa Yeom teaching p5.js to people aged 50+.
+    caption: "Coding Club for people aged 50+ in Korea, led by Inhwa Yeom."
+  - image: ./images/salon-2.webp
+    linkTarget: ""
+    altText: Qianqian Ye holding a mic next to a big t.v. screen that has a grid of p5.js contributor photos on it.
+    caption: "Qianqian Ye introducing 600+ p5.js contributors at p5.js Community Salon. Photo credit: Ziyuan Lin."
+  - image: ./images/ccfest2018.webp
+    linkTarget: ""
+    altText: p5.js workshop participants coding while showing their projects on screen.
+    caption: "p5.js workshop at CC Fest NYC at ITP-NYU in November 2018."
+  - image: ./images/tunapanda.webp
+    linkTarget: ""
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi. Photo credit: Tunapanda Institute."
+  - image: ./images/contributor-conf-2019_10.webp
+    linkTarget: ""
+    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.
+    caption: "p5.js will not add any new features except those that increase access."
+  - image: ./images/contributor-conf-2015.webp
+    linkTarget: ""
+    altText: Participants jump, smile and throw their hands in the air on a green lawn.
+    caption: "p5.js Contributors Conference 2015."
+  - image: ./images/contributor-conf-2019-17.webp
+    linkTarget: ""
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
+  - image: ./images/hello-p5-2024.png
+    linkTarget: "https://hello.p5js.org" 
+    altText: Eight portrait photos of p5 contributors overlaid by the text "Hello, p5.js"
+    caption: "Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this interactive video:"
 referenceHeaderText: Explore the p5.js library reference
 examplesHeaderText: Learn p5.js with examples
 communityHeaderText: See the p5.js community in action