@templatical/renderer - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

dist/index.d.ts

 import { CustomFont, Block, ColumnLayout, SpacingValue, CustomBlock, TemplateContent } from '@templatical/types';
 
+declare const DEFAULT_SOCIAL_ICONS_BASE_URL: string;
 /**
@@ -17,2 +18,10 @@ * Immutable context passed through the block rendering chain.
     readonly customBlockHtml: ReadonlyMap<string, string>;
+    /**
+     * Base URL (no trailing slash) for the social icon PNG assets. Resolved to
+     * `${baseUrl}/${style}/${platform}.png`. Outlook desktop has no SVG support
+     * and rejects base64 data URIs in `<img src>`, so PNGs must be served over
+     * HTTP. Default points at the version-pinned unpkg mirror of this
+     * package; consumers can override to self-host.
+     */
+    readonly socialIconsBaseUrl: string;
     constructor(containerWidth: number, customFonts: CustomFont[], defaultFallbackFont: string, allowHtmlBlocks: boolean, 
@@ -24,4 +33,12 @@ /**
      */
-    customBlockHtml?: ReadonlyMap<string, string>);
+    customBlockHtml?: ReadonlyMap<string, string>, 
     /**
+     * Base URL (no trailing slash) for the social icon PNG assets. Resolved to
+     * `${baseUrl}/${style}/${platform}.png`. Outlook desktop has no SVG support
+     * and rejects base64 data URIs in `<img src>`, so PNGs must be served over
+     * HTTP. Default points at the version-pinned unpkg mirror of this
+     * package; consumers can override to self-host.
+     */
+    socialIconsBaseUrl?: string);
+    /**
      * Create a new context with a different container width.
@@ -85,15 +102,2 @@ * Used when rendering columns with narrower widths.
 /**
- * Social icon SVG path data and brand colors for all supported platforms.
- */
-declare const SOCIAL_ICONS: Record<string, {
-    path: string;
-    color: string;
-}>;
-/**
- * Generate a base64-encoded SVG data URI for a social icon.
- * Ported from SocialIconSvgGenerator.php.
- */
-declare function generateSocialIconDataUri(platform: string, style: string, size: number): string;
-
-/**
  * Render a single block to MJML markup.
@@ -128,2 +132,13 @@ * Dispatches to the appropriate block-type renderer.
     renderCustomBlock?: (block: CustomBlock) => Promise<string>;
+    /**
+     * Base URL (no trailing slash) for the social icon PNG assets. Resolved to
+     * `${baseUrl}/${style}/${platform}.png` per icon. Defaults to the
+     * version-pinned unpkg mirror of this package. Override to self-host
+     * (e.g., behind your own CDN or for air-gapped environments).
+     *
+     * Why PNGs: Outlook desktop (Word rendering engine) does not support SVG
+     * and rejects base64 data URIs in `<img src>`, so social icons must be
+     * served as raster images over HTTP for cross-client compatibility.
+     */
+    socialIconsBaseUrl?: string;
 }
