Merge branch 'main' into spanish_translations_setup_draw

Author: lauradowell

docs/banner.md

@@ -0,0 +1,22 @@
+# Banner
+
+A banner can optionally be added at the bottom of the page with a custom message and link.
+
+## Adding a new banner
+
+Edit the banner text in the body of `src/content/banner/en.mdx`.
+
+Within the file's metadata:
+- Change the `title` metadata to a new slug for each message. This does not get displayed anywhere, but it gets recorded when a user dismisses the banner. This way, we can hide that banner for the user the next time they return, but still show them a new banner when we create a new message.
+- Make sure `hidden` is `true` for the banner to be visible
+
+## Translating banners
+
+Copy the `en.mdx` file to `${locale}.mdx` (e.g. `es.mdx`) and translate just the body text, leaving the metadata the same.
+
+## Removing a banner
+
+- Set `hidden` to `true` in `src/content/banner/en.mdx`
+- Delete any translations of the banner that have been made in non-`en` locales.
+
+  This is to make sure that the next time a new banner is made, there is a clean slate to start from for translations.

docs/content_overview.md

@@ -45,7 +45,8 @@
 
 ## About page
 
-- All translations are stored in `/src/content/text-detail/[lang]/about.mdx` (where `[lang]` is the appropriate language code)
+- All translations for the first half of the page are stored in `/src/content/text-detail/[lang]/about.mdx` (where `[lang]` is the appropriate language code)
+- The second half of the page (from the "People" section to the bottom) is in `/src/layouts/AboutLayout.astro`
 
 ## Simple static pages (like Privacy Policy and Code of Conduct)
 

src/components/Banner/index.astro

