<\/div>/g, (_match, index) => highlightedBlocks[Number(index)]);
+highlighter.dispose();
+const generatedSource = await format(
+ `// Generated from docs/special-markup.md. Do not edit directly.\nexport const docsContentHtml = ${JSON.stringify(html)};\n`,
+ { parser: 'typescript', printWidth: 140 },
+);
+
+await writeFile(outputPath, generatedSource);
diff --git a/demo/src/app/docs/docs-content.generated.ts b/demo/src/app/docs/docs-content.generated.ts
new file mode 100644
index 0000000..d4be00c
--- /dev/null
+++ b/demo/src/app/docs/docs-content.generated.ts
@@ -0,0 +1,3 @@
+// Generated from docs/special-markup.md. Do not edit directly.
+export const docsContentHtml =
+ '
Special markup
\n
Most Ionic markup works without changes. The combinations below are explicit opt-ins and are useful when the same template also uses @rdlabo/ionic-theme-ios26.
\n
Two-line inset list items
\n
Place an unslotted ion-label immediately alongside an unslotted ion-note to render a two-line item. Use slot="end" on ion-note when you want the standard trailing-note layout instead.
-
-
-
+
diff --git a/demo/src/app/docs/docs-page.component.scss b/demo/src/app/docs/docs-page.component.scss
index fd5921c..e32d973 100644
--- a/demo/src/app/docs/docs-page.component.scss
+++ b/demo/src/app/docs/docs-page.component.scss
@@ -1,12 +1,6 @@
-h3 {
- font-size: 1.1rem;
- font-weight: bold;
-}
-
-code.code-block {
- background: var(--ion-color-dark);
- color: var(--ion-color-dark-contrast);
- display: inline-block;
- padding: 8px 12px;
- border-radius: 8px;
+.docs-content {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 24px 16px 72px;
}
diff --git a/demo/src/app/docs/docs-page.component.spec.ts b/demo/src/app/docs/docs-page.component.spec.ts
index 6f85bf1..8389dc3 100644
--- a/demo/src/app/docs/docs-page.component.spec.ts
+++ b/demo/src/app/docs/docs-page.component.spec.ts
@@ -18,4 +18,13 @@ describe('DocsPage', () => {
it('should create', () => {
expect(component).toBeTruthy();
});
+
+ it('renders the generated Markdown documentation with live examples', () => {
+ const element = fixture.nativeElement as HTMLElement;
+
+ expect(element.querySelector('article.docs-content h1')?.textContent).toContain('Special markup');
+ expect(element.querySelectorAll('.code-block-container pre.shiki code').length).toBeGreaterThan(0);
+ expect(element.querySelector('.code-block-container code span[style*="color"]')).not.toBeNull();
+ expect(element.querySelectorAll('figure.docs-example').length).toBe(4);
+ });
});
diff --git a/demo/src/app/docs/docs-page.component.ts b/demo/src/app/docs/docs-page.component.ts
index 704ce83..1f39e67 100644
--- a/demo/src/app/docs/docs-page.component.ts
+++ b/demo/src/app/docs/docs-page.component.ts
@@ -1,44 +1,14 @@
-import { Component, inject } from '@angular/core';
-
-import { FormsModule } from '@angular/forms';
-import {
- IonButton,
- IonButtons,
- IonContent,
- IonHeader,
- IonIcon,
- IonTitle,
- IonToolbar,
- Platform,
- IonItem,
- IonItemGroup,
- IonLabel,
- IonList,
- IonListHeader,
- IonNote,
-} from '@demo/ionic';
+import { Component } from '@angular/core';
+import { IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@demo/ionic';
+import { docsContentHtml } from './docs-content.generated';
+import { SafeHtmlPipe } from './safe-html.pipe';
@Component({
selector: 'app-docs-page',
templateUrl: './docs-page.component.html',
styleUrls: ['./docs-page.component.scss'],
- imports: [
- IonContent,
- IonHeader,
- IonTitle,
- IonToolbar,
- FormsModule,
- IonIcon,
- IonButton,
- IonButtons,
- IonItemGroup,
- IonList,
- IonListHeader,
- IonLabel,
- IonNote,
- IonItem,
- ],
+ imports: [IonContent, IonHeader, IonTitle, IonToolbar, IonIcon, IonButton, IonButtons, SafeHtmlPipe],
})
export class DocsPage {
- readonly platform = inject(Platform);
+ readonly docsContentHtml = docsContentHtml;
}
diff --git a/demo/src/app/docs/safe-html.pipe.ts b/demo/src/app/docs/safe-html.pipe.ts
new file mode 100644
index 0000000..9014ced
--- /dev/null
+++ b/demo/src/app/docs/safe-html.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+ name: 'safeHtml',
+})
+export class SafeHtmlPipe implements PipeTransform {
+ readonly #sanitizer = inject(DomSanitizer);
+
+ transform(html: string): SafeHtml {
+ return this.#sanitizer.bypassSecurityTrustHtml(html);
+ }
+}
diff --git a/demo/src/global.scss b/demo/src/global.scss
index be86d83..62bf6bb 100644
--- a/demo/src/global.scss
+++ b/demo/src/global.scss
@@ -79,6 +79,85 @@ code {
font-family: Menlo, Consolas, monospace;
}
+.docs-content {
+ line-height: 1.7;
+
+ h1,
+ h2 {
+ padding-bottom: 8px;
+ border-bottom: 1px solid var(--ion-color-step-150, #d7d8da);
+ }
+
+ h1 {
+ margin: 0 0 24px;
+ font-size: 1.75rem;
+ }
+
+ h2 {
+ margin: 40px 0 16px;
+ font-size: 1.4rem;
+ }
+
+ p {
+ margin: 16px 0;
+ }
+
+ a {
+ color: var(--ion-color-primary);
+ }
+
+ :not(pre) > code {
+ padding: 2px 6px;
+ border-radius: 4px;
+ background: var(--ion-color-step-100, #f1f3f5);
+ font-size: 0.85em;
+ }
+
+ .code-block-container {
+ margin: 16px 0;
+ overflow-x: auto;
+ border-radius: 8px;
+
+ pre.shiki {
+ margin: 0;
+ padding: 0;
+ line-height: 1.5;
+
+ code {
+ display: block;
+ padding: 16px;
+ overflow-x: auto;
+ background: transparent;
+ font-size: 0.85rem;
+ white-space: pre;
+ }
+ }
+ }
+}
+
+.docs-content .docs-example {
+ margin: 16px 0 32px;
+ padding: 16px;
+ overflow: hidden;
+ border: 1px solid var(--ion-color-step-150, #d7d8da);
+ border-radius: 16px;
+ background: var(--ion-background-color, #fff);
+
+ figcaption {
+ margin-bottom: 12px;
+ color: var(--ion-color-medium, #92949c);
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ }
+
+ ion-list,
+ ion-toolbar {
+ margin: 0;
+ }
+}
+
#main-content {
width: 100%;
}
diff --git a/docs/special-markup.md b/docs/special-markup.md
index 4f7745e..715bd91 100644
--- a/docs/special-markup.md
+++ b/docs/special-markup.md
@@ -4,33 +4,56 @@ title: Special markup
# Special markup
-Most Ionic markup works without changes. The combination below is an explicit opt-in demonstrated in `demo/src/app/docs` and is useful when the same template also uses `@rdlabo/ionic-theme-ios26`.
+Most Ionic markup works without changes. The combinations below are explicit opt-ins and are useful when the same template also uses `@rdlabo/ionic-theme-ios26`.
## Two-line inset list items
Place an unslotted `ion-label` immediately alongside an unslotted `ion-note` to render a two-line item. Use `slot="end"` on `ion-note` when you want the standard trailing-note layout instead.
-```html
+```html preview
-
- Network & internet
- Mobile, Wi-Fi, hotspot
-
+
+
+ Network & internet
+ Mobile, Wi-Fi, hotspot
+
+
```
-If the application imports `@rdlabo/ionic-theme-ios26/dist/css/md-ion-list-inset.css`, wrap list items in `ion-item-group` and keep `ion-list-header` outside the group:
+## Square buttons
+
+Add `.button-square` when a button should use more squared corners. It works with text buttons and icon-only buttons.
+
+```html preview
+Continue
+
+
+
+```
-```html
+## Inset-list section headers
+
+Add `.item-group-header` to an `ion-item-group` to create the centered icon, title, and description used at the top of the component demo pages.
+
+```html preview
- Connections
-
+
- Network & internet
- Mobile, Wi-Fi, hotspot
+
+
+
Lists
+ Inset-list examples
+
```
-See [Using `ion-item-group`](./using-ion-item-group.md) for the required import and background model.
+## Opting out
+
+Add `.md3-disabled` to an individual Ionic component when it must retain Ionic's standard Material styling.
+
+```html preview
+MD3 themeStandard Ionic
+```