chore: refactor argos stylesheet + hide flaky producthunt badge (#9259)

This commit is contained in:
Sébastien Lorber 2023-08-31 12:59:27 +02:00 committed by GitHub
parent bc150d2c85
commit 08f3a1163a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 4 deletions

View file

@ -6,14 +6,22 @@
*/ */
/* /*
Hide some things in Argos screenshots because they are a source of flakiness We need to hide some elements in Argos/Playwright screenshots
Those elements are source of flakiness due to nondeterministic rendering
They don't consistently render exactly the same across CI runs
*/ */
/******* DOCUSAURUS GLOBAL / THEME *******/
/* Iframes can load lazily */
iframe, iframe,
article.yt-lite, /* Avatar images can be flaky due to using external sources: GitHub/Unavatar */
.avatar__photo, .avatar__photo,
/* Gifs load lazily and are animated */
img[src$='.gif'], img[src$='.gif'],
h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b), /* Algolia Keyboard shortcuts appear with a little delay */
.DocSearch-Button-Keys > kbd, .DocSearch-Button-Keys > kbd,
/* The live playground preview can often display dates/counters */
[class*='playgroundPreview'] { [class*='playgroundPreview'] {
visibility: hidden; visibility: hidden;
} }
@ -32,3 +40,20 @@ Mermaid diagrams are rendered client-side and produce layout shifts
.docusaurus-mermaid-container { .docusaurus-mermaid-container {
display: none; display: none;
} }
/******* DOCUSAURUS WEBSITE SPECIFIC *******/
/* ProductHunt vote counter can increment at any time */
.producthunt-badge-widget {
visibility: hidden;
}
/* YouTube player lite can load video lazily */
article.yt-lite {
visibility: hidden;
}
/* Can't remember why we need this one :/ */
h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b) {
visibility: hidden;
}

View file

@ -419,3 +419,7 @@ hastscript
Flightcontrol Flightcontrol
Fargate Fargate
Flightcontrol's Flightcontrol's
producthunt
Gifs
Iframes
Unavatar

View file

@ -7,6 +7,7 @@
import type {ComponentProps} from 'react'; import type {ComponentProps} from 'react';
import React from 'react'; import React from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
export default function ProductHuntCard({ export default function ProductHuntCard({
@ -19,9 +20,10 @@ export default function ProductHuntCard({
return ( return (
<Link <Link
to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0" to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"
className={className} className={clsx('producthunt-badge-widget', className)}
style={{display: 'block', width: 250, height: 54, ...style}}> style={{display: 'block', width: 250, height: 54, ...style}}>
<img <img
className="producthunt-badge-widget"
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=353916&theme=light" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=353916&theme=light"
alt="Docusaurus 2.0 - Build optimized websites quickly, focus on your content. | Product Hunt" alt="Docusaurus 2.0 - Build optimized websites quickly, focus on your content. | Product Hunt"
style={{width: 250, height: 54, maxWidth: 'initial'}} style={{width: 250, height: 54, maxWidth: 'initial'}}