@konvert7/promoot 0.2.1 → 0.3.0

package/README.md

@@ -16,6 +16,17 @@ import { PromootBlock } from "@konvert7/promoot";
 The `url` is the embed URL from your Promoot dashboard — the same string the iframe
 snippet uses, so one value serves either method.
 
+## What it renders
+
+Whatever the sponsor bought, without you choosing:
+
+- **An image ad** — their artwork, cropped to fill the slot.
+- **A text ad** — their favicon, a headline, a description and their domain, centred.
+  Headline and description are both optional; a link on its own renders the mark and
+  the bare domain. If no favicon could be captured, a monogram of the domain's first
+  letter is shown instead — never both, so a transparent icon can't show the letter
+  through it.
+
 ## Why inline
 
 An iframe fails closed. If a content filter ever blocks the frame, your sponsor's ad

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { PromootBlock, type PromootBlockProps } from "./promoot-block.js";
-export type { BlockPayload, BlockRender } from "./types.js";
+export type { BlockPayload, BlockRender, Creative } from "./types.js";

package/dist/promoot-block.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function blockEndpoint(embedUrl) {
     return embedUrl.replace("/embed/", "/api/block/");
 }
@@ -21,7 +21,15 @@ export function scopedCss(payload) {
     return `${scope} { ${payload.paletteVars}; position: relative; display: block; width: 100%; max-width: ${payload.slot.widthPx}px; height: auto; max-height: ${payload.slot.heightPx}px; aspect-ratio: ${payload.slot.widthPx} / ${payload.slot.heightPx}; }
 ${scope} a { text-decoration: none; }
 ${scope} .promoot-ad { display: block; position: relative; height: 100%; width: 100%; }
-${scope} .promoot-ad img { display: block; height: 100%; width: 100%; object-fit: cover; }
+${scope} .promoot-ad > img { display: block; height: 100%; width: 100%; object-fit: cover; }
+${scope} .promoot-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; height: 100%; box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); overflow: hidden; text-align: center; font-family: system-ui, -apple-system, sans-serif; }
+${scope} .promoot-ad:hover .promoot-text { border-color: var(--edge-hover); background: var(--surface-hover); }
+${scope} .promoot-mark { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 1px; border-radius: 6px; background: var(--edge); color: var(--surface); font-weight: 700; font-size: 12px; overflow: hidden; }
+${scope} .promoot-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+${scope} .promoot-text > span:not(.promoot-mark) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+${scope} .promoot-text .promoot-headline { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25; }
+${scope} .promoot-text .promoot-desc { font-size: 12px; color: var(--muted); line-height: 1.25; }
+${scope} .promoot-text .promoot-host { font-size: 11px; color: var(--muted); line-height: 1.25; }
 ${scope} .promoot-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; height: 100%; justify-content: center; padding: 0 10px; text-align: center; border: 1px dashed var(--edge); border-radius: 10px; box-sizing: border-box; color: var(--muted); background: var(--surface); font-family: system-ui, -apple-system, sans-serif; }
 ${scope} .promoot-cta:hover { border-color: var(--edge-hover); background: var(--surface-hover); }
 ${scope} .promoot-cta strong { font-size: 14px; color: var(--ink); }
@@ -43,10 +51,22 @@ const labelStyle = {
     borderRadius: "4px",
     padding: "1px 5px",
 };
+// One or the other, never layered: a favicon with transparent corners would let
+// the monogram show through it, and a broken image painted over the letter
+// hides it anyway.
+function Mark({ creative }) {
+    return (_jsx("span", { className: "promoot-mark", children: creative.faviconUrl ? (_jsx("img", { src: creative.faviconUrl, alt: "" })) : (creative.monogram) }));
+}
+function AdCreative({ creative }) {
+    if (creative.kind === "IMAGE") {
+        return _jsx("img", { src: creative.imageUrl, alt: creative.title });
+    }
+    return (_jsxs("span", { className: "promoot-text", children: [_jsx(Mark, { creative: creative }), creative.headline && _jsx("span", { className: "promoot-headline", children: creative.headline }), creative.body && _jsx("span", { className: "promoot-desc", children: creative.body }), _jsx("span", { className: "promoot-host", children: creative.host })] }));
+}
 export async function PromootBlock({ url, className, style, fallback = null, }) {
     const block = await loadBlock(url);
     if (!block || block.render === "blank") {
         return _jsx(_Fragment, { children: fallback });
     }
-    return (_jsxs("div", { "data-promoot-slot": block.slot.id, className: className, style: style, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: scopedCss(block) } }), block.ad && (_jsxs("a", { className: "promoot-ad", href: block.ad.clickUrl, target: "_blank", rel: "noopener nofollow sponsored", children: [_jsx("img", { src: block.ad.imageUrl, alt: block.ad.title }), block.slot.sponsoredLabel && (_jsx("span", { style: labelStyle, children: block.slot.sponsoredLabel }))] })), block.pitch && (_jsxs("a", { className: "promoot-cta", href: block.pitch.purchaseUrl, target: "_blank", rel: "noopener", children: [_jsx("strong", { children: block.pitch.headline }), block.pitch.pitch && _jsx("span", { className: "promoot-pitch", children: block.pitch.pitch }), block.pitch.proof && _jsx("span", { className: "promoot-proof", children: block.pitch.proof }), _jsx("span", { className: "promoot-terms", children: block.pitch.terms })] })), _jsx("img", { className: "promoot-beacon", src: block.beaconUrl, width: 1, height: 1, alt: "", "aria-hidden": "true" })] }));
+    return (_jsxs("div", { "data-promoot-slot": block.slot.id, className: className, style: style, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: scopedCss(block) } }), block.ad && (_jsxs("a", { className: "promoot-ad", href: block.ad.clickUrl, target: "_blank", rel: "noopener nofollow sponsored", children: [_jsx(AdCreative, { creative: block.ad }), block.slot.sponsoredLabel && (_jsx("span", { style: labelStyle, children: block.slot.sponsoredLabel }))] })), block.pitch && (_jsxs("a", { className: "promoot-cta", href: block.pitch.purchaseUrl, target: "_blank", rel: "noopener", children: [_jsx("strong", { children: block.pitch.headline }), block.pitch.pitch && _jsx("span", { className: "promoot-pitch", children: block.pitch.pitch }), block.pitch.proof && _jsx("span", { className: "promoot-proof", children: block.pitch.proof }), _jsx("span", { className: "promoot-terms", children: block.pitch.terms })] })), _jsx("img", { className: "promoot-beacon", src: block.beaconUrl, width: 1, height: 1, alt: "", "aria-hidden": "true" })] }));
 }

package/dist/types.d.ts

@@ -1,4 +1,19 @@
 export type BlockRender = "ad" | "pitch" | "blank";
+/** An ad is either artwork the sponsor uploaded, or words they wrote. */
+export type Creative = {
+    kind: "IMAGE";
+    title: string;
+    imageUrl: string;
+} | {
+    kind: "TEXT";
+    /** Optional: a link alone is a complete ad, and the host stands in. */
+    headline: string | null;
+    body: string | null;
+    /** Null when the sponsor's site has none, or it could not be captured. */
+    faviconUrl: string | null;
+    host: string;
+    monogram: string;
+};
 /** What GET /api/block/:slotId answers with. */
 export type BlockPayload = {
     slot: {
@@ -8,12 +23,10 @@ export type BlockPayload = {
         sponsoredLabel: string | null;
     };
     render: BlockRender;
-    ad: {
-        title: string;
-        imageUrl: string;
+    ad: ({
         clickUrl: string;
         expiresAt: string | null;
-    } | null;
+    } & Creative) | null;
     pitch: {
         headline: string;
         pitch: string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konvert7/promoot",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Render a Promoot sponsor slot inline as a React server component, with views counted by the visitor's own browser.",
   "type": "module",
   "main": "./dist/index.js",