@@ -0,0 +1,34 @@
+---
+import { Icon } from "@components/Icon"
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+const { link, title } = entry.data;
+---
+
+<div class="banner bg-accent-color text-accent-type-color" style={{ display: 'none' }} data-title={title}>
+  <a class="banner-content" href={link} target="_blank">
+    <Content />
+  </a>
+  <button id="hideBanner"><Icon kind="close"></button>
+</div>
+
+<script>
+const banner = document.querySelector('.banner');
+const hideBannerBtn = document.querySelector('#hideBanner');
+if (banner && hideBannerBtn) {
+  const hiddenBanner = window.localStorage.getItem('hideBanner');
+  const title = banner.getAttribute('data-title');
+  if (hiddenBanner !== title) {
+    banner.removeAttribute('style');
+  }
+  const hideBanner = () => {
+    banner.setAttribute('style', 'display: none');
+    try {
+      window.localStorage.setItem('hideBanner', title || '');
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  hideBannerBtn.addEventListener('click', hideBanner);
+}
+</script>

src/components/DonorBoxWidget/index.astro

@@ -1,6 +1,6 @@
 <script src="https://donorbox.org/widget.js"></script>
 <!-- @ts-expect-error  -->
-<div class="rounded-lg overflow-hidden mt-md pb-0 max-w-[420px] min-w-[250px]">
+<div class="overflow-hidden mt-md pb-0 max-w-[420px] min-w-[250px]">
   <iframe
     allowpaymentrequest=""
     height="525"
@@ -9,6 +9,7 @@
     name="donorbox"
     src="https://donorbox.org/embed/support-the-processing-foundation?hide_donation_meter=true"
     style="max-width: 420px; min-width: 250px; max-height:none !important;"
+    class="rounded-lg"
   >
   </iframe>
 </div>

src/components/Footer/index.astro

@@ -1,9 +1,13 @@
 ---
+import { getEntry } from "astro:content";
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import { Icon } from "../Icon";
+import Banner from "@components/Banner/index.astro";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
+
+const bannerEntry = await getEntry("banner", currentLocale);
 ---
 
 <footer
@@ -48,7 +52,6 @@ const t = await getUiTranslator(currentLocale);
       <ul aria-labelledby="socials-footer-category">
         <li><a href="https://github.com/processing/p5.js">GitHub</a></li>
         <li><a href="https://www.instagram.com/p5xjs/">Instagram</a></li>
-        <li><a href="https://www.facebook.com/groups/p5dotjs/">Facebook</a></li>
         <li><a href="https://www.youtube.com/@pjs-dz1rv">YouTube</a></li>
         <li><a href="https://twitter.com/p5xjs">X</a></li>
         <li><a href="https://discord.gg/SHQ8dH25r9">Discord</a></li>
@@ -59,5 +62,6 @@ const t = await getUiTranslator(currentLocale);
     </div>
   </div>
 </footer>
+{bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}
 
 <style></style>

src/components/GridItem/Example.astro

@@ -20,9 +20,12 @@ const { item, lazyLoad } = Astro.props;
     alt={item.data.featuredImageAlt}
     widths={[325, 400]}
     sizes={`325px, (min-width: 768px) 400px`}
-    class="w-3/5"
     loading={lazyLoad ? "lazy" : "eager"}
+    class="w-3/5"
+    visibleAltTextClass="max-w-[calc(60%-30px)]"
   />
+  <!--  visible alt text class keeps the alt text within
+    the narrower image width given in class prop -->
   <p class="text-body mt-xs break-words break-keep group-hover:underline">
     {item.data.title}
   </p>

src/components/GridItem/Library.astro

@@ -34,7 +34,10 @@ if (!/[.!]\)?$/.test(description)) {
     alt={item.data.featuredImageAlt}
     width="400"
     class="w-3/5"
+    visibleAltTextClass="max-w-[calc(60%-30px)]"
   />
+  <!--  visible alt text class keeps the alt text within
+    the narrower image width given in class prop -->
   <p
     class="text-xl mt-xs text-wrap break-words break-keep group-hover:underline"
   >

src/components/Image/index.astro

@@ -1,33 +1,49 @@
 ---
+import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
 import type { ComponentProps } from "astro/types";
 import { Image } from "astro:assets";
 type Props = ComponentProps<typeof Image> & {
   /** Defaults to 'photo' aspect ratio */
   aspectRatio?: "photo" | "square" | "none";
   caption?: string;
+  containerClass?: string;
+  visibleAltTextClass?: string;
 };
 const { props } = Astro;
+
+const currentLocale = getCurrentLocale(Astro.url.pathname);
+const t = await getUiTranslator(currentLocale);
+const noAltText = t("No alt text");
 ---
 
-<div class="relative w-fit h-fit">
+<div class={props.containerClass || "relative w-fit h-fit"}>
   <!-- The props are identical but the lack of "IntrinsicAttributes" gives an errant ts error -->
   <!-- @ts-ignore -->
   <Image
     {...props}
     class=""
-    class:list={(props.class,
-    {
-      "object-cover": props.aspectRatio !== "none",
-      "aspect-square": props.aspectRatio === "square",
-      "aspect-photo":
-        props.aspectRatio === "photo" || props.aspectRatio === undefined,
-    })}
+    class:list={[
+      props.class,
+      {
+        "object-cover": props.aspectRatio !== "none",
+        "aspect-square": props.aspectRatio === "square",
+        "aspect-photo":
+          props.aspectRatio === "photo" || props.aspectRatio === undefined,
+      },
+    ]}
   />
   <p
     aria-hidden
-    class="renderable-alt bg-bg-gray-40 line-clamp-3 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl text-body-caption text-ellipsis"
+    class:list={[
+      "renderable-alt",
+      "text-body-caption",
+      "bg-bg-gray-40 line-clamp-3 absolute top-0 mt-sm mx-sm px-[7.5px] pb-[2.5px] rounded-xl text-ellipsis",
+      props.visibleAltTextClass,
+    ]}
   >
-    {props.alt}
+    <!-- It shouldn't be possible to pass no alt text, but if its missing
+    show a '?' so the component doesn't look broken  -->
+    {props.alt || noAltText}
   </p>
   {props.caption && <p class="text-body-caption mt-xs">{props.caption}</p>}
 </div>

src/components/PageHeader/HomePage.astro

@@ -1,4 +1,5 @@
 ---
+import Image from "@components/Image/index.astro";
 import type { CollectionEntry } from "astro:content";
 import { Icon } from "../Icon";
 
@@ -32,9 +33,11 @@ const { config } = Astro.props;
 
   {
     config.data.heroImages.map((im, i) => (
-      <img
-        class={`hero-image ${i > 0 ? "hidden" : ""}`}
-        src={im.image.src}
+      <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"}
       />
@@ -45,9 +48,9 @@ const { config } = Astro.props;
 <script>
   document.addEventListener("DOMContentLoaded", (event) => {
     // find all hero image elements
-    const images = document.querySelectorAll("img.hero-image");
+    const images = document.querySelectorAll(".hero-image-container");
     if (images.length > 1) {
-      const shownImageInd = Math.round(Math.random() * images.length);
+      const shownImageInd = Math.round(Math.random() * (images.length - 1));
       // hide the default one
       images[0].classList.add("hidden");
       // show a random one

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) => (