Skip to content

Commit 1753b32

Browse files
ignatandreiignatandrei
committed
Add BlazorOcticons demo project
Introduced a new Blazor WebAssembly demo project showcasing the BlazorOcticons library. The commit includes project files, sample pages (Home, Counter, Weather, NotFound), layouts, styles, SVG assets, Bootstrap dependencies, and configuration files to demonstrate usage of BlazorOcticons components.
1 parent 823401d commit 1753b32

65 files changed

Lines changed: 60181 additions & 0 deletions

Some content is hidden

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

‎v2/rscg_examples/BlazorOcticons/description.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"generator":{
3+
"name":"BlazorOcticons",
4+
"nuget":[
5+
"https://www.nuget.org/packages/BlazorOcticons/"
6+
],
7+
"link":"https://github.com/BlazorOcticons/BlazorOcticons",
8+
"author":"Evgeniy K.",
9+
"source":"https://github.com/BlazorOcticons/BlazorOcticons"
10+
},
11+
"data":{
12+
"goodFor":[""],
13+
"csprojDemo":"BlazorDemo.csproj",
14+
"csFiles":["Program.cs"],
15+
"excludeDirectoryGenerated":["Microsoft.CodeAnalysis.Razor.Compiler"],
16+
"includeAdditionalFiles":[""]
17+
},
18+
"links":{
19+
"blog":"",
20+
"video":""
21+
}
22+
}

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo.slnx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<Solution>
2+
<Project Path="BlazorDemo/BlazorDemo.csproj" />
3+
</Solution>

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/App.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(Pages.NotFound)">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
</Router>

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/BlazorDemo.csproj‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net10.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<None Remove="andrei.svg" />
12+
</ItemGroup>
13+
14+
<ItemGroup>
15+
<AdditionalFiles Include="andrei.svg" />
16+
</ItemGroup>
17+
18+
19+
20+
<ItemGroup>
21+
<PackageReference Include="BlazorOcticons" Version="1.2.0" />
22+
<PackageReference Include="BlazorOcticonsGenerator" Version="1.2.0">
23+
</PackageReference>
24+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" />
25+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all" />
26+
</ItemGroup>
27+
28+
29+
<PropertyGroup>
30+
<EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
31+
<CompilerGeneratedFilesOutputPath>$(BaseIntermediateOutputPath)\GX</CompilerGeneratedFilesOutputPath>
32+
</PropertyGroup>
33+
</Project>

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Layout/MainLayout.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@inherits LayoutComponentBase
2+
<div class="page">
3+
<div class="sidebar">
4+
<NavMenu />
5+
</div>
6+
7+
<main>
8+
<div class="top-row px-4">
9+
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
10+
</div>
11+
12+
<article class="content px-4">
13+
@Body
14+
</article>
15+
</main>
16+
</div>

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Layout/MainLayout.razor.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
main {
8+
flex: 1;
9+
}
10+
11+
.sidebar {
12+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
13+
}
14+
15+
.top-row {
16+
background-color: #f7f7f7;
17+
border-bottom: 1px solid #d6d5d5;
18+
justify-content: flex-end;
19+
height: 3.5rem;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
.top-row ::deep a, .top-row ::deep .btn-link {
25+
white-space: nowrap;
26+
margin-left: 1.5rem;
27+
text-decoration: none;
28+
}
29+
30+
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
31+
text-decoration: underline;
32+
}
33+
34+
.top-row ::deep a:first-child {
35+
overflow: hidden;
36+
text-overflow: ellipsis;
37+
}
38+
39+
@media (max-width: 640.98px) {
40+
.top-row {
41+
justify-content: space-between;
42+
}
43+
44+
.top-row ::deep a, .top-row ::deep .btn-link {
45+
margin-left: 0;
46+
}
47+
}
48+
49+
@media (min-width: 641px) {
50+
.page {
51+
flex-direction: row;
52+
}
53+
54+
.sidebar {
55+
width: 250px;
56+
height: 100vh;
57+
position: sticky;
58+
top: 0;
59+
}
60+
61+
.top-row {
62+
position: sticky;
63+
top: 0;
64+
z-index: 1;
65+
}
66+
67+
.top-row.auth ::deep a:first-child {
68+
flex: 1;
69+
text-align: right;
70+
width: 0;
71+
}
72+
73+
.top-row, article {
74+
padding-left: 2rem !important;
75+
padding-right: 1.5rem !important;
76+
}
77+
}

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Layout/NavMenu.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="top-row ps-3 navbar navbar-dark">
2+
<div class="container-fluid">
3+
<a class="navbar-brand" href="">BlazorDemo</a>
4+
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
5+
<span class="navbar-toggler-icon"></span>
6+
</button>
7+
</div>
8+
</div>
9+
10+
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
11+
<nav class="nav flex-column">
12+
<div class="nav-item px-3">
13+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
14+
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
15+
</NavLink>
16+
</div>
17+
<div class="nav-item px-3">
18+
<NavLink class="nav-link" href="counter">
19+
<span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
20+
</NavLink>
21+
</div>
22+
<div class="nav-item px-3">
23+
<NavLink class="nav-link" href="weather">
24+
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
25+
</NavLink>
26+
</div>
27+
</nav>
28+
</div>
29+
30+
@code {
31+
private bool collapseNavMenu = true;
32+
33+
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
34+
35+
private void ToggleNavMenu()
36+
{
37+
collapseNavMenu = !collapseNavMenu;
38+
}
39+
}

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Layout/NavMenu.razor.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.navbar-toggler {
2+
background-color: rgba(255, 255, 255, 0.1);
3+
}
4+
5+
.top-row {
6+
min-height: 3.5rem;
7+
background-color: rgba(0,0,0,0.4);
8+
}
9+
10+
.navbar-brand {
11+
font-size: 1.1rem;
12+
}
13+
14+
.bi {
15+
display: inline-block;
16+
position: relative;
17+
width: 1.25rem;
18+
height: 1.25rem;
19+
margin-right: 0.75rem;
20+
top: -1px;
21+
background-size: cover;
22+
}
23+
24+
.bi-house-door-fill-nav-menu {
25+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
26+
}
27+
28+
.bi-plus-square-fill-nav-menu {
29+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
30+
}
31+
32+
.bi-list-nested-nav-menu {
33+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
34+
}
35+
36+
.nav-item {
37+
font-size: 0.9rem;
38+
padding-bottom: 0.5rem;
39+
}
40+
41+
.nav-item:first-of-type {
42+
padding-top: 1rem;
43+
}
44+
45+
.nav-item:last-of-type {
46+
padding-bottom: 1rem;
47+
}
48+
49+
.nav-item ::deep a {
50+
color: #d7d7d7;
51+
border-radius: 4px;
52+
height: 3rem;
53+
display: flex;
54+
align-items: center;
55+
line-height: 3rem;
56+
}
57+
58+
.nav-item ::deep a.active {
59+
background-color: rgba(255,255,255,0.37);
60+
color: white;
61+
}
62+
63+
.nav-item ::deep a:hover {
64+
background-color: rgba(255,255,255,0.1);
65+
color: white;
66+
}
67+
68+
@media (min-width: 641px) {
69+
.navbar-toggler {
70+
display: none;
71+
}
72+
73+
.collapse {
74+
/* Never collapse the sidebar for wide screens */
75+
display: block;
76+
}
77+
78+
.nav-scrollable {
79+
/* Allow sidebar to scroll for tall menus */
80+
height: calc(100vh - 3.5rem);
81+
overflow-y: auto;
82+
}
83+
}

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Pages/Counter.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@page "/counter"
2+
3+
<PageTitle>Counter</PageTitle>
4+
5+
<h1>Counter</h1>
6+
7+
<p role="status">Current count: @currentCount</p>
8+
9+
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
10+
11+
@code {
12+
private int currentCount = 0;
13+
14+
private void IncrementCount()
15+
{
16+
currentCount++;
17+
}
18+
}

‎v2/rscg_examples/BlazorOcticons/src/BlazorDemo/Pages/Home.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@page "/"
2+
3+
<PageTitle>Home</PageTitle>
4+
5+
<h1>Hello, world!</h1>
6+
7+
Welcome to your new app.
8+
Here is the GitHub icon in purple, size 48:
9+
More icons are available at <a href="https://blazorocticons.net/" target="_blank">https://blazorocticons.net/</a>
10+
<MarkGithub16 Color="#702AF7" Size="48" />

0 commit comments

Comments
 (0)