npm - @julioventura/opensquad - Versions diffs - 0.1.17 - Mend

@julioventura/opensquad 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (247) hide show

package/skills/image-creator/editorial-slide-template.js ADDED Viewed

@@ -0,0 +1,645 @@
+function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+function escapeAttribute(value) {
+  return escapeHtml(value);
+}
+function sanitizeChannelValue(value) {
+  const text = String(value ?? '').trim();
+  return text ? text : null;
+}
+function createChannelEntry(label, value) {
+  const sanitizedValue = sanitizeChannelValue(value);
+  if (!sanitizedValue) {
+    return null;
+  }
+  return { label, value: sanitizedValue };
+}
+export function normalizeEditorialCommunicationChannels(rawChannels = {}) {
+  if (Array.isArray(rawChannels)) {
+    return rawChannels
+      .map((channel) => {
+        if (!channel || typeof channel !== 'object') {
+          return null;
+        }
+        return createChannelEntry(channel.label, channel.value);
+      })
+      .filter(Boolean);
+  }
+  const prioritizedEntries = [
+    createChannelEntry('Site', rawChannels.website),
+    createChannelEntry('Instagram', rawChannels.instagram),
+    createChannelEntry('Facebook', rawChannels.facebook),
+    createChannelEntry('YouTube', rawChannels.youtube),
+    createChannelEntry('LinkedIn', rawChannels.linkedin),
+    createChannelEntry('X', rawChannels.x),
+    createChannelEntry('Email', rawChannels.email),
+    createChannelEntry('WhatsApp', rawChannels.whatsapp),
+  ].filter(Boolean);
+  const seen = new Set();
+  return prioritizedEntries.filter((entry) => {
+    const key = `${entry.label.toLowerCase()}::${entry.value.toLowerCase()}`;
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+}
+function estimateVisualUnits(text) {
+  return Array.from(String(text ?? '')).reduce((total, char) => {
+    if (/[WMQGOD@#%&8B]/.test(char)) return total + 1.18;
+    if (/[A-Z]/.test(char)) return total + 1.02;
+    if (/[a-z0-9]/.test(char)) return total + 0.88;
+    if (/[ijlrtf\.]/.test(char)) return total + 0.48;
+    if (/[\s_-]/.test(char)) return total + 0.36;
+    return total + 0.74;
+  }, 0);
+}
+export function fitEditorialProjectTitle(title) {
+  const safeTitle = String(title ?? '').trim() || 'Projeto';
+  const units = Math.max(estimateVisualUnits(safeTitle), 8);
+  const longestToken = safeTitle.split(/\s+/).reduce((longest, token) => Math.max(longest, token.length), 0);
+  const rawFontSize = 1900 / units;
+  const tokenConstrainedSize = 1600 / Math.max(longestToken, 8);
+  const fontSize = Math.max(84, Math.min(140, Math.round(Math.min(rawFontSize, tokenConstrainedSize))));
+  const lineHeight = fontSize >= 126 ? 0.9 : fontSize >= 110 ? 0.93 : 0.96;
+  const maxWidth = longestToken >= 16 ? 820 : 860;
+  return { fontSize, lineHeight, maxWidth };
+}
+export function createEditorialOpeningSlideHtml({
+  projectName,
+  date,
+  deck = 'RADAR EDITORIAL PARA ARTISTAS, SELOS E EQUIPES DE LANÇAMENTO.',
+  supportText = 'Diariamente uma notícia que importa para VOCÊ.',
+  footerLabel = 'edição diária',
+  brandLabel,
+  slideCounter = '1/6',
+}) {
+  const fittedTitle = fitEditorialProjectTitle(projectName);
+  const safeProjectName = escapeHtml(projectName);
+  const safeDate = escapeHtml(date);
+  const safeDeck = escapeHtml(deck);
+  const safeSupportText = escapeHtml(supportText);
+  const safeFooterLabel = escapeHtml(footerLabel);
+  const safeBrandLabel = escapeHtml(brandLabel || projectName);
+  const safeSlideCounter = escapeHtml(slideCounter);
+  return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      width: 1080px;
+      height: 1080px;
+      overflow: hidden;
+      background:
+        linear-gradient(115deg, rgba(0, 209, 199, 0.08), transparent 34%),
+        radial-gradient(circle at 82% 76%, rgba(0, 209, 199, 0.08), transparent 20%),
+        linear-gradient(180deg, #0b1017 0%, #0f1620 58%, #111c28 100%);
+      color: #f5f7fa;
+      font-family: "Arial Nova", Arial, sans-serif;
+      padding: 72px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: relative;
+    }
+    body::after {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      pointer-events: none;
+    }
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+      position: relative;
+      z-index: 1;
+    }
+    .grid {
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(245,247,250,0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(245,247,250,0.025) 1px, transparent 1px);
+      background-size: 48px 48px;
+      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 75%);
+      pointer-events: none;
+    }
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      background: transparent;
+      color: #dffcf7;
+      border-radius: 999px;
+      border: 1px solid rgba(0, 209, 199, 0.45);
+      padding: 12px 20px;
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+    .dateStamp {
+      font-size: 24px;
+      font-weight: 700;
+      color: rgba(245, 247, 250, 0.92);
+      letter-spacing: 0.08em;
+      border-bottom: 2px solid rgba(0, 209, 199, 0.5);
+      padding-bottom: 10px;
+    }
+    .titleWrap {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      max-width: 900px;
+      position: relative;
+      z-index: 1;
+    }
+    .project {
+      font-size: ${fittedTitle.fontSize}px;
+      font-weight: 900;
+      line-height: ${fittedTitle.lineHeight};
+      letter-spacing: -0.05em;
+      color: #00d1c7;
+      font-family: Georgia, "Times New Roman", serif;
+      max-width: ${fittedTitle.maxWidth}px;
+      text-wrap: balance;
+      overflow-wrap: normal;
+      word-break: normal;
+    }
+    .subtitle {
+      display: grid;
+      grid-template-columns: 14px 1fr;
+      gap: 18px;
+      max-width: 760px;
+      align-items: start;
+    }
+    .subtitleBar {
+      width: 14px;
+      height: 100%;
+      min-height: 90px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, #00d1c7 0%, rgba(0, 209, 199, 0.15) 100%);
+    }
+    .subtitleText {
+      font-size: 36px;
+      line-height: 1.22;
+      color: #d7dde8;
+      max-width: 700px;
+      text-wrap: balance;
+    }
+    .footerSection {
+      border-top: 1px solid rgba(184, 194, 207, 0.18);
+      padding-top: 26px;
+      position: relative;
+      z-index: 1;
+    }
+    .footer {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 24px;
+      align-items: end;
+    }
+    .footerMeta {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      min-width: 0;
+    }
+    .deck {
+      max-width: 330px;
+      font-size: 20px;
+      line-height: 1.3;
+      color: rgba(245, 247, 250, 0.58);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+    }
+    .logo {
+      color: rgba(245, 247, 250, 0.62);
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      min-width: 0;
+    }
+    .logo::before {
+      content: "${safeFooterLabel}";
+      display: inline-block;
+      font-size: 15px;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: rgba(0, 209, 199, 0.9);
+    }
+    .brandName {
+      color: rgba(245, 247, 250, 0.62);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .counter {
+      color: #00d1c7;
+      font-weight: 700;
+      font-size: 30px;
+      letter-spacing: 0.04em;
+      align-self: end;
+    }
+  </style>
+</head>
+<body>
+  <div class="grid"></div>
+  <div class="topbar">
+    <div class="pill">NOTÍCIAS DO DIA</div>
+    <div class="dateStamp">${safeDate}</div>
+  </div>
+  <div class="titleWrap">
+    <div class="project">${safeProjectName}</div>
+    <div class="subtitle">
+      <div class="subtitleBar"></div>
+      <div class="subtitleText">${safeSupportText}</div>
+    </div>
+  </div>
+  <div class="footerSection">
+    <div class="footer">
+      <div class="footerMeta">
+        <div class="deck">${safeDeck}</div>
+        <div class="logo"><span class="brandName">${safeBrandLabel}</span></div>
+      </div>
+      <div class="counter">${safeSlideCounter}</div>
+    </div>
+  </div>
+</body>
+</html>`;
+}
+export function createEditorialClosingSlideHtml({
+  projectName,
+  title = 'Continue a leitura pelas fontes originais.',
+  intro = '',
+  sources = [],
+  primarySourceName,
+  primarySourceUrl,
+  qrMarkup = '',
+  communicationChannels = [],
+  showCommunicationChannels = false,
+  slideCounter = '6/6',
+}) {
+  const safeProjectName = escapeHtml(projectName);
+  const safeTitle = escapeHtml(title);
+  const safeIntro = escapeHtml(intro);
+  const safePrimarySourceName = escapeHtml(primarySourceName || '');
+  const safePrimarySourceUrl = escapeHtml(primarySourceUrl || '');
+  const safeSlideCounter = escapeHtml(slideCounter);
+  const normalizedChannels = normalizeEditorialCommunicationChannels(communicationChannels);
+  const visibleChannels = normalizedChannels.slice(0, 5);
+  const extraChannelsCount = Math.max(normalizedChannels.length - visibleChannels.length, 0);
+  const introMarkup = safeIntro
+    ? `<div class="intro"><div>${safeIntro}</div></div>`
+    : '';
+  const renderedSources = sources.map((source) => `
+      <div class="sourceItem">
+        <div class="sourceLabel">${escapeHtml(source.label)}</div>
+        <div class="sourceUrl">${escapeHtml(source.url)}</div>
+      </div>`).join('');
+  const channelsMarkup = showCommunicationChannels && visibleChannels.length
+    ? `
+    <div class="channelsSection">
+      <div class="channelsHeader">OUTROS CANAIS</div>
+      <div class="channelGrid">${visibleChannels.map((channel) => `
+        <div class="channelCard">
+          <div class="channelLabel">${escapeHtml(channel.label)}</div>
+          <div class="channelValue">${escapeHtml(channel.value)}</div>
+        </div>`).join('')}${extraChannelsCount > 0 ? `
+        <div class="channelCard channelCardMuted">
+          <div class="channelLabel">Rede extra</div>
+          <div class="channelValue">+${extraChannelsCount} canal${extraChannelsCount > 1 ? 'is' : ''}</div>
+        </div>` : ''}
+      </div>
+    </div>`
+    : '';
+  const primarySourceCardLabel = safePrimarySourceUrl ? 'LINK DIRETO' : 'LINKS NA DESCRICAO';
+  const primarySourceCardValue = safePrimarySourceUrl || 'Abra a descricao para acessar a fonte principal.';
+  const qrContentMarkup = qrMarkup
+    ? `<div class="qrGraphic" aria-hidden="true">${qrMarkup}</div>`
+    : `<div class="qrFallback">${primarySourceCardLabel}</div>`;
+  return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      width: 1080px;
+      height: 1080px;
+      overflow: hidden;
+      background:
+        linear-gradient(120deg, rgba(0, 209, 199, 0.07), transparent 36%),
+        radial-gradient(circle at 78% 16%, rgba(0, 209, 199, 0.11), transparent 22%),
+        linear-gradient(180deg, #0c1118 0%, #111925 60%, #0d1118 100%);
+      color: #f5f7fa;
+      font-family: "Arial Nova", Arial, sans-serif;
+      padding: 72px;
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr) auto;
+      gap: 18px;
+      position: relative;
+    }
+    body::after {
+      content: "";
+      position: absolute;
+      inset: 18px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      pointer-events: none;
+    }
+    .eyebrow {
+      color: #00d1c7;
+      font-size: 24px;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      position: relative;
+      z-index: 1;
+    }
+    .contentArea {
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      gap: 34px;
+      position: relative;
+      z-index: 1;
+    }
+    .titleBlock {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      max-width: 730px;
+    }
+    .title {
+      font-size: 62px;
+      line-height: 0.96;
+      font-weight: 900;
+      max-width: 730px;
+      letter-spacing: -0.04em;
+      font-family: Georgia, "Times New Roman", serif;
+      text-wrap: balance;
+      color: #00d1c7;
+    }
+    .intro {
+      display: block;
+      font-size: 21px;
+      line-height: 1.34;
+      color: #c7d0db;
+      max-width: 790px;
+      position: relative;
+      z-index: 1;
+    }
+    .sources {
+      display: grid;
+      grid-template-columns: 1fr 280px;
+      gap: 28px;
+      align-items: center;
+    }
+    .sourceList {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding-top: 4px;
+    }
+    .sourcesHeader {
+      font-size: 16px;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: rgba(0, 209, 199, 0.88);
+      margin-bottom: 10px;
+    }
+    .sourcesFooter {
+      margin-top: 10px;
+      font-size: 15px;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: rgba(245, 247, 250, 0.56);
+    }
+    .sourceItem {
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-left: 4px solid rgba(0, 209, 199, 0.75);
+      border-radius: 22px;
+      padding: 14px 18px 14px 16px;
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.025) 100%);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    }
+    .sourceLabel {
+      font-size: 24px;
+      font-weight: 700;
+      color: #f5f7fa;
+      margin-bottom: 4px;
+    }
+    .sourceUrl {
+      font-size: 18px;
+      line-height: 1.3;
+      color: #b8c2cf;
+      word-break: break-word;
+    }
+    .channelsSection {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      max-width: 860px;
+    }
+    .channelsHeader {
+      font-size: 16px;
+      font-weight: 800;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: rgba(0, 209, 199, 0.88);
+    }
+    .channelGrid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+    .channelCard {
+      min-width: 0;
+      max-width: calc(50% - 6px);
+      flex: 1 1 250px;
+      border-radius: 20px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
+      padding: 12px 16px 13px;
+    }
+    .channelCardMuted {
+      border-style: dashed;
+      background: rgba(255, 255, 255, 0.025);
+    }
+    .channelLabel {
+      font-size: 13px;
+      font-weight: 800;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      color: rgba(0, 209, 199, 0.9);
+      margin-bottom: 6px;
+    }
+    .channelValue {
+      font-size: 20px;
+      line-height: 1.22;
+      font-weight: 700;
+      color: #f5f7fa;
+      word-break: break-word;
+    }
+    .qrWrap {
+      background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(232, 238, 244, 0.96) 100%);
+      border-radius: 24px;
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      align-items: stretch;
+      color: #10141c;
+      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
+    }
+    .qrFallback {
+      min-height: 220px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      text-align: center;
+      font-size: 28px;
+      font-weight: 900;
+      letter-spacing: 0.12em;
+      background:
+        linear-gradient(135deg, rgba(0, 209, 199, 0.18) 0%, rgba(0, 209, 199, 0.04) 100%),
+        repeating-linear-gradient(
+          45deg,
+          rgba(16, 20, 28, 0.08) 0,
+          rgba(16, 20, 28, 0.08) 10px,
+          rgba(255, 255, 255, 0.18) 10px,
+          rgba(255, 255, 255, 0.18) 20px
+        );
+      border-radius: 16px;
+    }
+    .qrGraphic {
+      min-height: 220px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ffffff;
+      padding: 12px;
+    }
+    .qrGraphic svg {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-width: 220px;
+      max-height: 220px;
+    }
+    .qrWrap span {
+      font-size: 16px;
+      font-weight: 700;
+      text-align: center;
+      line-height: 1.25;
+    }
+    .qrUrl {
+      font-size: 16px;
+      line-height: 1.3;
+      font-weight: 700;
+      color: rgba(16, 20, 28, 0.78);
+      word-break: break-word;
+      text-align: center;
+    }
+    .footerSection {
+      border-top: 1px solid rgba(184, 194, 207, 0.18);
+      padding-top: 26px;
+      position: relative;
+      z-index: 1;
+    }
+    .projectBand {
+      align-self: stretch;
+      min-height: 168px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 24px;
+    }
+    .projectMeta {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+    .projectName {
+      font-size: 72px;
+      line-height: 0.96;
+      font-weight: 900;
+      color: rgba(0, 209, 199, 0.9);
+      letter-spacing: -0.05em;
+      font-family: Georgia, "Times New Roman", serif;
+    }
+    .counter {
+      font-size: 30px;
+      color: #00d1c7;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      padding-bottom: 10px;
+    }
+  </style>
+</head>
+<body>
+  <div class="eyebrow">SAIBA MAIS...</div>
+  <div class="contentArea">
+    <div class="titleBlock">
+      <div class="title">${safeTitle}</div>
+      ${introMarkup}
+    </div>
+    <div class="sources">
+      <div class="sourceList">
+        <div class="sourcesHeader">FONTES VERIFICADAS</div>${renderedSources}
+        <div class="sourcesFooter">LINKS NA DESCRIÇÃO</div>
+      </div>
+      <div class="qrWrap">
+        ${qrContentMarkup}
+        <span>Fonte principal<br />${safePrimarySourceName}</span>
+        <div class="qrUrl">${primarySourceCardValue}</div>
+      </div>
+    </div>
+    ${channelsMarkup}
+  </div>
+  <div class="footerSection">
+    <div class="projectBand">
+      <div class="projectMeta">
+        <div class="projectName">${safeProjectName}</div>
+      </div>
+      <div class="counter">${safeSlideCounter}</div>
+    </div>
+  </div>
+</body>
+</html>`;
+}