add component DateGate conditionally render content based on build-time date #1845
+130
−10
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| --- | ||
| /** | ||
| * DateGate — conditionally render content based on build-time date. | ||
| * | ||
| * Defines a date window via `after` and/or `before` props. At build time, | ||
| * the component determines which time period "now" falls into and renders | ||
| * exactly one of three named slots: "before", "during", or "after". | ||
| * | ||
| * Any omitted slot simply renders nothing — use 2 slots for a simple | ||
| * on/off gate or all 3 for a full before/during/after split. | ||
| * | ||
| * Date strings are parsed as UTC midnight when no time portion is given | ||
| * (e.g. "2026-07-14" = 2026-07-14T00:00:00.000Z). For precise time-of-day | ||
| * gating in a specific timezone, include the offset: | ||
| * after="2026-07-14T00:00:00+02:00" (midnight CEST) | ||
| * | ||
| * @example | ||
| * // 3-state: before CfP / open / closed | ||
| * <DateGate after="2026-06-01" before="2026-07-01"> | ||
| * <p slot="before">CfP opens June 1st!</p> | ||
| * <a slot="during" href="/cfp">Submit your talk</a> | ||
| * <p slot="after">CfP closed. See you in Kraków!</p> | ||
| * </DateGate> | ||
| * | ||
| * @example | ||
| * // 2-state: teaser → live (omit "after" slot) | ||
| * <DateGate after="2026-07-14"> | ||
| * <p slot="before">Tickets coming soon!</p> | ||
| * <a slot="during" href="/tickets">Buy Tickets</a> | ||
| * </DateGate> | ||
| */ | ||
|
|
||
| interface Props { | ||
| /** | ||
| * Window start — ISO 8601 date string, inclusive. | ||
| * Date-only strings (e.g. "2026-07-14") are parsed as UTC midnight. | ||
| * Include offset for timezone-aware gating: "2026-07-14T00:00:00+02:00" | ||
| */ | ||
| after?: string; | ||
| /** | ||
| * Window end — ISO 8601 date string, inclusive. | ||
| * Same parsing rules as `after`. | ||
| */ | ||
| before?: string; | ||
| } | ||
|
|
||
| const { after, before } = Astro.props; | ||
|
|
||
| // --- Parse dates --- | ||
| // Date-only strings (no "T") get interpreted as UTC midnight by new Date(). | ||
| // DateTime strings with offset (e.g. "...T00:00:00+02:00") parse correctly. | ||
| const parseDate = (s: string): Date => { | ||
| const iso = s.includes("T") ? s : `${s}T00:00:00.000Z`; | ||
| return new Date(iso); | ||
|
Contributor
There was a problem hiding this comment. nit: is it a good idea for parseDate to check if it produced a valid date and throw a build error if not? Like if i have a typo, e.g. before="2026-13-20", that's an invalid date, I think in the before-only case, comparing now with that invalid date returns false, so we select |
||
| }; | ||
|
|
||
| const now = new Date(); | ||
| const afterDate = after ? parseDate(after) : null; | ||
| const beforeDate = before ? parseDate(before) : null; | ||
|
|
||
| // --- Determine which period "now" falls into --- | ||
| type Period = "before" | "during" | "after"; | ||
|
|
||
| let period: Period = "during"; | ||
|
|
||
| if (afterDate && beforeDate) { | ||
| if (now < afterDate) period = "before"; | ||
| else if (now > beforeDate) period = "after"; | ||
| else period = "during"; | ||
| } else if (afterDate) { | ||
| period = now < afterDate ? "before" : "during"; | ||
| } else if (beforeDate) { | ||
| period = now > beforeDate ? "after" : "during"; | ||
| } | ||
| --- | ||
|
|
||
| {period === "before" ? <slot name="before" /> : null} | ||
| {period === "during" ? <slot name="during" /> : null} | ||
| {period === "after" ? <slot name="after" /> : null} | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I’m confused here. so when only
before="2026-07-20"is provided, thebeforeDateselectsduringup to 20 Jul andafterafterward, right? If so, it never selectsbefore, so thisslot="before"fragment doesn't reach / render? Then isn't it just a dup ofduringfragment?Also, could we give an example to the the before-only case in
DateGateto help with the confusedpoke?