[4.3] docs(common): update the project wizard article and add hybrid template (#1481)

* docs(common): update the project wizard article and add hybrid template

* docs(common): fixes as per comments

Author: xristianstefanov

_contentTemplates/common/js-interop-file.md

@@ -141,33 +141,4 @@ builder.Services.AddTelerikBlazor();
 
 await builder.Build().RunAsync();
 ````
-````.NET_3.x
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.DependencyInjection;
-using System.Threading.Tasks;
-using System.Net.Http;
-using System;
-        
-namespace ClientBlazorProject.Client // Make sure this matches your actual WASM project namespace.
-{
-    public class Program
-    {
-        public static async Task Main(string[] args)
-        {
-            // sample host builder for a WASM app, yours may differ
-            var builder = WebAssemblyHostBuilder.CreateDefault(args);
-            builder.RootComponents.Add<App>("app");
-            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-            // There may be more code here.
-
-            // Register the Telerik services.
-            builder.Services.AddTelerikBlazor();
-
-            // There may be more code here.
-            // sample host builder for a WASM app, yours may differ
-            await builder.Build().RunAsync();
-        }
-    }
-}
-````
 #end

getting-started/hybrid-blazor.md

@@ -1,8 +1,8 @@
 ---
-title: Blazor Hybrid with .NET MAUI (Tutorial)
+title: Blazor Hybrid with .NET MAUI
 page_title: First Steps with Blazor Hybrid
 description: Make your first steps with Telerik UI for Blazor and build a .NET MAUI Blazor Hybrid app that runs the UI for Blazor components.
-slug: getting-started-hybrid-maui
+slug: getting-started/hybrid-blazor
 tags: get,started,first,steps,server,hybrid,maui
 published: true
 position: 3

getting-started/vs-integration/convert-project-wizard.md

@@ -21,7 +21,7 @@ The wizard adds the following client assets to your project:
 The wizard also configures the project to use the Telerik UI for Blazor components by adding the following utilities:
 * [Required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
 * [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
-* Registration for the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).
+* Registration for the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics), for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics), and for [hybrid projects]({%slug getting-started/what-you-need%}#blazor-hybrid-project-specifics).
 
 ## Getting the Wizard
 
@@ -102,7 +102,7 @@ The most common reason for this problem is a mismatch between the installed vers
 
 The cause are wrong paths to the needed web assets. To resolve this open the index file:
 
-* `wwwroot/index.html` for a WebAssembly Blazor app
+* `wwwroot/index.html` for a WebAssembly and a Hybrid Blazor app
 * `~/Pages/_Host.cshtml` for a Server-Side Blazor app using .NET 3.x or .NET 5
 * `~/Pages/_Layout.cshtml` for a Server-Side Blazor app using.NET 6
 

getting-started/vs-integration/images/vsx-extension-base.png

@@ -21,7 +21,7 @@ The wizard adds the following client assets to your project:
 The wizard also configures the project to use the Telerik UI for Blazor components by adding the following utilities:
 * [Required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
 * [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
-* Registration for the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).
+* Registration for the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics), for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics), and for [hybrid projects]({%slug getting-started/what-you-need%}#blazor-hybrid-project-specifics).
 
 ## Getting the Wizard
 
@@ -56,7 +56,7 @@ In the order of their appearance, the Create New Project wizard presents the fol
 
 2. On the second screen, you can choose:
 
-   * A WebAssembly or server-side Blazor app.
+   * A WebAssembly, server-side, or Hybrid Blazor app.
    * The .NET version you want to use.
    * The Telerik UI for Blazor version.
    * One of the [predefined Telerik project](#predefined-project-templates) templates.

getting-started/vs-integration/new-project-wizard.md

@@ -70,7 +70,7 @@ You can obtain the required UI for Blazor packages in four ways:
 
 The Telerik UI for Blazor components require a [Telerik stylesheet](#telerik-stylesheet) and a [JS Interop file](#telerik-js-interop-file) in the app's main index file. Depending on the Blazor hosting model and framework version, this index file will differ:
 
-   * For Client-Side Blazor apps, use the `wwwroot/index.html` file.
+   * For Client-Side and Blazor Hybrid apps, use the `wwwroot/index.html` file.
    * For Server-Side Blazor apps, use one of the following files:
       * `~/Pages/_Host.cshtml` for .NET 3.x
       * `~/Pages/_Layout.cshtml` for .NET 6
@@ -120,8 +120,9 @@ To use the Telerik components, you must add a few items to your projects. Some o
 
 2. Follow the section for your project type:
 
-   * [Client-side (WASM)](#client-side-project-specifics).
-   * [Server-side](#server-side-project-specifics).
+   * [Client-side (WASM)](#client-side-project-specifics)
+   * [Server-side](#server-side-project-specifics)
+   * [Blazor Hybrid](#blazor-hybrid-project-specifics)
 
 
 ### Common Configuration
@@ -162,6 +163,33 @@ The final step is to register the Telerik services. In a server-side Blazor proj
 **C#**
 @[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
 
+### Blazor Hybrid Project Specifics
+
+The final step is to register the Telerik services. In a Hybrid Blazor project, you register services in the `MauiProgram.cs` file of the project:
+
+**C#**
+<div class="skip-repl"></div>
+````MauiProgram.cs
+public static MauiApp CreateMauiApp()
+{
+   var builder = MauiApp.CreateBuilder();
+   builder
+      .UseMauiApp<App>()
+      .ConfigureFonts(fonts =>
+      {
+            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+      });
+
+   builder.Services.AddMauiBlazorWebView();
+      
+   // Register the Telerik services.
+   builder.Services.AddTelerikBlazor();
+
+   var host = builder.Build();
+
+   return host;
+}
+````
 
 @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started)