-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add w3up-launch announcement banner (when env.NEXT_PUBLIC_W3UP_…
…LAUNCH_SUNSET_ANNOUNCEMENT_START is set) (#2319) Motivation: * https://github.com/web3-storage/secrets/issues/20 Tactics: * there is a new env var `NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_ANNOUNCEMENT_START` that is an ISO8601 datetime of when the announcement should appear. If unset, the announcement will never appear. My intention is to set it only on the staging environment for acceptance testing. Once we're happy on staging, we can enable it on production by setting this var to whatever datetime we want it to appear. Scope: * when enabled at after the appropriate time, the banner should appear on the following routes * / * /account * /account/payment * /docs * the github actions `website` workflow now uses github environments. This is because I want to use them to configure the staging environment to have a particular value for `NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_ANNOUNCEMENT_START`
- Loading branch information
Showing
11 changed files
with
194 additions
and
14 deletions.
There are no files selected for viewing
This file contains 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
59 changes: 59 additions & 0 deletions
59
packages/website/components/page-banner/page-banner-portal.js
This file contains 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,59 @@ | ||
| /** | ||
| * @fileoverview component that contains a 'page banner', i.e. a banner across the whole | ||
| * web page that shows a prominent message to the end-user. | ||
| */ | ||
|
|
||
| import clsx from 'clsx'; | ||
| import * as React from 'react'; | ||
| import * as ReactDOM from 'react-dom'; | ||
|
|
||
| export const defaultPortalElementId = 'page-banner-portal'; | ||
| export const defaultContentsClassName = 'page-banner-contents'; | ||
| export const defaultPortalQuerySelector = `#${defaultPortalElementId} .${defaultContentsClassName}`; | ||
|
|
||
| /** | ||
| * wrap children in stiles like a .message-banner (see ../messagebanner/messagebanner.scss) | ||
| */ | ||
| export function MessageBannerStyled({ children }) { | ||
| return ( | ||
| <div className={clsx('message-banner-wrapper')}> | ||
| <div className="message-banner-container" style={{ padding: '0.5em' }}> | ||
| <div className={clsx('message-banner-content', 'message-banner-underline-links', 'mb-reduced-fontsize')}> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * component for an element across the top of page that can host banner messages on a per-page basis. | ||
| * Other components will use ReactDOM.createPortal() to render into this even though it isn't a child of | ||
| * that component (since it needs to be atop the page). | ||
| */ | ||
| export const PageBannerPortal = ({ id, contentsRef, contentsClassName = defaultContentsClassName }) => { | ||
| return ( | ||
| <div id={id}> | ||
| <div className={contentsClassName} ref={contentsRef}></div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * React Context used for passing around the HTMLElement for the PageBannerPortal | ||
| * so that the PageBanner component can pass it to React.createPortal. | ||
| */ | ||
| export const PageBannerPortalContainerContext = React.createContext(undefined); | ||
|
|
||
| /** | ||
| * render children into a PageBannerPortal at the top of the page | ||
| */ | ||
| export const PageBanner = ({ children }) => { | ||
| const container = React.useContext(PageBannerPortalContainerContext); | ||
| const bannerChild = ( | ||
| <div> | ||
| <MessageBannerStyled>{children}</MessageBannerStyled> | ||
| </div> | ||
| ); | ||
| return <>{container && children && ReactDOM.createPortal(bannerChild, container)}</>; | ||
| }; |
This file contains 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,59 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| const sunsetStartEnv = process.env.NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_START ?? '2023-01-09T00:00:00Z'; | ||
| const sunsetStartDate = new Date(Date.parse(sunsetStartEnv)); | ||
|
|
||
| /** | ||
| * If this isn't set, no announcements will appear | ||
| */ | ||
| const sunsetAnnouncementStartEnv = process.env.NEXT_PUBLIC_W3UP_LAUNCH_SUNSET_ANNOUNCEMENT_START; | ||
|
|
||
| /** | ||
| * after this datetime, show announcements that web3.storage is sunset | ||
| * and end-users should switch to w3up/console.web3.storage | ||
| */ | ||
| const sunsetAnnouncementStartDate = sunsetAnnouncementStartEnv | ||
| ? new Date(Date.parse(sunsetAnnouncementStartEnv)) | ||
| : undefined; | ||
|
|
||
| /** | ||
| * Return whether sunset announcements related to w3up-launch should be shown. | ||
| * An announcement date must be explicitly configured via env var, and now must be after that date. | ||
| * @param {Date} at - time at which to return whether to show the announcement | ||
| * @param {Date|undefined} [announcementStartDate] - when to begin showing announcements. | ||
| * If not provided, always return false. | ||
| */ | ||
| export const shouldShowSunsetAnnouncement = (at = new Date(), announcementStartDate = sunsetAnnouncementStartDate) => { | ||
| return announcementStartDate && at > announcementStartDate; | ||
| }; | ||
|
|
||
| export const w3upLaunchConfig = { | ||
| type: 'W3upLaunchConfig', | ||
| stages: { | ||
| sunsetAnnouncement: { | ||
| start: sunsetAnnouncementStartDate, | ||
| }, | ||
| sunset: { | ||
| start: sunsetStartDate, | ||
| }, | ||
| }, | ||
| shouldShowSunsetAnnouncement: shouldShowSunsetAnnouncement(), | ||
| }; | ||
|
|
||
| /** | ||
| * copy for banner message across top of some web3.storage pages when w3up ships | ||
| */ | ||
| export const W3upMigrationRecommendationCopy = () => { | ||
| const createNewAccountHref = 'https://console.web3.storage/?intent=create-account'; | ||
| const learnWhatsNewHref = 'https://console.web3.storage/?intent=learn-new-web3storage-experience'; | ||
| const sunsetDateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'long' }); | ||
| return ( | ||
| <> | ||
| This web3.storage product will sunset on {sunsetDateFormatter.format(sunsetStartDate)}. We recommend migrating | ||
| your usage of web3.storage to the new web3.storage. | ||
| <br /> | ||
| <a href={createNewAccountHref}>Click here to create a new account</a> and | ||
| <a href={learnWhatsNewHref}>here to read about what’s awesome</a> about the new web3.storage experience. | ||
| </> | ||
| ); | ||
| }; |
This file contains 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 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 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 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 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 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