Repository navigation
Backticks on Roadmap on landing page are messed up #583
Description
Activity
I noticed the issue happens because the roadmap section is pulling project titles directly from the GitHub Projects API.
The title Improve GPT Wrapper \Demo App`` contains Markdown backticks, so when the raw string is rendered as plain text in the UI, the backticks get mis-encoded and show up as “Ì”.
Proposed fix: sanitize the title before rendering, e.g.:
{epic.name.replace(/`/g, "")}Or optionally render with a safe Markdown parser.
I can open a PR for this if needed.
Reacted by AkhilOh interesting, so they get interpreted as additions to letters, not as actual backticks! Maybe we should use a markdown parser hm, becuse those titles indeed are markdown, and we could also hit other stuff easily, other markdown syntax. Yeah, that would be the right approach I think, nice analysis!
@mannie55 PR is very welcome, pls feel free to give it a try! We are here for any guidance.Reacted by Nnamdi OgbonnaReacted by Nnamdi OgbonnaReacted by Nnamdi Ogbonnaalright, thank you, i will solve this using the markdown parser approach, PR soon!
Reacted by Martin ŠošićSince the backticks are still messed up and the issue seems to be inactive for a while, I took the liberty to look into it myself.
As discussed in the comments above, the issue comes from rendering Markdown (coming from GitHub Project titles) as plain text, which causes the backticks to appear misaligned instead of being rendered properly.
I tried a fix locally using some sample data (since I can’t test against the actual roadmap), and it seems to work as expected, inline code, as well as italic and bold, render correctly now (screenshot attached).
This approach uses react-markdown to handle the Markdown rendering. Please let me know if this sounds okay, otherwise I would look for an alternative if possible. Thanks.
I did a bit more checking and it looks like GitHub issue and project titles only support backticks for inline code in Markdown. Other formatting like italic, bold, or links does not work in titles.
Given that, we may not need a full Markdown parser here. Instead, we could handle just the backticks explicitly, which would keep the fix simpler and avoid adding an extra dependency.
So we seem to have two options:
- Sanitize the title before rendering and remove the backticks, as suggested earlier by mannie55.
- Render the text between backticks in an inline-code style, for example
my-app.
I have attached a screenshot showing a few possible visual approaches in both light and dark mode:
- backticks removed entirely
- inline code styled with a subtle gray background
- inline code styled with slightly bolder text
Let me know what you think.
- added a commit that references this issue
on Mar 14, 2026 - added a commit that references this issue
on Apr 20, 2026 I will fix this by sanitizing raw backticks from roadmap titles before rendering them. This avoids adding a Markdown dependency for a GitHub title edge case; I will include a focused test if the project structure supports it.
They appear on top of letters / misaligned for some reason.