From 95f9c26f7f558ae53e19b069032e130dc246a9b7 Mon Sep 17 00:00:00 2001 From: Florian Dieminger Date: Fri, 28 Jun 2024 16:16:05 +0200 Subject: [PATCH] feat(pong): new design experiment (#11367) * feat(pong): new design --- client/src/app.scss | 20 ++-- client/src/blog/post.scss | 1 + client/src/playground/index.scss | 44 ++++++++ client/src/ui/organisms/placement/index.scss | 100 +++++++++++++++++++ client/src/ui/organisms/placement/index.tsx | 89 ++++++++++++++++- libs/pong/pong2.js | 18 +++- libs/pong/types.d.ts | 1 + 7 files changed, 260 insertions(+), 13 deletions(-) diff --git a/client/src/app.scss b/client/src/app.scss index 892b879c5c18..f0e38641c4cf 100644 --- a/client/src/app.scss +++ b/client/src/app.scss @@ -208,17 +208,17 @@ pre { a { color: var(--text-link); +} - &.external:after { - background-color: var(--icon-primary); - content: ""; - display: inline-flex; - height: 10px; - margin-left: 4px; - mask-image: url("./assets/icons/external.svg"); - mask-size: cover; - width: 10px; - } +.external:after { + background-color: var(--icon-primary); + content: ""; + display: inline-flex; + height: 10px; + margin-left: 4px; + mask-image: url("./assets/icons/external.svg"); + mask-size: cover; + width: 10px; } button.button[disabled], diff --git a/client/src/blog/post.scss b/client/src/blog/post.scss index 6a6aad114601..6f4571a6039b 100644 --- a/client/src/blog/post.scss +++ b/client/src/blog/post.scss @@ -67,6 +67,7 @@ grid-area: place; margin-top: 0; + > .pong-box2, > .pong-box { margin-top: 2rem; } diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss index 6914555848d7..663f01493987 100644 --- a/client/src/playground/index.scss +++ b/client/src/playground/index.scss @@ -219,6 +219,7 @@ main.play { max-width: 20rem; min-height: 10rem; + .pong-box2, .pong-box { width: 100%; @@ -230,6 +231,49 @@ main.play { margin-top: 0; } } + + &.new-side { + height: 12rem; + max-width: 30rem; + min-height: 12rem; + + .pong-box2 { + height: 21rem; + min-height: 0; + width: 25rem; + + > div { + .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, + #111 16rem, + transparent + ); + flex-direction: column; + height: 100%; + justify-content: end; + padding-left: 8rem; + width: 100%; + } + } + } + } + } } } diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss index 5812dacfd326..a0ffec59cfa0 100644 --- a/client/src/ui/organisms/placement/index.scss +++ b/client/src/ui/organisms/placement/index.scss @@ -10,6 +10,102 @@ section.place { text-decoration: none; } + .pong-box2 { + --border-radius: 0.5rem; + border: 1px solid var(--border-primary); + border-radius: var(--border-radius); + margin: 0; + min-height: 20rem; + overflow: hidden; + position: relative; + width: 11rem; + + > div { + height: 100%; + width: 100%; + + .pong-note { + background-color: #fff6; + border-radius: 0.25rem; + color: #fff; + font-size: 0.625rem; + margin: 0.5rem; + padding: 0 0.25rem; + position: absolute; + right: 0; + text-decoration: none; + text-decoration: underline; + text-transform: uppercase; + top: 0; + width: max-content; + + &:hover { + background-color: #fff; + color: #111; + } + } + + .pong { + height: 100%; + width: 100%; + + > img { + height: auto; + width: 100%; + } + + > div.content { + background: linear-gradient(to top, #111 9rem, transparent); + border-radius: var(--border-radius); + color: #fff; + display: flex; + flex-direction: column; + gap: 0.25rem; + height: 100%; + justify-content: end; + position: absolute; + top: 0; + width: 100%; + + strong { + font-size: 0.8875rem; + line-height: 1.25; + padding: 0 1rem; + } + + span { + font-size: 0.75rem; + line-height: 1.25; + padding: 0 1rem; + } + + .pong-cta { + --color: #fff; + --icon-primary: var(--color); + background-color: #fff1; + border: solid 2px; + border-radius: 2rem; + color: var(--color); + font-size: 0.75rem; + font-weight: 600; + margin: 0.5rem auto 1rem 1rem; + padding: 0.5em 1em; + transition: all 0.3s ease-in-out; + + &::after { + transition: all 0.3s ease-in-out; + } + + &:hover { + --color: #111; + background-color: #fff; + } + } + } + } + } + } + .pong-box { background-color: var(--background-secondary); border: 1px solid var(--border-primary); @@ -82,6 +178,10 @@ section.place { min-height: 20rem; } + &.new-side { + min-height: 22rem; + } + &.top { align-items: center; display: grid; diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx index f05f723896b8..dae59bea1396 100644 --- a/client/src/ui/organisms/placement/index.tsx +++ b/client/src/ui/organisms/placement/index.tsx @@ -30,6 +30,7 @@ interface PlacementRenderArgs { style: object; version?: number; typ: string; + heading?: string; } const INTERSECTION_OPTIONS = { @@ -52,6 +53,16 @@ export function SidePlacement() { return !placementData?.side ? (
+ ) : placementData.side.cta ? ( + ) : ( {!isServer && @@ -293,6 +304,7 @@ export function PlacementInner({ style, version, typ, + heading, })} ); @@ -480,3 +492,78 @@ function RenderBottomBanner({ ); } + +function RenderNewSideBanner({ + place, + extraClassNames = [], + click, + image, + alt, + imageWidth, + imageHeight, + copy, + cta, + user, + style, + version = 1, + typ, + heading, +}: PlacementRenderArgs) { + return ( +
+

+

+ click ${typ}`} + href={`/pong/click?code=${encodeURIComponent( + click + )}&version=${version}`} + target="_blank" + rel="sponsored noreferrer" + > + {alt +
+ {heading} + {copy} + {cta && {cta}} +
+ + + Ad + +
+

+ + settings" : "pong->plus") + } + href={ + user?.isSubscriber + ? "/en-US/plus/settings?ref=nope" + : "/en-US/plus?ref=nope#subscribe" + } + > + Don't want to see ads? + +
+ ); +} diff --git a/libs/pong/pong2.js b/libs/pong/pong2.js index b48aa3c8bb73..41ac9e94b587 100644 --- a/libs/pong/pong2.js +++ b/libs/pong/pong2.js @@ -21,6 +21,7 @@ export function createPong2GetHandler(zoneKeys, coder) { )}${userAgent ? `&useragent=${encodeURIComponent(userAgent)}` : ""}` ) ).json(); + const { ads: [ { @@ -28,6 +29,7 @@ export function createPong2GetHandler(zoneKeys, coder) { statimp, Description, Image, + LargeImage, ImageTitle, BackgroundColor, BackgroundColorLight, @@ -40,6 +42,7 @@ export function createPong2GetHandler(zoneKeys, coder) { TextColor, TextColorLight, TextColorDark, + Heading, }, ] = [], } = res; @@ -51,10 +54,11 @@ export function createPong2GetHandler(zoneKeys, coder) { : { click: coder.encodeAndSign(statlink), view: coder.encodeAndSign(statimp), - image: coder.encodeAndSign(Image), + image: coder.encodeAndSign(LargeImage || Image), alt: ImageTitle && he.decode(ImageTitle), copy: Description && he.decode(Description), cta: CallToAction && he.decode(CallToAction), + heading: Heading && he.decode(Heading), colors: { textColor: TextColor || TextColorLight, backgroundColor: BackgroundColor || BackgroundColorLight, @@ -91,7 +95,16 @@ export function createPong2GetHandler(zoneKeys, coder) { if (v === null) { return null; } - const { copy, image, alt, click, view, cta, colors = {} } = v; + const { + copy, + image, + alt, + click, + view, + cta, + colors, + heading = {}, + } = v; return [ p, { @@ -103,6 +116,7 @@ export function createPong2GetHandler(zoneKeys, coder) { colors, click, view, + heading, version: 2, }, ]; diff --git a/libs/pong/types.d.ts b/libs/pong/types.d.ts index 56a4093a75ca..c9e4a98a6ca2 100644 --- a/libs/pong/types.d.ts +++ b/libs/pong/types.d.ts @@ -19,4 +19,5 @@ export type Payload = { cta?: string; colors?: Colors; version: number; + heading?: string; };