Merge branch 'main' into main

Author: yetyeeter1337

public/reference/data.json

@@ -45,7 +45,7 @@ export const CodeEmbed = (props) => {
   const largeSketch = previewWidth && previewWidth > 770 - 60;
 
   // Quick hack to make room for DOM that gets added below the canvas by default
-  const domMatch = /create(Button|Select|P|Div|Input)/.exec(initialCode);
+  const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(initialCode);
   if (domMatch && previewHeight) {
     previewHeight += 100;
   }

public/search-indices/en.json

@@ -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>

public/search-indices/es.json

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

public/search-indices/hi.json

@@ -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

public/search-indices/ko.json

@@ -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

public/search-indices/zh-Hans.json

@@ -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/components/CodeEmbed/index.jsx

@@ -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/components/PageHeader/HomePage.astro

@@ -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/config.ts

@@ -1,3 +1,3 @@
-name: Beau Muylle
-url: https://github.com/beaumu
+name: beau-muylle
+url: https://github.com/beau-muylle
 category: contributor

src/content/homepage/en.yaml

@@ -4,6 +4,6 @@ category: mentor
 image: ../images/cassie-tarakajian.jpeg
 imageAlt: Headshot of Cassie Tarakajian, a light-skinned Armenian-American non-binary person with a neutral face, with a brown mullet, wearing a green shirt against a mauve background.
 role: p5.js Editor Creator, 2016-2022; p5.js Editor Mentor, 2022-present
-order: 4
+order: 5
 blurb: >
   Cassie Tarakajian (they/them) is an Armenian-American educator, technologist, and artist based in Chicago, IL. Their work centers around creating accessible and inclusive tools for making art, and interrogating the relationship between technology and pop culture. They are the creator of the p5.js Editor, an open-source in-browser code editor for creative coding in p5.js, supported by the Processing Foundation. They are also an adjunct professor at New York University's Interactive Telecommunications Program (NYU ITP), teaching creative coding, web development, and making cursed content. They are a Y8 and Y9 member of NEW INC’s Art + Code Track, and in the past have held residencies at NYU ITP, Pioneer Works, and the STUDIO for Creative Inquiry at Carnegie Mellon.

src/content/homepage/es.yaml

@@ -4,6 +4,6 @@ image: ../images/cypress-masso.png
 imageAlt: A photo of cypress. She is a light olive skinned person with medium length wavy brown hair wearing a loose white collared shirt.
 url: https://outofambit.com
 role: p5.js Co-Lead 2021-22, p5.js Mentor 2022-2023, p5.js Fellow 2019
-order: 6
+order: 7
 blurb: >
   cypress evelyn masso (she/they) is a person (all the time), a tech worker (on weekdays), and a poet (on weekends). She has been contributing to p5.js (on-and-off) since 2016, was a p5.js co-lead for 2021, and then was a mentor for 2022. Originally from Ohio, she currently lives on unceded Kizh land (near Los Angeles) with a collection of moody houseplants. She enjoys dancing, babysitting her two godsons, and hanging out by the Los Angeles River.

src/content/homepage/hi.yaml

@@ -0,0 +1,3 @@
+name: dhanush
+url: https://github.com/Dhanush111
+category: contributor

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

@@ -0,0 +1,3 @@
+name: Jordan Philyaw
+url: http://jordanphilyaw.com
+category: contributor

src/content/homepage/ko.yaml

@@ -4,7 +4,7 @@ category: mentor
 image: ../images/kenneth-lim.jpeg
 imageAlt: WRITE ALT TEXT HERE
 role: p5.js Mentor, 2023-present
-order: 3
+order: 4
 blurb: >
   Kenneth Lim (he/him) is an interaction designer and creative coder working with text and language in
   all its forms. His work and research focuses on translations, machine understanding of language,

src/content/homepage/zh-Hans.yaml

@@ -0,0 +1,9 @@
+name: Kit Kuksenok
+url: https://xnze.ro
+category: lead
+image: ../images/kit-kuksenok.jpg
+imageAlt: A photograph of a white non-binary person with short blonde hair. They stand against a background of a canal and greenery.
+role: p5.js Lead, 2024-present
+order: 1
+blurb: >
+  Kit Kuksenok (they/it) is an artist, writer, and coder. Since first learning to code in 2002, they have worked as a systems integrator, web developer, software engineer, data analyst, and lecturer in computer science. Their art/writing is informed by this proximity to technology and its variegated uses; they’ve taught numerous courses exploring the role of technology in society through algorithmic art. They hold a PhD (2016) in Computer Science and Engineering from the University of Washington (Seattle). Born in Ukraine, and having lived both in the US and in Germany, Kit speaks English, Ukrainian, Russian, and some German. Photo credit: Cora EF Hamilton.

src/content/people/en/beau-muylle.yaml

@@ -4,7 +4,7 @@ category: alumni
 image: ../images/lauren-mccarthy.jpeg
 imageAlt: A Chinese-American woman with short dark hair standing in front of device sculptures. 
 role: p5.js Creator and Lead, 2013-2020; p5.js mentor 2020-2021
-order: 5
+order: 6
 blurb: >
   Lauren Lee McCarthy (she/they) is an artist having social relationships in the midst of
   automation, surveillance, and algorithmic living. She has received grants and residencies

src/content/people/en/cassie-tarakajian.yaml

@@ -0,0 +1,3 @@
+name: ma haidong
+url: http://caad.xyz 
+category: contributor