Merge branch 'main' into banner

Author: davepagurek

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -104,11 +104,18 @@ export const ReferenceDirectoryWithFilter = ({
       </div>
     );
 
+  const subcatShouldHaveHeading = (
+    subcat: { name: string },
+    category: { name: string },
+  ) => {
+    return !(!subcat.name || !category.name || subcat.name === "p5.sound");
+  }
+
   const getSubcatHeading = (
     subcat: { name: string },
     category: { name: string },
   ) => {
-    if (!subcat.name || !category.name || subcat.name === "p5.sound") {
+    if (!subcatShouldHaveHeading(subcat, category)) {
       return null;
     }
 
@@ -136,7 +143,14 @@ export const ReferenceDirectoryWithFilter = ({
     }
     return filteredEntries.map((category) => (
       <section key={category.name}>
-        <h2 class="mb-0" id={category.name}>
+        <h2
+          class={
+            subcatShouldHaveHeading(category.subcats[0], category)
+              ? "mb-0"
+              : "mb-[var(--gutter-md)]"
+          }
+          id={category.name}
+        >
           {category.name}
         </h2>
         {category.subcats.map((subcat) => (

src/content/homepage/en.yaml

@@ -1,14 +1,29 @@
 title: p5.js
 heroImages:
   - image: ./images/hero.webp
-    altText: Lauren Lee McCarthy reading the Processing Community Catalog
-    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
-  - image: ./images/salon-9.webp
-    altText: Image alt text here
-    caption: "New web editor features"
-  - image: ./images/2015-7.webp
-    altText: Image alt text here
-    caption: "Contributors Conference 2015"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    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
+    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."
+  - image: ./images/ccfest2018.webp
+    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
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi"
+  - image: ./images/contributor-conf-2019_10.webp
+    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
+    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.webp
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
 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,8 +3,29 @@ 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
-    altText: Lauren Lee McCarthy reading the Processing Community Catalog
-    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    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
+    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."
+  - image: ./images/ccfest2018.webp
+    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
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi"
+  - image: ./images/contributor-conf-2019_10.webp
+    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
+    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.webp
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
 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,8 +3,29 @@ heroText: >
   p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। p5.js कलाकारों, डिज़ाइनरों, नौसिखिया, शिक्षकों और किसी अन्य का भी स्वागत करता है!
 heroImages:
   - image: ./images/hero.webp
-    altText: Lauren Lee McCarthy reading the Processing Community Catalog
-    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
+    altText: Lauren Lee McCarthy reading the Processing Community Catalog.
+    caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza."
+  - image: ./images/p5for50plus.webp
+    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
+    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."
+  - image: ./images/ccfest2018.webp
+    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
+    altText: Students learning to code while checking a p5.js book.
+    caption: "p5.js workshop at Tunapanda Institute in Nairobi"
+  - image: ./images/contributor-conf-2019_10.webp
+    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
+    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.webp
+    altText: Participants sit around a table with their laptops and observe code on a screen.
+    caption: "p5.js Contributors Conference 2019."
 referenceHeaderText: Explore the p5.js library reference
 examplesHeaderText: Learn p5.js with examples
 communityHeaderText: See the p5.js community in action