From 7825d7b8f8cb32a9fa823d3b592f50480981957d Mon Sep 17 00:00:00 2001
From: Laurie Reynolds <lauriesreynolds@gmail.com>
Date: Sat, 9 May 2026 19:36:10 -0700
Subject: [PATCH 1/2] create RandomContent component and example demo on
 BlogLayout

---
 astro/src/components/RandomContent.astro | 35 ++++++++++++++++++++++++
 astro/src/layouts/BlogLayout.astro       | 32 ++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 astro/src/components/RandomContent.astro

diff --git a/astro/src/components/RandomContent.astro b/astro/src/components/RandomContent.astro
new file mode 100644
index 00000000..f5d47231
--- /dev/null
+++ b/astro/src/components/RandomContent.astro
@@ -0,0 +1,35 @@
+---
+// When rendered on the server this, displays the first child and hides the rest. 
+// On page load, the client script picks one to show and hides the rest.
+---
+
+<div data-random-content>
+  <slot />
+</div>
+
+<style is:global>
+  /* Pre-JS / no-JS fallback: show only the first child. */
+  /* `is:global` because the children come from a slot (consumer-rendered),
+     so they don't get this component's scoped class. */
+  [data-random-content]:not([data-random-ready]) > *:nth-child(n + 2) {
+    display: none;
+  }
+</style>
+
+<script>
+  function randomize() {
+    /* In case there are multiple RandomContent components on the page, we need to randomize each one. */
+    document.querySelectorAll("[data-random-content]").forEach((root) => {
+      const items = Array.from(root.children);
+      if (items.length > 1)  {
+        const chosen = Math.floor(Math.random() * items.length);
+        items.forEach((item, i) => {
+          item.toggleAttribute("hidden", i !== chosen);
+        });
+      }
+      root.setAttribute("data-random-ready", "");
+    });
+  }
+  randomize();
+  document.addEventListener("astro:after-swap", randomize);
+</script>
diff --git a/astro/src/layouts/BlogLayout.astro b/astro/src/layouts/BlogLayout.astro
index 7d2f2ace..e18f23a6 100644
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -60,6 +60,7 @@ import Branding from "@components/Branding.astro";
 import FlexColumn from "@components/FlexColumn.astro";
 import ImageHeading from "@components/ImageHeading.astro";
 import Layout from "./Layout.astro";
+import RandomContent from "@components/RandomContent.astro";
 import TeamVignette from "@components/TeamVignette.astro";
 import ThemedSection from "@components/ThemedSection.astro";
 ---
@@ -87,6 +88,37 @@ import ThemedSection from "@components/ThemedSection.astro";
       <strong>Blog</strong>
     </slot>
   </ImageHeading>
+  {!isEmpty(blogs) && (
+    <ThemedSection style="tertiary">
+      <h2 class="display-4 border-bottom mb-3">Demo: RandomContent Component</h2>
+      <p class="mb-3">
+        A different blog post is featured at random on each page load. Reload to see another.
+      </p>
+      <RandomContent>
+        {blogs.slice(0, 5).map((b) => (
+          <article class="border rounded p-3">
+            <h3><a href={`/blog/${b.id}`}>{b.data.title}</a></h3>
+            <p class="mb-0">{b.data.description}</p>
+          </article>
+        ))}
+      </RandomContent>
+    </ThemedSection>
+  )}
+  {!isEmpty(authors) && (
+    <ThemedSection style="tertiary">
+      <h2 class="display-4 border-bottom mb-3">Demo: RandomContent with an Author</h2>
+      <p class="mb-3">
+        A different blog author is featured at random on each page load.
+      </p>
+      <RandomContent>
+        {authors.slice(0, 5).map((author) => (
+          <div class="border rounded p-3">
+            <TeamVignette member={author} showLinks={true} />
+          </div>
+        ))}
+      </RandomContent>
+    </ThemedSection>
+  )}
   <ThemedSection style="tertiary">
     <div class="d-flex gap-4">
       <article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>

