Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
lsr-explore wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions astro/src/components/RandomContent.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Copy link
Copy Markdown
Contributor

@brian-montgomery brian-montgomery May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you can do the following:

  :global([data-random-content]:not([data-random-ready])) > *:nth-child(n + 2) {
      ...
   }

and therefore won't need the is:global addition.

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);
Copy link
Copy Markdown
Contributor

@brian-montgomery brian-montgomery May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice use of this.

</script>
32 changes: 32 additions & 0 deletions astro/src/layouts/BlogLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Copy link
Copy Markdown
Contributor Author

@lsr-explore lsr-explore May 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to reviewer: Changes to this file - BlogLayout are just to demonstrated the component. They will be removed in the final PR>

import TeamVignette from "@components/TeamVignette.astro";
import ThemedSection from "@components/ThemedSection.astro";
---
Expand Down Expand Up @@ -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>
)}
Copy link
Copy Markdown
Contributor Author

@lsr-explore lsr-explore May 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note to reviewer: Changes to this file - BlogLayout are just to demonstrated the component. They will be removed in the final PR>

<ThemedSection style="tertiary">
<div class="d-flex gap-4">
<article class:list={[sidebar ? "d-none d-lg-block" : "col", "col-lg-9"]}>
Expand Down
Loading