Merge branch 'fix/alignment-bug-#660' of https://github.com/akkarn1689/p5.js-website into fix/alignment-bug-#660

Author: akkarn1689

public/reference/data.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/en.json

@@ -11,11 +11,10 @@ relatedPastEvents:
 
 import YouTubeEmbed from '../../../components/YouTubeEmbed/index.astro'
 import Logos from '../../../components/Logos/index.astro'
+import VimeoEmbed from '../../../components/VimeoEmbed/index.astro'
 
 A group of approximately 30 participants gathered spent a week at the [Frank-Ratchye STUDIO for Creative Inquiry](http://studioforcreativeinquiry.org/), advancing the code, documentation, and community outreach tools of the p5.js programming environment. Participants came from as far away as Hong Kong, Seattle, Los Angeles, Boston and New York. Most were working professionals in the fields of creative technology, interaction design, and new-media arts, but the group also included a half-dozen undergraduate and graduate students from Carnegie Mellon’s Schools of Art and Architecture.
 
-
-
 ![A group of participants smile and make a p5 sign with their hands](../images/cc2015/2015_1.jpg)
 ![Woman presenting the p5.js community statement from her laptop](../images/cc2015/2015_3.jpg)
 ![Woman expressively speaks into a microphone while two male collaborators look on](../images/cc2015/2015_4.jpg)
@@ -32,13 +31,35 @@ A group of approximately 30 participants gathered spent a week at the [Frank-Rat
 ![Man in a classroom with a microphone speaking out to a group of participants](../images/cc2015/2015_15.jpg)
 ![Participants jump, smile and throw their hands in the air on a green lawn](../images/cc2015/2015_2.jpg)
 
+Introduction
+<VimeoEmbed id="129140298" />
+Casey Reas
+<VimeoEmbed id="129151416" />
+Johanna Hedva
+<VimeoEmbed id="129151418" />
+Stephanie Pi
+<VimeoEmbed id="129160951" />
+Phoenix Perry
+<VimeoEmbed id="129163155" />
+Taeyoon Choi
+<VimeoEmbed id="129173628" />
+Sara Hendren
+<VimeoEmbed id="129177689" />
+Epic Jefferson
+<VimeoEmbed id="129183825" />
+Chandler McWilliams
+<VimeoEmbed id="129187909" />
+Q&A
+<VimeoEmbed id="129192014" />
+
 ## Participants
 
 [Jason Alderman](http://huah.net/jason/), [Sepand Ansari](http://sepans.com/), [Tega Brain](http://tegabrain.com/), [Emily Chen](https://medium.com/@emchenNYC/), [Andres Colubri](http://andrescolubri.net/), [Luca Damasco](https://twitter.com/lucapodular), [Guy de Bree](http://guydebree.com/), [Christine de Carteret](http://www.cjdecarteret.com/), [Xy Feng](http://xystudio.cc/), [Sarah Groff-Palermo](http://www.sarahgp.com/), [Chris Hallberg](http://www.crhallberg.com/), [Val Head](http://valhead.com/), [Johanna Hedva](http://johannahedva.com/), [Kate Hollenbach](http://www.katehollenbach.com/), [Jennifer Jacobs](http://web.media.mit.edu/~jacobsj/), [Epic Jefferson](http://www.epicjefferson.com/), [Michelle Partogi](http://michellepartogi.com/), [Sam Lavigne](http://lav.io/), [Golan Levin](http://flong.com/), [Cici Liu](http://www.liuchangitp.com/), [Maya Man](http://www.mayaman.cc/), [Lauren McCarthy](http://lauren-mccarthy.com/), [David Newbury](http://www.workergnome.com/), [Paolo Pedercini](http://molleindustria.org/), [Luisa Pereira](http://luisaph.com/), [Miles Peyton](http://mileshiroo.info/), [Caroline Record](http://carolinerecord.com/), [Berenger Recoules](http://b2renger.github.io/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), [Jason Sigal](http://jasonsigal.cc/), [Kevin Siwoff](http://studioindefinit.com/), [Charlotte Stiles](http://charlottestiles.com/)
 
 ## Diversity
 
 Alongside technical development, one of the main focuses of this conference was outreach, community, and diversity. The conference began with a panel—[Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and the Internet](http://studioforcreativeinquiry.org/events/diversity-seven-voices-on-race-gender-ability-class-for-floss-and-the-internet). Organized by [Johanna Hedva](http://johannahedva.com/) and [Lauren McCarthy](http://lauren-mccarthy.com/), the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie Mellon University. Speakers included [Maya Man](http://www.mayaman.cc/), [Casey Reas](http://reas.com/), [Johanna Hedva](http://johannahedva.com/), [Stephanie Pi](https://pibloginthesky.wordpress.com/), [Phoenix Perry](http://phoenixperry.com/), [Taeyoon Choi](http://taeyoonchoi.com/), [Sara Hendren](http://ablersite.org/), [Epic Jefferson](http://www.epicjefferson.com/), and [Chandler McWilliams](http://chandlermcwilliams.com/).
+
 ![A poster about diversity for FLOSS and the Internet](../images/cc2015/diversity_640.jpg)
 
 ## Support

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