docs(common): Migrate to docs-builder (#2476)

* adding docs builder config and content fixes

* chore(common): fix malformed code block tags

* chore(common): fix broken links

* chore(common): fix broken code blocks

* chore(common): fix broken links

* chore(common): fix links:

* chore(common): fix links

* chore(common): fix links

* chore(common): fix links

* chore(common): fix links

* chore(common): fix links

* docs: changed primary-color to purple

* chore(common): fix links

* chore(common): fix links

* chore(common): fix links

* chore(common): fix broken relative link

* chore(common): fix no code block language errors

* chore(common): fix no code block language errors

* chore(common): fix no language errors

* chore(common): fix broken blocks of code

* chore(common): cannot find gramar fixes

* chore(common): fix broken code blocks

* chore(common): add latest fixes from the excel file

* chore(common): fix tables in breaking changes articles and remaining warnings

* chore(common): fix latest warnings

* chore(common): fix unresolved urls

* chore(common): fix link

* adding docs builder interpolation settings

* chore(common): fix remaining links

* chore(common) fix broken nested ol's

* Add blazor-repl prop in config

* adding metadata-config for docfx

* Fix some md files with wrong skip-repl

* fixing broken api ref link

* Removed system.object inherited members and datasource expressions broken regex

* fixed codeblock with unescaped interpolation

* Fix: Fix some wrong MD files

* close code block

* Fix: Fix some wrong MD files

* fixing api ref links

* fixing trial link

* added theme version to liquid vars

* fix metadata

* fixing nav items ordering

* fixed links

* fixing a11y links

* added pdf cover

* applied latest nav changes

* fixing broken markdown content

* fixing broken code block

* Add intro-page table

* changing primary color

* fix tabbed code blocks + headings

* Fix: Some code blocks were Repl

* Fix: Some wrong codeblocks

* Fix: Some wrong codeblocks

* Fix: Some wrong codeblocks

* Fix: Some wrong codeblocks

* Fix: worng codeblock language

* Fix some REPL to codeblocks

* Fix come codeblocks to REPL

* Fix: wrong tabbed code block

* Fix ninja-avatar icon

* chore(common): skip repl in snippets

* chore(Gantt): fix snippets and skip repl

* chore(Grid,Gauge): fix snippets and skip repl

* chore(common): fix snippets

* chore(treelist): fix snippets

* chore(docs): fixing broken links

* Replace CSHTML with RAZOR

* Fix code snippets

---------

Co-authored-by: Nikolay Nenkov <[email protected]>
Co-authored-by: Hristian Stefanov <[email protected]>
Co-authored-by: AngelVelinov <[email protected]>
Co-authored-by: Atanas Atanasov <[email protected]>
Co-authored-by: Dimo Dimov <[email protected]>

Author: 6 people

_assetsApi/filterConfig.yml

@@ -13,12 +13,13 @@ apiRules:
 - exclude:
     uidRegex: ^Telerik\.DataSource\.IDescriptor$
 - exclude:
-    uidRegex: ^Telerik\.DataSource\.Expressions\.*$
+    uidRegex: ^Telerik\.DataSource\.Expressions\..*$
 - exclude:
     uidRegex: ^Telerik\.DataSource\.\w*Node
 - exclude:
     uidRegex: ^Telerik\.DataSource\.\w*Expression\w*$
 - exclude:
     uidRegex: ^Telerik\.DataSource\.\w+Aggregate\w*$
 - exclude:
-    uidRegex: ^Telerik.Blazor.Components.ToolBarw*$
+    type: Method
+    uidRegex: ^System\.Object\..*$

_assetsApi/metadata-config.json

@@ -0,0 +1,13 @@
+{
+  "metadata": [{
+            "src": [
+                {
+                    "files": [
+                        "src/**.dll"
+                    ]
+                }
+            ],
+            "dest": "metadata",
+            "filter": "filterConfig.yml"
+  }]
+}

_contentTemplates/chart/link-to-basics.md

@@ -7,7 +7,7 @@ This article assumes you are familiar with the [chart basics]({%slug components/
 
 Bar and Column charts can take the color of the series item from the `ColorField` of the data source. You can pass a valid CSS color (for example, `#abcdef`, `#f00`, or `blue`).
 
-````CSHTML
+````RAZOR
 Colors per series item
 
 <TelerikChart>

_contentTemplates/common/format-placeholders.md

@@ -24,7 +24,7 @@ By default the value for all parameters would be `null`, the full format specifi
 
 >caption Provide a custom string to the day, month, and year segments
 
-````CSHTML
+````RAZOR
 @* Provide custom rendering of the day, month, and year segments *@
 
 <TelerikDatePicker @bind-Value="@DateValue">

_contentTemplates/common/get-model-from-dropdowns.md

@@ -1,5 +1,5 @@
 #get-model-from-dropdowns
->tip If you are looking for more fields from the view-model that describes the dropdown items, not just the `Value`, see the [Get model from dropdown]({%slug dropdowns-get-model%}) KB article and the [OnChange](events#onchange) event.
+>tip If you are looking for more fields from the view-model that describes the dropdown items, not just the `Value`, see the [Get model from dropdown]({%slug dropdowns-get-model%}) KB article and the [OnChange](../events#onchange) event.
 >
 > You may also want to review/join the discussion and Vote for this request: <a href="https://www.telerik.com/forums/binding-dropdownlist-value-to-complex-model" target="_blank">Binding DropDownList Value to complex model</a>
 #end

_contentTemplates/common/get-started.md

@@ -35,7 +35,7 @@ In this tutorial, you will use the [Telerik NuGet feed]({%slug installation/nuge
 
 1. Add the `https://nuget.telerik.com/v3/index.json` URL as a **Source**. Click **OK**.
 
-  ![Add the Telerik NuGet Feed in Visual Studio](images/telerik-nuget-feed.png)
+![Add the Telerik NuGet Feed in Visual Studio](images/telerik-nuget-feed.png)
 
 1. Whenever Visual Studio displays a dialog to enter credentials for `nuget.telerik.com`, use your Telerik account email and password.
 
@@ -46,36 +46,36 @@ In this tutorial, you will use the [Telerik NuGet feed]({%slug installation/nuge
 
 #add-component-sample
 
-    **RAZOR**
-    
-        <TelerikButton>Say Hello</TelerikButton>
-        
-1. Optionally, hook up a click handler that will show a message. The resulting view will look like this:
-
-    **RAZOR**
-    
-        @page "/"
-        
-        <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
-                    OnClick="@SayHelloHandler">Say Hello</TelerikButton>
-
-        <p>@HelloString</p>
+   ````RAZOR.skip-repl
+   <TelerikButton>Say Hello</TelerikButton>
+   ````
 
-        @code {
-            private MarkupString HelloString { get; set; }
-
-            private void SayHelloHandler()
-            {
-                string msg = $"Hello from <strong>Telerik UI for Blazor</strong> at {DateTime.Now.ToString("HH:mm:ss")}!" +
-                    "<br /> Now you can use C# to write front-end!";
+1. Optionally, hook up a click handler that will show a message. The resulting view will look like this:
 
-                HelloString = new MarkupString(msg);
-            }
-        }
+   ````RAZOR.skip-repl
+   @page "/"
+           
+   <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
+                  OnClick="@SayHelloHandler">Say Hello</TelerikButton>
+   
+   <p>@HelloString</p>
+   
+   @code {
+       private MarkupString HelloString { get; set; }
+   
+       private void SayHelloHandler()
+       {
+           string msg = $"Hello from <strong>Telerik UI for Blazor</strong> at {DateTime.Now.ToString("HH:mm:ss")}!" +
+               "<br /> Now you can use C# to write front-end!";
+   
+           HelloString = new MarkupString(msg);
+       }
+   }
+   ````
 
 1. Run the app in the browser. You should see something like this:
 
-    ![Telerik Blazor app in the browser](images/blazor-app-in-browser.png)
+![Telerik Blazor app in the browser](images/blazor-app-in-browser.png)
 
 Well done! Now you have your first Telerik UI for Blazor component running in your Blazor app.
 
@@ -138,7 +138,7 @@ Add a `<TelerikRootComponent>` to the app layout file (by default, `MainLayout.r
 
 <div class="skip-repl"></div>
 
-````CSHTML
+````RAZOR
 @inherits LayoutComponentBase
 
 <TelerikRootComponent>

_contentTemplates/common/inputs.md

@@ -13,13 +13,13 @@ Consider setting `DebounceDelay="0"` to the component inside the editor template
 
 The component allows you to add custom elements as prefixes and suffixes. [Read more about how to render custom adornments before and after the input element...]({%slug common-features/input-adornments%})
 #end
-
+ 
 #floating-label-and-preffix
-When using the [`PrefixTemplate`]({%slug common-features/input-adornments%}#adding-prefix-in-ui-for-blazor-components) for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix.
+When using the [`PrefixTemplate`]({%slug common-features/input-adornments%}#adding-a-prefix-adornment) for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix.
 
 To ensure both the FloatingLabel and the prefix content are properly displayed, move the label with CSS:
 
-````CSHTML
+````RAZOR
 <style>
     .custom-label-class .k-floating-label {
         margin-left: 30px;

_contentTemplates/common/js-interop-file.md

@@ -20,7 +20,7 @@
 #end
 
 #js-interop-file-snippet
-````
+````HTML
 <head>
     . . .
     <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
@@ -33,7 +33,7 @@
 #end
 
 #theme-static-asset-snippet
-````
+````HTML
 <head>
     . . .
     <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
@@ -47,7 +47,7 @@
 
 #register-telerik-service-server
 <div class="skip-repl"></div>
-````
+````C#
 // ...
 
 var builder = WebApplication.CreateBuilder(args);
@@ -64,7 +64,7 @@ var app = builder.Build();
 
 #register-telerik-service-client
 <div class="skip-repl"></div>
-````.NET_6_and_.NET_7
+````C#
 using ClientBlazorProject;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

_contentTemplates/grid/common-link.md

@@ -4,7 +4,7 @@
 
 
 #conditional-style-row-and-cell-render
-````CSHTML
+````RAZOR
 @* Conditional styling/formatting for a cell and row *@
 
 <style>
@@ -171,7 +171,8 @@ A multi-header column does not show up in the list of columns in the column choo
 
 The state of a multi-header column is handled in the same way as a standard column. The columns in the state are listed in a flat list in the order of definition. For example, for the following setup:
 
-````CSHTML
+<div class="skip-repl"></div>
+````RAZOR
 <TelerikGrid>
     <GridColumns>
         <GridColumn Title="column 1">

_contentTemplates/grid/export.md

@@ -9,70 +9,70 @@
 
 * With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example:
 
-    **C#**
-    
-            services.AddServerSideBlazor().AddHubOptions(o =>
-            {
-                o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
-            });
+````C#.skip-repl
+services.AddServerSideBlazor().AddHubOptions(o =>
+{
+    o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
+});
+````
 
 * With Client-side Blazor (WebAssembly), all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. This means that while the file is being generated, the UI will be unresponsive, so you may want to show a loading sign to the user through the `OnClick` handler of the command button, something like:
 
-    **Component**
-    
-        @* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@
+````RAZOR.skip-repl Component
+@* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@
         
-        <TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true">
-            <GridToolBarTemplate>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
-            </GridToolBarTemplate>
-            <GridExport>
-                <GridExcelExport AllPages="true" FileName="telerik-grid-export" />
-                <GridCsvExport AllPages="true" FileName="telerik-grid-export" />
-            </GridExport>
-        </TelerikGrid>
+<TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true">
+    <GridToolBarTemplate>
+        <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
+        <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
+    </GridToolBarTemplate>
+    <GridExport>
+        <GridExcelExport AllPages="true" FileName="telerik-grid-export" />
+        <GridCsvExport AllPages="true" FileName="telerik-grid-export" />
+    </GridExport>
+</TelerikGrid>
         
-        <TelerikWindow Visible="@isExporting" Modal="true">
-            <WindowTitle>Please wait...</WindowTitle>
-            <WindowContent>We are exporting your data, your file will download shortly.</WindowContent>
-        </TelerikWindow>
+<TelerikWindow Visible="@isExporting" Modal="true">
+    <WindowTitle>Please wait...</WindowTitle>
+    <WindowContent>We are exporting your data, your file will download shortly.</WindowContent>
+</TelerikWindow>
         
-        @code {
-            bool isExporting { get; set; }
+@code {
+    bool isExporting { get; set; }
         
-            async Task ShowLoadingSign()
-            {
-                isExporting = true;
-                StateHasChanged();
-                // This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker
-                await Task.Delay(50);
-                isExporting = false;
-            }
+    async Task ShowLoadingSign()
+    {
+        isExporting = true;
+        StateHasChanged();
+        // This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker
+        await Task.Delay(50);
+        isExporting = false;
+    }
         
-            List<SampleData> GridData { get; set; }
+    List<SampleData> GridData { get; set; }
         
-            protected override void OnInitialized()
-            {
-                GridData = Enumerable.Range(1, 1000).Select(x => new SampleData
-                {
-                    ProductId = x,
-                    ProductName = $"Product {x}",
-                    UnitsInStock = x * 2,
-                    Price = 3.14159m * x,
-                    Discontinued = x % 4 == 0,
-                    FirstReleaseDate = DateTime.Now.AddDays(-x)
-                }).ToList();
-            }
+    protected override void OnInitialized()
+    {
+        GridData = Enumerable.Range(1, 1000).Select(x => new SampleData
+        {
+            ProductId = x,
+            ProductName = $"Product {x}",
+            UnitsInStock = x * 2,
+            Price = 3.14159m * x,
+            Discontinued = x % 4 == 0,
+            FirstReleaseDate = DateTime.Now.AddDays(-x)
+        }).ToList();
+    }
         
-            public class SampleData
-            {
-                public int ProductId { get; set; }
-                public string ProductName { get; set; }
-                public int UnitsInStock { get; set; }
-                public decimal Price { get; set; }
-                public bool Discontinued { get; set; }
-                public DateTime FirstReleaseDate { get; set; }
-            }
-        }
+    public class SampleData
+    {
+        public int ProductId { get; set; }
+        public string ProductName { get; set; }
+        public int UnitsInStock { get; set; }
+        public decimal Price { get; set; }
+        public bool Discontinued { get; set; }
+        public DateTime FirstReleaseDate { get; set; }
+    }
+}
+````
 #end

_contentTemplates/rootcomponent/setup.md

@@ -9,14 +9,14 @@
 
 <div class="skip-repl"></div>
 
-````TelerikLayout.razor
+````RAZOR TelerikLayout.razor
 @inherits LayoutComponentBase
 
 <TelerikRootComponent>
     @Body
 </TelerikRootComponent>
 ````
-````MainLayout.razor
+````RAZOR MainLayout.razor
 @inherits LayoutComponentBase
 @layout TelerikLayout