Skip to content

chore(docs): migrate HTML comments to MDX comment syntax - #4629

Open
thetaPC wants to merge 1 commit into
mainfrom
FW-6456-pt3
Open

chore(docs): migrate HTML comments to MDX comment syntax#4629
thetaPC wants to merge 1 commit into
mainfrom
FW-6456-pt3

Conversation

@thetaPC

@thetaPC thetaPC commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Issue URL:

What is the current behavior?

Our docs use HTML comments (<!-- ... -->) for authoring notes and tooling directives. These are not valid MDX. Docusaurus only accepts them today because of the markdown.mdx1Compat.comments shim, which strips them before MDX parses the file. That shim is disabled by default in Docusaurus v4 via future.v4.mdx1CompatDisabledByDefault.

Separately, troubleshooting/native.md used three <!-- prettier-ignore --> guards inside an ordered list. Those guards were doing more than suppressing formatting: an HTML comment is a block level node, so each one split the list, which is why steps 2, 3, and 4 each restarted their own numbering instead of forming one list of four.

What is the new behavior?

HTML comments in the live docs trees are migrated to MDX comment syntax, and the native.md guards are removed by fixing what they were working around.

  • 59 single-line notes converted from <!-- ... --> to {/* ... */}
  • 4 multiline commented-out blocks converted to per-line {/* ... */} comments
  • index.md's 2 guards converted; the JSX form is honored there because the guard precedes the start of a list, which is a real node boundary
  • native.md's 6 guards deleted entirely, by replacing the <strong> wrappers with Markdown **

The native.md change is the substantive one. Prettier was reflowing the <strong> children onto their own lines, after which MDX wrapped that text in its own paragraph and emitted invalid <strong><p>...</p></strong>. The guards existed to prevent that. Using Markdown emphasis instead removes the hazard at the source, so no guard is needed and the four steps now form a single well-formed ordered list. Nested <b> tags are preserved; one **Identity** became <b>Identity</b> to avoid nesting ** inside **, matching how the file already marks up <b>Xcode</b> and <b>Signing</b>.

Multiline blocks use per-line comments because Prettier mangles every multiline form into {/\*, which then fails to compile. Verified against three variants: with blank lines, without blank lines, and with a {"" expression prefix. All three were mangled.

110 HTML comments are intentionally left in place: 108 inside code fences and 2 inside inline code spans, where they are example markup shown to readers rather than real comments.

Does this introduce a breaking change?

  • Yes
  • No

Other information

This is part of a series preparing the docs for the .md to .mdx migration.

How to test

Review the pages below. The comment changes should be invisible, since comments never rendered. Confirm no stray <!--, {/*, or */} text appears anywhere on the page.

One page deserves a closer look:

  1. Native Errors — the numbered steps under "Code Signing errors" should render as a single list numbered 1 through 4, with each step's body content correctly indented beneath it, and the step titles still bold:
    https://ionic-docs-git-fw-6456-pt3-ionic1.vercel.app/docs/troubleshooting/native

Current (v8)

v7

@vercel

vercel Bot commented Aug 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-docs Ready Ready Preview Aug 10, 2026 11:18pm

Request Review


TODO
-->
{/* ## Customization */}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multi-line comments don't work with Prettier so changed them to per line. I plan to evaluate if we can just remove them in a separate PR.

Comment thread docs/api/item.md
See the [theming documentation](/docs/theming/css-variables) for more information.

-->
{/* TODO add this functionality back as a css variable */}

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multi-line comments don't work with Prettier so changed them to per line. I plan to evaluate if we can just remove them in a separate PR.

Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions:

1. <strong>Set the [Package ID](../reference/glossary.md#package-id).</strong>
1. **Set the [Package ID](../reference/glossary.md#package-id).**

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By swapping to **, we no longer need to use prettier ignore.

@thetaPC
thetaPC marked this pull request as ready for review August 10, 2026 23:26
@thetaPC
thetaPC requested a review from a team as a code owner August 10, 2026 23:26
@thetaPC
thetaPC requested a review from brandyscarney August 10, 2026 23:26

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants