build: set up markdown pipeline for di directory of the content guide (#53290)

Set up the markdown pipeline to include the required source files.

PR Close #53290

adev/src/content/guide/di/BUILD.bazel

@@ -0,0 +1,12 @@
+load("@npm//@angular/build-tooling/bazel/markdown_to_html:markdown_to_html.bzl", "markdown_to_html")
+
+markdown_to_html(
+    name = "di",
+    srcs = glob([
+        "*.md",
+    ]),
+    data = [
+        "//adev/src/assets/images:dependency_injection.svg",
+        "//adev/src/content/examples/resolution-modifiers:src/app/self/self.component.ts",
+    ],
+)

adev/src/content/guide/di/dependency-injection.md

@@ -119,7 +119,8 @@ When Angular discovers that a component depends on a service, it first checks if
 
 When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.
 
-```mermaid
+<!-- TODO(josephperrott): enable this mermaid chart -->
+```
 graph TD;
 subgraph Injector
 serviceA[Service A]

adev/src/content/guide/di/hierarchical-dependency-injection.md

@@ -95,7 +95,8 @@ For more information on `@Optional()`, see the [`@Optional()` section](#optional
 
 The following diagram represents the relationship between the `root` `ModuleInjector` and its parent injectors as the previous paragraphs describe.
 
-```mermaid
+<!-- TODO(josephperrott): enable this mermaid chart -->
+```
 stateDiagram-v2
     elementInjector: EnvironmentInjector\n(configured by Angular)\nhas special things like DomSanitizer => providedIn 'platform'
     rootInjector: root EnvironmentInjector\n(configured by AppConfig)\nhas things for your app => bootstrapApplication(..., AppConfig)
@@ -237,7 +238,7 @@ In this example, there is a parent provider and injecting the service will retur
 Another example shows the component class with a provider for `FlowerService`.
 In this case, the injector looks no further than the current `ElementInjector` because it finds the `FlowerService` and returns the tulip <code>&#x1F337;</code>.
 
-<docs-code header="src/app/self/self.component.ts" path="resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
+<docs-code header="src/app/self/self.component.ts" path="adev/src/content/examples/resolution-modifiers/src/app/self/self.component.ts" visibleRegion="self-component"/>
 
 ### `@SkipSelf()`
 
@@ -1114,7 +1115,8 @@ The root injector, marked as (A), uses _generic_ providers for details about `Ca
 
 3. Child component (C) as a child of Component (B). Component (C) defines its own, even _more specialized_ provider for `CarService`.
 
-```mermaid
+<!-- TODO(josephperrott): enable this mermaid chart -->
+```
 graph TD;
 subgraph COMPONENT_A[Component A]
 subgraph COMPONENT_B[Component B]
@@ -1137,7 +1139,8 @@ When you resolve an instance of `Car` at the deepest component (C), its injector
 * An `Engine` resolved by injector (B)
 * Its `Tires` resolved by the root injector (A).
 
-```mermaid
+<!-- TODO(josephperrott): enable this mermaid chart -->
+```
 graph BT;
 
 subgraph A[" "]

adev/src/content/guide/di/overview.md

@@ -1,4 +1,4 @@
-<docs-decorative-header title="Dependency injection in Angular" imgSrc="assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
+<docs-decorative-header title="Dependency injection in Angular" imgSrc="adev/src/assets/images/dependency_injection.svg"> <!-- markdownlint-disable-line -->
 "DI" is a design pattern and mechanism for creating and delivering some parts of an app to other parts of an app that require them.
 </docs-decorative-header>