Issue #505: create RandomContent component and example demo on BlogLayout#560
Issue #505: create RandomContent component and example demo on BlogLayout#560lsr-explore wants to merge 1 commit into
Conversation
✅ Deploy Preview for accessiblecommunity ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| import FlexColumn from "@components/FlexColumn.astro"; | ||
| import ImageHeading from "@components/ImageHeading.astro"; | ||
| import Layout from "./Layout.astro"; | ||
| import RandomContent from "@components/RandomContent.astro"; |
There was a problem hiding this comment.
Note to reviewer: Changes to this file - BlogLayout are just to demonstrated the component. They will be removed in the final PR>
| ))} | ||
| </RandomContent> | ||
| </ThemedSection> | ||
| )} |
There was a problem hiding this comment.
Note to reviewer: Changes to this file - BlogLayout are just to demonstrated the component. They will be removed in the final PR>
There was a problem hiding this comment.
Make sense... A component which selects a random child and shows it. Meaning the static build stays the entire time. I like it Laurie good job. Good job, Laurie.
One addition may be an attribute about how many of the children to show (I can see examples of a Hero where we want 2-3 random Call to Actions, for instance).
| }); | ||
| } | ||
| randomize(); | ||
| document.addEventListener("astro:after-swap", randomize); |
There was a problem hiding this comment.
Nice use of this.
| /* 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) { |
There was a problem hiding this comment.
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.
2 participants
Fixes
Note
Remove demo on the Blog page before marking as ready for review.
Description
Created RandomContent component.
Created demo in BlogLayout - it will not be checked in.
Video clip
Screen.Recording.2026-05-09.at.7.42.39.PM.mov