diff --git a/build/workflow/stage-determine-changes.yml b/build/workflow/stage-determine-changes.yml
index c808f8445..86df4aa6f 100644
--- a/build/workflow/stage-determine-changes.yml
+++ b/build/workflow/stage-determine-changes.yml
@@ -34,11 +34,11 @@ jobs:
}
foreach ($file in $changedFiles -split "`n") {
- # Identifying changes as documentation if they occur:
- # Within the doc folder, or
- # Are Markdown files at the root level (with no subdirectories involved), or
- # Are Markdown files within the .github folder (including its subdirectories)
- $isDoc = $file.StartsWith("doc/") -or ($file -match "^[^/]+\.md$") -or ($file -match "^\.github/.*\.md$")
+ # Identifying changes as documentation:
+ $isDoc = $file.StartsWith("doc/") -or # Files in the 'doc/' directory
+ ($file -match "^[^/]+\.md$") -or # Markdown files at the root level (with no subdirectories involved)
+ ($file -match "^\.github/.*\.md$") -or # Markdown files within the .github folder (including its subdirectories)
+ ($file -match "^\.(markdownlint|cspell)\.json$") # Specific JSON files: .markdownlint.json and cspell.json
if ($isDoc) {
$docFiles++
diff --git a/doc/controls/DrawerFlyoutPresenter.md b/doc/controls/DrawerFlyoutPresenter.md
index 23fa97f98..9cdc03990 100644
--- a/doc/controls/DrawerFlyoutPresenter.md
+++ b/doc/controls/DrawerFlyoutPresenter.md
@@ -92,16 +92,7 @@ notes:
### Usage
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/JWTZxnVsd_A]
To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`.
@@ -151,7 +142,8 @@ Example:
```
- > remarks: `Padding` is used on the flyout content to avoid content being clipped.
+ > [!NOTE]
+ > `Padding` is used on the flyout content to avoid content being clipped.
- Custom background
```xml
@@ -167,7 +159,8 @@ Example:
```
- > remarks: Avoid setting `Background` directly on the flyout content:
+ > [!WARNING]
+ > Avoid setting `Background` directly on the flyout content:
>
> ```xml
>
diff --git a/doc/controls/ExtendedSplashScreen.md b/doc/controls/ExtendedSplashScreen.md
index 81158236e..2934423c0 100644
--- a/doc/controls/ExtendedSplashScreen.md
+++ b/doc/controls/ExtendedSplashScreen.md
@@ -17,17 +17,8 @@ A common use case for this control is to display an application loading element
> [!TIP]
> Users expect applications to load quickly after they launch them, so it is important to minimize the duration that a splash screen is displayed. `ExtendedSplashScreen` is intended to support a consistent user experience across platforms where scenarios necessitate a longer startup process.
-
-
-
-
+>
+> [!Video https://www.youtube-nocookie.com/embed/jMI4E2e9gYE]
## Properties
diff --git a/doc/controls/LoadingView.md b/doc/controls/LoadingView.md
index 922b88de0..cc3249d9c 100644
--- a/doc/controls/LoadingView.md
+++ b/doc/controls/LoadingView.md
@@ -6,16 +6,7 @@ uid: Toolkit.Controls.LoadingView
Represents a control that indicates that the UI is waiting on a task to complete.
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/3cpjJ3keBvM]
## Properties
diff --git a/doc/controls/NavigationBar.md b/doc/controls/NavigationBar.md
index 108d41cfa..c230a6d8f 100644
--- a/doc/controls/NavigationBar.md
+++ b/doc/controls/NavigationBar.md
@@ -13,16 +13,7 @@ The `NavigationBar` represents a specialized app bar that provides the layout fo
For a quick introduction to `NavigationBar`, you can check out our introductory video below:
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/4-Q0hy2BnMI]
This document highlights some of the differences you might encounter when working with the native mode of `NavigationBar` on either **iOS** or **Android**.
diff --git a/doc/controls/ResponsiveView.md b/doc/controls/ResponsiveView.md
index 85371dd63..0f0ce5a5a 100644
--- a/doc/controls/ResponsiveView.md
+++ b/doc/controls/ResponsiveView.md
@@ -84,31 +84,13 @@ If you prefer instructional videos, you can follow our tutorials on how to work
### [**XAML**](#tab/techbite-xaml)
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/VgpC79ErNRI]
### [**C# Markup**](#tab/techbite-csmarkup)
-
-
-
-
-***
+> [!Video https://www.youtube-nocookie.com/embed/lQueBn6LEyU]
+
+---
> [!TIP]
> It is not necessary to define every template or layout breakpoint: Narrowest, Narrow, Normal, Wide, Widest. You can just define the bare minimum needed.
diff --git a/doc/controls/SafeArea.md b/doc/controls/SafeArea.md
index b8b33e20b..f6229be0d 100644
--- a/doc/controls/SafeArea.md
+++ b/doc/controls/SafeArea.md
@@ -12,16 +12,7 @@ The `ApplicationView.VisibleBounds` is the rectangular area of the screen which
In some cases, it is acceptable for visible content to be partially obscured (a page background for example) and it should extend to fill the entire window. Other types of content should be restricted to the visible bounds (for instance: readable text, or interactive controls). `SafeArea` enables this kind of fine-grained control over responsiveness to the safe and "unsafe" areas of the screen.
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/H-HkMzYCiOM]
## Properties
@@ -186,7 +177,7 @@ Bottom TabBar:
-***
+---
### Using `InsetMask.SoftInput` for on-screen keyboards
diff --git a/doc/controls/ShadowContainer.md b/doc/controls/ShadowContainer.md
index fee06d02e..1259dbb05 100644
--- a/doc/controls/ShadowContainer.md
+++ b/doc/controls/ShadowContainer.md
@@ -8,16 +8,7 @@ uid: Toolkit.Controls.ShadowContainer
The `ShadowContainer` provides the ability to layer multiple shadows to its content.
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/mohQvifKF0Y]
## Package Reference
diff --git a/doc/getting-started.md b/doc/getting-started.md
index f3e472546..dfdc6c86a 100644
--- a/doc/getting-started.md
+++ b/doc/getting-started.md
@@ -12,16 +12,7 @@ This article is a guide for installing the base Uno Toolkit library, additional
- [Getting Started with Material for Toolkit](xref:Toolkit.GettingStarted.Material)
- [Getting Started with Cupertino for Toolkit](xref:Toolkit.GettingStarted.Cupertino)
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/sDmyWJaQp4Q]
### Installation
diff --git a/doc/helpers/StatusBar-extensions.md b/doc/helpers/StatusBar-extensions.md
index e8032e24b..1f55b91b6 100644
--- a/doc/helpers/StatusBar-extensions.md
+++ b/doc/helpers/StatusBar-extensions.md
@@ -6,16 +6,7 @@ uid: Toolkit.Helpers.StatusBarExtensions
Provides two attached properties on `Page` to control the visuals of the status bar on mobile platforms.
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/Mef71b6978s]
## Remarks
diff --git a/doc/helpers/resource-extensions.md b/doc/helpers/resource-extensions.md
index 42352829c..dbd519c82 100644
--- a/doc/helpers/resource-extensions.md
+++ b/doc/helpers/resource-extensions.md
@@ -6,16 +6,7 @@ uid: Toolkit.Helpers.ResourceExtensions
This extension facilitates assigning a specific `ResourceDictionary` directly to a control's style. It simplifies [lightweight styling](../lightweight-styling.md) by eliminating the necessity to declare each resource on the page explicitly, enabling the easy creation of diverse visual elements with shared styles but varied attributes. The extension also supports the reuse of resource dictionaries across different control styles, enhancing consistency and efficiency in the UI design process.
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/OwQkYSlowfU]
## Attached Properties
diff --git a/doc/lightweight-styling.md b/doc/lightweight-styling.md
index 593e92db5..21908daea 100644
--- a/doc/lightweight-styling.md
+++ b/doc/lightweight-styling.md
@@ -5,16 +5,7 @@ uid: Toolkit.LightweightStyling
For general information about [lightweight styling](https://learn.microsoft.com/windows/apps/design/style/xaml-styles#lightweight-styling), check out [Lightweight Styling in Uno.Themes](xref:uno.themes.lightweightstyling).
-
-
-
+> [!Video https://www.youtube-nocookie.com/embed/5CsJHMTlNAw]
## Example
diff --git a/doc/toc.yml b/doc/toc.yml
index 89f79e1eb..76ab5d169 100644
--- a/doc/toc.yml
+++ b/doc/toc.yml
@@ -65,7 +65,6 @@
href: helpers/progress-extensions.md
- name: Responsive markup extension
href: helpers/responsive-extension.md
- - name: StatusBar attached properties
- name: Resource Extensions
href: helpers/resource-extensions.md
- name: Selector Extensions