shaba/BlazorOpenApi
1
0
Fork 0
mirror of https://github.com/unclshura/BlazorOpenApi.git synced 2025-12-21 09:51:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: shaba:master
Branches Tags
shaba:master
shaba:v0.9.8
shaba:v0.9.7
shaba:v0.9.6
shaba:v0.0.5
shaba:v0.0.4
shaba:v0.0.3
shaba:v1.0.2
shaba:v0.0.1
..
compare: shaba:v0.0.1
Branches Tags
shaba:master
shaba:v0.9.8
shaba:v0.9.7
shaba:v0.9.6
shaba:v0.0.5
shaba:v0.0.4
shaba:v0.0.3
shaba:v1.0.2
shaba:v0.0.1

No commits in common. "master" and "v0.0.1" have entirely different histories.
master ... v0.0.1

12 changed files with 67 additions and 199 deletions
Show Stats Expand all files Collapse all files

6
.github/workflows/nuget.yml vendored
View File

@ -7,7 +7,7 @@ on:
env:
PROJECT_PATH: 'BlazorOpenApi/BlazorOpenApi.csproj'
PACKAGE_OUTPUT_DIRECTORY: ${{ github.workspace }}/output
PACKAGE_OUTPUT_DIRECTORY: ${{ github.workspace }}\output
NUGET_SOURCE_URL: 'https://api.nuget.org/v3/index.json'
jobs:
@ -34,7 +34,7 @@ jobs:
uses: battila7/get-version-action@v2
- name: 'Pack project'
run: dotnet pack ${{ env.PROJECT_PATH }} --no-restore --no-build --configuration Release -p:PackageVersion=${{ steps.version.outputs.version-without-v }} --output ${{ env.PACKAGE_OUTPUT_DIRECTORY }}
run: dotnet pack ${{ env.PROJECT_PATH }} --no-restore --no-build --configuration Release --include-symbols -p:PackageVersion=${{ steps.version.outputs.version-without-v }} --output ${{ env.PACKAGE_OUTPUT_DIRECTORY }}
- name: 'Push package'
run: dotnet nuget push ${{ env.PACKAGE_OUTPUT_DIRECTORY }}/*.nupkg -k ${{ secrets.NUGET_AUTH_TOKEN }} -s ${{ env.NUGET_SOURCE_URL }}
run: dotnet nuget push ${{ env.PACKAGE_OUTPUT_DIRECTORY }}\*.nupkg -k ${{ secrets.NUGET_AUTH_TOKEN }} -s ${{ env.NUGET_SOURCE_URL }}

1
BlazorOpenApi.sln
View File

@ -10,7 +10,6 @@ EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{8EC462FD-D22E-90A8-E5CE-7E832BA40C5D}"
ProjectSection(SolutionItems) = preProject
LICENSE.txt = LICENSE.txt
.github\workflows\nuget.yml = .github\workflows\nuget.yml
README.md = README.md
EndProjectSection
EndProject

18
BlazorOpenApi/BlazorOpenApi.csproj
View File

@ -1,13 +1,12 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<IsPackable>true</IsPackable>
<Authors>Alexander Shabarshov</Authors>
<Description>
OpenAPI documentation generator for Blazor applications.
</Description>
<PackageProjectUrl>https://github.com/unclshura/BlazorOpenApi</PackageProjectUrl>
<PackageTags>openapi, c#, blazor, api, ui, rest, web</PackageTags>
<PackageReadmeFile>README.md</PackageReadmeFile>
<Authors>Alexander Shabarshov</Authors>
<Description>
OpenAPI documentation generator for Blazor applications.
</Description>
<PackageProjectUrl>https://github.com/unclshura/BlazorOpenApi</PackageProjectUrl>
<PackageTags>openapi, c#, blazor, api, ui, rest, web</PackageTags>
</PropertyGroup>
<ItemGroup>
@ -17,9 +16,4 @@
<PackageReference Include="System.Text.Json" />
</ItemGroup>
<ItemGroup>
<None Include="../README.md" Pack="true" PackagePath="\"/>
<None Include="../docs/**" Pack="true" PackagePath="\docs\"/>
</ItemGroup>
</Project>

2
BlazorOpenApi/Controls/ComponentsControl.razor
View File

@ -7,7 +7,7 @@
@foreach (var (name, val) in Value.Schemas)
{
<h4>@name</h4>
<SchemaControl Value="@val" Collapsed="false"/>
<SchemaControl Value="@val"/>
}
</TocMember>
}

4
BlazorOpenApi/Controls/ExampleDataGeneratorControl.razor
View File

@ -54,9 +54,7 @@
}
else
{
var ex = GenerateExampleFromSchema(parameter.Schema);
if (ex != null)
exampleData[parameter.Name] = ex;
exampleData[parameter.Name] = GenerateExampleFromSchema(parameter.Schema);
}
}

31
BlazorOpenApi/Controls/SchemaChildControl.razor
View File

@ -5,24 +5,9 @@
@if (Value.Type == "array")
{
<Expander HeaderClass="s-type" Class="s-bg-odd" Title="@ArrayText" Collapsed="@Collapsed">
@if (Value.Items?.Type == "object" && SchemaControl.Resolve(Value.Items, Api)?.Properties != null)
{
@* Skip one level *@
<div class="s-props s-nested">
<table class="schema">
@foreach (var p in SchemaControl.Resolve(Value.Items, Api)!.Properties)
{
<SchemaChildControl Value="@p.Value" Title="@p.Key" Required="@IsRequired(p.Key)" />
}
</table>
</div>
}
else
{
<div class="s-nested">
<SchemaControl Value="@Value.Items" />
</div>
}
<div class="s-nested">
<SchemaControl Value="@Value.Items" />
</div>
</Expander>
}
else if (Value.Type == "object")
@ -70,8 +55,6 @@
}
@code {
[CascadingParameter]
public OpenApiDocument? Api { get; set; }
[Parameter]
public OpenApiSchema? Value { get; set; }
[Parameter]
@ -90,15 +73,11 @@
if (Value?.Type != "array")
return "";
string arrayType = Value.Items?.Type ?? "";
if ( Value.Items?.Type != "array" && Value.Items?.Type != "object")
arrayType = Value.Items?.Type ?? "array";
var nullable = Value.Nullable ? "?" : "";
if (Value.MinItems != null || Value.MaxItems != null)
return $"{arrayType}{nullable} [{(Value.MinItems == null ? "" : Value.MinItems.Value)}..{(Value.MaxItems == null ? "" : Value.MaxItems.Value)}]";
return $"{arrayType}{nullable} []";
return $"array{nullable} [{(Value.MinItems == null ? "" : Value.MinItems.Value)}..{(Value.MaxItems == null ? "" : Value.MaxItems.Value)}]";
return $"array{nullable} []";
}
}

16
BlazorOpenApi/Controls/SchemaControl.razor
View File

@ -19,17 +19,15 @@
[CascadingParameter]
public OpenApiDocument? Api { get; set; }
private OpenApiSchema? ResolvedValue => Resolve(Value, Api) ?? Value;
public static OpenApiSchema? Resolve(OpenApiSchema? schema, OpenApiDocument? api)
private OpenApiSchema? ResolvedValue
{
if (schema == null)
return null;
if (schema.Reference != null && api != null)
get
{
if (api.Components.Schemas.TryGetValue(schema.Reference.Id, out var resolved))
return resolved;
if (Api == null || Value?.Reference == null )
return Value;
if (!Api.Components.Schemas.TryGetValue(Value.Reference.Id, out var resolved))
return Value;
return resolved;
}
return schema;
}
}

43
BlazorOpenApi/OpenAPIUIControl.razor
View File

@ -17,30 +17,29 @@
<TableOfContents Tree="@_tree" />
</Expander>
<div class="oa-main-content">
<HeaderControl Value="@_api.Info" DownloadUrl="@Url" />
<ServersControl Value="@_api.Servers" />
@if (_api.Paths?.Count > 0)
{
<TocMember Title="Endpoints">
<h2>Endpoints</h2>
@foreach (var path in _api.Paths)
<HeaderControl Value="@_api.Info" DownloadUrl="@Url" />
<ServersControl Value="@_api.Servers" />
@if (_api.Paths?.Count > 0)
{
<TocMember Title="Endpoints">
<h2>Endpoints</h2>
@foreach (var path in _api.Paths)
{
if (!string.IsNullOrWhiteSpace(path.Key) || path.Value != null)
{
if (!string.IsNullOrWhiteSpace(path.Key) || path.Value != null)
{
<PathControl Key="@path.Key" Value="@path.Value" />
}
<PathControl Key="@path.Key" Value="@path.Value" />
}
</TocMember>
}
@if (_api.Components != null)
{
<TocMember Title="Components">
<h2>Components</h2>
<ComponentsControl Value="@_api.Components" />
</TocMember>
}
</div>
}
</TocMember>
}
@if (_api.Components != null)
{
<TocMember Title="Components">
<h2>Components</h2>
<ComponentsControl Value="@_api.Components" />
</TocMember>
}
</CascadingValue>
</CascadingValue>

69
BlazorOpenApi/README.md
View File

@ -1,70 +1,3 @@
# Blazor OpenAPI UI
Author: *unclshura*
This is a Blazor implementation of a SwaggerUI-like interface. It allows you to view your OpenAPI
specifications in a user-friendly way. The motication of this project is to provide a Blazor component that can be used in Blazor applications
to display OpenAPI specifications. Unlike SwaggerUI, this project does not require any JavaScript dependencies.
It is a pure Blazor implementation.
## Installation
You can install the package from NuGet:
```bash
dotnet add package BlazorOpenApi
```
Source code:
```bash
Github: https://github.com/unclshura/BlazorOpenApi
HTTPS: https://github.com/unclshura/BlazorOpenApi.git
SSH: git@github.com:unclshura/BlazorOpenApi.git
```
## Features
- View OpenAPI specifications in a user-friendly way
- Dark and light themes
- Fully customizable color palette
- Separate CSS styles for every element
- Examples generation
- Pure Blazor implementation
## Usage
To use the component, add the following line to your `_Imports.razor` file:
```razor
@using BlazorOpenApi
@using BlazorOpenApi.Controls
```
Then, you can use the component in your Blazor application:
```razor
<OpenAPIUIControl Url="https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.yaml" />
```
To customize the palette you can use something like this:
```razor
<OpenAPIUIControl Url="@Url" Palette="@TestPalette"/>
@code {
[Parameter]
[SupplyParameterFromQuery(Name = "url")]
public string Url { get; set; } = "https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.json";
private OpenApiUiPalette TestPalette
{
get
{
var p = new OpenApiUiPalette().Clone();
p.Foreground[7] = "blue";
return p;
}
}
}
```
The demo application is available in the `Demo` folder - https://github.com/unclshura/BlazorOpenApi/tree/master/Demo.
# LICENSE
MIT
Blazor implementation of SwaggerUI-like interface.

2
BlazorOpenApi/TableOfContentsTree.cs
View File

@ -9,7 +9,7 @@ internal class TableOfContentsTree : ITableOfContentsTree
private readonly Dictionary<string, TocTreeNode> _nodes = new();
private readonly List<string> _order = new();
public event EventHandler? Changed;
public event EventHandler Changed;
public void Clear()
{

37
BlazorOpenApi/wwwroot/css/openapi-ui.css
View File

@ -162,7 +162,7 @@
height: fit-content;
width: fit-content;
margin-right: 5px;
border-radius: 3px;
border-radius: 5px;
margin-top: 3px;
padding-left: 3px;
padding-right: 3px;
@ -314,30 +314,16 @@
.openapi-ui h1 {
margin-top: 24px;
border-left-width: 5px;
border-color: var(--oa-bg-7);
padding-left: 5px;
margin-bottom: 3px;
}
.openapi-ui h2 {
margin-top: 18px;
margin-bottom: 3px;
color: var(--oa-fg-7);
border-bottom-width: 4px;
border-color: var(--oa-bg-7);
}
.openapi-ui h3 {
margin-top: 12px;
margin-bottom: 3px;
border-bottom-width: 1px;
border-color: var(--oa-bg-7);
}
.openapi-ui h4 {
margin-top: 8px;
margin-bottom: 3px;
border-bottom-width: 1px;
border-color: var(--oa-bg-1);
}
.openapi-ui .tooltip {
@ -346,16 +332,6 @@
border-bottom: 1px dotted black;
}
.openapi-ui a {
text-decoration: none;
cursor: pointer;
color: var(--oa-fg-link);
}
.openapi-ui a:hover {
color: var(--oa-fg-link-hover);
}
.openapi-ui .tooltip .tooltiptext {
visibility: hidden;
width: fit-content;
@ -399,17 +375,16 @@
vertical-align: top;
}
.openapi-ui {
--oa-bg-lighter: #0000001f;
--oa-bg-darker: #00000055;
--oa-bg-darkest: #000000AA;
--oa-fg-normal: #e4e4e4;
--oa-fg-lighter: #ffffff;
--oa-fg-darker: #A0A0A0;
--oa-fg-darkest: #808080;
--oa-fg-link: var(--oa-fg-1);
--oa-fg-link-hover: var(--oa-bg-1);
--oa-bg-1: #3655a3;
--oa-bg-2: #7a7620;
--oa-bg-3: #9f4b1e;
@ -418,6 +393,7 @@
--oa-bg-6: #851192;
--oa-bg-7: #266b67;
--oa-bg-8: #456f2b;
--oa-fg-1: #7d98de;
--oa-fg-2: #ded971;
--oa-fg-3: #eda279;
@ -426,8 +402,10 @@
--oa-fg-6: #e571f2;
--oa-fg-7: #98e6e1;
--oa-fg-8: #54b319;
--oa-bg-tag: var(--oa-bg-1);
--oa-fg-tag: var(--oa-fg-lighter);
--oa-bg-op-get: var(--oa-bg-1);
--oa-bg-op-put: var(--oa-bg-2);
--oa-bg-op-post: var(--oa-bg-3);
@ -436,17 +414,20 @@
--oa-bg-op-head: var(--oa-bg-6);
--oa-bg-op-patch: var(--oa-bg-7);
--oa-bg-op-trace: var(--oa-bg-8);
--oa-bg-header: var(--oa-bg-6);
--oa-bg-form: var(--oa-bg-7);
--oa-bg-path: var(--oa-bg-8);
--oa-bg-cookie: var(--oa-bg-1);
--oa-bg-query: var(--oa-bg-2);
--oa-bg-matrix: var(--oa-bg-6);
--oa-bg-label: var(--oa-bg-7);
--oa-bg-simple: var(--oa-bg-8);
--oa-bg-spacedelimited: var(--oa-bg-1);
--oa-bg-pipedelimited: var(--oa-bg-2);
--oa-bg-deepobject: var(--oa-bg-3);
--oa-font-small: 12px;
--oa-font-smaller: 10px;
--oa-font-large: 16px;

35
README.md
View File

@ -1,7 +1,5 @@
# Blazor OpenAPI UI
Author: *unclshura*
This is a Blazor implementation of a SwaggerUI-like interface. It allows you to view your OpenAPI
specifications in a user-friendly way. The motication of this project is to provide a Blazor component that can be used in Blazor applications
to display OpenAPI specifications. Unlike SwaggerUI, this project does not require any JavaScript dependencies.
@ -9,17 +7,9 @@ It is a pure Blazor implementation.
## Screenshots
Light theme:
![Light mode](https://raw.githubusercontent.com/unclshura/BlazorOpenApi/master/docs/light.png)
Dark Theme:
![Dark mode](https://raw.githubusercontent.com/unclshura/BlazorOpenApi/master/docs/dark.png)
Examples generation:
![Examples generation](https://raw.githubusercontent.com/unclshura/BlazorOpenApi/master/docs/example-data.png)
[Light mode](docs/light.png)
[Dark mode](docs/dark.png)
[Examples generation](docs/example-data.png)]
## Installation
@ -28,15 +18,12 @@ You can install the package from NuGet:
dotnet add package BlazorOpenApi
```
## Source code
|What |Where |
|--------|------------------------------------------------|
| Github | https://github.com/unclshura/BlazorOpenApi |
| HTTPS | https://github.com/unclshura/BlazorOpenApi.git |
| SSH | git@github.com:unclshura/BlazorOpenApi.git |
| NuGet | https://www.nuget.org/packages/BlazorOpenApi/ |
Source code:
```bash
Github: https://github.com/unclshura/BlazorOpenApi
HTTPS: https://github.com/unclshura/BlazorOpenApi.git
SSH: git@github.com:unclshura/BlazorOpenApi.git
```
## Features
@ -55,12 +42,12 @@ To use the component, add the following line to your `_Imports.razor` file:
@using BlazorOpenApi.Controls
```
Then, you can use the component in your Blazor application:
```c#
```razor
<OpenAPIUIControl Url="https://raw.githubusercontent.com/OAI/OpenAPI-Specification/main/examples/v3.0/petstore.yaml" />
```
To customize the palette you can use something like this:
```c#
```razor
<OpenAPIUIControl Url="@Url" Palette="@TestPalette"/>
@code {