Issue #505: create RandomContent component and example demo on BlogLayout

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>

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"]}>