Merge branch 'main' into fix-broken-link

Author: ksen0

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