Merge remote-tracking branch 'upstream/ppa-experiment' into next

mdn · Jul 18, 2024 · 49b6d45 · 49b6d45
2 parents 261597e + 5c251cd
commit 49b6d45
Show file tree

Hide file tree

Showing 6 changed files with 238 additions and 155 deletions.
diff --git a/client/pwa/package.json b/client/pwa/package.json
@@ -12,14 +12,14 @@
     "dev": "webpack-cli --watch"
   },
   "dependencies": {
-    "@zip.js/zip.js": "2.7.45",
+    "@zip.js/zip.js": "2.7.47",
     "dexie": "4.0.8"
   },
   "devDependencies": {
     "@types/dexie": "1.3.1",
     "ts-loader": "^9.5.1",
     "typescript": "^5.5.3",
-    "webpack": "^5.92.1",
+    "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "workers-preview": "^1.0.6"
   }

diff --git a/client/pwa/yarn.lock b/client/pwa/yarn.lock
@@ -249,10 +249,10 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
-"@zip.js/[email protected].45":
-  version "2.7.45"
-  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.45.tgz#823fe2789401d8c1d836ce866578379ec1bd6f0b"
-  integrity sha512-Mm2EXF33DJQ/3GWWEWeP1UCqzpQ5+fiMvT3QWspsXY05DyqqxWu7a9awSzU4/spHMHVFrTjani1PR0vprgZpow==
+"@zip.js/[email protected].47":
+  version "2.7.47"
+  resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.47.tgz#bc3ec3d3b191f2331450242edfa06dfac08082cc"
+  integrity sha512-jmtJMA3/Jl4rMzo/DZ79s6g0CJ1AZcNAO6emTy/vHfIKAB/iiFY7PLs6KmbRTJ+F8GnK2eCLnjQfCCneRxXgzg==
 
 acorn-import-attributes@^1.9.5:
   version "1.9.5"
@@ -902,10 +902,10 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.92.1:
-  version "5.92.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.92.1.tgz#eca5c1725b9e189cffbd86e8b6c3c7400efc5788"
-  integrity sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==
+webpack@^5.93.0:
+  version "5.93.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.93.0.tgz#2e89ec7035579bdfba9760d26c63ac5c3462a5e5"
+  integrity sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.5"

diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -31,6 +31,7 @@ interface PlacementRenderArgs {
   version?: number;
   typ: string;
   heading?: string;
+  ppa?: string;
 }
 
 const INTERSECTION_OPTIONS = {
@@ -60,28 +61,39 @@ declare global {
   }
 }
 
