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 (