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

argos/tests/screenshot.css

@@ -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,
-article.yt-lite,
+/* Avatar images can be flaky due to using external sources: GitHub/Unavatar */
 .avatar__photo,
+/* Gifs load lazily and are animated */
 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,
+/* The live playground preview can often display dates/counters */
 [class*='playgroundPreview'] {
   visibility: hidden;
 }
@@ -32,3 +40,20 @@ Mermaid diagrams are rendered client-side and produce layout shifts
 .docusaurus-mermaid-container {
   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;
+}

project-words.txt

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

website/src/components/ProductHuntCard.tsx

@@ -7,6 +7,7 @@
 
 import type {ComponentProps} from 'react';
 import React from 'react';
+import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 
 export default function ProductHuntCard({
@@ -19,9 +20,10 @@ export default function ProductHuntCard({
   return (
     <Link
       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}}>
       <img
+        className="producthunt-badge-widget"
         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"
         style={{width: 250, height: 54, maxWidth: 'initial'}}