Deployment Live Success Block for React

Nothing was deployed. The site, the commit, the four checks and their times are typed sample data, and the width buttons only change the drawing. The browser's clipboard is real: the copy button copies the live address. To wire it, set SITE, BRANCH and COMMIT from your deploy record, build CHECKS from the checks your pipeline ran (each with its passed flag and seconds), and replace SitePicture with a screenshot or an iframe of your site if you prefer; the counts and the build time are worked out from CHECKS.

It keeps its height on every width (36rem on a phone, 46rem from the medium breakpoint) and nothing the visitor does changes it. On a phone the window scrolls inside itself, with the browser and the width buttons first and the facts and checks under them. Tab goes through the top bar's link, the copy button, the width group and the View logs button under the checks, in that order.

They are a group of three buttons with one always on. Choosing Tablet or Phone narrows the drawn site to that share of the frame, and the drawing answers to its own width through a container query: at phone width the links fold away and the cards stack. The status line says which width is shown, and the layout does not move.

The drawn site is hidden from assistive technology and every fact in it is also text: the address, the branch, the commit, the checks and the caption that gives the width. The address bar belongs to the picture (the browser showing your site), not to the window: the window has no title bar or browser chrome of its own, only its top bar. The picture is left-to-right whatever the page's direction.

The live address, https://emberloaf.example, a hostname under .example, through the browser's clipboard. A screen reader hears that it was copied.

Visit site is the Shine Button in the top bar and View logs is an outline Button under the checks. It is a link to your own route. It is a Shine Button with render set to an a element and nativeButton={false}.