-
-
Notifications
You must be signed in to change notification settings - Fork 6
Add BlazorOcticons demo project #438
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
1753b32
d2d7659
175dfca
cb881b7
b546c0c
0a0bc01
d89f00f
d9a26e7
d4a6e41
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
|
|
||
| { | ||
| "$schema": "https://aka.ms/codetour-schema", | ||
| "title": "BlazorOcticons", | ||
| "steps": | ||
| [ | ||
| { | ||
| "file": "rscg_examples/BlazorOcticons/src/BlazorDemo/BlazorDemo.csproj", | ||
| "description": "First, we add Nuget [BlazorOcticons](https://www.nuget.org/packages/BlazorOcticons/) in csproj ", | ||
| "pattern": "BlazorOcticons" | ||
| } | ||
|
|
||
| ,{ | ||
| "file": "rscg_examples/BlazorOcticons/src/BlazorDemo/Octicons/Andrei16.razor", | ||
| "description": "File Andrei16.razor ", | ||
| "pattern": "this is the code" | ||
| } | ||
|
|
||
| ,{ | ||
| "file": "rscg_examples/BlazorOcticons/src/BlazorDemo/andrei-16.svg", | ||
| "description": "File andrei-16.svg ", | ||
| "pattern": "this is the code" | ||
| } | ||
|
|
||
| ,{ | ||
| "file": "rscg_examples/BlazorOcticons/src/BlazorDemo/Program.cs", | ||
| "description": "File Program.cs \r\n>> dotnet run --project rscg_examples/BlazorOcticons/src/BlazorDemo/BlazorDemo.csproj ", | ||
| "pattern": "this is the code" | ||
| } | ||
|
|
||
|
|
||
| ], | ||
|
|
||
| "ref": "main" | ||
|
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
|
|
||
| <h1>RSCG nr 247 : BlazorOcticons</h1> | ||
|
|
||
| <h2>Info</h2> | ||
| Nuget : <a href="https://www.nuget.org/packages/BlazorOcticons/" target="_blank">https://www.nuget.org/packages/BlazorOcticons/</a> | ||
|
|
||
| <p>You can find more details at : <a href="https://github.com/BlazorOcticons/BlazorOcticons" target="_blank"> https://github.com/BlazorOcticons/BlazorOcticons</a></p> | ||
|
|
||
| <p>Author :Evgeniy K.</p> | ||
|
|
||
| <p>Source: <a href="https://github.com/BlazorOcticons/BlazorOcticons" target="_blank">https://github.com/BlazorOcticons/BlazorOcticons</a> </p> | ||
|
|
||
| <h2>About</h2> | ||
|
|
||
| Generates Blazor components for GitHub Octicons SVG icons or from svg.Easily integrate GitHub Octicons into your Blazor applications. | ||
|
|
||
| <h2> | ||
| How to use | ||
| </h2> | ||
| <h3> | ||
| Add reference to the <a href="https://www.nuget.org/packages/BlazorOcticons/" target="_blank">BlazorOcticons</a> in the csproj | ||
| </h3> | ||
| <img src="images/BlazorOcticons/BlazorDemo.csproj.png" width="580" height="580" /> | ||
|
|
||
| <h3>This was for me the <b>starting</b> code</h3> | ||
|
|
||
| <br /> | ||
| I have <b>coded</b> the file Program.cs | ||
| <br /> | ||
| <img src="images/BlazorOcticons/csFiles/Program.cs.png" width="580" height="580" /> | ||
| <hr /> | ||
|
|
||
| <br /> | ||
| I have <b>coded</b> the file andrei-16.svg | ||
| <br /> | ||
| <img src="images/BlazorOcticons/csFiles/andrei-16.svg.png" width="580" height="580" /> | ||
| <hr /> | ||
|
|
||
| <br /> | ||
| I have <b>coded</b> the file Andrei16.razor | ||
| <br /> | ||
| <img src="images/BlazorOcticons/csFiles/Andrei16.razor.png" width="580" height="580" /> | ||
| <hr /> | ||
| <h3>And here are the <i>generated</i> files</h3> | ||
|
|
||
| <p> | ||
| You can download the code and this page as pdf from | ||
| <a target="_blank" href='https://ignatandrei.github.io/RSCG_Examples/v2/docs/BlazorOcticons'> | ||
| https://ignatandrei.github.io/RSCG_Examples/v2/docs/BlazorOcticons | ||
| </a> | ||
| </p> | ||
|
|
||
|
|
||
| <p> | ||
| You can see the whole list at | ||
| <a target="_blank" href='https://ignatandrei.github.io/RSCG_Examples/v2/docs/List-of-RSCG'> | ||
| https://ignatandrei.github.io/RSCG_Examples/v2/docs/List-of-RSCG | ||
| </a> | ||
| </p> | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| { | ||
| "generator":{ | ||
| "name":"BlazorOcticons", | ||
| "nuget":[ | ||
| "https://www.nuget.org/packages/BlazorOcticons/" | ||
| ], | ||
| "link":"https://github.com/BlazorOcticons/BlazorOcticons", | ||
| "author":"Evgeniy K.", | ||
| "source":"https://github.com/BlazorOcticons/BlazorOcticons" | ||
| }, | ||
| "data":{ | ||
| "goodFor":["Generates Blazor components for GitHub Octicons SVG icons or from svg.","Easily integrate GitHub Octicons into your Blazor applications."], | ||
| "csprojDemo":"BlazorDemo.csproj", | ||
| "csFiles":["Program.cs","andrei-16.svg","Andrei16.razor"], | ||
| "excludeDirectoryGenerated":["Microsoft.CodeAnalysis.Razor.Compiler"], | ||
| "includeAdditionalFiles":[""] | ||
| }, | ||
| "links":{ | ||
| "blog":"", | ||
| "video":"" | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Package Description | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Replace placeholder NuGet description with real text
🤖 Prompt for AI Agents |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| [](https://cloudback.it) | ||
| [](https://github.com/BlazorOcticons/BlazorOcticons/actions/workflows/dotnet.yml) | ||
| [](https://github.com/BlazorOcticons/BlazorOcticons/blob/main/LICENSE) | ||
| [](https://www.nuget.org/packages/BlazorOcticons) | ||
|
|
||
|  | ||
|
|
||
| # BlazorOcticons | ||
|
|
||
| **BlazorOcticons** is an easy-to-use GitHub Octicons built as customizable `.razor` components. | ||
|
|
||
| | NuGet Package | Description | | ||
| |-------------------------|-------------| | ||
| | BlazorOcticons | Main package which contains only `.razor` components | | ||
| | BlazorOcticonsGenerator | Helper package which contains Source Generators for Octicons | | ||
|
|
||
| ## Installation | ||
|
|
||
| 1. Install the BlazorOcticons NuGet package: | ||
|
|
||
| ``` | ||
| dotnet add package BlazorOcticons | ||
| ``` | ||
|
|
||
| 2. In the `_Imports.razor` file add `@using BlazorOcticons.Octicons`: | ||
|
|
||
| ``` razor | ||
|
|
||
| @using System.Net.Http | ||
| @using System.Net.Http.Json | ||
| ... | ||
| @using Microsoft.AspNetCore.Components | ||
| @using Microsoft.JSInterop | ||
| @using BlazorOcticons.Octicons | ||
|
|
||
| ``` | ||
|
|
||
| 3. That's it! Now you can use the components in your project. | ||
|
|
||
| ## Usage | ||
|
|
||
| Inside your code, use any of GitHub Octicons as `.razor` components: | ||
|
|
||
| ``` razor | ||
| <div class="p-3"> | ||
| ... | ||
| <MarkGithub16 Color="#702AF7" Size="48"/> | ||
| ... | ||
| </div> | ||
| ``` | ||
|
|
||
| ## Contribute | ||
|
|
||
| All contributions are welcome! Feel free to raise any issues (bugs or feature requests), submit pull requests, etc. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <Solution> | ||
| <Project Path="BlazorDemo/BlazorDemo.csproj" /> | ||
| </Solution> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(Pages.NotFound)"> | ||
| <Found Context="routeData"> | ||
| <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/> | ||
| <FocusOnNavigate RouteData="@routeData" Selector="h1" /> | ||
| </Found> | ||
| </Router> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>net10.0</TargetFramework> | ||
| <Nullable>enable</Nullable> | ||
| <ImplicitUsings>enable</ImplicitUsings> | ||
| <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <AdditionalFiles Include="andrei-16.svg" /> | ||
| </ItemGroup> | ||
|
|
||
|
|
||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="BlazorOcticons" Version="1.3.0" /> | ||
| <PackageReference Include="BlazorOcticonsGenerator" Version="1.3.0"> | ||
| </PackageReference> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.1" /> | ||
| <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.1" PrivateAssets="all" /> | ||
| </ItemGroup> | ||
| <!-- Use only local test icons --> | ||
| <ItemGroup> | ||
| <AdditionalFiles Remove="$(BlazorOcticonsIconsPath)**\*.svg" /> | ||
| </ItemGroup> | ||
| <ItemGroup> | ||
| <Folder Include="Octicons\" /> | ||
| </ItemGroup> | ||
|
|
||
|
|
||
| <PropertyGroup> | ||
| <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles> | ||
| <CompilerGeneratedFilesOutputPath>$(BaseIntermediateOutputPath)\GX</CompilerGeneratedFilesOutputPath> | ||
| </PropertyGroup> | ||
| </Project> | ||
|
|
||
|
|
||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| @inherits LayoutComponentBase | ||
| <div class="page"> | ||
| <div class="sidebar"> | ||
| <NavMenu /> | ||
| </div> | ||
|
|
||
| <main> | ||
| <div class="top-row px-4"> | ||
| <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> | ||
| </div> | ||
|
|
||
| <article class="content px-4"> | ||
| @Body | ||
| </article> | ||
| </main> | ||
| </div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verify CodeTour file paths and patterns (especially
andrei-16.svg)Step definitions look good overall, but two small things to check:
rscg_examples/BlazorOcticons/src/BlazorDemo/andrei-16.svg. If the icon actually lives under anOcticonsfolder (as other files suggest), this path may be stale and the step won’t open the file."pattern": "this is the code", which probably doesn’t exist in those files. You may want a more specific pattern (or none) so CodeTour scrolls to a meaningful location.Minor, but worth correcting so the tour works smoothly.
🤖 Prompt for AI Agents