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)