Skip to content

Commit 55d4184

Browse files
mckaragozmckaragoz
authored
Docs v7 (#429)
* Landing Page Redesign - Part 1 * Example Card Enhancements * Api Section Inside The Example Pages * Api Page & Page Transitions & Optimization * Landing Page Redesign - Part 2 * Finalize and Introduction Docs7 * Fix Tests
1 parent ed69147 commit 55d4184

File tree

58 files changed

+767
-384
lines changed

Some content is hidden

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

58 files changed

+767
-384
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs.Server/Program.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
using Microsoft.AspNetCore.Components;
22
using Microsoft.AspNetCore.Components.Web;
33
using MudBlazor.Services;
4+
using MudExtensions.Docs.Services;
45
using MudExtensions.Services;
56

67
var builder = WebApplication.CreateBuilder(args);
@@ -10,6 +11,7 @@
1011
builder.Services.AddServerSideBlazor();
1112
builder.Services.AddMudServices();
1213
builder.Services.AddMudExtensions();
14+
builder.Services.AddScoped<MudExtensionsDocsService>();
1315

1416
var app = builder.Build();
1517

‎CodeBeam.MudBlazor.Extensions.Docs.Server/wwwroot/app.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,35 @@
1515
.background-gradient-animation {
1616
animation: background-gradient 18s ease infinite;
1717
}
18+
19+
@keyframes background-animation {
20+
0% {
21+
background-position: 0%;
22+
}
23+
24+
50% {
25+
background-position: 50%;
26+
}
27+
28+
100% {
29+
background-position: 100%;
30+
}
31+
}
32+
33+
@keyframes fade {
34+
0% {
35+
opacity: 0;
36+
}
37+
38+
100% {
39+
opacity: 1;
40+
}
41+
}
42+
43+
.animated-background {
44+
animation: 1.5s 0.5s background-animation forwards, fade 1s;
45+
}
46+
47+
.animated-background-reverse {
48+
animation: 1s background-animation reverse, fade 1s reverse;
49+
}

‎CodeBeam.MudBlazor.Extensions.Docs.Wasm/Program.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
44
using MudBlazor.Services;
55
using MudExtensions.Services;
6+
using MudExtensions.Docs.Services;
67

78
var builder = WebAssemblyHostBuilder.CreateDefault(args);
89
builder.RootComponents.Add<App>("#app");
910
builder.RootComponents.Add<HeadOutlet>("head::after");
1011
builder.Services.AddMudServices();
1112
builder.Services.AddMudExtensions();
13+
builder.Services.AddScoped<MudExtensionsDocsService>();
1214

1315
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
1416

‎CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/app.css‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,47 @@
4646
font-weight: bold;
4747
inset: calc(40vh + 3.25rem) 0 auto 0.2rem;
4848
}
49-
.backgroundLoadColor{
50-
background: linear-gradient(-45deg,
51-
#424242ff,
52-
#594ae2ff,
53-
#424242ff,
54-
#ff4081ff,
55-
#424242ff);
49+
.backgroundLoadColor {
50+
background: linear-gradient(45deg, #E73C7E, #23A6D5, #E73C7E);
51+
/*background-size: 400%;*/
5652
}
53+
5754
.loading-progress-text:after {
58-
content: var(--blazor-load-percentage-text, "Loading");
59-
}
55+
content: var(--blazor-load-percentage-text, "CodeBeam");
56+
}
57+
58+
@keyframes background-animation {
59+
0% {
60+
background-position: 0%;
61+
}
62+
63+
50% {
64+
background-position: 50%;
65+
}
66+
67+
100% {
68+
background-position: 100%;
69+
}
70+
}
71+
72+
@keyframes fade {
73+
0% {
74+
opacity: 0;
75+
}
76+
77+
100% {
78+
opacity: 1;
79+
}
80+
}
81+
82+
.animated-background {
83+
animation: 1.5s 0.5s background-animation forwards, fade 1s;
84+
}
85+
86+
.animated-background-reverse {
87+
animation: 1s background-animation reverse, fade 1s reverse;
88+
}
89+
90+
.animated-background-infinite {
91+
animation: 1s background-animation infinite;
92+
}

‎CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,13 @@
1515

1616
<body>
1717
<div id="app">
18-
<div class="backgroundLoadColor" style="height: 100vh;position: absolute;width: 100vw;">
18+
<div class="backgroundLoadColor animated-background-infinite" style="height: 100vh;position: absolute;width: 100vw">
1919
<svg class="loading-progress">
2020
<circle r="40%" cx="50%" cy="50%" />
2121
<circle r="40%" cx="50%" cy="50%" />
2222
</svg>
2323
<div class="loading-progress-text"></div>
24+
<div style="text-align: center; color: white; font-family: Roboto">CodeBeam</div>
2425
</div>
2526
</div>
2627
<div id="blazor-error-ui">

‎CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,17 @@
1414

1515
<ItemGroup>
1616
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.*" />
17-
<PackageReference Include="MudBlazor" Version="7.0.0-rc.2" />
17+
<PackageReference Include="MudBlazor" Version="7.2.0" />
1818
</ItemGroup>
1919

2020
<ItemGroup>
2121
<ProjectReference Include="..\CodeBeam.MudBlazor.Extensions\CodeBeam.MudBlazor.Extensions.csproj" />
2222
</ItemGroup>
2323

2424
<ItemGroup>
25+
<Content Update="Components\FixedTransition.razor">
26+
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
27+
</Content>
2528
<Content Update="Pages\Index.razor">
2629
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
2730
</Content>

‎CodeBeam.MudBlazor.Extensions.Docs/Components/CodeBlock.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@inherits MudComponentBase
22
@namespace MudExtensions.Docs.Components
33

4-
<MudText HtmlTag="span" Class="px-2" Typo="Typo.body2" Style="background-color: #ff4081; color: white; border-radius: 20px">@ChildContent</MudText>
4+
<MudText HtmlTag="span" Class="mx-1 px-2 py-1" Typo="Typo.body2" Style="@($"background:{Colors.Pink.Lighten5}; border-radius: 12px")">@ChildContent</MudText>
55

66
@code{
77
[Parameter]

‎CodeBeam.MudBlazor.Extensions.Docs/Components/ComponentCard.razor‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,44 @@
11
@inherits MudComponentBase
22
@namespace MudExtensions.Docs.Components
33

4-
<MudCard Class="component-card pa-0" Elevation="4" @onclick="NavigateComponentPage">
4+
<MudCard Class="component-card pa-0" Style="width: 240px; min-height: 240px" Elevation="4" @onclick="OnClick">
55
<MudCardHeader Class="component-card-header">
66
<MudText Typo="Typo.h6" Color="Color.Inherit">@Title</MudText>
77
<MudSpacer />
88
<MudIcon Class="icon-class" Icon="@Icons.Custom.Brands.MudBlazor" />
99
</MudCardHeader>
1010
<MudCardContent>
11-
<div class="d-flex flex-column align-center" style="min-height: 100px">
11+
<MudStack>
12+
<MudStack Spacing="2" Row="true" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
13+
@* <MudTooltip Text="The component usage." Delay="300" Color="Color.Secondary">
14+
<MudChip T="string" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small">@Component?.Usage.ToDescriptionString()</MudChip>
15+
</MudTooltip> *@
16+
17+
@if (Component?.IsUnique == false)
18+
{
19+
<MudTooltip Text="Core library has a similar component." Delay="300" Color="Color.Secondary" Arrow="true">
20+
<MudChip T="string" Class="ms-n1" Color="Color.Secondary" Variant="Variant.Filled" Size="Size.Small">Extended Component</MudChip>
21+
</MudTooltip>
22+
}
23+
else
24+
{
25+
<MudTooltip Text="Core library doesn't have a similar component." Delay="300" Color="Color.Primary" Arrow="true">
26+
<MudChip T="string" Class="ms-n1" Color="Color.Primary" Variant="Variant.Filled" Size="Size.Small">Unique Component</MudChip>
27+
</MudTooltip>
28+
}
29+
30+
@if (Component?.IsMaterial3 == true)
31+
{
32+
<MudTooltip Text="Conforms to Material 3 specifications." Delay="300" Color="Color.Success" Arrow="true">
33+
<MudChip T="string" Color="Color.Success" Variant="Variant.Filled" Size="Size.Small">Material 3</MudChip>
34+
</MudTooltip>
35+
}
36+
</MudStack>
1237
<MudText>@Description</MudText>
1338
@ChildContent
14-
</div>
15-
39+
</MudStack>
40+
1641
</MudCardContent>
17-
<MudCardActions>
18-
@if (ShowActionButton)
19-
{
20-
<MudSpacer />
21-
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" OnClick="NavigateComponentPage">Go To Component</MudButton>
22-
}
23-
</MudCardActions>
2442
</MudCard>
2543

2644
<style>

‎CodeBeam.MudBlazor.Extensions.Docs/Components/ComponentCard.razor.cs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
using Microsoft.AspNetCore.Components;
2+
using MudExtensions.Docs.Services;
23

34
namespace MudExtensions.Docs.Components
45
{
@@ -19,7 +20,10 @@ public partial class ComponentCard
1920
public RenderFragment? ChildContent { get; set; }
2021

2122
[Parameter]
22-
public bool ShowActionButton { get; set; } = true;
23+
public EventCallback OnClick { get; set; }
24+
25+
[Parameter]
26+
public MudExtensionComponentInfo? Component { get; set; }
2327

2428
[Parameter]
2529
public bool NavigateToComponentPage { get; set; } = true;

‎CodeBeam.MudBlazor.Extensions.Docs/Components/DocsApiTable.razor‎

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,75 @@
22
@using System.Text.RegularExpressions
33

44
<MudText Class="my-2" Color="Color.Secondary" Typo="Typo.h6">Parameters</MudText>
5-
<MudTable Items="@(RelatedType?.GetProperties().Where(x => x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())">
5+
<MudTable Items="@(Type?.GetProperties().Where(x => x.PropertyType.Name.Contains("EventCallback") == false && x.Name != "FieldId" && x.Name != "UserAttributes").OrderBy(x => x.Name).ToList())" Elevation="0" Hover="true" Dense="true">
66
<HeaderContent>
77
<MudTh>Name</MudTh>
88
<MudTh>Type</MudTh>
99
<MudTh>Default</MudTh>
1010
</HeaderContent>
1111
<RowTemplate>
1212
<MudTd DataLabel="Name">@context.Name</MudTd>
13-
<MudTd DataLabel="Type">@context.PropertyType.Name</MudTd>
13+
<MudTd DataLabel="Type">@context.PropertyType.Name.Replace("`1", "")</MudTd>
1414
<MudTd DataLabel="Default">
1515
@if (true)
1616
{
17-
object? instance = Activator.CreateInstance(RelatedType ?? typeof(string));
17+
object? instance = Activator.CreateInstance(Type ?? typeof(string));
1818
<MudText Typo="Typo.body2">@(context.GetValue(instance)?.ToString() ?? "null")</MudText>
1919
}
2020
</MudTd>
2121
</RowTemplate>
22+
<NoRecordsContent>
23+
No specific items.
24+
</NoRecordsContent>
2225
</MudTable>
2326

24-
<MudText Class="my-2" Color="Color.Secondary" Typo="Typo.h6">Methods</MudText>
25-
<MudTable Items="@(RelatedType?.GetMethods().Where(x => x.Name != "SetParametersAsync" && Regex.IsMatch(x.Name[0].ToString(), "[A-Z]")).OrderBy(x => x.Name).ToList())">
27+
<MudText Class="mt-8 mb-2" Color="Color.Secondary" Typo="Typo.h6">Events</MudText>
28+
<MudTable Items="@(Type?.GetProperties().Where(x => x.PropertyType.Name.Contains("EventCallback")).OrderBy(x => x.Name).ToList())" Elevation="0" Hover="true" Dense="true">
2629
<HeaderContent>
2730
<MudTh>Name</MudTh>
2831
<MudTh>Type</MudTh>
29-
<MudTh>Default</MudTh>
3032
</HeaderContent>
3133
<RowTemplate>
3234
<MudTd DataLabel="Name">@context.Name</MudTd>
33-
<MudTd DataLabel="Type">@context.ReturnType.Name</MudTd>
34-
<MudTd DataLabel="Default">
35-
@if (true)
36-
{
37-
@* MudStepper instance = new(); *@
38-
@*<MudText Typo="Typo.body2">@(context(instance)?.ToString() ?? "null")</MudText>*@
39-
}
40-
</MudTd>
35+
<MudTd DataLabel="Type">@context.PropertyType.Name.Replace("`1", "")</MudTd>
36+
</RowTemplate>
37+
<NoRecordsContent>
38+
No specific items.
39+
</NoRecordsContent>
40+
</MudTable>
41+
42+
<MudText Class="mt-8 mb-2" Color="Color.Secondary" Typo="Typo.h6">Methods</MudText>
43+
<MudTable Items="@(Type?.GetMethods().Where(x => _excludedMethods.Contains(x.Name) == false && Regex.IsMatch(x.Name[0].ToString(), "[A-Z]")).OrderBy(x => x.Name).ToList())" Elevation="0" Hover="true" Dense="true">
44+
<HeaderContent>
45+
<MudTh>Name</MudTh>
46+
<MudTh>Type</MudTh>
47+
</HeaderContent>
48+
<RowTemplate>
49+
<MudTd DataLabel="Name">@context.Name</MudTd>
50+
<MudTd DataLabel="Type">@context.ReturnType.Name.Replace("`1", "")</MudTd>
4151
</RowTemplate>
52+
<NoRecordsContent>
53+
No specific items.
54+
</NoRecordsContent>
4255
</MudTable>
4356

57+
@if (Component?.RelatedComponents != null)
58+
{
59+
foreach (var comp in Component.RelatedComponents)
60+
{
61+
<ExampleCard Title="@($"Api - {comp.Name.Replace("`1", "")}")" ComponentName="@Type?.Name.Replace("Mud", "")" AliasName="api" ShowCodeSection="false">
62+
<DocsApiTable Type="comp" />
63+
</ExampleCard>
64+
}
65+
}
66+
4467
@code{
4568
[Parameter]
46-
public Type? RelatedType { get; set; }
69+
public Type? Type { get; set; }
70+
71+
[Parameter]
72+
public MudExtensionComponentInfo? Component { get; set; }
73+
74+
List<string> _excludedMethods = new()
75+
{ "SetParametersAsync", "Equals", "GetHashCode", "GetType", "ToString"};
4776
}

0 commit comments

Comments
 (0)