From f4d8674b75afd0b24118f31648ec41e07c80f0e4 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 25 Aug 2023 10:52:13 +0200
Subject: [PATCH] refactor argos stylesheet + hide producthunt badge

---
 argos/tests/screenshot.css                 | 31 +++++++++++++++++++---
 project-words.txt                          |  4 +++
 website/src/components/ProductHuntCard.tsx |  4 ++-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css
index 7b9a374559a0..c13d3bca314c 100644
--- a/argos/tests/screenshot.css
+++ b/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;
+}
diff --git a/project-words.txt b/project-words.txt
index 635b97d04b91..4e8076b252c2 100644
--- a/project-words.txt
+++ b/project-words.txt
@@ -419,3 +419,7 @@ hastscript
 Flightcontrol
 Fargate
 Flightcontrol's
+producthunt
+Gifs
+Iframes
+Unavatar
diff --git a/website/src/components/ProductHuntCard.tsx b/website/src/components/ProductHuntCard.tsx
index c7ecbcc9735b..d223f47e96d3 100644
--- a/website/src/components/ProductHuntCard.tsx
+++ b/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'}}