Skip to content

Commit eca6ec6

Browse files
viktorkombovviktorkombov
authored
Merge pull request #224 from IgniteUI/dtsvetkov/add-images-embedded-videos
Add missing images and update embedded videos
2 parents f4bdd76 + b54fbda commit eca6ec6

22 files changed

Lines changed: 54 additions & 33 deletions

‎docs/angular/public/images/general/play.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ last_updated: "2026-04-21"
88
import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
99
import { Image } from 'astro:assets';
1010
import play from '../../../images/general/play.svg';
11+
import buildCLIappGif from '../../../images/general/buildCLIapp.gif';
1112

1213

1314

@@ -58,9 +59,9 @@ ig new
5859
```
5960

6061
<div style="display:inline-block;">
61-
<a style="background: url(../../../images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;"
62+
<a style={`background: url(${buildCLIappGif.src}); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;`}
6263
href="https://youtu.be/QK_NsdtdA70" target="_blank">
63-
<img src="../../../images/general/play.svg" alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
64+
<Image src={play} alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
6465
</a>
6566
<p style="text-align:center;">Building Your First Ignite UI CLI App</p>
6667
</div>

‎docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ last_updated: "2025-04-06"
88
import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
99
import { Image } from 'astro:assets';
1010
import play from '../../../images/general/play.svg';
11+
import buildCLIappGif from '../../../images/general/buildCLIapp.gif';
1112
import igStepByStepProjectType from '../../../images/general/ig-step-by-step-project-type.png';
1213
import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png';
1314
import igStepByStepNewProjectTemplate from '../../../images/general/ig-step-by-step-new-project-template.png';
@@ -16,6 +17,8 @@ import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-ste
1617
import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png';
1718
import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png';
1819
import igStepByStepScenarioTemplates from '../../../images/general/ig-step-by-step-scenario-templates.png';
20+
import igStepByStepAiConfigAssistants from '../../../images/general/ig-step-by-step-ai-config-assistants.png';
21+
import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-ai-config-agents.png';
1922

2023
# Step-by-Step Guide Using Ignite UI for Angular Schematics
2124

@@ -30,9 +33,9 @@ ng new --collection="@igniteui/angular-schematics"
3033
```
3134

3235
<div style="display:inline-block;">
33-
<a style="background: url(/images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;"
36+
<a style={`background: url(${buildCLIappGif.src}); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;`}
3437
href="https://youtu.be/QK_NsdtdA70" target="_blank">
35-
<img src="../../../images/general/play.svg" alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
38+
<Image src={play} alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
3639
</a>
3740
</div>
3841

@@ -115,7 +118,7 @@ After choosing your bootstrapping type, project name, template, and theme, the w
115118

116119
You will be prompted to select which coding assistants to configure MCP servers for. Use the SPACE key to toggle selections and ENTER to confirm:
117120

118-
![Step by step prompt: choose coding assistants for MCP configuration](../../../images/general/ig-step-by-step-ai-config-assistants.png)
121+
<Image src={igStepByStepAiConfigAssistants} alt="Step by step prompt: choose coding assistants for MCP configuration" class="responsive-img" />
119122

120123
- **Generic** (Claude Code, VS Code, and others) - writes `.mcp.json`
121124
- **VS Code** (GitHub Copilot) - writes `.vscode/mcp.json`
@@ -130,7 +133,7 @@ The default selection is **Generic**. Selecting **None** skips MCP server config
130133

131134
Next, you will be prompted to select which AI agents to configure skill files and instructions for:
132135

133-
![Step by step prompt: choose AI agents for skill files and instructions](../../../images/general/ig-step-by-step-ai-config-agents.png)
136+
<Image src={igStepByStepAiConfigAgents} alt="Step by step prompt: choose AI agents for skill files and instructions" class="responsive-img" />
134137

135138
- **Generic** - `.agents/skills/` and `AGENTS.md`
136139
- **Claude** - `.claude/skills/` and `.claude/CLAUDE.md`

‎docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ last_updated: "2025-04-08"
88
import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
99
import { Image } from 'astro:assets';
1010
import play from '../../../images/general/play.svg';
11+
import buildCLIappGif from '../../../images/general/buildCLIapp.gif';
1112
import igStepByStepProjectTypeCli from '../../../images/general/ig-step-by-step-project-type-cli.png';
1213
import igStepByStepScenarioTemplates from '../../../images/general/ig-step-by-step-scenario-templates.png';
1314
import igStepByStepNewProjectName from '../../../images/general/ig-step-by-step-new-project-name.png';
@@ -16,6 +17,8 @@ import igStepByStepNewProjectTheme from '../../../images/general/ig-step-by-step
1617
import igStepByStepNewProjectAction from '../../../images/general/ig-step-by-step-new-project-action.png';
1718
import igStepByStepTemplateGroup from '../../../images/general/ig-step-by-step-template-group.png';
1819
import igStepByStepComponentFeatures from '../../../images/general/ig-step-by-step-component-features.png';
20+
import igStepByStepAiConfigAssistants from '../../../images/general/ig-step-by-step-ai-config-assistants.png';
21+
import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-ai-config-agents.png';
1922

