Skip to content

Commit d58dea8

Browse files
outofambitoutofambit
authored
Support for random homepage hero image (#350)
* cleanup * proof of concept * implement random homepage images
1 parent 3fbb30f commit d58dea8

8 files changed

Lines changed: 70 additions & 45 deletions

File tree

‎src/components/PageHeader/HomePage.astro‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,45 @@ const { config } = Astro.props;
1919
className="col-span-1 motion-safe:animate-spin-slow text-logo-color h-full max-w-full"
2020
/>
2121
</div>
22-
<p class="text-body-caption pb-sm mt-0">{config.data.heroImageCaption}</p>
22+
{
23+
config.data.heroImages.map((im, i) => (
24+
<p
25+
class={`hero-caption text-body-caption pb-sm mt-0 ${i > 0 ? "hidden" : ""}`}
26+
>
27+
{im.caption}
28+
</p>
29+
))
30+
}
2331
</div>
24-
<!-- This lets us swap image url based on screen size -->
25-
<picture>
26-
<!-- have to hard code these because css, see variables.scss for source of truth -->
27-
<source
28-
media="(max-width: 767px)"
29-
srcset={config.data.heroImageMobile.src}
30-
/>
31-
<source
32-
media="(min-width: 768px)"
33-
srcset={config.data.heroImageDesktop.src}
34-
/>
35-
<img
36-
class="full-bleed-image"
37-
src={config.data.heroImageMobile.src}
38-
alt={config.data.heroImageAltText}
39-
/>
40-
</picture>
32+
33+
{
34+
config.data.heroImages.map((im, i) => (
35+
<img
36+
class={`hero-image full-bleed-image ${i > 0 ? "hidden" : ""}`}
37+
src={im.image.src}
38+
alt={im.altText}
39+
loading={i > 0 ? "lazy" : "eager"}
40+
/>
41+
))
42+
}
4143
</div>
44+
45+
<script>
46+
document.addEventListener("DOMContentLoaded", (event) => {
47+
// find all hero image elements
48+
const images = document.querySelectorAll("img.hero-image");
49+
if (images.length > 1) {
50+
const shownImageInd = Math.round(Math.random() * images.length);
51+
// hide the default one
52+
images[0].classList.add("hidden");
53+
// show a random one
54+
images[shownImageInd].classList.remove("hidden");
55+
// do the same for captions
56+
const captions = document.querySelectorAll("p.hero-caption");
57+
if (captions.length > 1) {
58+
captions[0].classList.add("hidden");
59+
captions[shownImageInd].classList.remove("hidden");
60+
}
61+
}
62+
});
63+
</script>

‎src/content/homepage/config.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,15 @@ export const homepageCollection = defineCollection({
66
z.object({
77
title: z.string(),
88
heroText: z.string(),
9-
heroImageDesktop: image(),
10-
heroImageMobile: image(),
11-
heroImageAltText: z.string(),
12-
heroImageCaption: z.string(),
9+
heroImages: z
10+
.array(
11+
z.object({
12+
image: image(),
13+
altText: z.string(),
14+
caption: z.string(),
15+
}),
16+
)
17+
.nonempty(),
1318
referenceHeaderText: z.string(),
1419
examplesHeaderText: z.string(),
1520
communityHeaderText: z.string(),

‎src/content/homepage/en.yaml‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
title: p5.js
2-
heroImageDesktop: ./images/hero.webp
3-
heroImageMobile: ./images/hero-cropped.webp
2+
heroImages:
3+
- image: ./images/hero.webp
4+
altText: Lauren Lee McCarthy reading the Processing Community Catalog
5+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
46
heroText: >
57
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!
6-
heroImageAltText: Lauren Lee McCarthy reading the Processing Community Catalog
7-
heroImageCaption: >
8-
Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza
98
referenceHeaderText: Explore the p5.js library reference
109
examplesHeaderText: Learn p5.js with examples
1110
communityHeaderText: See the p5.js community in action

‎src/content/homepage/es.yaml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
title: p5.js
2-
heroImageDesktop: ./images/hero.webp
3-
heroImageMobile: ./images/hero-cropped.webp
42
heroText: >
53
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!
6-
heroImageAltText: Lauren Lee McCarthy reading the Processing Community Catalog
7-
heroImageCaption: Lauren Lee McCarthy reading the Processing Community Catalog.
4+
heroImages:
5+
- image: ./images/hero.webp
6+
altText: Lauren Lee McCarthy reading the Processing Community Catalog
7+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
88
referenceHeaderText: Explore the p5.js library reference
99
examplesHeaderText: Learn p5.js with examples
1010
communityHeaderText: See the p5.js community in action

‎src/content/homepage/hi.yaml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
title: p5.js
2-
heroImageDesktop: ./images/hero.webp
3-
heroImageMobile: ./images/hero-cropped.webp
42
heroText: >
53
p5.js कोड करना और कला बनाना सीखने के लिए एक अनुकूल उपकरण है। यह एक नि:शुल्क और ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो एक समावेशी, पोषित समुदाय द्वारा बनाई गई है। p5.js कलाकारों, डिज़ाइनरों, नौसिखिया, शिक्षकों और किसी अन्य का भी स्वागत करता है!
6-
heroImageAltText: Lauren Lee McCarthy reading the Processing Community Catalog
7-
heroImageCaption: Lauren Lee McCarthy reading the Processing Community Catalog.
4+
heroImages:
5+
- image: ./images/hero.webp
6+
altText: Lauren Lee McCarthy reading the Processing Community Catalog
7+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
88
referenceHeaderText: Explore the p5.js library reference
99
examplesHeaderText: Learn p5.js with examples
1010
communityHeaderText: See the p5.js community in action

‎src/content/homepage/ko.yaml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
title: p5.js
2-
heroImageDesktop: ./images/hero.webp
3-
heroImageMobile: ./images/hero-cropped.webp
42
heroText: >
53
p5.js는 코딩을 배우고 예술을 만드는 친근한 도구입니다. 이는 포용적이고 육성적인 커뮤니티에 의해 만들어진 무료 오픈소스 자바스크립트 라이브러리입니다. p5.js는 예술가, 디자이너, 초심자, 교육자 및 여러분 모두를 환영합니다!
6-
heroImageAltText: Lauren Lee McCarthy reading the Processing Community Catalog
7-
heroImageCaption: Lauren Lee McCarthy reading the Processing Community Catalog.
4+
heroImages:
5+
- image: ./images/hero.webp
6+
altText: Lauren Lee McCarthy reading the Processing Community Catalog
7+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
88
referenceHeaderText: Explore the p5.js library reference
99
examplesHeaderText: Learn p5.js with examples
1010
communityHeaderText: See the p5.js community in action

‎src/content/homepage/zh-Hans.yaml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
title: p5.js
2-
heroImageDesktop: ./images/hero.webp
3-
heroImageMobile: ./images/hero-cropped.webp
42
heroText: >
53
p5.js 是一款旨在帮助人们学习编程并进行艺术创作的友好工具。作为一个免费的开源 JavaScript 库，它由一个充满包容和关怀的社区共同打造。无论是艺术家、设计师、初学者、教育者，还是其他任何人，p5.js 都欢迎你的加入！
6-
heroImageAltText: Lauren Lee McCarthy reading the Processing Community Catalog
7-
heroImageCaption: Lauren Lee McCarthy reading the Processing Community Catalog.
4+
heroImages:
5+
- image: ./images/hero.webp
6+
altText: Lauren Lee McCarthy reading the Processing Community Catalog
7+
caption: "Lauren Lee McCarthy reading the Processing Community Catalog. Photo: Maximo Xtravaganza"
88
referenceHeaderText: Explore the p5.js library reference
99
examplesHeaderText: Learn p5.js with examples
1010
communityHeaderText: See the p5.js community in action

‎src/layouts/HomepageLayout.astro‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import GridItemSketch from "@components/GridItem/Sketch.astro";
55
import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
66
import { getCurationSketches } from "../api/OpenProcessing";
77
import BaseLayout from "./BaseLayout.astro";
8-
import { Icon } from "../components/Icon";
98
import { setJumpToState } from "../globals/state";
109
import Head from "../components/Head/index.astro";
1110
@@ -32,7 +31,7 @@ setJumpToState(null);
3231

3332
<Head
3433
title={"p5.js"}
35-
featuredImageSrc={data.heroImageMobile.src}
34+
featuredImageSrc={data.heroImages[0].image.src}
3635
locale={currentLocale}
3736
/>
3837

0 commit comments

Comments
 (0)