From d98446491d0f323b421f254e3c189784d5eb9039 Mon Sep 17 00:00:00 2001
From: Shubham Padia <shubham@zulip.com>
Date: Tue, 1 Oct 2024 06:32:28 +0000
Subject: [PATCH] help-beta: Add support for images.

Partially fixes #31255. We'll need to copy images to src/ at the time of
cutover. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/Handling.20images.20in.20help.20center.20starlight.20migration.2E/near/1915130
for more details.

We've also copied over css relevant to markdown images, while making
some small changes to it so that it works better with existing
starlight styling.
---
 help-beta/src/styles/main.css         | 34 +++++++++++++++++++++++++++
 tools/convert-help-center-docs-to-mdx | 16 +++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/help-beta/src/styles/main.css b/help-beta/src/styles/main.css
index 4e5f94be81..fafbda062e 100644
--- a/help-beta/src/styles/main.css
+++ b/help-beta/src/styles/main.css
@@ -3,3 +3,37 @@
     pointer-events: none;
     cursor: default;
 }
+
+.sl-markdown-content {
+    img {
+        vertical-align: top;
+        box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
+        border: 1px solid hsl(0deg 0% 87%);
+        border-radius: 4px;
+        margin-top: 0;
+
+        &.emoji-small {
+            display: inline-block;
+            width: 1.25em;
+            box-shadow: none;
+            border: none;
+            vertical-align: text-top;
+        }
+
+        &.emoji-big {
+            display: inline-block;
+            width: 1.5em;
+            box-shadow: none;
+            border: none;
+            vertical-align: text-top;
+        }
+
+        &.help-center-icon {
+            display: inline-block;
+            width: 1.25em;
+            box-shadow: none;
+            border: none;
+            vertical-align: text-top;
+        }
+    }
+}
diff --git a/tools/convert-help-center-docs-to-mdx b/tools/convert-help-center-docs-to-mdx
index 3ed537b084..0986ff6a30 100755
--- a/tools/convert-help-center-docs-to-mdx
+++ b/tools/convert-help-center-docs-to-mdx
@@ -18,6 +18,21 @@ os.environ["DJANGO_SETTINGS_MODULE"] = "zproject.settings"
 django.setup()
 
 
+def replace_image_path(markdown_string: str) -> str:
+    """
+    We will point to the existing image folder till
+    the cutover. After that, we will copy the images
+    to src folder for help-beta in order to take
+    advantage of Astro's image optimization.
+    See https://chat.zulip.org/#narrow/stream/6-frontend/topic/Handling.20images.20in.20help.20center.20starlight.20migration.2E/near/1915130
+    """
+    # We do not replace /static/images directly since there are a few
+    # instances in the documentation where zulip.com links are
+    # referenced with that blurb as a part of the url.
+    result = markdown_string.replace("(/static/images/help-beta", "(../../../../static/images/help")
+    return result.replace('="/static/images/help-beta', '="../../../../static/images/help')
+
+
 def escape_curly_braces(markdown_string: str) -> str:
     """
     MDX will treat curly braces as a JS expression,
@@ -54,6 +69,7 @@ def insert_frontmatter(markdown_string: str) -> str:
 def convert_string_to_mdx(markdown_string: str) -> str:
     result = escape_curly_braces(markdown_string)
     result = fix_relative_path(result)
+    result = replace_image_path(result)
     return insert_frontmatter(result)