@lacspace/og 1.0.1 → 1.1.1

package/dist/index.js

@@ -298,7 +298,515 @@ function ogSvg(options) {
 function ogSvgDataUri(options) {
   return `data:image/svg+xml;utf8,${encodeURIComponent(ogSvg(options))}`;
 }
+var ogThemes = {
+  lacspace: { from: "#22d3ee", to: "#6366f1" },
+  ocean: { from: "#0ea5e9", to: "#2563eb" },
+  sunset: { from: "#f43f5e", to: "#f59e0b" },
+  forest: { from: "#10b981", to: "#065f46" },
+  grape: { from: "#a855f7", to: "#6366f1" },
+  slate: { from: "#94a3b8", to: "#1e293b" }
+};
+function withGradient(o) {
+  if (o.gradient && ogThemes[o.gradient]) {
+    const g = ogThemes[o.gradient];
+    return { ...o, from: o.from ?? g.from, to: o.to ?? g.to };
+  }
+  return o;
+}
+function glowLayer(r, p) {
+  return el("div", {
+    position: "absolute",
+    top: `-${Math.round(r.height * 0.35)}px`,
+    right: `-${Math.round(r.width * 0.18)}px`,
+    width: `${Math.round(r.width * 0.55)}px`,
+    height: `${Math.round(r.width * 0.55)}px`,
+    borderRadius: "9999px",
+    background: `linear-gradient(135deg, ${p.from}, ${p.to})`,
+    opacity: r.theme === "dark" ? "0.22" : "0.16",
+    filter: "blur(20px)"
+  });
+}
+function patternLayer(kind, r, p, over = "ground") {
+  const k = kind ?? "none";
+  if (k === "none") return null;
+  if (k === "glow") {
+    if (over === "gradient") {
+      return el("div", {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "radial-gradient(circle at 82% 12%, rgba(255,255,255,0.28), transparent 55%)"
+      });
+    }
+    return glowLayer(r, p);
+  }
+  const dot = over === "gradient" ? "rgba(255,255,255,0.16)" : r.theme === "dark" ? "rgba(255,255,255,0.10)" : "rgba(10,10,15,0.08)";
+  return el("div", {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    backgroundImage: `radial-gradient(${dot} 2px, transparent 2px)`,
+    backgroundSize: "44px 44px"
+  });
+}
+function eyebrowNode(text, color) {
+  return el(
+    "div",
+    {
+      display: "flex",
+      fontSize: "26px",
+      fontWeight: 600,
+      letterSpacing: "0.12em",
+      textTransform: "uppercase",
+      color
+    },
+    text.toUpperCase()
+  );
+}
+function badgeNode(text, p) {
+  return el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      padding: "8px 20px",
+      borderRadius: "9999px",
+      fontSize: "24px",
+      fontWeight: 700,
+      color: p.fg,
+      background: `linear-gradient(90deg, ${p.from}33, ${p.to}33)`,
+      border: `1px solid ${p.border}`
+    },
+    text
+  );
+}
+function ogCardSplit(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.065);
+  const titleSize = fitFontSize(r.title, { max: 68, min: 40 });
+  const leftChildren = [];
+  if (r.eyebrow) leftChildren.push(eyebrowNode(r.eyebrow, p.from));
+  leftChildren.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.05,
+        letterSpacing: "-0.02em",
+        color: p.fg
+      },
+      r.title
+    )
+  );
+  if (r.subtitle) {
+    leftChildren.push(
+      el(
+        "div",
+        { display: "flex", fontSize: "32px", fontWeight: 500, color: p.muted },
+        r.subtitle
+      )
+    );
+  }
+  if (r.badge) leftChildren.push(badgeNode(r.badge, p));
+  const left = el(
+    "div",
+    {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "24px",
+      width: "62%",
+      height: "100%",
+      padding: `${pad}px`
+    },
+    leftChildren
+  );
+  const mark = r.logo ?? (r.title.trim().charAt(0).toUpperCase() || "\u2022");
+  const right = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "38%",
+      height: "100%",
+      background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+    },
+    [
+      el(
+        "div",
+        { display: "flex", fontSize: "220px", fontWeight: 800, color: "#0a0a0f" },
+        mark
+      )
+    ]
+  );
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(left, right);
+  if (r.footer) {
+    children.push(
+      el(
+        "div",
+        {
+          position: "absolute",
+          bottom: `${Math.round(pad * 0.7)}px`,
+          left: `${pad}px`,
+          display: "flex",
+          fontSize: "26px",
+          fontWeight: 500,
+          color: p.muted
+        },
+        r.footer
+      )
+    );
+  }
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
+      height: "100%",
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function ogCardMinimal(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.09);
+  const titleSize = fitFontSize(r.title, { max: 96, min: 52 });
+  const center = [];
+  if (r.eyebrow) {
+    center.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          fontSize: "28px",
+          fontWeight: 600,
+          letterSpacing: "0.16em",
+          textTransform: "uppercase",
+          color: "rgba(255,255,255,0.85)"
+        },
+        r.eyebrow.toUpperCase()
+      )
+    );
+  }
+  center.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.04,
+        letterSpacing: "-0.02em",
+        color: "#ffffff",
+        textAlign: "center"
+      },
+      r.title
+    )
+  );
+  if (r.subtitle) {
+    center.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          fontSize: "34px",
+          fontWeight: 500,
+          color: "rgba(255,255,255,0.82)",
+          textAlign: "center"
+        },
+        r.subtitle
+      )
+    );
+  }
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p, "gradient");
+  if (pat) children.push(pat);
+  children.push(
+    el(
+      "div",
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "28px",
+        width: "100%",
+        height: "100%",
+        padding: `${pad}px`
+      },
+      center
+    )
+  );
+  if (r.footer) {
+    children.push(
+      el(
+        "div",
+        {
+          position: "absolute",
+          bottom: `${Math.round(r.height * 0.06)}px`,
+          left: "0",
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          fontSize: "26px",
+          fontWeight: 500,
+          color: "rgba(255,255,255,0.78)"
+        },
+        r.footer
+      )
+    );
+  }
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(135deg, ${p.from}, ${p.to})`,
+      color: "#ffffff",
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function metaDot(color) {
+  return el(
+    "div",
+    { display: "flex", fontSize: "26px", color, opacity: "0.6" },
+    "\xB7"
+  );
+}
+function ogArticle(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.075);
+  const titleSize = fitFontSize(r.title, { max: 74, min: 40 });
+  const accentBar = el("div", {
+    position: "absolute",
+    top: "0",
+    left: "0",
+    width: "100%",
+    height: `${Math.round(r.height * 0.02)}px`,
+    background: `linear-gradient(90deg, ${p.from}, ${p.to})`
+  });
+  const header = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    [
+      r.eyebrow ? eyebrowNode(r.eyebrow, p.from) : el("div", { display: "flex" }, ""),
+      r.logo ? el(
+        "div",
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "72px",
+          height: "72px",
+          borderRadius: "18px",
+          fontSize: "38px",
+          fontWeight: 800,
+          color: "#0a0a0f",
+          background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+        },
+        r.logo
+      ) : el("div", { display: "flex" }, "")
+    ]
+  );
+  const title = el(
+    "div",
+    {
+      display: "flex",
+      fontSize: `${titleSize}px`,
+      fontWeight: 800,
+      lineHeight: 1.06,
+      letterSpacing: "-0.02em",
+      color: p.fg
+    },
+    r.title
+  );
+  const metaItems = [];
+  if (options.author) {
+    metaItems.push(
+      el(
+        "div",
+        { display: "flex", fontSize: "28px", fontWeight: 700, color: p.fg },
+        options.author
+      )
+    );
+  }
+  const muted = (t) => el(
+    "div",
+    { display: "flex", fontSize: "26px", fontWeight: 500, color: p.muted },
+    t
+  );
+  if (options.date) {
+    if (metaItems.length) metaItems.push(metaDot(p.muted));
+    metaItems.push(muted(options.date));
+  }
+  if (options.readingTime) {
+    if (metaItems.length) metaItems.push(metaDot(p.muted));
+    metaItems.push(muted(options.readingTime));
+  }
+  const footerRow = metaItems.length ? el(
+    "div",
+    { display: "flex", alignItems: "center", gap: "16px" },
+    metaItems
+  ) : r.footer ? muted(r.footer) : el("div", { display: "flex" }, "");
+  const children = [accentBar];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(
+    header,
+    el("div", { display: "flex", flexDirection: "column" }, [title]),
+    footerRow
+  );
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      padding: `${pad}px`,
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
+function ogProduct(options) {
+  const r = resolve(withGradient(options));
+  const p = palette(r);
+  const pad = Math.round(r.width * 0.075);
+  const titleSize = fitFontSize(r.title, { max: 76, min: 42 });
+  const header = el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%"
+    },
+    [
+      r.badge ? badgeNode(r.badge, p) : el("div", { display: "flex" }, ""),
+      r.logo ? el(
+        "div",
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "76px",
+          height: "76px",
+          borderRadius: "20px",
+          fontSize: "40px",
+          fontWeight: 800,
+          color: "#0a0a0f",
+          background: `linear-gradient(135deg, ${p.from}, ${p.to})`
+        },
+        r.logo
+      ) : el("div", { display: "flex" }, "")
+    ]
+  );
+  const body = [
+    el(
+      "div",
+      {
+        display: "flex",
+        fontSize: `${titleSize}px`,
+        fontWeight: 800,
+        lineHeight: 1.05,
+        letterSpacing: "-0.02em",
+        color: p.fg
+      },
+      r.title
+    )
+  ];
+  if (r.subtitle) {
+    body.push(
+      el(
+        "div",
+        {
+          display: "flex",
+          marginTop: "22px",
+          fontSize: "32px",
+          fontWeight: 500,
+          color: p.muted
+        },
+        r.subtitle
+      )
+    );
+  }
+  const priceStr = options.price === void 0 || options.price === null ? void 0 : `${options.currency ?? ""}${options.price}`;
+  const priceNode = priceStr ? el(
+    "div",
+    {
+      display: "flex",
+      alignItems: "center",
+      fontSize: "88px",
+      fontWeight: 800,
+      letterSpacing: "-0.02em",
+      background: `linear-gradient(90deg, ${p.from}, ${p.to})`,
+      backgroundClip: "text",
+      color: "transparent"
+    },
+    priceStr
+  ) : r.footer ? el(
+    "div",
+    { display: "flex", fontSize: "26px", fontWeight: 500, color: p.muted },
+    r.footer
+  ) : el("div", { display: "flex" }, "");
+  const children = [];
+  const pat = patternLayer(options.pattern, r, p);
+  if (pat) children.push(pat);
+  children.push(
+    header,
+    el("div", { display: "flex", flexDirection: "column" }, body),
+    priceNode
+  );
+  return el(
+    "div",
+    {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%",
+      padding: `${pad}px`,
+      background: p.bg,
+      color: p.fg,
+      fontFamily: "sans-serif"
+    },
+    children
+  );
+}
 
-export { fitFontSize, ogCard, ogSvg, ogSvgDataUri };
+export { fitFontSize, ogArticle, ogCard, ogCardMinimal, ogCardSplit, ogProduct, ogSvg, ogSvgDataUri, ogThemes };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map