From d3b00a9670d0105cdb267b2de9fd23320d41a1aa Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Wed, 25 Oct 2023 10:49:45 +0200 Subject: [PATCH 1/9] feat(pong): bottom banner --- client/src/document/index.tsx | 2 +- client/src/placement-context.tsx | 2 +- client/src/ui/organisms/placement/index.scss | 62 +++++++++++ client/src/ui/organisms/placement/index.tsx | 106 +++++++++++++++++-- 4 files changed, 159 insertions(+), 13 deletions(-) diff --git a/client/src/document/index.tsx b/client/src/document/index.tsx index 6fd1d0ed35b7..aa183baa817d 100644 --- a/client/src/document/index.tsx +++ b/client/src/document/index.tsx @@ -264,10 +264,10 @@ export function Document(props /* TODO: define a TS interface for this */) { - + ); } diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx index 9d594d2d1ce1..fe5b95b459be 100644 --- a/client/src/placement-context.tsx +++ b/client/src/placement-context.tsx @@ -52,7 +52,7 @@ const PLACEMENT_MAP: Record = { side: /\/[^/]+\/(play|docs\/|blog\/|search$)/i, top: /\/[^/]+\/(?!$|_homepage$).*/i, hpMain: /\/[^/]+\/($|_homepage$)/i, - hpFooter: /\/[^/]+\/($|_homepage$)/i, + hpFooter: /\/[^/]+\/($|_homepage$|docs\/)/i, }; function placementTypes(pathname: string): string[] { diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index 25fa50a38fb4..2d6734e0dfe3 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -227,3 +227,65 @@ div.empty-place { --place-top-cta-background: var(--place-top-cta-background-dark); --place-top-cta-color: var(--place-top-cta-color-dark); } + +.bottom-banner-container { + background-color: var( + --place-bottom-banner-background, + var(--background-primary) + ); + color: var(--place-bottom-banner-color, var(--text-primary)); + margin: 0; + width: 100%; + + > section.place.bottom-banner { + display: grid; + grid-template-areas: + "pong note" + "pong no"; + grid-template-columns: auto minmax(0, 15rem); + margin: 0 auto; + max-width: var(--max-width); + padding: 0 1rem; + + .pong { + grid-area: pong; + justify-self: center; + + a { + display: flex; + + img { + height: auto; + } + } + } + + .pong-note { + color: var(--place-bottom-banner-color); + font-size: 0.625rem; + grid-area: note; + margin-top: 0.5rem; + text-decoration: underline; + } + + .no-pong { + color: var(--place-bottom-banner-color); + font-size: 0.625rem; + grid-area: no; + margin-top: auto; + } + + @media screen and (max-width: $screen-lg) { + grid-template-areas: + "pong pong" + "note no"; + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 2rem; + + .no-pong { + justify-self: end; + width: fit-content; + } + } + } +} diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx index 6ce37b5cd3cf..2212b09fe036 100644 --- a/client/src/ui/organisms/placement/index.tsx +++ b/client/src/ui/organisms/placement/index.tsx @@ -31,6 +31,7 @@ interface PlacementRenderArgs { user: User; style: object; version?: number; + typ: string; } const INTERSECTION_OPTIONS = { @@ -148,6 +149,7 @@ export function HpMainPlacement() { placementData: placementData?.hpMain, imageWidth: 970, imageHeight: 250, + typ: "hp-main", }); } @@ -157,6 +159,7 @@ export function HpFooterPlacement() { placementData: placementData?.hpFooter, imageWidth: 728, imageHeight: 90, + typ: "hp-footer", }); } @@ -164,10 +167,12 @@ function HpPlacement({ placementData, imageWidth, imageHeight, + typ, }: { placementData?: PlacementData; imageWidth: number; imageHeight: number; + typ: string; }) { const { backgroundColor } = placementData?.colors || {}; const css = Object.fromEntries( @@ -185,18 +190,31 @@ function HpPlacement({ imageHeight={imageHeight} style={css} renderer={RenderHpPlacement} - typ="hp-main" + typ={typ} > ); } export function BottomBanner() { - return ( + const placementData = usePlacement()?.hpFooter; + const { backgroundColor, textColor } = placementData?.colors || {}; + const css = Object.fromEntries( + [ + ["--place-bottom-banner-background", backgroundColor], + ["--place-bottom-banner-color", textColor], + ].filter(([_, v]) => Boolean(v)) + ); + return !placementData ? ( +
+ ) : ( + > ); } @@ -278,6 +296,7 @@ export function PlacementInner({ user, style, version, + typ, })} ); @@ -295,6 +314,7 @@ function RenderSideOrTopBanner({ user, style, version = 1, + typ, }: PlacementRenderArgs) { return (
click ${typ}`} href={`/pong/click?code=${encodeURIComponent( click )}&version=${version}`} @@ -324,8 +344,10 @@ function RenderSideOrTopBanner({ {cta && ( click ${typ}`} + href={`/pong/click?code=${encodeURIComponent( + click + )}&version=${version}`} target="_blank" rel="noreferrer" > @@ -369,6 +391,8 @@ function RenderHpPlacement({ imageHeight, copy, style, + version = 1, + typ, }: PlacementRenderArgs) { return (
click ${typ}`} + href={`/pong/click?code=${encodeURIComponent( + click + )}&version=${version}`} target="_blank" rel="noreferrer" > @@ -394,6 +420,64 @@ function RenderHpPlacement({ ); } -function RenderBottomBanner({ place }: PlacementRenderArgs) { - return
; +function RenderBottomBanner({ + place, + extraClassNames = [], + click, + image, + imageWidth, + imageHeight, + copy, + user, + style, + version = 1, + typ, +}: PlacementRenderArgs) { + return ( + + ); } From 76144bf336214f7acde37ed46e1296c7bf80d58a Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 11:22:21 +0200 Subject: [PATCH 2/9] fix image height --- client/src/ui/organisms/placement/index.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index 2d6734e0dfe3..d4aa7c8eb296 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -251,12 +251,8 @@ div.empty-place { grid-area: pong; justify-self: center; - a { - display: flex; - - img { - height: auto; - } + img { + height: auto; } } From 8d6836ea5564f8518feca9f84f3ce98cc4c097b9 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 13:20:35 +0200 Subject: [PATCH 3/9] move to own unit --- client/src/placement-context.tsx | 5 +++-- client/src/ui/organisms/placement/index.tsx | 2 +- libs/pong/pong.js | 8 +++++++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/client/src/placement-context.tsx b/client/src/placement-context.tsx index fe5b95b459be..ee078b2a59dc 100644 --- a/client/src/placement-context.tsx +++ b/client/src/placement-context.tsx @@ -42,7 +42,7 @@ export interface PlacementData { version?: number; } -type PlacementType = "side" | "top" | "hpMain" | "hpFooter"; +type PlacementType = "side" | "top" | "hpMain" | "hpFooter" | "bottom"; export interface PlacementContextData extends Partial> { status: Status; @@ -52,7 +52,8 @@ const PLACEMENT_MAP: Record = { side: /\/[^/]+\/(play|docs\/|blog\/|search$)/i, top: /\/[^/]+\/(?!$|_homepage$).*/i, hpMain: /\/[^/]+\/($|_homepage$)/i, - hpFooter: /\/[^/]+\/($|_homepage$|docs\/)/i, + hpFooter: /\/[^/]+\/($|_homepage$)/i, + bottom: /\/[^/]+\/docs\//i, }; function placementTypes(pathname: string): string[] { diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx index 2212b09fe036..7a4fd1606c89 100644 --- a/client/src/ui/organisms/placement/index.tsx +++ b/client/src/ui/organisms/placement/index.tsx @@ -196,7 +196,7 @@ function HpPlacement({ } export function BottomBanner() { - const placementData = usePlacement()?.hpFooter; + const placementData = usePlacement()?.bottom; const { backgroundColor, textColor } = placementData?.colors || {}; const css = Object.fromEntries( [ diff --git a/libs/pong/pong.js b/libs/pong/pong.js index 8d2413a82aab..ade248299b65 100644 --- a/libs/pong/pong.js +++ b/libs/pong/pong.js @@ -7,6 +7,7 @@ const PLACEMENTS = { top: 585, hpMain: 3214, hpFooter: 2327, + bottom: 7748, }; // Allow list for client sent keywords. @@ -45,7 +46,12 @@ export function createPongGetHandler(client, coder) { if (v === null || v?.[0] === null) { return [p, null]; } - if ((p === "side") | (p === "hpMain") | (p === "hpFooter")) { + if ( + (p === "side") | + (p === "hpMain") | + (p === "hpFooter") | + (p === "bottom") + ) { const [{ contents, clickUrl, impressionUrl }] = v; const { colors } = contents?.[0]?.data?.customData || {}; return [ From d356e3b6618079a70737e4d241f01018cc0996f8 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 15:46:45 +0200 Subject: [PATCH 4/9] center --- client/src/ui/organisms/placement/index.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index d4aa7c8eb296..65e97c921f5c 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -239,10 +239,11 @@ div.empty-place { > section.place.bottom-banner { display: grid; + gap: 3rem; grid-template-areas: - "pong note" - "pong no"; - grid-template-columns: auto minmax(0, 15rem); + "nope pong note" + "nope pong no"; + grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 15rem); margin: 0 auto; max-width: var(--max-width); padding: 0 1rem; From 62a1513b9504d4b5eea1aa7d06ebb12f5f9e937f Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 17:11:15 +0200 Subject: [PATCH 5/9] fix gap --- client/src/ui/organisms/placement/index.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index 65e97c921f5c..32efcf7897ea 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -239,7 +239,7 @@ div.empty-place { > section.place.bottom-banner { display: grid; - gap: 3rem; + column-gap: 3rem; grid-template-areas: "nope pong note" "nope pong no"; @@ -272,6 +272,14 @@ div.empty-place { margin-top: auto; } + @media screen and (max-width: $screen-xl) { + grid-template-areas: + "pong note" + "pong no"; + grid-template-columns: auto max-content; + grid-template-rows: auto 2rem; + } + @media screen and (max-width: $screen-lg) { grid-template-areas: "pong pong" From 544d8bf4962beef9b6a283168eb6bba6c4ca1c20 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 17:13:49 +0200 Subject: [PATCH 6/9] lint --- client/src/ui/organisms/placement/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index 32efcf7897ea..ca9efc295427 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -238,8 +238,8 @@ div.empty-place { width: 100%; > section.place.bottom-banner { - display: grid; column-gap: 3rem; + display: grid; grid-template-areas: "nope pong note" "nope pong no"; From c7eae51c4f347b16ab0a88980118330cbc3b987f Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Thu, 26 Oct 2023 18:55:06 +0200 Subject: [PATCH 7/9] feedback --- client/src/ui/organisms/placement/index.scss | 4 ++-- client/src/ui/organisms/placement/index.tsx | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index ca9efc295427..33b9e9518312 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -258,7 +258,7 @@ div.empty-place { } .pong-note { - color: var(--place-bottom-banner-color); + color: var(--place-bottom-banner-color, var(--text-primary)); font-size: 0.625rem; grid-area: note; margin-top: 0.5rem; @@ -266,7 +266,7 @@ div.empty-place { } .no-pong { - color: var(--place-bottom-banner-color); + color: var(--place-bottom-banner-color, var(--text-primary)); font-size: 0.625rem; grid-area: no; margin-top: auto; diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx index 7a4fd1606c89..37487a6ff0d3 100644 --- a/client/src/ui/organisms/placement/index.tsx +++ b/client/src/ui/organisms/placement/index.tsx @@ -204,9 +204,7 @@ export function BottomBanner() { ["--place-bottom-banner-color", textColor], ].filter(([_, v]) => Boolean(v)) ); - return !placementData ? ( -
- ) : ( + return placementData ? ( - ); + ) : null; } export function PlacementInner({ From a572bbe713e76842af4a1fc3d5d34a3ded4bfea3 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Fri, 27 Oct 2023 10:08:12 +0200 Subject: [PATCH 8/9] Update libs/pong/pong.js Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com> --- libs/pong/pong.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/pong/pong.js b/libs/pong/pong.js index ade248299b65..9d74041c1ccd 100644 --- a/libs/pong/pong.js +++ b/libs/pong/pong.js @@ -47,9 +47,9 @@ export function createPongGetHandler(client, coder) { return [p, null]; } if ( - (p === "side") | - (p === "hpMain") | - (p === "hpFooter") | + (p === "side") || + (p === "hpMain") || + (p === "hpFooter") || (p === "bottom") ) { const [{ contents, clickUrl, impressionUrl }] = v; From 4056c57945573edd003b9854c1f6112e52a19416 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Fri, 27 Oct 2023 10:11:44 +0200 Subject: [PATCH 9/9] lint --- libs/pong/pong.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/pong/pong.js b/libs/pong/pong.js index 9d74041c1ccd..7417f91fc8d9 100644 --- a/libs/pong/pong.js +++ b/libs/pong/pong.js @@ -47,10 +47,10 @@ export function createPongGetHandler(client, coder) { return [p, null]; } if ( - (p === "side") || - (p === "hpMain") || - (p === "hpFooter") || - (p === "bottom") + p === "side" || + p === "hpMain" || + p === "hpFooter" || + p === "bottom" ) { const [{ contents, clickUrl, impressionUrl }] = v; const { colors } = contents?.[0]?.data?.customData || {};