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

Author: thetaPC

docs/angular/performance.md

@@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see
 
 ## From the Community
 
-<!-- cspell:disable -->
+{/* cspell:disable */}
 
 [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
 
@@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see
 
 [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
 
-<!-- cspell:enable -->
+{/* cspell:enable */}
 
 :::note
 Do you have a guide you'd like to share? Click the _Edit this page_ button below.

docs/api/buttons.md

@@ -62,7 +62,7 @@ This feature is only available for iOS.
 
 :::
 
-<!-- Reuse the playground from the Title directory -->
+{/* Reuse the playground from the Title directory */}
 import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md';
 
 <CollapsibleLargeTitleButtons />

docs/api/datetime-button.md

@@ -47,19 +47,12 @@ import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/
 
 `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used.
 
-<!--
-## Customization
-
-TODO
-
-### Buttons
-
-TODO
-
-### Theming
-
-TODO
--->
+{/* ## Customization */}
+{/* TODO */}
+{/* ### Buttons */}
+{/* TODO */}
+{/* ### Theming */}
+{/* TODO */}
 
 ## Properties
 <Props />

docs/api/item.md

@@ -179,19 +179,12 @@ import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md';
 <DetailArrows />
 
 
-<!--
-
-TODO add this functionality back as a css variable
-
-This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable:
-
-```css
---item-detail-push-show: true;
-```
-
-See the [theming documentation](/docs/theming/css-variables) for more information.
-
--->
+{/* TODO add this functionality back as a css variable */}
+{/* This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable: */}
+{/* ```css */}
+{/* --item-detail-push-show: true; */}
+{/* ``` */}
+{/* See the [theming documentation](/docs/theming/css-variables) for more information. */}
 
 
 ## Item Lines

docs/api/progress-bar.md

@@ -48,7 +48,7 @@ import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/inde
 
 ## Progress Bars in Toolbars
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md';
 
 <Toolbar />

docs/api/searchbar.md

@@ -58,7 +58,7 @@ import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md
 
 Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title.
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md';
 
 <Toolbar />

docs/api/segment-content.md

@@ -27,7 +27,7 @@ for more information on how to use segment contents.
 Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
 [contentId property](./segment-button.md#properties).
 
-<!-- Reuse swipeable segments playground -->
+{/* Reuse swipeable segments playground */}
 
 import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md';
 

docs/api/segment.md

@@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md';
 
 ## Segments in Toolbars
 
-<!-- Reuse the playground from the Toolbar directory -->
+{/* Reuse the playground from the Toolbar directory */}
 import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md';
 
 <Toolbar />

docs/cli.md

@@ -37,7 +37,7 @@ Be sure to run `ionic <command> --help` in your project directory.
 For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular.
 :::
 
-<!-- TODO: image? -->
+{/* TODO: image? */}
 
 ## Architecture
 

docs/core-concepts/what-are-progressive-web-apps.md

@@ -11,7 +11,7 @@ title: Progressive Web Apps
   />
 </head>
 
-<!-- TOC goes here -->
+{/* TOC goes here */}
 
 ### The web...but better
 
@@ -47,15 +47,15 @@ To be considered a Progressive Web App, your app must be:
 
 - Linkable - Easily share via URL and not require complex installation.
 
-<!-- cspell:disable -->
+{/* cspell:disable */}
 
 <em>
   <a href="https://addyosmani.com/blog/getting-started-with-progressive-web-apps/" target="_blank">
     Addy Osmani: Progressive web apps
   </a>
 </em>
 
-<!-- cspell:enable -->
+{/* cspell:enable */}
 
 There is a lot here, but it boils down to a few points for Ionic apps.