Merge remote-tracking branch 'origin/main' into new-about-page

mdn · Nov 28, 2024 · 9761551 · 9761551
2 parents f5519dd + 2b95347
commit 9761551
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 102 deletions.
diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss
@@ -217,67 +217,6 @@ main.play {
       align-items: center;
       display: flex;
       flex-direction: column;
-      @media (min-width: 25rem) {
-        .place {
-          align-self: flex-end;
-          max-width: 20rem;
-          min-height: 10rem;
-
-          .pong-box2,
-          .pong-box {
-            width: 100%;
-
-            .pong {
-              flex-direction: row;
-            }
-
-            .pong-note {
-              margin-top: 0;
-            }
-          }
-
-          &.new-side {
-            height: 12rem;
-            max-width: 30rem;
-            min-height: 12rem;
-
-            .pong-box2 {
-              height: 21rem;
-              min-height: 0;
-              width: 25rem;
-
-              .pong-cta {
-                margin: 0.5rem auto 1rem 1rem;
-              }
-
-              .pong-note {
-                margin: 0.5rem 0.5rem auto auto;
-              }
-
-              .pong {
-                > img {
-                  height: 100%;
-                  width: auto;
-                }
-
-                > div.content {
-                  align-items: end;
-                  background: linear-gradient(
-                    to left,
-                    var(--place-new-side-background) 16rem,
-                    transparent
-                  );
-                  flex-direction: column;
-                  height: 100%;
-                  justify-content: end;
-                  padding-left: 8rem;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
-      }
 
       button.flag-example {
         align-self: flex-end;

diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -414,7 +414,7 @@ export default function Playground() {
             sandbox="allow-scripts allow-same-origin allow-forms"
           ></iframe>
           <Console vConsole={vConsole} />
-          <SidePlacement />
+          <SidePlacement extraClasses={["horizontal"]} />
         </section>
       </main>
     </>

diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -71,6 +71,7 @@ section.place {
         background: linear-gradient(
           to top,
           var(--place-new-side-background) 9rem,
+          transparent 12rem,
           transparent
         );
         border-radius: var(--border-radius);
@@ -435,3 +436,63 @@ div.empty-place {
     }
   }
 }
+
+@media (min-width: 25rem) {
+  .place.horizontal {
+    align-self: flex-end;
+    max-width: 20rem;
+    min-height: 10rem;
+
+    .pong-box2,
+    .pong-box {
+      width: 100%;
+
+      .pong {
+        flex-direction: row;
+      }
+
+      .pong-note {
+        margin-top: 0;
+      }
+    }
+
+    &.new-side {
+      height: 12rem;
+      max-width: 30rem;
+      min-height: 12rem;
+
+      .pong-box2 {
+        height: 21rem;
+        min-height: 0;
+        width: 25rem;
+
+        .pong-cta {
+          margin: 0.5rem auto 1rem 1rem;
+        }
+
+        .pong-note {
+          margin: 0.5rem 0.5rem auto auto;
+        }
+
+        .pong {
+          > img {
+            height: 100%;
+            position: absolute;
+            width: auto;
+            z-index: 1;
+          }
+
+          > div.content {
+            align-items: end;
+            background: var(--place-new-side-background);
+            flex-direction: column;
+            height: 100%;
+            justify-content: end;
+            padding-left: 10rem;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -37,7 +37,11 @@ function viewed(pong?: PlacementData) {
     );
 }
 
-export function SidePlacement() {
+export function SidePlacement({
+  extraClasses = [],
+}: {
+  extraClasses?: string[];
+} = {}) {
   const placementData = usePlacement();
   const { textColor, backgroundColor, textColorDark, backgroundColorDark } =
     placementData?.side?.colors || {};
@@ -54,11 +58,11 @@ export function SidePlacement() {
   );
 
   return !placementData?.side ? (
-    <section className="place side"></section>
+    <section className={["place", "side", ...extraClasses].join(" ")}></section>
   ) : placementData.side.cta && placementData.side.heading ? (
     <PlacementInner
       pong={placementData.side}
-      extraClassNames={["side", "new-side"]}
+      extraClassNames={["side", "new-side", ...extraClasses]}
       imageWidth={125}
       imageHeight={125}
       cta={placementData.side.cta}
@@ -69,7 +73,7 @@ export function SidePlacement() {
   ) : (
     <PlacementInner
       pong={placementData.side}
-      extraClassNames={["side"]}
+      extraClassNames={["side", ...extraClasses]}
       imageWidth={130}
       imageHeight={100}
       renderer={RenderSideOrTopBanner}

diff --git a/libs/pong/pong2.js b/libs/pong/pong2.js
@@ -2,6 +2,16 @@
 import he from "he";
 import anonymousIpByCC from "./cc2ip.js";
 
+function fixupColor(hash) {
+  if (typeof hash !== "string" && typeof hash !== "number") {
+    return undefined;
+  } else if (hash?.startsWith?.("rgb") || hash?.startsWith?.("#")) {
+    return hash;
+  } else {
+    return `#${hash}`;
+  }
+}
+
 export function createPong2GetHandler(zoneKeys, coder) {
   return async (body, countryCode, userAgent) => {
     let { pongs = null } = body;
@@ -71,14 +81,16 @@ export function createPong2GetHandler(zoneKeys, coder) {
                 cta: CallToAction && he.decode(CallToAction),
                 heading: Heading && he.decode(Heading),
                 colors: {
-                  textColor: TextColor || TextColorLight,
-                  backgroundColor: BackgroundColor || BackgroundColorLight,
-                  ctaTextColor: CtaTextColorLight,
-                  ctaBackgroundColor: CtaBackgroundColorLight,
-                  textColorDark: TextColorDark,
-                  backgroundColorDark: BackgroundColorDark,
-                  ctaTextColorDark: CtaTextColorDark,
-                  ctaBackgroundColorDark: CtaBackgroundColorDark,
+                  textColor: fixupColor(TextColor || TextColorLight),
+                  backgroundColor: fixupColor(
+                    BackgroundColor || BackgroundColorLight
+                  ),
+                  ctaTextColor: fixupColor(CtaTextColorLight),
+                  ctaBackgroundColor: fixupColor(CtaBackgroundColorLight),
+                  textColorDark: fixupColor(TextColorDark),
+                  backgroundColorDark: fixupColor(BackgroundColorDark),
+                  ctaTextColorDark: fixupColor(CtaTextColorDark),
+                  ctaBackgroundColorDark: fixupColor(CtaBackgroundColorDark),
                 },
               },
       };

diff --git a/package.json b/package.json
@@ -75,7 +75,7 @@
     "@mdn/bcd-utils-api": "^0.0.7",
     "@mdn/browser-compat-data": "^5.6.19",
     "@mozilla/glean": "5.0.3",
-    "@sentry/node": "^8.40.0",
+    "@sentry/node": "^8.41.0",
     "@stripe/stripe-js": "^4.10.0",
     "@use-it/interval": "^1.0.0",
     "@vscode/ripgrep": "^1.15.9",
@@ -168,7 +168,7 @@
     "@types/jest": "^29.5.14",
     "@types/js-yaml": "^4.0.9",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^18.19.66",
+    "@types/node": "^18.19.67",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

diff --git a/yarn.lock b/yarn.lock
@@ -2710,17 +2710,17 @@
   resolved "https://registry.yarnpkg.com/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz#60de891bb126abfdc5410fdc6166aca065f10a0c"
   integrity sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==
 
-"@sentry/core@8.40.0":
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.40.0.tgz#cb5c02d12e29070bf88692c64cfd7db7700be4ea"
-  integrity sha512-u/U2CJpG/+SmTR2bPM4ZZoPYTJAOUuxzj/0IURnvI0v9+rNu939J/fzrO9huA5IJVxS5TiYykhQm7o6I3Zuo3Q==
+"@sentry/core@8.41.0":
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.41.0.tgz#e8a25cacd25fe4358f3179e85f3c2697427fe5a6"
+  integrity sha512-3v7u3t4LozCA5SpZY4yqUN2U3jSrkXNoLgz6L2SUUiydyCuSwXZIFEwpLJfgQyidpNDifeQbBI5E1O910XkPsA==
   dependencies:
-    "@sentry/types" "8.40.0"
+    "@sentry/types" "8.41.0"
 
-"@sentry/node@^8.40.0":
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.40.0.tgz#0dcf4ae224698191e59dba026a5249a27e98fc97"
-  integrity sha512-UO1jWuO+z4DnK2NYCvQQfpNbfFYgeV//cNS83QIPkj9hPIEOpUR2DAfPmI9bj2Yjdh7WE8IN9Can9xDcfJquMQ==
+"@sentry/node@^8.41.0":
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.41.0.tgz#52f970648d961f6e82a1b23a88c0000aa72ba21a"
+  integrity sha512-eYD5S8Lti9efBHFSIhZ/0C5uI1DQtGqjuNWQ62CKC47G2qgJddBtb2HgqRFAnMajYL9FXEtiDT6uqQhKQnmLcQ==
   dependencies:
     "@opentelemetry/api" "^1.9.0"
     "@opentelemetry/context-async-hooks" "^1.25.1"
@@ -2754,23 +2754,23 @@
     "@opentelemetry/sdk-trace-base" "^1.26.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
     "@prisma/instrumentation" "5.19.1"
-    "@sentry/core" "8.40.0"
-    "@sentry/opentelemetry" "8.40.0"
-    "@sentry/types" "8.40.0"
+    "@sentry/core" "8.41.0"
+    "@sentry/opentelemetry" "8.41.0"
+    "@sentry/types" "8.41.0"
     import-in-the-middle "^1.11.2"
 
-"@sentry/opentelemetry@8.40.0":
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.40.0.tgz#55d19770cc2cc61084f4c04b728a550c06282ab0"
-  integrity sha512-kW9EBRESjNnBdj2zCqNMv8x0VIsmiALIOMpi25Dpm38IKtRg/ckQ7YOWx1lnT3iOFebO2GXUvOu+gPmuzIY2WQ==
+"@sentry/opentelemetry@8.41.0":
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.41.0.tgz#0e5c4bb8d5b58f07eb80e312fc66b8709a688c61"
+  integrity sha512-Ld6KdBQsmSk2IfFSoZ7CMpmuQbfb3viV6nTDCz6+11wL9S+1b+hadCN+38yBW4CmI4/hEpYfwwWQPseQQTvBCg==
   dependencies:
-    "@sentry/core" "8.40.0"
-    "@sentry/types" "8.40.0"
+    "@sentry/core" "8.41.0"
+    "@sentry/types" "8.41.0"
 
-"@sentry/types@8.40.0":
-  version "8.40.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.40.0.tgz#a98d2bcc48adbc066b403713688ded3ac5eb1cec"
-  integrity sha512-nuCf3U3deolPM9BjNnwCc33UtFl9ec15/r74ngAkNccn+A2JXdIAsDkGJMO/9mgSFykLe1QyeJ0pQFRisCGOiA==
+"@sentry/types@8.41.0":
+  version "8.41.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.41.0.tgz#db40c93bcedad26569c5dfe10a4b31253c349a10"
+  integrity sha512-eqdnGr9k9H++b9CjVUoTNUVahPVWeNnMy0YGkqS5+cjWWC+x43p56202oidGFmWo6702ub/xwUNH6M5PC4kq6A==
 
 "@sidvind/[email protected]":
   version "3.0.1"
@@ -3425,10 +3425,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-13.9.3.tgz#6356df2647de9eac569f9a52eda3480fa9e70b4d"
   integrity sha512-01s+ac4qerwd6RHD+mVbOEsraDHSgUaefQlEdBbUolnQFjKwCr7luvAlEwW1RFojh67u0z4OUTjPn9LEl4zIkA==
 
-"@types/node@^18.11.18", "@types/node@^18.19.66":
-  version "18.19.66"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.66.tgz#0937a47904ceba5994eedf5cf4b6d503d8d6136c"
-  integrity sha512-14HmtUdGxFUalGRfLLn9Gc1oNWvWh5zNbsyOLo5JV6WARSeN1QcEBKRnZm9QqNfrutgsl/hY4eJW63aZ44aBCg==
+"@types/node@^18.11.18", "@types/node@^18.19.67":
+  version "18.19.67"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.67.tgz#77c4b01641a1e3e1509aff7e10d39e4afd5ae06d"
+  integrity sha512-wI8uHusga+0ZugNp0Ol/3BqQfEcCCNfojtO6Oou9iVNGPTL6QNSdnUdqq85fRgIorLhLMuPIKpsN98QE9Nh+KQ==
   dependencies:
     undici-types "~5.26.4"