Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Shubham Padia 2024-10-01 06:32:28 +00:00 committed by Tim Abbott
parent a4d9c2e2c9
commit d98446491d
2 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
help-beta/src/styles/main.css
View File

@ -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;
}
}
}

16
tools/convert-help-center-docs-to-mdx
View File

@ -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)