Skip to content

Commit 8eb3127

Browse files
committed
Documentation - code cleanup - inprogress
1 parent 87966f6 commit 8eb3127

File tree

69 files changed

+639
-561
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+639
-561
lines changed
Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
@page "/ai/open-ai-chat"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Open AI Chat</h1>
8-
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
911

1012
<CarbonAds />
1113

12-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13-
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
14-
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
14+
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
15+
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
16+
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
17+
</Section>
1518

1619
@code{
17-
private string pageUrl = "/ai/open-ai-chat";
18-
private string title = "Blazor Open AI Chat Component";
19-
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
20-
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
20+
private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation;
21+
private const string pageTitle = "Blazor Open AI Chat Component";
22+
private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
23+
private const string metaTitle = "Blazor Open AI Chat Component";
24+
private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
25+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
2126
}

BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
@attribute [Route(pageUrl)]
22

3-
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

58
<PageHero Heading="@pageTitle">
69
<LeadSection>@pageDescription</LeadSection>
@@ -110,7 +113,7 @@
110113
</Section>
111114

112115
@code {
113-
private const string pageUrl = "/accordion";
116+
private const string pageUrl = RouteConstants.Demos_Accordion_Documentation;
114117
private const string pageTitle = "Blazor Accordion";
115118
private const string pageDescription = "Build vertically collapsing accordions in combination with our Collapse component.";
116119
private const string metaTitle = "Blazor Accordion Component";
Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,58 @@
1-
@page "/alerts"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Alerts</h1>
8-
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
911

1012
<CarbonAds />
1113

12-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
13-
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
14-
<Demo Type="typeof(Alert_Demo_01_Examples)" Tabs="true" />
14+
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
15+
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
16+
<Demo Type="typeof(Alert_Demo_01_Examples)" Tabs="true" />
17+
</Section>
1518

16-
<SectionHeading Size="HeadingSize.H2" Text="Link color" PageUrl="@pageUrl" HashTagName="link-color" />
17-
<div class="mb-3">Use the <code>alert-link</code> css class to quickly provide matching colored links within any alert.</div>
18-
<Demo Type="typeof(Alert_Demo_02_Link_Color)" Tabs="true" />
19+
<Section Size="HeadingSize.H2" Name="Link color" PageUrl="@pageUrl" Link="link-color">
20+
<div class="mb-3">Use the <code>alert-link</code> css class to quickly provide matching colored links within any alert.</div>
21+
<Demo Type="typeof(Alert_Demo_02_Link_Color)" Tabs="true" />
22+
</Section>
1923

20-
<SectionHeading Size="HeadingSize.H2" Text="Additional Content" PageUrl="@pageUrl" HashTagName="additional-content" />
21-
<div class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</div>
22-
<Demo Type="typeof(Alert_Demo_03_Additional_Content)" Tabs="false" />
24+
<Section Size="HeadingSize.H2" Name="Additional Content" PageUrl="@pageUrl" Link="additional-content">
25+
<div class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</div>
26+
<Demo Type="typeof(Alert_Demo_03_Additional_Content)" Tabs="false" />
27+
</Section>
2328

24-
<SectionHeading Size="HeadingSize.H2" Text="Icons" PageUrl="@pageUrl" HashTagName="icons" />
25-
<div class="mb-3">Similarly, you can use Bootstrap Icons to create alerts with icons.</div>
26-
<Demo Type="typeof(Alert_Demo_04_Icons)" Tabs="true" />
29+
<Section Size="HeadingSize.H2" Name="Icons" PageUrl="@pageUrl" Link="icons">
30+
<div class="mb-3">Similarly, you can use Bootstrap Icons to create alerts with icons.</div>
31+
<Demo Type="typeof(Alert_Demo_04_Icons)" Tabs="true" />
32+
</Section>
2733

28-
<SectionHeading Size="HeadingSize.H2" Text="Dismissing" PageUrl="@pageUrl" HashTagName="dismissing" />
29-
<div class="mb-3">1. Using the <code>Dismissable="true"</code>, it’s possible to dismiss any alert inline.</div>
30-
<Demo Type="typeof(Alert_Demo_05_Dismissing_A)" Tabs="true" />
34+
<Section Size="HeadingSize.H2" Name="Dismissing" PageUrl="@pageUrl" Link="dismissing">
35+
<div class="mb-3">1. Using the <code>Dismissable="true"</code>, it’s possible to dismiss any alert inline.</div>
36+
<Demo Type="typeof(Alert_Demo_05_Dismissing_A)" Tabs="true" />
3137

32-
<div class="my-3">2. Manually we can close an alert with button click.</div>
33-
<Demo Type="typeof(Alert_Demo_05_Dismissing_B)" Tabs="true" />
38+
<div class="my-3">2. Manually we can close an alert with button click.</div>
39+
<Demo Type="typeof(Alert_Demo_05_Dismissing_B)" Tabs="true" />
40+
</Section>
3441

3542
<Callout Color="CalloutColor.Warning">
3643
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document.
3744
For this reason, we recommend subscribing to the <code>OnClosed</code> callback event and programmatically sets focus to the most appropriate location on the page.
3845
</Callout>
3946

40-
<SectionHeading Size="HeadingSize.H2" Text="Switch alert type dynamically" PageUrl="@pageUrl" HashTagName="switch-alert-type-dynamically" />
41-
<Demo Type="typeof(Alert_Demo_06_Switch_Alert_Type_Dynamically)" Tabs="true" />
47+
<Section Size="HeadingSize.H2" Name="Switch alert type dynamically" PageUrl="@pageUrl" Link="switch-alert-type-dynamically">
48+
<Demo Type="typeof(Alert_Demo_06_Switch_Alert_Type_Dynamically)" Tabs="true" />
49+
</Section>
4250

4351
@code{
44-
private string pageUrl = "/alerts";
45-
private string title = "Blazor Alert Component";
46-
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
47-
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg";
52+
private const string pageUrl = RouteConstants.Demos_Alerts_Documentation;
53+
private const string pageTitle = "Blazor Alert";
54+
private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
55+
private const string metaTitle = "Blazor Alert Component";
56+
private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
57+
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg";
4858
}
Lines changed: 56 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,70 @@
1-
@page "/badge"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Badge</h1>
8-
<div class="lead mb-3">
9-
The Blazor Bootstrap <code>Badge</code> component shows the small count and labels.
10-
</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
1111

1212
<CarbonAds />
1313

14-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
15-
<div class="mb-3">
16-
Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.
17-
As of now, badges no longer have focus or hover styles for links.
18-
</div>
19-
<Demo Type="typeof(Badge_Demo_01_Examples)" Tabs="false" />
14+
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
15+
<div class="mb-3">
16+
Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.
17+
As of now, badges no longer have focus or hover styles for links.
18+
</div>
19+
<Demo Type="typeof(Badge_Demo_01_Examples)" Tabs="false" />
20+
</Section>
21+
22+
<Section Size="HeadingSize.H2" Name="Background colors" PageUrl="@pageUrl" Link="background-colors">
23+
<Demo Type="typeof(Badge_Demo_02_Background_Colors)" Tabs="false" />
24+
</Section>
2025

21-
<SectionHeading Size="HeadingSize.H2" Text="Background colors" PageUrl="@pageUrl" HashTagName="background-colors" />
22-
<Demo Type="typeof(Badge_Demo_02_Background_Colors)" Tabs="false" />
2326
<Callout Heading="Conveying meaning to assistive technologies" Color="CalloutColor.Info">
2427
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.
2528
Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the <code>VisuallyHiddenText</code> parameter.
2629
</Callout>
2730

28-
<SectionHeading Size="HeadingSize.H2" Text="Pill badges" PageUrl="@pageUrl" HashTagName="pill-badges" />
29-
<div class="mb-3">
30-
Use the <code>IndicatorType</code> parameter to make badges more rounded with a larger border-radius.
31-
</div>
32-
<Demo Type="typeof(Badge_Demo_03_Pill_Badges)" Tabs="false" />
33-
34-
<SectionHeading Size="HeadingSize.H2" Text="Buttons" PageUrl="@pageUrl" HashTagName="buttons" />
35-
<div class="mb-3">
36-
Badges can be used as part of links or buttons to provide a counter.
37-
</div>
38-
<Demo Type="typeof(Badge_Demo_04_Buttons)" Tabs="true" />
39-
<div class="mt-3">
40-
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
41-
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
42-
</div>
43-
44-
<SectionHeading Size="HeadingSize.H2" Text="Positioned" PageUrl="@pageUrl" HashTagName="positioned" />
45-
<div class="mb-3">
46-
Use <code>Position</code> and <code>Placement</code> parameters to position it in the corner of a link or button.
47-
</div>
48-
<Demo Type="typeof(Badge_Demo_05_Positioned)" Tabs="true" />
49-
50-
<SectionHeading Size="HeadingSize.H2" Text="Generic indicator" PageUrl="@pageUrl" HashTagName="generic-indicator" />
51-
<div class="mb-3">
52-
You can also replace the badge with a generic indicator without the count.
53-
</div>
54-
<Demo Type="typeof(Badge_Demo_06_Generic_Indicator)" Tabs="false" />
31+
<Section Size="HeadingSize.H2" Name="Pill badges" PageUrl="@pageUrl" Link="pill-badges">
32+
<div class="mb-3">
33+
Use the <code>IndicatorType</code> parameter to make badges more rounded with a larger border-radius.
34+
</div>
35+
<Demo Type="typeof(Badge_Demo_03_Pill_Badges)" Tabs="false" />
36+
</Section>
37+
38+
<Section Size="HeadingSize.H2" Name="Buttons" PageUrl="@pageUrl" Link="buttons">
39+
<div class="mb-3">
40+
Badges can be used as part of links or buttons to provide a counter.
41+
</div>
42+
<Demo Type="typeof(Badge_Demo_04_Buttons)" Tabs="true" />
43+
<div class="mt-3">
44+
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
45+
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
46+
</div>
47+
</Section>
48+
49+
<Section Size="HeadingSize.H2" Name="Positioned" PageUrl="@pageUrl" Link="positioned">
50+
<div class="mb-3">
51+
Use <code>Position</code> and <code>Placement</code> parameters to position it in the corner of a link or button.
52+
</div>
53+
<Demo Type="typeof(Badge_Demo_05_Positioned)" Tabs="true" />
54+
</Section>
55+
56+
<Section Size="HeadingSize.H2" Name="Generic indicator" PageUrl="@pageUrl" Link="generic-indicator">
57+
<div class="mb-3">
58+
You can also replace the badge with a generic indicator without the count.
59+
</div>
60+
<Demo Type="typeof(Badge_Demo_06_Generic_Indicator)" Tabs="false" />
61+
</Section>
5562

5663
@code {
57-
private string pageUrl = "/badge";
58-
private string title = "Blazor Badge Component";
59-
private string description = "The Blazor Bootstrap Badge component shows the small count and labels.";
60-
private string imageUrl = "https://i.imgur.com/ux0sTs9.png";
64+
private const string pageUrl = "/badge";
65+
private const string pageTitle = "Blazor Badge";
66+
private const string pageDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
67+
private const string metaTitle = "Blazor Badge Component";
68+
private const string metaDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
69+
private const string imageUrl = "https://i.imgur.com/ux0sTs9.png";
6170
}
Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
@page "/breadcrumb"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Breadcrumb</h1>
8-
<div class="lead mb-3">
9-
Indicate the current page's location within a navigational hierarchy that automatically adds separators.
10-
</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
1111

1212
<CarbonAds />
1313

14-
<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
15-
<Demo Type="typeof(Breadcrumb_Demo_01_Examples)" />
14+
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
15+
<Demo Type="typeof(Breadcrumb_Demo_01_Examples)" />
16+
</Section>
1617

17-
<SectionHeading Size="HeadingSize.H2" Text="Dividers" PageUrl="@pageUrl" HashTagName="dividers" />
18-
<Demo Type="typeof(Breadcrumb_Demo_02_Dividers)" />
18+
<Section Size="HeadingSize.H2" Name="Dividers" PageUrl="@pageUrl" Link="dividers">
19+
<Demo Type="typeof(Breadcrumb_Demo_02_Dividers)" />
20+
</Section>
1921

20-
<SectionHeading Size="HeadingSize.H2" Text="Embedded SVG icon" PageUrl="@pageUrl" HashTagName="embedded-svg-icon" />
21-
<Demo Type="typeof(Breadcrumb_Demo_03_Embedded_SVG)" />
22+
<Section Size="HeadingSize.H2" Name="Embedded SVG icon" PageUrl="@pageUrl" Link="embedded-svg-icon">
23+
<Demo Type="typeof(Breadcrumb_Demo_03_Embedded_SVG)" />
24+
</Section>
2225

2326
@code {
24-
private string pageUrl = "/breadcrumb";
25-
private string title = "Blazor Breadcrumb Component";
26-
private string description = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
27-
private string imageUrl = "https://i.imgur.com/hO90HoC.jpg";
27+
private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation;
28+
private const string pageTitle = "Blazor Breadcrumb";
29+
private const string pageDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
30+
private const string metaTitle = "Blazor Breadcrumb Component";
31+
private const string metaDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
32+
private const string imageUrl = "https://i.imgur.com/hO90HoC.jpg";
2833
}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@page "/buttons"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Buttons</h1>
8-
<div class="lead mb-3">
9-
Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
10-
</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
1111

1212
<CarbonAds />
1313

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@page "/callout"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Callout</h1>
8-
<div class="lead mb-3">
9-
Blazor Bootstrap callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
10-
</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
1111

1212
<CarbonAds />
1313

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@page "/card"
1+
@attribute [Route(pageUrl)]
22

3-
<PageTitle>@title</PageTitle>
3+
<PageMetaTags PageUrl="@pageUrl"
4+
Title="@metaTitle"
5+
Description="@metaDescription"
6+
ImageUrl="@imageUrl" />
47

5-
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6-
7-
<h1>Blazor Card</h1>
8-
<div class="lead mb-3">
9-
BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.
10-
</div>
8+
<PageHero Heading="@pageTitle">
9+
<LeadSection>@pageDescription</LeadSection>
10+
</PageHero>
1111

1212
<CarbonAds />
1313

0 commit comments

Comments
 (0)