@@ -141,2 +156,2 @@ /**
 
-export { type BlockRenderer, RenderContext, type RenderOptions, SOCIAL_ICONS, convertMergeTagsToValues, escapeAttr, escapeHtml, generateSocialIconDataUri, getCssClassAttr, getCssClasses, getWidthPercentages, getWidthPixels, isHiddenOnAll, renderBlock, renderToMjml, toPaddingString };
+export { type BlockRenderer, DEFAULT_SOCIAL_ICONS_BASE_URL, RenderContext, type RenderOptions, convertMergeTagsToValues, escapeAttr, escapeHtml, getCssClassAttr, getCssClasses, getWidthPercentages, getWidthPixels, isHiddenOnAll, renderBlock, renderToMjml, toPaddingString };

dist/index.js

 // src/index.ts
 import { isSection as isSection3, isCustomBlock as isCustomBlock2 } from "@templatical/types";
 
+// package.json
+var package_default = {
+  name: "@templatical/renderer",
+  description: "Render Templatical email templates to MJML",
+  version: "0.7.1",
+  bugs: "https://github.com/templatical/sdk/issues",
+  dependencies: {
+    "@templatical/types": "workspace:*"
+  },
+  devDependencies: {
+    "@resvg/resvg-js": "^2.6.2",
+    mjml: "^5.1.0",
+    tsup: "^8.5.1",
+    typescript: "^6.0.3",
+    vitest: "^4.1.5"
+  },
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js"
+    }
+  },
+  files: [
+    "dist",
+    "assets"
+  ],
+  homepage: "https://templatical.com",
+  keywords: [
+    "email",
+    "email-template",
+    "html-email",
+    "mjml",
+    "renderer",
+    "templatical"
+  ],
+  license: "MIT",
+  module: "./dist/index.js",
+  publishConfig: {
+    access: "public"
+  },
+  repository: {
+    type: "git",
+    url: "git+https://github.com/templatical/sdk.git",
+    directory: "packages/renderer"
+  },
+  scripts: {
+    build: "tsup && node scripts/rasterize-social.mjs",
+    test: "vitest run --config vitest.config.ts",
+    typecheck: "tsc --noEmit"
+  },
+  type: "module",
+  types: "./dist/index.d.ts"
+};
+
 // src/render-context.ts
+var DEFAULT_SOCIAL_ICONS_BASE_URL = `https://unpkg.com/@templatical/renderer@${package_default.version}/assets/social`;
 var BUILT_IN_FONT_FALLBACKS = {
@@ -16,3 +71,3 @@ arial: "Arial, sans-serif",
 var RenderContext = class _RenderContext {
-  constructor(containerWidth, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml = /* @__PURE__ */ new Map()) {
+  constructor(containerWidth, customFonts, defaultFallbackFont, allowHtmlBlocks, customBlockHtml = /* @__PURE__ */ new Map(), socialIconsBaseUrl = DEFAULT_SOCIAL_ICONS_BASE_URL) {
     this.containerWidth = containerWidth;
@@ -23,2 +78,3 @@ this.customFonts = customFonts;
     this.customBlockHtml = customBlockHtml;
+    this.socialIconsBaseUrl = socialIconsBaseUrl;
   }
@@ -30,2 +86,3 @@ containerWidth;
   customBlockHtml;
+  socialIconsBaseUrl;
   /**
@@ -41,3 +98,4 @@ * Create a new context with a different container width.
       this.allowHtmlBlocks,
-      this.customBlockHtml
+      this.customBlockHtml,
+      this.socialIconsBaseUrl
     );
@@ -349,102 +407,4 @@ }
 
-// src/social-icons.ts
-var SOCIAL_ICONS = {
-  facebook: {
-    path: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
-    color: "#1877F2"
-  },
-  twitter: {
-    path: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
-    color: "#000000"
-  },
-  instagram: {
-    path: "M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z",
-    color: "#E4405F"
-  },
-  linkedin: {
-    path: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
-    color: "#0A66C2"
-  },
-  youtube: {
-    path: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
-    color: "#FF0000"
-  },
-  tiktok: {
-    path: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
-    color: "#000000"
-  },
-  pinterest: {
-    path: "M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z",
-    color: "#BD081C"
-  },
-  email: {
-    path: "M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z",
-    color: "#6B7280"
-  },
-  whatsapp: {
-    path: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z",
-    color: "#25D366"
-  },
-  telegram: {
-    path: "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
-    color: "#26A5E4"
-  },
-  discord: {
-    path: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z",
-    color: "#5865F2"
-  },
-  snapchat: {
-    path: "M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12.017-5.373 12.017-12.001C24.034 5.367 18.644 0 12.017 0z",
-    color: "#FFFC00"
-  },
-  reddit: {
-    path: "M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z",
-    color: "#FF4500"
-  },
-  github: {
-    path: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12",
-    color: "#181717"
-  },
-  dribbble: {
-    path: "M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.392-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z",
-    color: "#EA4C89"
-  },
-  behance: {
-    path: "M22 7h-7V5h7v2zm1.726 10c-.442 1.297-2.029 3-5.101 3-3.074 0-5.564-1.729-5.564-5.675 0-3.91 2.325-5.92 5.466-5.92 3.082 0 4.964 1.782 5.375 4.426.078.506.109 1.188.095 2.14H15.97c.13 3.211 3.483 3.312 4.588 2.029h3.168zm-7.686-4h4.965c-.105-1.547-1.136-2.219-2.477-2.219-1.466 0-2.277.768-2.488 2.219zm-9.574 6.988H0V5.021h6.953c5.476.081 5.58 5.444 2.72 6.906 3.461 1.26 3.577 8.061-3.207 8.061zM3 11h3.584c2.508 0 2.906-3-.312-3H3v3zm3.391 3H3v3.016h3.341c3.055 0 2.868-3.016.05-3.016z",
-    color: "#1769FF"
-  }
-};
-function generateSocialIconDataUri(platform, style, size) {
-  const iconData = SOCIAL_ICONS[platform];
-  const path = iconData?.path ?? "";
-  const brandColor = iconData?.color ?? "#6B7280";
-  if (path === "") {
-    return "";
-  }
-  const isOutlined = style === "outlined";
-  const iconColor = isOutlined ? brandColor : "#ffffff";
-  let bgShape;
-  switch (style) {
-    case "circle":
-      bgShape = `<circle cx="12" cy="12" r="12" fill="${brandColor}"/>`;
-      break;
-    case "rounded":
-      bgShape = `<rect width="24" height="24" rx="6" fill="${brandColor}"/>`;
-      break;
-    case "square":
-      bgShape = `<rect width="24" height="24" rx="0" fill="${brandColor}"/>`;
-      break;
-    case "outlined":
-      bgShape = `<rect width="22" height="22" x="1" y="1" rx="3" fill="transparent" stroke="${brandColor}" stroke-width="2"/>`;
-      break;
-    default:
-      bgShape = `<rect width="24" height="24" rx="3" fill="${brandColor}"/>`;
-      break;
-  }
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}" height="${size}">` + bgShape + `<g transform="translate(4.8, 4.8) scale(0.6)"><path d="${path}" fill="${iconColor}"/></g></svg>`;
-  return "data:image/svg+xml;base64," + btoa(svg);
-}
-
 // src/renderers/social.ts
-function renderSocialIcons(block, _context) {
+function renderSocialIcons(block, context) {
   if (isHiddenOnAll(block)) {
@@ -495,3 +455,3 @@ return "";
     const url = escapeAttr(icon.url);
-    const iconSrc = generateSocialIconDataUri(platform, iconStyle, iconSizePx);
+    const iconSrc = `${context.socialIconsBaseUrl}/${iconStyle}/${platform}.png`;
     const rightPad = index === iconCount - 1 ? 0 : spacing;
@@ -839,2 +799,5 @@ return `<mj-social-element src="${iconSrc}" href="${url}" icon-size="${iconSizePx}px" padding="0 ${rightPad}px 0 0" border-radius="${borderRadius}" background-color="transparent"></mj-social-element>`;
   const allowHtmlBlocks = options?.allowHtmlBlocks ?? true;
+  const socialIconsBaseUrl = stripTrailingSlash(
+    options?.socialIconsBaseUrl ?? DEFAULT_SOCIAL_ICONS_BASE_URL
+  );
   const customBlockHtml = await resolveCustomBlocks(
@@ -849,3 +812,4 @@ content,
     allowHtmlBlocks,
-    customBlockHtml
+    customBlockHtml,
+    socialIconsBaseUrl
   );
@@ -919,2 +883,5 @@ const blocks = filterHtmlBlocks2(content.blocks, allowHtmlBlocks);
 }
+function stripTrailingSlash(url) {
+  return url.endsWith("/") ? url.slice(0, -1) : url;
+}
 function generatePreviewTag(preheaderText) {
@@ -979,8 +946,7 @@ if (!preheaderText) {
 export {
+  DEFAULT_SOCIAL_ICONS_BASE_URL,
   RenderContext,
-  SOCIAL_ICONS,
   convertMergeTagsToValues,
   escapeAttr,
   escapeHtml,
-  generateSocialIconDataUri,
   getCssClassAttr,
@@ -987,0 +953,0 @@ getCssClasses,

package.json

 {
   "name": "@templatical/renderer",
   "description": "Render Templatical email templates to MJML",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "bugs": "https://github.com/templatical/sdk/issues",
   "dependencies": {
-    "@templatical/types": "0.7.0"
+    "@templatical/types": "0.7.1"
   },
   "devDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "mjml": "^5.1.0",
@@ -22,3 +23,4 @@ "tsup": "^8.5.1",
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
@@ -47,3 +49,3 @@ "homepage": "https://templatical.com",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/rasterize-social.mjs",
     "test": "vitest run --config vitest.config.ts",
@@ -50,0 +52,0 @@ "typecheck": "tsc --noEmit"

New alerts

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Unidentified License

License

Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

459382

252.99%

Number of package files

86

1333.33%

Number of low supply chain risk alerts

1

-80%

Worsened metrics

Dev dependency count

5

25%

Lines of code

1068

-4.73%

Dependency changes

• + Added

  @templatical/types@0.7.1
  (transitive)

• - Removed

  @templatical/types@0.7.0
  (transitive)

• Updated

  @templatical/types@0.7.1