From db2f16863b0199cc6d12bd1ac834298a3d53ad1e Mon Sep 17 00:00:00 2001
From: julia-rabello <77292838+julia-rabello@users.noreply.github.com>
Date: Thu, 9 Jul 2026 12:05:44 -0300
Subject: [PATCH] fix: render callout icons as inline SVG instead of external
 asset

The vtex-dev-portal-navigation DigitalOcean Space that callout icons (info,
warning, danger) were loaded from via CSS background-image no longer
exists (404 NoSuchBucket), so icons silently disappeared while the
colored background/border still rendered. Icons are now inline SVGs
generated in renderBlockquote, removing the external dependency entirely.
---
 src/styles/font-styles.js     | 39 ++++++-----------------------------
 src/utils/renderBlockquote.js | 25 +++++++++++++++++-----
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/src/styles/font-styles.js b/src/styles/font-styles.js
index 750700786..4460330e5 100644
--- a/src/styles/font-styles.js
+++ b/src/styles/font-styles.js
@@ -87,54 +87,27 @@ export default css`
     grid-template-columns: 20px 1fr;
   }
 
+  .m-markdown .callout-icon {
+    display: inline-block;
+    flex-shrink: 0;
+    grid-row: 1;
+  }
+
   .m-markdown .info-blockquote {
     background: #f8f7fc;
     border: 1px solid #ccced8;
   }
 
-  .m-markdown .info-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/info.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   .m-markdown .warning-blockquote {
     background: #fff2d4;
     border: 1px solid #ffb100;
   }
 
-  .m-markdown .warning-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/warning.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   .m-markdown .danger-blockquote {
     background: #fdefef;
     border: 1px solid #dc5a41;
   }
 
-  .m-markdown .danger-blockquote:before {
-    display: inline-block;
-    height: 20px;
-    width: 20px;
-    content: '';
-    background: url('https://vtex-dev-portal-navigation.fra1.digitaloceanspaces.com/danger.svg')
-      no-repeat 0 0;
-    background-size: 20px 20px;
-    position: absolute;
-  }
-
   blockquote p{
     grid-column: 2 / -1;
     margin: 0;
diff --git a/src/utils/renderBlockquote.js b/src/utils/renderBlockquote.js
index 4de9444a4..527e34f3f 100644
--- a/src/utils/renderBlockquote.js
+++ b/src/utils/renderBlockquote.js
@@ -1,3 +1,18 @@
+const calloutColors = {
+  info: '#8C929D',
+  warning: '#FFB100',
+  danger: '#DC5A41',
+};
+
+function calloutIcon(type) {
+  const fill = calloutColors[type] || calloutColors.info;
+  const glyph = type === 'info'
+    ? '<rect x="9.1" y="5" width="1.8" height="1.8" rx="0.9" fill="white"/><rect x="9.1" y="8.2" width="1.8" height="6.8" rx="0.9" fill="white"/>'
+    : '<rect x="9.1" y="5" width="1.8" height="7" rx="0.9" fill="white"/><rect x="9.1" y="13.5" width="1.8" height="1.8" rx="0.9" fill="white"/>';
+
+  return `<svg class="callout-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="${fill}"/>${glyph}</svg>`;
+}
+
 export default function renderBlockquote(text) {
   const infoMarker = 'ℹ️';
   const bookMarker = '📘';
@@ -6,18 +21,18 @@ export default function renderBlockquote(text) {
 
   if (text.startsWith(`<p>${infoMarker}`)) {
     // Apply custom styling for the info blockquote
-    return `<blockquote class="info-blockquote">${text.replace(infoMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="info-blockquote">${calloutIcon('info')}${text.replace(infoMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${bookMarker}`)) {
     // Apply custom styling for the info blockquote
-    return `<blockquote class="info-blockquote">${text.replace(bookMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="info-blockquote">${calloutIcon('info')}${text.replace(bookMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${warningMarker} `)) {
     // Apply custom styling for the warning blockquote
-    return `<blockquote class="warning-blockquote">${text.replace(warningMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="warning-blockquote">${calloutIcon('warning')}${text.replace(warningMarker, '').trim()}</blockquote>`;
   } if (text.startsWith(`<p>${dangerMarker} `)) {
     // Apply custom styling for the danger blockquote
-    return `<blockquote class="danger-blockquote">${text.replace(dangerMarker, '').trim()}</blockquote>`;
+    return `<blockquote class="danger-blockquote">${calloutIcon('danger')}${text.replace(dangerMarker, '').trim()}</blockquote>`;
   }
 
   // Default rendering for regular blockquotes
-  return `<blockquote class="info-blockquote">${text}</blockquote>`;
+  return `<blockquote class="info-blockquote">${calloutIcon('info')}${text}</blockquote>`;
 }