From 3e72a9a822a1fa236d6de3d69679a2249172d181 Mon Sep 17 00:00:00 2001
From: Brian Montgomery <brian@accessiblecommunity.org>
Date: Thu, 4 Jun 2026 12:33:45 -0400
Subject: [PATCH 2/2] Variable amount of Content and other cleanup

---
 astro/src/components/Hero.astro          |  8 ++-
 astro/src/components/RandomContent.astro | 78 ++++++++++++++++++------
 astro/src/layouts/BlogLayout.astro       | 32 ----------
 3 files changed, 64 insertions(+), 54 deletions(-)

diff --git a/astro/src/components/Hero.astro b/astro/src/components/Hero.astro
index 2b98c55f..57d80d54 100644
--- a/astro/src/components/Hero.astro
+++ b/astro/src/components/Hero.astro
@@ -1,12 +1,14 @@
 ---
 import { getImage } from "astro:assets";
 import type { ImageMetadata } from "astro";
+import RandomContent from "./RandomContent.astro";
 
 interface Props {
   image: ImageMetadata | string;
   theme?: string;
   columns?: string;
   actionBreakpoint?: string;
+  actionBarItems?: number;
 }
 
 const {
@@ -14,6 +16,7 @@ const {
   theme = "primary",
   columns = "col-lg-6",
   actionBreakpoint = "lg",
+  actionBarItems = 3,
 } = Astro.props;
 
 let heroBgUrl;
@@ -39,11 +42,12 @@ if (image) {
   {
     Astro.slots.has("action-bar") && (
       <div class={`bg-${theme} bg-opacity-50 py-3 text-white`}>
-        <div
+        <RandomContent
+          numChildren={actionBarItems}
           class={`d-flex flex-column flex-${actionBreakpoint}-row align-items-center justify-content-${actionBreakpoint}-evenly gap-2`}
         >
           <slot name="action-bar" />
-        </div>
+        </RandomContent>
       </div>
     )
   }
diff --git a/astro/src/components/RandomContent.astro b/astro/src/components/RandomContent.astro
index f5d47231..07c4ae6b 100644
--- a/astro/src/components/RandomContent.astro
+++ b/astro/src/components/RandomContent.astro
@@ -1,35 +1,73 @@
 ---
-// When rendered on the server this, displays the first child and hides the rest. 
-// On page load, the client script picks one to show and hides the rest.
+// When rendered on the server this, displays the first x children and hides the rest.
+// On page load, the client script picks the number given to show and hides the rest.
+
+import type { HTMLAttributes } from 'astro/types';
+interface Props extends HTMLAttributes<"div"> {
+  numChildren?: 1 | 2 | 3 | 4 | 5 | 6 | `${1 | 2 | 3 | 4 | 5 | 6}`;
+}
+const { numChildren = 1, ...attrs } = Astro.props;
 ---
 
-<div data-random-content>
+<div data-random-content={numChildren} {...attrs}>
   <slot />
 </div>
 
-<style is:global>
-  /* Pre-JS / no-JS fallback: show only the first child. */
-  /* `is:global` because the children come from a slot (consumer-rendered),
-     so they don't get this component's scoped class. */
-  [data-random-content]:not([data-random-ready]) > *:nth-child(n + 2) {
-    display: none;
+<style>
+  /* Pre-JS / no-JS fallback: show only the x children. */
+  [data-random-content=1]:not([data-random-ready]) {
+    > *:nth-child(n + 2) {
+      display: none;
+    }
+  }
+  [data-random-content=2]:not([data-random-ready]) {
+    > *:nth-child(n + 3) {
+      display: none;
+    }
+  }
+  [data-random-content=3]:not([data-random-ready]) {
+    > *:nth-child(n + 4) {
+      display: none;
+    }
+  }
+  [data-random-content=4]:not([data-random-ready]) {
+    > *:nth-child(n + 5) {
+      display: none;
+    }
+  }
+  [data-random-content=5]:not([data-random-ready]) {
+    > *:nth-child(n + 6) {
+      display: none;
+    }
+  }
+  [data-random-content=6]:not([data-random-ready]) {
+    > *:nth-child(n + 7) {
+      display: none;
+    }
   }
 </style>
 
 <script>
-  function randomize() {
-    /* In case there are multiple RandomContent components on the page, we need to randomize each one. */
-    document.querySelectorAll("[data-random-content]").forEach((root) => {
-      const items = Array.from(root.children);
-      if (items.length > 1)  {
-        const chosen = Math.floor(Math.random() * items.length);
-        items.forEach((item, i) => {
-          item.toggleAttribute("hidden", i !== chosen);
-        });
+  function randomizeContent() {
+    function getSample(elements: Element[], size: number) {
+      if (elements.length > size) {
+        const shuffled = [...elements].sort(() => 0.5 - Math.random());
+        return shuffled.slice(0, size);
       }
+      return elements;
+    }
+
+    /* In case there are multiple RandomContent components on the page, we need to randomize each one. */
+    document.querySelectorAll("[data-random-content]").forEach((root: Element) => {
+      const numElements = parseInt(root.getAttribute("data-random-content") ?? "1");
+      const elements = Array.from(root.children);
+      const sample = getSample(elements, numElements);
+      elements.forEach(
+        (item) => item.toggleAttribute("hidden", !sample.includes(item))
+      )
       root.setAttribute("data-random-ready", "");
     });
   }
-  randomize();
-  document.addEventListener("astro:after-swap", randomize);
+  randomizeContent();
+  document.addEventListener("astro:after-swap", randomizeContent);
 </script>
diff --git a/astro/src/layouts/BlogLayout.astro b/astro/src/layouts/BlogLayout.astro
index e18f23a6..7d2f2ace 100644
--- a/astro/src/layouts/BlogLayout.astro
+++ b/astro/src/layouts/BlogLayout.astro
@@ -60,7 +60,6 @@ import Branding from "@components/Branding.astro";
 import FlexColumn from "@components/FlexColumn.astro";
 import ImageHeading from "@components/ImageHeading.astro";
 import Layout from "./Layout.astro";
-import RandomContent from "@components/RandomContent.astro";
 import TeamVignette from "@components/TeamVignette.astro";
 import ThemedSection from "@components/ThemedSection.astro";
 ---
@@ -88,37 +87,6 @@ import ThemedSection from "@components/ThemedSection.astro";
       <strong>Blog</strong>
     </slot>
   </ImageHeading>
-  {!isEmpty(blogs) && (
-    <ThemedSection style="tertiary">
-      <h2 class="display-4 border-bottom mb-3">Demo: RandomContent Component</h2>
-      <p class="mb-3">
-        A different blog post is featured at random on each page load. Reload to see another.
-      </p>
-      <RandomContent>
-        {blogs.slice(0, 5).map((b) => (
-          <article class="border rounded p-3">
-            <h3><a href={`/blog/${b.id}`}>{b.data.title}</a></h3>
-            <p class="mb-0">{b.data.description}</p>
-          </article>
-        ))}
-      </RandomContent>
-    </ThemedSection>
-  )}
-  {!isEmpty(authors) && (
-    <ThemedSection style="tertiary">
-      <h2 class="display-4 border-bottom mb-3">Demo: RandomContent with an Author</h2>
-      <p class="mb-3">
-        A different blog author is featured at random on each page load.
-      </p>
-      <RandomContent>
-        {authors.slice(0, 5).map((author) => (
-          <div class="border rounded p-3">
-            <TeamVignette member={author} showLinks={true} />
-          </div>
-        ))}
-      </RandomContent>
-    </ThemedSection>
-  )}
   <ThemedSection style="tertiary">
     <div class="d-flex gap-4">
       <article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>