Skip to content

Commit e509def

Browse files
gvreddy04gvreddy04
committed
Docs/Demos - setup
1 parent 5838988 commit e509def

25 files changed

Lines changed: 669 additions & 430 deletions

‎BlazorExpress.ChartJS.Demo.RCL/Constants/RouteConstants.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
public static class RouteConstants
44
{
5+
public const string Home_Prefix = "/";
6+
57
public const string Blog_Prefix = "/blog";
68
public const string Docs_Prefix = "/docs";
79
public const string Demos_Prefix = "/demos";

‎BlazorExpress.ChartJS.Demo.RCL/Constants/StringConstants.cs‎

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ public static class StringConstants
44
{
55
#region Fields and Constants
66

7-
public const string PageTitle_Suffix = " | Blazor Bulma: An enterprise-grade open-source component library from the Blazor Express team.";
7+
public const string NugetPackageName = "BlazorExpress.ChartJS";
8+
public const string NugetPackageDisplayName = "BlazorExpress ChartJS";
9+
10+
public const string PageTitle_Suffix = " | BlazorExpress ChartJS: An enterprise-grade open-source component library from the Blazor Express team.";
811

912
public const string Nullable = "Nullable";
1013
public const string PropertyTypeNameInt16 = "Int16";
@@ -37,36 +40,9 @@ public static class StringConstants
3740
public const string PropertyTypeNameEnumCSharpTypeKeyword = "enum";
3841
public const string PropertyTypeNameGuidCSharpTypeKeyword = "Guid";
3942

40-
public const string StaticAssets_RootPath = "_content/BlazorExpress.Bulma.Demo.RCL";
43+
public const string StaticAssets_RootPath = "_content/BlazorExpress.ChartJS.Demo.RCL";
4144
public const string StaticAssets_Icons_Path = StaticAssets_RootPath + "/icons";
4245
public const string StaticAssets_Icons_Logo_png = StaticAssets_Icons_Path + "/logo.png";
4346

44-
public const string StaticAssets_Images_Path = StaticAssets_RootPath + "/images";
45-
public const string StaticAssets_Images_Placeholders_Path = StaticAssets_Images_Path + "/placeholders";
46-
47-
public const string StaticAssets_Images_Placeholders_16x16_png = StaticAssets_Images_Placeholders_Path + "/16x16.png";
48-
public const string StaticAssets_Images_Placeholders_24x24_png = StaticAssets_Images_Placeholders_Path + "/24x24.png";
49-
public const string StaticAssets_Images_Placeholders_32x32_png = StaticAssets_Images_Placeholders_Path + "/32x32.png";
50-
public const string StaticAssets_Images_Placeholders_48x48_png = StaticAssets_Images_Placeholders_Path + "/48x48.png";
51-
public const string StaticAssets_Images_Placeholders_64x64_png = StaticAssets_Images_Placeholders_Path + "/64x64.png";
52-
public const string StaticAssets_Images_Placeholders_96x96_png = StaticAssets_Images_Placeholders_Path + "/96x96.png";
53-
public const string StaticAssets_Images_Placeholders_128x128_png = StaticAssets_Images_Placeholders_Path + "/128x128.png";
54-
public const string StaticAssets_Images_Placeholders_240x720_png = StaticAssets_Images_Placeholders_Path + "/240x720.png";
55-
public const string StaticAssets_Images_Placeholders_256x256_png = StaticAssets_Images_Placeholders_Path + "/256x256.png";
56-
public const string StaticAssets_Images_Placeholders_320x480_png = StaticAssets_Images_Placeholders_Path + "/320x480.png";
57-
public const string StaticAssets_Images_Placeholders_320x640_png = StaticAssets_Images_Placeholders_Path + "/320x640.png";
58-
public const string StaticAssets_Images_Placeholders_360x640_png = StaticAssets_Images_Placeholders_Path + "/360x640.png";
59-
public const string StaticAssets_Images_Placeholders_480x320_png = StaticAssets_Images_Placeholders_Path + "/480x320.png";
60-
public const string StaticAssets_Images_Placeholders_480x480_png = StaticAssets_Images_Placeholders_Path + "/480x480.png";
61-
public const string StaticAssets_Images_Placeholders_480x600_png = StaticAssets_Images_Placeholders_Path + "/480x600.png";
62-
public const string StaticAssets_Images_Placeholders_480x640_png = StaticAssets_Images_Placeholders_Path + "/480x640.png";
63-
public const string StaticAssets_Images_Placeholders_480x800_png = StaticAssets_Images_Placeholders_Path + "/480x800.png";
64-
public const string StaticAssets_Images_Placeholders_600x480_png = StaticAssets_Images_Placeholders_Path + "/600x480.png";
65-
public const string StaticAssets_Images_Placeholders_640x320_png = StaticAssets_Images_Placeholders_Path + "/640x320.png";
66-
public const string StaticAssets_Images_Placeholders_640x360_png = StaticAssets_Images_Placeholders_Path + "/640x360.png";
67-
public const string StaticAssets_Images_Placeholders_640x480_png = StaticAssets_Images_Placeholders_Path + "/640x480.png";
68-
public const string StaticAssets_Images_Placeholders_720x240_png = StaticAssets_Images_Placeholders_Path + "/720x240.png";
69-
public const string StaticAssets_Images_Placeholders_800x480_png = StaticAssets_Images_Placeholders_Path + "/800x480.png";
70-
7147
#endregion
7248
}

‎BlazorExpress.ChartJS.Demo.RCL/Layout/DemosMainLayout.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<BulmaLayout>
55

66
<HeaderSection>
7-
<BulmaNavbar BrandImgSrc="_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png"
7+
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
88
BrandImgAltText="Blazor Express Logo"
9-
ApplicationName="BlazorExpress.Bulma" />
9+
ApplicationName="@StringConstants.NugetPackageName" />
1010
</HeaderSection>
1111

1212
<SidebarSection>
@@ -49,9 +49,9 @@
4949
<Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
5050
@Body
5151
<Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
52-
<a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
52+
<a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
5353
<i class="bi bi-star-fill"></i>
54-
<span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
54+
<span>If you like @StringConstants.NugetPackageName, give it a star on GitHub!</span>
5555
<i class="bi bi-star-fill"></i>
5656
</a>
5757
</Notification>

‎BlazorExpress.ChartJS.Demo.RCL/Layout/DocsMainLayout.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<BulmaLayout>
55

66
<HeaderSection>
7-
<BulmaNavbar BrandImgSrc="_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png"
7+
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
88
BrandImgAltText="Blazor Express Logo"
9-
ApplicationName="BlazorExpress.Bulma" />
9+
ApplicationName="@StringConstants.NugetPackageName" />
1010
</HeaderSection>
1111

1212
<SidebarSection>
@@ -49,9 +49,9 @@
4949
<Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
5050
@Body
5151
<Notification Class="has-text-centered mt-3" Color="NotificationColor.Link" HideDeleteButton="true">
52-
<a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
52+
<a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
5353
<i class="bi bi-star-fill"></i>
54-
<span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
54+
<span>If you like @StringConstants.NugetPackageName, give it a star on GitHub!</span>
5555
<i class="bi bi-star-fill"></i>
5656
</a>
5757
</Notification>

‎BlazorExpress.ChartJS.Demo.RCL/Layout/MainLayout.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33

44
<BulmaLayout>
55
<HeaderSection>
6-
<BulmaNavbar BrandImgSrc="_content/BlazorExpress.Bulma.Demo.RCL/icons/logo.png"
6+
<BulmaNavbar BrandImgSrc="@StringConstants.StaticAssets_Icons_Logo_png"
77
BrandImgAltText="Blazor Express Logo"
8-
ApplicationName="BlazorExpress.Bulma" />
8+
ApplicationName="@StringConstants.NugetPackageName" />
99
</HeaderSection>
1010
<ContentSection>
1111
@Body
1212
<div class="container is-max-desktop mb-4">
1313
<Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
14-
<a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
14+
<a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
1515
<i class="bi bi-star-fill"></i>
16-
<span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
16+
<span>If you like @StringConstants.NugetPackageName, give it a star on GitHub!</span>
1717
<i class="bi bi-star-fill"></i>
1818
</a>
1919
</Notification>

‎BlazorExpress.ChartJS.Demo.RCL/Models/PageLink.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ public class PageLink
1010
public HashSet<PageLinkCategory> Categories { get; set; } = new();
1111
public PageLinkStatus Status { get; set; }
1212
public bool IsActive { get; set; }
13+
public bool ExcludedFromHomePage { get; set; } = false;
1314
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/BarChart/BarChartDocumentation.razor‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
23

3-
<PageHeroSection PageUrl="@pageUrl"
4-
Title="@title"
5-
Heading="@heading"
6-
Description="@description"
7-
ImageUrl="@imageUrl" />
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@RouteConstants.Docs_BarChart" />
813

914
<Prerequisites PageUrl="@pageUrl" />
1015

11-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
12-
<div class="mb-3">
13-
In the following example, a categorical 12-color palette is used.
14-
</div>
15-
<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
16-
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
17-
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
18-
</BlazorBootstrap.Callout>
16+
<Section Class="p-0" Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
17+
<Block class="mb-3">
18+
In the following example, a categorical 12-color palette is used.
19+
</Block>
20+
<Message Color="MessageColor.Success" ShowDeleteButton="false">
21+
<MessageBody>
22+
For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
23+
These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
24+
</MessageBody>
25+
</Message>
1926

20-
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
27+
<Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
28+
</Section>
2129

2230
<Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" />
2331

@@ -28,9 +36,10 @@
2836
<Demo Type="typeof(BarChart_Demo_05_Locale)" />
2937

3038
@code {
31-
private const string pageUrl = "/charts/bar-chart";
32-
private const string title = "Blazor Bar Chart";
33-
private const string heading = "Blazor Bar Chart";
34-
private const string description = "A Blazor 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.";
39+
private const string pageUrl = RouteConstants.Demos_BarChart;
40+
private const string pageTitle = "Bar Chart";
41+
private const string pageDescription = "The <code>Bar Chart</code> component is a simple spacer tool. It allows sibling HTML elements to have a consistent margin between them.";
42+
private const string metaTitle = "Blazor Bar Chart";
43+
private const string metaDescription = "A Blazor 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.";
3544
private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; // TODO: update
3645
}

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/DoughnutChart/DoughnutChartDocumentation.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
23

34
<PageHeroSection PageUrl="@pageUrl"
45
Title="@title"

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/LineChart/LineChartDocumentation.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
23

34
<PageHeroSection PageUrl="@pageUrl"
45
Title="@title"

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Demos/PieChart/PieChartDocumentation.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
23

34
<PageHeroSection PageUrl="@pageUrl"
45
Title="@title"

0 commit comments

Comments
 (0)