Merge pull request #678 from processing/hello-p5-link

Hello p5 link

Author: ksen0

src/components/PageHeader/HomePage.astro

@@ -7,6 +7,7 @@ interface Props {
   config: CollectionEntry<"homepage">;
 }
 const { config } = Astro.props;
+
 ---
 
 <div class="px-lg pt-5xl lg:pt-3xl pb-0 h-full">
@@ -25,22 +26,38 @@ const { config } = Astro.props;
         <p
           class={`hero-caption text-body-caption pb-sm mt-0 ${i > 0 ? "hidden" : ""}`}
         >
-          {im.caption}
+          {im.linkTarget ? (
+            <a href={im.linkTarget}>{im.caption}</a>
+          ) : (
+            im.caption
+          )}
         </p>
       ))
     }
   </div>
 
   {
     config.data.heroImages.map((im, i) => (
+      im.linkTarget ?
+      <a href={im.linkTarget }>
       <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"}
-      />
+          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>
+      :
+      <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"}
+        />
     ))
   }
 </div>

src/content/homepage/config.ts

@@ -12,6 +12,7 @@ export const homepageCollection = defineCollection({
             image: image(),
             altText: z.string(),
             caption: z.string(),
+            linkTarget: z.string(),
           }),
         )
         .nonempty(),

src/content/homepage/en.yaml

@@ -1,29 +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: 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

src/content/homepage/es.yaml

@@ -3,29 +3,41 @@ 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.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

src/content/homepage/hi.yaml

@@ -3,29 +3,41 @@ heroText: >
   p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। 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: 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

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

@@ -3,29 +3,41 @@ heroText: >
   p5.js는 코딩을 배우고 예술을 만드는 친근한 도구입니다. 이는 포용적이고 육성적인 커뮤니티에 의해 만들어진 무료 오픈소스 자바스크립트 라이브러리입니다. 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: 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

src/content/homepage/ko.yaml

@@ -3,29 +3,41 @@ heroText: >
   p5.js 是一款旨在帮助人们学习编程并进行艺术创作的友好工具。作为一个免费的开源 JavaScript 库，它由一个充满包容和关怀的社区共同打造。无论是艺术家、设计师、初学者、教育者，还是其他任何人，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: 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

src/content/homepage/zh-Hans.yaml

@@ -11,6 +11,13 @@ p5.js is a friendly tool for learning to code and make art. It is a free and ope
 p5.js prioritizes accessibility, inclusivity, community, and joy. It makes sketching with code as intuitive as sketching in a notebook. p5.js supports audio-visual, interactive, and experimental works for the web. It is accessible in many languages and has expansive documentation with visual examples. You can start coding right now in the web editor, and there are lots of tutorials to help. You can also expand p5.js with many community-created libraries. p5.js is always looking for contributors and appreciates involvement in all forms.
 
 p5.js encourages iterative coding for creative expression. We value open source and access for all. Our community provides inspiration and support to learn, create, imagine, design, share, and code freely.
+
+Find out how to get started with animation, audio, WebGL, accessibility, and contribution to p5.js in this <a href='https://hello.p5js.org/'>interactive video</a> (works best on a desktop web browser):
+
+
+<div class='mt-xl'>
+<LinkButton variant='link' url='https://hello.p5js.org/'>Hello p5.js!</LinkButton>
+</div>
 </div>
 
 <hr class='full-bleed'/>