Demo.RCL - Routing updates

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

@@ -17,7 +17,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" },
 
             new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success },
-            new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
+            new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
             new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" },
             new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" },
             new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" },
@@ -90,7 +90,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
 
             new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
-            new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
+            new (){ Id = "700", Text = "Modal Service", Href = "/services/modal-service", IconName = IconName.WindowStack, ParentId = "7" },
 
             new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
             new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },

BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor

@@ -61,7 +61,7 @@
 </Section>
 
 @code {
-    private const string pageUrl = "/badge";
+    private const string pageUrl = RouteConstants.Demos_Badge_Documentation;
     private const string pageTitle = "Blazor Badge";
     private const string pageDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
     private const string metaTitle = "Blazor Badge Component";

BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor

@@ -24,7 +24,7 @@
 </Section>
 
 @code {
-        private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation;
+    private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation;
     private const string pageTitle = "Blazor Breadcrumb";
     private const string pageDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
     private const string metaTitle = "Blazor Breadcrumb Component";

BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor

@@ -87,8 +87,10 @@
 <Demo Type="typeof(Button_Demo_12_Click_Event_With_Args)" />
 
 @code {
-    private string pageUrl = "/buttons";
-    private string title = "Blazor Button Component";
-    private string description = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.";
-    private string imageUrl = "https://i.imgur.com/Ne7FJ5H.jpg";
+    private const string pageUrl = RouteConstants.Demos_Buttons_Documentation;
+    private const string pageTitle = "Blazor Button";
+    private const string pageDescription = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.";
+    private const string metaTitle = "Blazor Button Component";
+    private const string metaDescription = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.";
+    private const string imageUrl = "https://i.imgur.com/Ne7FJ5H.jpg";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor

@@ -24,8 +24,10 @@
 <Demo Type="typeof(Callout_Demo_04_Hide_Heading)" />
 
 @code {
-    private string pageUrl = "/callout";
-    private string title = "Blazor Callout Component";
-    private string description = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner.";
-    private string imageUrl = "https://i.imgur.com/y2jI9ix.png";
+    private const string pageUrl = RouteConstants.Demos_Callout_Documentation;
+    private const string pageTitle = "Blazor Callout";
+    private const string pageDescription = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner.";
+    private const string metaTitle = "Blazor Callout Component";
+    private const string metaDescription = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner.";
+    private const string imageUrl = "https://i.imgur.com/y2jI9ix.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor

@@ -90,8 +90,10 @@
 <Demo Type="typeof(Card_Demo_12_Card_Groups_With_Footer)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/card";
-    private string title = "Blazor Card Component";
-    private string description = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.";
-    private string imageUrl = "https://i.imgur.com/RhytwPa.png";
+    private const string pageUrl = RouteConstants.Demos_Card_Documentation;
+    private const string pageTitle = "Blazor Card";
+    private const string pageDescription = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.";
+    private const string metaTitle = "Blazor Card Component";
+    private const string metaDescription = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.";
+    private const string imageUrl = "https://i.imgur.com/RhytwPa.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor

@@ -96,8 +96,10 @@
 </Callout>
 
 @code {
-    private string pageUrl = "/carousel";
-    private string title = "Blazor Carousel Component";
-    private string description = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
-    private string imageUrl = "https://i.imgur.com/YoZd9Hy.png";
+    private const string pageUrl = RouteConstants.Demos_Carousel_Documentation;
+    private const string pageTitle = "Blazor Carousel";
+    private const string pageDescription = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
+    private const string metaTitle = "Blazor Carousel Component";
+    private const string metaDescription = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
+    private const string imageUrl = "https://i.imgur.com/YoZd9Hy.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor

@@ -43,8 +43,10 @@
 <Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/charts/bar-chart";
-    private string title = "Blazor Bar Chart";
-    private string description = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
-    private string imageUrl = "https://i.imgur.com/IX3bajc.png";
+    private const string pageUrl = RouteConstants.Demos_BarChart_Documentation;
+    private const string pageTitle = "Blazor Bar Chart";
+    private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+    private const string metaTitle = "Blazor Bar Chart Component";
+    private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+    private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor

@@ -17,13 +17,13 @@
 <SectionHeading Size="HeadingSize.H4" Text="Chart Types" PageUrl="@pageUrl" HashTagName="chart-types" />
 <div class="mb-2">At this moment we are supporting seven blazor chart types.</div>
 <ol>
-    <li><a href="/charts/bar-chart">Bar Chart</a></li>
-    <li><a href="/charts/doughnut-chart">Doughnut Chart</a></li>
-    <li><a href="/charts/line-chart">Line Chart</a></li>
-    <li><a href="/charts/pie-chart">Pie Chart</a></li>
-    <li><a href="/charts/polar-area-chart">Polar Area Chart</a></li>
-    <li><a href="/charts/radar-chart">Radar Chart</a></li>
-    <li><a href="/charts/scatter-chart">Scatter Chart</a></li>
+    <li><a href="@RouteConstants.Demos_BarChart_Documentation">Bar Chart</a></li>
+    <li><a href="@RouteConstants.Demos_DoughnutChart_Documentation">Doughnut Chart</a></li>
+    <li><a href="@RouteConstants.Demos_LineChart_Documentation">Line Chart</a></li>
+    <li><a href="@RouteConstants.Demos_PieChart_Documentation">Pie Chart</a></li>
+    <li><a href="@RouteConstants.Demos_PolarAreaChart_Documentation">Polar Area Chart</a></li>
+    <li><a href="@RouteConstants.Demos_RadarChart_Documentation">Radar Chart</a></li>
+    <li><a href="@RouteConstants.Demos_ScatterChart_Documentation">Scatter Chart</a></li>
 </ol>
 
 <Callout Color="CalloutColor.Info">
@@ -32,12 +32,14 @@
 
 <SectionHeading Size="HeadingSize.H4" Text="Charts Setup" PageUrl="@pageUrl" HashTagName="charts-setup" />
 <div class="mb-3">
-    Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
+    Refer to the <a href="@RouteConstants.Demos_GettingStarted_Documentation">getting started guide</a> for setting up charts.
 </div>
 
 @code {
-    private string pageUrl = "/charts";
-    private string title = "Blazor Charts";
-    private string description = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
-    private string imageUrl = "https://i.imgur.com/IX3bajc.png";
+    private const string pageUrl = RouteConstants.Demos_Charts_Documentation;
+    private const string pageTitle = "Blazor Charts";
+    private const string pageDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
+    private const string metaTitle = "Blazor Chart Components";
+    private const string metaDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
+    private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor

@@ -30,8 +30,10 @@
 <Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/charts/doughnut-chart";
-    private string title = "Blazor Doughnut Charts";
-    private string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
-    private string imageUrl = "https://i.imgur.com/xEPhAsW.png";
+    private const string pageUrl = RouteConstants.Demos_DoughnutChart_Documentation;
+    private const string pageTitle = "Blazor Doughnut Chart";
+    private const string pageDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
+    private const string metaTitle = "Blazor Doughnut Chart Component";
+    private const string metaDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
+    private const string imageUrl = "https://i.imgur.com/xEPhAsW.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -48,8 +48,10 @@
 <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 
 @code {
-    private readonly string pageUrl = "/charts/line-chart";
-    private readonly string title = "Blazor Line Chart";
-    private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
-    private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+    private const string pageUrl = RouteConstants.Demos_LineChart_Documentation;
+    private const string pageTitle = "Blazor Line Chart";
+    private const string pageDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+    private const string metaTitle = "Blazor Line Chart Component";
+    private const string metaDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+    private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor

@@ -36,8 +36,10 @@
 <Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/charts/pie-chart";
-    private string title = "Blazor Pie Chart";
-    private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.";
-    private string imageUrl = "https://i.imgur.com/ieBupT2.png";
+    private const string pageUrl = RouteConstants.Demos_PieChart_Documentation;
+    private const string pageTitle = "Blazor Pie Chart";
+    private const string pageDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.";
+    private const string metaTitle = "Blazor Pie Chart";
+    private const string metaDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.";
+    private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor

@@ -27,8 +27,10 @@
 <Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/charts/polar-area-chart";
-    private string title = "Blazor Polar Area Chart";
-    private string description = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
-    private string imageUrl = "https://i.imgur.com/xLAqwGi.png";
+    private const string pageUrl = RouteConstants.Demos_PolarAreaChart_Documentation;
+    private const string pageTitle = "Blazor Polar Area Chart";
+    private const string pageDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
+    private const string metaTitle = "Blazor Polar Area Chart Component";
+    private const string metaDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
+    private const string imageUrl = "https://i.imgur.com/xLAqwGi.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor

@@ -27,8 +27,10 @@
 <Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
 
 @code {
-    private readonly string pageUrl = "/charts/radar-chart";
-    private readonly string title = "Blazor Radar Chart";
-    private readonly string description = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
-    private readonly string imageUrl = "https://i.imgur.com/Urrb79M.png";
+    private const string pageUrl = RouteConstants.Demos_RadarChart_Documentation;
+    private const string pageTitle = "Blazor Radar Chart";
+    private const string pageDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
+    private const string metaTitle = "Blazor Radar Chart Component";
+    private const string metaDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
+    private const string imageUrl = "https://i.imgur.com/Urrb79M.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor

@@ -35,8 +35,10 @@
 <Demo Type="typeof(ScatterChart_Demo_02_Dynamic_Data)" Tabs="true" />
 
 @code {
-    private readonly string pageUrl = "/charts/scatter-chart";
-    private readonly string title = "Blazor Scatter Chart";
-    private readonly string description = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
-    private readonly string imageUrl = "https://i.imgur.com/GEox0tS.png";
+    private const string pageUrl = RouteConstants.Demos_ScatterChart_Documentation;
+    private const string pageTitle = "Blazor Scatter Chart";
+    private const string pageDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
+    private const string metaTitle = "Blazor Scatter Chart Component";
+    private const string metaDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
+    private const string imageUrl = "https://i.imgur.com/GEox0tS.png";
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor

@@ -67,8 +67,10 @@
 <Demo Type="typeof(Collapse_Demo_03_Events)" Tabs="true" />
 
 @code {
-    private string pageUrl = "/collapse";
-    private string title = "Blazor Collapse Component";
-    private string description = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.";
-    private string imageUrl = "https://i.imgur.com/8A0emQe.png";
+    private const string pageUrl = RouteConstants.Demos_Collapse_Documentation;
+    private const string pageTitle = "Blazor Collapse";
+    private const string pageDescription = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.";
+    private const string metaTitle = "Blazor Collapse Component";
+    private const string metaDescription = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.";
+    private const string imageUrl = "https://i.imgur.com/8A0emQe.png";
 }