2023
# Step-by-Step Guide Using Ignite UI CLI
2124

@@ -36,9 +39,9 @@ ig new
3639
```
3740

3841
<div style="display:inline-block;">
39-
<a style="background: url(../../../images/general/buildCLIapp.gif); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;"
42+
<a style={`background: url(${buildCLIappGif.src}); display:flex; justify-content:center; width: 80vw; max-width:540px; min-height:315px;`}
4043
href="https://youtu.be/QK_NsdtdA70" target="_blank">
41-
<img src="../../../images/general/play.svg" alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
44+
<Image src={play} alt="Play video: Building Your First Ignite UI CLI App" style="vertical-align: middle;" />
4245
</a>
4346
<p style="text-align:center;">Building Your First Ignite UI CLI App</p>
4447
</div>
@@ -101,7 +104,7 @@ After choosing your framework, project type, template, and theme, the wizard pro
101104

102105
You will be prompted to select which coding assistants to configure MCP servers for. Use the SPACE key to toggle selections and ENTER to confirm:
103106

104-
![Step by step AI config coding assistants prompt](../../../images/general/ig-step-by-step-ai-config-assistants.png)
107+
<Image src={igStepByStepAiConfigAssistants} alt="Step by step AI config coding assistants prompt" class="responsive-img" />
105108

106109
- **Generic** (Claude Code, VS Code, and others) - writes `.mcp.json`
107110
- **VS Code** (GitHub Copilot) - writes `.vscode/mcp.json`
@@ -116,7 +119,7 @@ The default selection is **Generic**. Selecting **None** skips MCP server config
116119

117120
Next, you will be prompted to select which AI agents to configure skill files and instructions for:
118121

119-
![Step by step AI config agents prompt](../../../images/general/ig-step-by-step-ai-config-agents.png)
122+
<Image src={igStepByStepAiConfigAgents} alt="Step by step AI config agents prompt" class="responsive-img" />
120123

121124
- **Generic** - `.agents/skills/` and `AGENTS.md`
122125
- **Claude** - `.claude/skills/` and `.claude/CLAUDE.md`

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-events.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ keywords: handling angular events, ignite ui for angular, infragistics
66

77
# Handling Angular Events
88

9-
> [!Video https://www.youtube.com/embed/V1Futz4W400]
9+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/V1Futz4W400">
10+
</iframe>
1011

1112
The Angular events are emitted as a response to user interactions. When an Angular event is emitted, its event handling logic is executed. WPF provides routed events, CLR events, and commands. While in Angular, there are DOM events.
1213

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/angular-pipes.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
88

99
# Transform Data with Angular Pipes
1010

11-
> [!Video https://www.youtube.com/embed/Gmz5kio50FE]
11+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/Gmz5kio50FE">
12+
</iframe>
1213

1314
You can use the Angular pipes to transform data from one value to another. This technic is similar to WPF converters.
1415

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-first-angular-app.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import firstAngularApp from '../../../images/general/First_angular_app.png';
1212

1313
# Create an Angular application
1414

15-
> [!Video https://www.youtube.com/embed/dhjrAPPad54]
15+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/dhjrAPPad54">
16+
</iframe>
1617

1718
Learn how to start creating an Angular application when you migrate from WPF to Angular.
1819

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/create-ui-with-components.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import sampleComponent from '../../../images/general/sample_component.png';
1212

1313
# Create User Interface with an Angular component
1414

15-
> [!Video https://www.youtube.com/embed/z1SZUezpRXY]
15+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/z1SZUezpRXY">
16+
</iframe>
1617

1718
When it comes to creating user interface in an Angular application you can use an Angular component to facilitate the process.
1819

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/one-way-binding.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
1010

1111
One-way data binding in Angular (i.e. unidirectional binding) is a way to bind data from the component to the view (DOM) or vice versa - from view to the component. It is used to display information to the end-user which automatically stays synchronized with each change of the underlying data. This is similar to the one-way binding in WPF.
1212

13-
> [!Video https://www.youtube.com/embed/fP7iVhFNTOk]
13+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/fP7iVhFNTOk">
14+
</iframe>
1415

1516
## What is Angular data binding?
1617

‎docs/angular/src/content/en/components/general/wpf-to-angular-guide/structural-directives.mdx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ keywords: angular structural directives, ignite ui for angular, infragistics
66

77
# Angular Structural Directives
88

9-
> [!Video https://www.youtube.com/embed/vQe7R78Od8k]
9+
<iframe width="100%" height="600" src="https://www.youtube.com/embed/vQe7R78Od8k">
10+
</iframe>
1011

1112
When it comes to control the appearance of the visual tree elements’ appearance in WPF, the most common way is to use binding and visibility converter, which requires some extra logic and static resources. Angular also has a similar technique, which changes the appearance or behavior of a DOM element - the Angular directives. One of the Angular `directives` type is the `structural directives` – they change the DOM layout by adding or removing DOM elements.
1213

0 commit comments

Comments
 (0)