Address errors based on the new markdonwlint config

Author: zdrawku

MARKDOWNLINT_RULES.md

@@ -9,10 +9,11 @@ This directory contains markdown linting configuration for the App Builder docum
 The `.markdownlint.json` file configures markdown-lint with rules suitable for technical documentation and DocFX compatibility:
 
 ### Enabled Rules
-<!-- - **MD001**: Heading levels should only increment by one level at a time
-- **MD003**: Heading style (ATX style with #) -->
-<!-- - **MD004**: Unordered list style (dash) -->
-<!-- - **MD007**: Unordered list indentation (2 spaces) -->
+
+- **MD001**: Heading levels should only increment by one level at a time
+- **MD003**: Heading style (ATX style with #)
+- **MD004**: Unordered list style (dash)
+- **MD007**: Unordered list indentation (2 spaces)
 - **MD009**: Trailing spaces (allow 2 for line breaks)
 - **MD010**: Hard tabs
 - **MD012**: Multiple consecutive blank lines (max 2)
@@ -22,10 +23,10 @@ The `.markdownlint.json` file configures markdown-lint with rules suitable for t
 - **MD022**: Headings should be surrounded by blank lines
 - **MD023**: Headings must start at the beginning of the line
 - **MD024**: Multiple headings with the same content (allow different nesting)
+- **MD025**: Multiple top-level headings in same document (front_matter_title handled)
 - **MD026**: Trailing punctuation in heading
 - **MD027**: Multiple spaces after blockquote symbol
-<!-- - **MD028**: Blank line inside blockquote
-- **MD029**: Ordered list item prefix (ordered style) -->
+- **MD029**: Ordered list item prefix (ordered style)
 - **MD030**: Spaces after list markers
 - **MD031**: Fenced code blocks should be surrounded by blank lines
 - **MD032**: Lists should be surrounded by blank lines
@@ -35,30 +36,24 @@ The `.markdownlint.json` file configures markdown-lint with rules suitable for t
 - **MD039**: Spaces inside link text
 - **MD042**: No empty links
 - **MD045**: Images should have alternate text (alt text)
-<!-- - **MD046**: Code block style (fenced) -->
+- **MD046**: Code block style (fenced)
 - **MD047**: Files should end with a single newline character
 - **MD048**: Code fence style (backtick)
 - **MD049**: Emphasis style (underscore)
 - **MD050**: Strong style (asterisk)
+- **MD055**: Table pipe style (leading and trailing)
 
 ### Disabled Rules
 
-- **MD001**: Heading levels increment (disabled - documentation may skip heading levels for layout)
-- **MD003**: Heading style (disabled - allows both ATX and Setext styles)
-- **MD004**: Unordered list style (disabled - allows both dash and asterisk styles for international docs)
-- **MD007**: Unordered list indentation (disabled - flexible indentation for complex lists)
 - **MD013**: Line length (disabled - technical docs have long URLs/code examples)
-- **MD025**: Multiple top-level headings (disabled - allows multiple H1 headers for DocFX frontmatter)
 - **MD028**: Blank line inside blockquote (disabled - allows flexible blockquote formatting)
-- **MD029**: Ordered list item prefix (disabled - allows flexible numbering in documentation)
 - **MD033**: Inline HTML (disabled - allows HTML tags needed for DocFX)
 - **MD034**: Bare URLs (disabled - allows bare URLs as we use many reference links)
 - **MD036**: Emphasis used instead of heading (disabled - allows emphasis used as headers for styling)
 - **MD040**: Fenced code blocks should have a language specified (disabled - would be noisy)
 - **MD041**: First line in a file should be a top-level heading (disabled - not always applicable with frontmatter)
 - **MD043**: Required heading structure (disabled - too restrictive)
 - **MD044**: Proper names should have the correct capitalization (disabled - would require extensive config)
-- **MD046**: Code block style (disabled - allows both fenced and indented code blocks)
 
 ## Usage
 
@@ -125,6 +120,8 @@ npm run verify
 - Trailing spaces (MD009)
 - Missing blank lines around headers, lists, code blocks (MD022, MD031, MD032)
 - Inconsistent list markers (MD004)
+- Inconsistent heading styles (MD003)
+- List indentation (MD007)
 - File ending newlines (MD047)
 - Header spacing issues (MD018, MD019)
 - Some emphasis and code span formatting (MD037, MD038)
@@ -134,31 +131,63 @@ npm run verify
 - **All spelling errors** (cspell has no auto-fix feature)
 - Complex markdown structure issues
 - Content-related problems
-- Heading hierarchy problems (MD001)
-- Line length issues (MD013)
+- Heading hierarchy problems (MD001) - need to add intermediate heading levels
+- Ordered list numbering (MD029) - may need to indent content to maintain list context
+- Multiple top-level headings (MD025) - need to demote additional H1s to H2
+- Code block style (MD046) - need to convert indented blocks to fenced blocks
 
 ## Common Issues and Fixes
 
 ### MD001 - Heading increment
 
 **Issue**: Jumping from `##` to `####`
-**Fix**: Use `###` instead
+**Fix**: Use `###` instead - headings should only increment by one level at a time
+
+### MD003 - Heading style
+
+**Issue**: Mixing ATX (`#`) and Setext (underline) heading styles
+**Fix**: Use ATX style (`#`, `##`, `###`) consistently
+
+### MD004 - Unordered list style
+
+**Issue**: Mixing `-`, `*`, or `+` for list items
+**Fix**: Use dash (`-`) consistently for unordered lists
+
+### MD007 - Unordered list indentation
+
+**Issue**: Incorrect indentation in nested lists
+**Fix**: Use 2 spaces for nested list items
 
 ### MD009 - Trailing spaces
 
 **Issue**: Unnecessary trailing spaces at end of line
-**Fix**: Remove trailing spaces (except when intentional for line breaks)
+**Fix**: Remove trailing spaces (except when intentional for line breaks with 2 spaces)
 
 ### MD022 - Headings surrounded by blank lines
 
 **Issue**: No blank line before/after heading
 **Fix**: Add blank lines around headings
 
+### MD025 - Multiple top-level headings
+
+**Issue**: Multiple `#` headings in same document
+**Fix**: Use only one H1 per document (frontmatter title doesn't count)
+
+### MD029 - Ordered list item prefix
+
+**Issue**: Inconsistent or incorrect numbering like `1. 2. 4.` or using all `1.` items
+**Fix**: Use sequential numbering `1. 2. 3.` for ordered lists
+
 ### MD031 - Code blocks surrounded by blank lines
 
 **Issue**: No blank line before/after code fence
 **Fix**: Add blank lines around code blocks
 
+### MD046 - Code block style
+
+**Issue**: Using indented code blocks (4 spaces) instead of fenced blocks
+**Fix**: Use fenced code blocks with triple backticks (```)
+
 ### MD047 - File should end with newline
 
 **Issue**: No newline at end of file

en/app-themes/app-themes.md

@@ -8,7 +8,7 @@ _keywords: App Builder themes, Indigo Design, Infragistics
 
 An app theme is a collection of color palettes and attributes that create a sense of visual persistency throughout the entire app, view, or activity. With app themes, you can define the look and feel of your application by selecting and configuring different panels, styles, layouts, typography, pre-built theme widgets. Or you can create a custom theme file too.
 
-# App Builder themes
+## App Builder themes
 
 > [!Video https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw]
 

en/blazor-support.md

@@ -20,7 +20,7 @@ You can generate both Blazor Web Assembly or Blazor Server apps based on your pr
 > [!NOTE]
 ><b>Trying to generate code for components not available yet will put a placeholder informing that such a component is not yet supported. This makes it possible for you not to refrain from developing more complex UI in the designer.
 
-### In this article
+## In this article
 
 - <a href="#introduction">Introduction of the feature</a>
 - <a href="#blazor-code-generation">Blazor Code generation</a>

en/flex-layouts/flex-layouts.md

@@ -6,17 +6,17 @@ _keywords: App builder flex layouts, Indigo Design, Infragistics
 
 # Flex layouts (and positioning)
 
-### What is Flex layout?  
+## What is Flex layout?  
 
 Flex layout is used for component positioning, space distribution between items, and resizing. It provides powerful alignment capabilities, lays out elements in either columns or rows, and helps you build responsive page layouts that easily adapt to any screen size.
 
-### How to use Flex layout?
+## How to use Flex layout?
 
 In essence, the Flex layout is designed to enable developers to easily specify the sizing of a layout container, define visibilities and viewport sizes, and respectively shrink or expand items in order to best fit into the available space.
 
 In order to achieve all of this, the first thing you have to do when using Flex layout is to target the container or parent element and adjust the CSS of your container elements.  
 
-### How to create Flex layouts in App Builder?
+## How to create Flex layouts in App Builder?
 
 In order to use the Flex layout in the App Builder, you need to define a container (which in the video is referred to as canvas). Note that it has its display property automatically set to Flex. Go to Views, add new container, choose Flex layout row or Flex layout column.
 

en/generate-app/azure-integration.md

@@ -61,7 +61,7 @@ Soon, you’ll be able to deploy your app to **Azure Web Apps** directly from Ap
 - Will support both **standard** and **static web apps**
 - Simplifies deployment for customer demos and staging environments
 
-# How Microsoft Account Types Impact Authentication
+## How Microsoft Account Types Impact Authentication
 
 When connecting Azure DevOps to App Builder, authentication is handled via Microsoft Entra ID (formerly Azure Active Directory). Account type directly impacts the success of this connection.
 

en/generate-app/run-application-locally.md

@@ -5,7 +5,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
 ---
 # Run Application Locally
 
-### Run the app locally
+## Run the app locally
 
 To finally develop the app, you don't need to copy and paste code. Instead, use the generate app button in the toolbar. This quickly creates a package with your Angular or Blazor application (depending on what framework is selected in the Platform picker dropdown) that can be downloaded. To run this app, open up the folder in an IDE like Visual Studio Code.
 

en/generate-app/upload-application-to-github.md

@@ -8,8 +8,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
 > [!NOTE]
 ><b>Once ready with your design in App Builder you can upload it to your private or GitHub repository.
 
-
-### In this article
+## In this article
 
 - <a href="#intro">Introduction of the feature</a>
 - <a href="#uploading-an-application-to-github">Uploading an application to GitHub</a>

en/guide-to-variables-in-app-builder/component-properties-binding.md

@@ -24,15 +24,15 @@ Consider a scenario where you have a collection of movies and wish to display de
 <img src="../images/state-and-context/4.png" srcset="../images/state-and-context/4.png 2x" />
 <p style="text-align:center;">Array type variable</p>
 
-2. **Create an Array Variable**: Set up an empty Array variable named "Box Office Revenue". The Data Type is automatically determined based on the data source of the Combo component.
+1. **Create an Array Variable**: Set up an empty Array variable named "Box Office Revenue". The Data Type is automatically determined based on the data source of the Combo component.
 
-<img src="../images/state-and-context/10.png" srcset="../images/state-and-context/10.png 2x" />
-<p style="text-align:center;">New Variable dialog</p>
+   <img src="../images/state-and-context/10.png" srcset="../images/state-and-context/10.png 2x" />
+   <p style="text-align:center;">New Variable dialog</p>
 
-3. **Bind to a Card Component**: Link the "selectedMovies" variable to a card component. Bind the Title and Subtitle properties to the appropriate data fields from the Data Context.
+2. **Bind to a Card Component**: Link the "selectedMovies" variable to a card component. Bind the Title and Subtitle properties to the appropriate data fields from the Data Context.
 
-<img src="../images/state-and-context/11.png" srcset="../images/state-and-context/11.png 2x" />
-<p style="text-align:center;">Data context binding</p>
+   <img src="../images/state-and-context/11.png" srcset="../images/state-and-context/11.png 2x" />
+   <p style="text-align:center;">Data context binding</p>
 
 The result is a dynamically updated card component based on your selection:
 

en/interactions.md

@@ -8,8 +8,7 @@ _keywords: App Builder, Web App Builder, Design Systems, Design Systems UX, UI k
 > [!NOTE]
 > The Interactions feature of the App Builder enables users to define particular interactions between views and components, such as Navigate to another view, Show or Hide and Open or Close an app component.
 
-
-### In this article
+## In this article
 
 - <a href="#intro">Introduction of the feature</a>
 - <a href="#navigate-to">Interaction: Navigate to</a>

en/master-detail/step-by-step-examples.md

@@ -23,17 +23,17 @@ Global variable set from one View and Updating Grid request from another View th
 3. Go to the other view, where the Grid is bound to an API request fetching orders based on that CustomerID
 4. The Grid should be updated with the selected CustomerID (from the Combo)
 
-<img src="../images/state-and-context/18.png" srcset="../images/state-and-context/18.png 2x" />
-<p style="text-align:center;">Selection Changed event</p>
+   <img src="../images/state-and-context/18.png" srcset="../images/state-and-context/18.png 2x" />
+   <p style="text-align:center;">Selection Changed event</p>
 
-<img src="../images/state-and-context/20.png" srcset="../images/state-and-context/20.png 2x" />
-<p style="text-align:center;">CustomerID Variable</p>
+   <img src="../images/state-and-context/20.png" srcset="../images/state-and-context/20.png 2x" />
+   <p style="text-align:center;">CustomerID Variable</p>
 
 5. Upon clicking on Order from the Orders grid, load another Grid with OrderDetails
 6. Result
 
-<img src="../images/state-and-context/21.png" srcset="../images/state-and-context/21.png 2x" />
-<p style="text-align:center;">Result</p>
+   <img src="../images/state-and-context/21.png" srcset="../images/state-and-context/21.png 2x" />
+   <p style="text-align:center;">Result</p>
 
 ## Example 2
 
@@ -44,27 +44,27 @@ Tree bound to Hierarchical data source loading data for Grid and Chart
 1. Add a Tree component and bind its parent to a Hierarchical data source (Repeated data context).
 2. Bind the parent tree node On Click event to a Set variable action that stores the CustomerID - String variable
 
-<img src="../images/state-and-context/22.png" srcset="../images/state-and-context/22.png 2x" />
-<p style="text-align:center;">Tree node binding</p>
+   <img src="../images/state-and-context/22.png" srcset="../images/state-and-context/22.png 2x" />
+   <p style="text-align:center;">Tree node binding</p>
 
 3. Add a Tree child node and repeat to the Parent data context. Bind the child tree node On Click event to a Set variable action that stores the OrderID - Number variable
 
-<img src="../images/state-and-context/23.png" srcset="../images/state-and-context/23.png 2x" />
-<p style="text-align:center;">Child node binding</p>
+   <img src="../images/state-and-context/23.png" srcset="../images/state-and-context/23.png 2x" />
+   <p style="text-align:center;">Child node binding</p>
 
 4. Ensure the root tree element shows the Customer and the child tree node shows the Orders
 
 5. Bind a Grid to an endpoint that fetches Orders based on the OrderID variable as a query param
 
-<img src="../images/state-and-context/24.png" srcset="../images/state-and-context/24.png 2x" />
-<p style="text-align:center;">Bind Grid to Orders data</p>
+   <img src="../images/state-and-context/24.png" srcset="../images/state-and-context/24.png 2x" />
+   <p style="text-align:center;">Bind Grid to Orders data</p>
 
 6. Bind the Chart to an endpoint that fetches Customer orders history based on the CustomerID variable as a query param
 
-<img src="../images/state-and-context/25.png" srcset="../images/state-and-context/25.png 2x" />
-<p style="text-align:center;">Bind Chart to Customer Orders History table</p>
+   <img src="../images/state-and-context/25.png" srcset="../images/state-and-context/25.png 2x" />
+   <p style="text-align:center;">Bind Chart to Customer Orders History table</p>
 
 7. Result
 
-<img src="../images/state-and-context/26.png" srcset="../images/state-and-context/26.png 2x" />
-<p style="text-align:center;">Tree + Grid + Chart Result</p>
+   <img src="../images/state-and-context/26.png" srcset="../images/state-and-context/26.png 2x" />
+   <p style="text-align:center;">Tree + Grid + Chart Result</p>