-function viewed(pong?: PlacementData) {
-  pong?.view &&
-    navigator.sendBeacon?.(
-      `/pong/viewed?code=${encodeURIComponent(pong?.view)}${
-        pong?.version ? `&version=${pong.version}` : ""
-      }`
-    );
-  if (pong?.ppa && "privateAttribution" in navigator) {
+function saveImpression(
+  ppa: string | undefined,
+  type: PrivateAttributionImpressionType
+) {
+  if (ppa && "privateAttribution" in navigator) {
     try {
       let attribution: Partial<PrivateAttributionImpressionOptions> =
-        JSON.parse(atob(pong.ppa));
+        JSON.parse(atob(ppa));
       navigator?.privateAttribution?.saveImpression?.({
-        type: PrivateAttributionImpressionType.View,
+        type,
         ...attribution,
       } as PrivateAttributionImpressionOptions);
       console.debug("sent:", attribution);
     } catch (e) {
-      console.warn(`unable to save impression(${e}): &{pong?.ppa}`);
+      console.warn(`unable to save ${type} impression(${e}): &{ppa}`);
     }
   }
 }
 
+function clicked(ppa?: string) {
+  saveImpression(ppa, PrivateAttributionImpressionType.Click);
+}
+
+function viewed(pong?: PlacementData) {
+  pong?.view &&
+    navigator.sendBeacon?.(
+      `/pong/viewed?code=${encodeURIComponent(pong?.view)}${
+        pong?.version ? `&version=${pong.version}` : ""
+      }`
+    );
+  saveImpression(pong?.ppa, PrivateAttributionImpressionType.View);
+}
+
 export function SidePlacement() {
   const placementData = usePlacement();
   const { textColor, backgroundColor, textColorDark, backgroundColorDark } =
@@ -333,7 +345,7 @@ export function PlacementInner({
     };
   }, [isVisible, isIntersecting, sendViewed]);
 
-  const { image, copy, alt, click, version, heading } = pong || {};
+  const { image, copy, alt, click, version, heading, ppa } = pong || {};
   return (
     <>
       {!isServer &&
@@ -353,6 +365,7 @@ export function PlacementInner({
           version,
           typ,
           heading,
+          ppa,
         })}
     </>
   );
@@ -556,6 +569,7 @@ function RenderNewSideBanner({
   version = 1,
   typ,
   heading,
+  ppa,
 }: PlacementRenderArgs) {
   return (
     <section ref={place} className={["place", ...extraClassNames].join(" ")}>
@@ -568,6 +582,7 @@ function RenderNewSideBanner({
           )}&version=${version}`}
           target="_blank"
           rel="sponsored noreferrer"
+          onClick={() => clicked(ppa)}
         >
           <img
             src={`/pimg/${encodeURIComponent(image || "")}`}

diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "express": "^4.19.2",
     "fdir": "^6.1.1",
     "feed": "^4.2.2",
-    "file-type": "^19.1.1",
+    "file-type": "^19.2.0",
     "front-matter": "^4.0.2",
     "fs-extra": "^11.2.0",
     "got": "^13.0.0",
@@ -118,7 +118,7 @@
     "mdast-util-phrasing": "^4.1.0",
     "mdn-data": "^2.8.0",
     "open": "^10.1.0",
-    "open-editor": "^4.1.1",
+    "open-editor": "^5.0.0",
     "openai": "^4.52.7",
     "pg": "^8.12.0",
     "pgvector": "^0.2.0",
@@ -158,7 +158,7 @@
     "@playwright/test": "^1.45.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.6.13",
+    "@swc/core": "^1.7.0",
     "@testing-library/react": "^15.0.7",
     "@types/async": "^3.2.24",
     "@types/cli-progress": "^3.11.6",
@@ -230,7 +230,7 @@
     "react-is": "^18.3.1",
     "react-refresh": "^0.14",
     "react-router": "^6.17.0",
-    "react-router-dom": "^6.25.0",
+    "react-router-dom": "^6.25.1",
     "remark-prettier": "^2.0.0",
     "resolve": "^1.22.8",
     "resolve-url-loader": "^5.0.0",

diff --git a/server/middlewares.ts b/server/middlewares.ts
@@ -8,20 +8,29 @@ import { STATIC_ROOT } from "../libs/env/index.js";
 import { resolveFundamental } from "../libs/fundamental-redirects/index.js";
 import { getLocale } from "../libs/locale-utils/index.js";
 
-// Lowercase every request because every possible file we might have
-// on disk is always in lowercase.
-// This only helps when you're on a filesystem (e.g. Linux) that is case
-// sensitive.
-const slugRewrite = (req, res, next) => {
+const slugLowercase = (req, res, next) => {
   req.url = req.url.toLowerCase();
   next();
 };
 
+const staticServer = express.static(STATIC_ROOT, {
+  setHeaders: (res) => {
+    if (res.req.path.endsWith("/runner.html")) {
+      res.setHeader("Content-Security-Policy", PLAYGROUND_UNSAFE_CSP_VALUE);
+    } else {
+      res.setHeader("Content-Security-Policy", CSP_VALUE);
+    }
+  },
+});
+
+// This is necessary for case-sensitive filesystems, such as on Linux 🐧
+export const staticMiddlewares = [staticServer, slugLowercase, staticServer];
+
 /**
  * This function is returns an object with {url:string, status:number}
  * if there's some place to redirect to, otherwise an empty object.
  */
-const originRequest = (req, res, next) => {
+export const originRequestMiddleware = (req, res, next) => {
   const { url: fundamentalRedirectUrl, status } = resolveFundamental(req.url);
   if (fundamentalRedirectUrl && status) {
     res.redirect(status, fundamentalRedirectUrl);
@@ -50,17 +59,3 @@ const originRequest = (req, res, next) => {
     next();
   }
 };
-
-export const staticMiddlewares = [
-  slugRewrite,
-  express.static(STATIC_ROOT, {
-    setHeaders: (res) => {
-      if (res.req.path.endsWith("/runner.html")) {
-        res.setHeader("Content-Security-Policy", PLAYGROUND_UNSAFE_CSP_VALUE);
-      } else {
-        res.setHeader("Content-Security-Policy", CSP_VALUE);
-      }
-    },
-  }),
-];
-export const originRequestMiddleware = originRequest;