diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor new file mode 100644 index 0000000..5026a30 --- /dev/null +++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/CodeExample.razor @@ -0,0 +1,23 @@ +@inject IJSRuntime JSRuntime +@rendermode RenderMode.InteractiveWebAssembly + +
+    
+        @Code
+    
+
+ +@code { + [Parameter, EditorRequired] public string Code { get; set; } = default!; + [Parameter] public string Language { get; set; } = "razor"; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await JSRuntime.InvokeVoidAsync("Prism.highlightAll"); + } + } +} \ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor new file mode 100644 index 0000000..9f8e5f2 --- /dev/null +++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/InteractiveQRCode.razor @@ -0,0 +1,30 @@ +@rendermode RenderMode.InteractiveWebAssembly + + + + + + Change! + + + + +@code { + string Data { get; set; } = ""This is a QR code of size 150px by 150px""; + + void ChangeData() + { + Data = Guid.NewGuid().ToString(); + } +}")" /> + +@code { + string Data { get; set; } = "This is a QR code of size 150px by 150px"; + + void ChangeData() + { + Data = Guid.NewGuid().ToString(); + } +} diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor deleted file mode 100644 index a07e647..0000000 --- a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Counter.razor +++ /dev/null @@ -1,27 +0,0 @@ -@page "/counter" -@rendermode InteractiveAuto - -Counter - - - - - - - - - - - - - -@code { - string Data { get; set; } = "This is an image, with target size of 256"; - - void ChangeData() - { - Data = Guid.NewGuid().ToString(); - } -} \ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor new file mode 100644 index 0000000..90d0c40 --- /dev/null +++ b/src/BlazorAutoNet8/BlazorAutoNet8.Client/Pages/Playground.razor @@ -0,0 +1,123 @@ +@page "/playground" +@rendermode RenderMode.InteractiveWebAssembly + +Playground | PinguApps.Blazor.QRCode + +

Playground

+ +

+ Changing the QR code requires an interactive rendering mode, and so this page is rendered using WASM. +

+ +
+ + + +
+
+
+ + +
+
+ + @foreach (var ecValue in Enum.GetValues(typeof(ErrorCorrection))) + { +
+ + +
+ } +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+ +@code { + Settings SettingsModel { get; set; } = new(); + + string Data { get; set; } = default!; + ErrorCorrection ErrorCorrection { get; set; } + string? Image { get; set; } + string Size { get; set; } = default!; + int PaddingCells { get; set; } + string ForeColor { get; set; } = default!; + string BackColor { get; set; } = default!; + string AriaDescription { get; set; } = default!; + string? Class { get; set; } + string? Id { get; set; } + + protected override void OnInitialized() + { + base.OnInitialized(); + + UpdateQRCode(); + } + + void UpdateQRCode() + { + Data = SettingsModel.Data; + ErrorCorrection = SettingsModel.ErrorCorrection; + Image = SettingsModel.Image; + Size = SettingsModel.Size; + PaddingCells = SettingsModel.PaddingCells; + ForeColor = SettingsModel.ForeColor; + BackColor = SettingsModel.BackColor; + AriaDescription = SettingsModel.AriaDescription; + Class = SettingsModel.Class; + Id = SettingsModel.Id; + } + + public class Settings + { + public string Data { get; set; } = "Welcome to the playground, where you are able to customise the QR code generated on this page to test the true capabilities of the library."; + public ErrorCorrection ErrorCorrection { get; set; } = ErrorCorrection.Quartile; + public string? Image { get; set; } + public string Size { get; set; } = "200px"; + public int PaddingCells { get; set; } = 1; + public string ForeColor { get; set; } = "#000000"; + public string BackColor { get; set; } = "#ffffff"; + public string AriaDescription { get; set; } = "QR Code"; + public string? Class { get; set; } + public string? Id { get; set; } + } +} \ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor index 173a6b8..54eba68 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/App.razor @@ -9,12 +9,22 @@ + + + + + + + + + + diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor index 5a24bb1..dcec93f 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor @@ -7,9 +7,35 @@
- About +

+ .Net 8.0 Static SSR & WASM +

+
@Body
diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor.css b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor.css index 038baf1..c5fa8be 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor.css +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/MainLayout.razor.css @@ -15,7 +15,7 @@ main { .top-row { background-color: #f7f7f7; border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; + justify-content: flex-start; height: 3.5rem; display: flex; align-items: center; @@ -94,3 +94,18 @@ main { right: 0.75rem; top: 0.5rem; } + + +.badge-row { + position: sticky; + top: 3.5rem; + z-index: 1; + padding: 1rem 1.5rem; + background: rgb(247, 247, 247); + background: linear-gradient(0deg, rgba(247, 247, 247, 1) 0%, rgba(224, 224, 224, 1) 100%); + border-bottom: 1px solid #d6d5d5; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + row-gap: 0.5rem; +} \ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor index dd8c3be..399de77 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor @@ -1,6 +1,6 @@  @@ -15,14 +15,14 @@ diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor.css b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor.css index 4e15395..f7f1231 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor.css +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Layout/NavMenu.razor.css @@ -46,6 +46,14 @@ 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"); } +.bi-sliders { + 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='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z'/%3E%3C/svg%3E"); +} + +.bi-file-text-fill { + 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='M12 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M5 4h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1m-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1m0 2h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1'/%3E%3C/svg%3E"); +} + .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor new file mode 100644 index 0000000..a4091d7 --- /dev/null +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Docs.razor @@ -0,0 +1,285 @@ +@page "/docs" + +Docs | PinguApps.Blazor.QRCode + +

Docs

+ +

+ A Blazor component for generating QR codes. This component encodes specified data into a QR code image, which can be customized in terms of size, colors, and error correction level. The QR code is generated as an SVG for optimal scalability and clarity. +

+ +

+ 📃 Contents +

+ + + +

+ ✅ Features +

+ +
    +
  • JavaScript-Free: No dependency on JavaScript, ensuring full functionality even in environments where JavaScript is disabled or not supported.
  • +
  • Static SSR & Prerendering Compatibility: Seamlessly works with static SSR (Server-Side Rendering) and prerendering scenarios, making it suitable for the static SSR pages of the new .NET Identity template as a 2FA QR code generator.
  • +
  • Option to add logo or image: Allows the ability to add your own image to the center of the QR Code. If using this then favour selecting higher error correction values.
  • +
  • Adjustable Error Correction: Allows setting the error correction level (Low, Medium, Quartile, High) to make the QR code decodable even when partially damaged or obscured.
  • +
  • Dynamic Data Encoding: Capable of encoding provided string data into the QR code, facilitating versatile usage scenarios.
  • +
  • Customizable Size: Supports setting the width and height of the generated SVG QR code, with a default of "100%" for flexible integration into various UI designs.
  • +
  • Configurable Padding: Allows specifying the number of empty cells as padding around the QR code to adjust its appearance, with a default setting of 1.
  • +
  • Foreground and Background Color Customization: Offers options to set the foreground and background colors of the QR code, defaulting to black (#000000) and white (#ffffff), respectively.
  • +
  • Accessibility Support: Enhances usability for screen reader users with an accessible description for the QR code, which is used as the aria-label attribute value of the SVG element.
  • +
  • Styling Options: Supports optional CSS class and ID attributes for the QR code, enabling further customization and styling flexibility.
  • +
+ +

+ 🔧 Installation +

+ +

+ To install the package, you can either install with the following command: Install-Package PinguApps.Blazor.QRCode Or you can search in the Nuget package manager for PinguApps.Blazor.QRCode. +

+ +

+ 🚀 Usage +

+ +

+ Once the package is installed, you will want to add the following statement to your _Imports.razor: +

+ + + +

+ Now you can simply use the component: +

+ +")" /> + +

+ 🟣 Parameters +

+ +

+ Data +

+

+ The data to be encoded into the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
Stringstring.Empty
+ +

+ ErrorCorrection +

+

+ Sets the error correction level for the QR code, which enables it to be decoded even if partially damaged or obscured. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
ErrorCorrectionErrorCorrection.Low + ErrorCorrection.Low
+ ErrorCorrection.Medium
+ ErrorCorrection.Quartile
+ ErrorCorrection.High
+
+ +

+ Size +

+

+ Sets the width and height of the generated SVG. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String100%Any valid html size for width & height
+ +

+ PaddingCells +

+

+ The number of empty cells as padding around the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
Int1
+ +

+ ForeColor +

+

+ Sets the foreground color of the QR code. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String#000000Any valid html color
+ +

+ BackColor +

+

+ Sets the background color of the QR code. +

+ + + + + + + + + + + + + + + + + +
TypeRequired?Default ValuePossible Values
String#ffffffAny valid html color
+ +

+ AriaDescription +

+

+ Provides an accessible description for the QR code, enhancing usability for screen reader users. This description is used as the aria-label attribute value of the QR code's SVG element, offering context or details about the QR code's content or purpose. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
StringQR Code
+ +

+ Class +

+

+ Optional CSS class to be applied to the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
String?null
+ +

+ Id +

+

+ Optional ID to be applied to the QR code. +

+ + + + + + + + + + + + + + + +
TypeRequired?Default Value
String?null
\ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Home.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Home.razor index e0809ae..78192c1 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Home.razor +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Home.razor @@ -1,13 +1,52 @@ @page "/" -Home +PinguApps.Blazor.QRCode - +
+

+ 150px, encoded "Hello World!" +

- + - + ")" /> +
-@code { - string Data { get; set; } = "This is a QR code of size 150px by 150px"; -} \ No newline at end of file +
+

+ QR Code with image +

+ + + + ")" /> +
+ +
+

+ 150px, Hooked up to change button (will change the data to a new Guid each time) +

+

+ This is the only example on this page requiring WASM rendering, otherwise the change button would do nothing. the others all render using static SSR. +

+ + +
+ +
+

+ 250px, red and aqua, 4 padding cells +

+ + + ")" /> +
+ +
+

+ 250px, lots of encoded data +

+ + + ")" /> +
\ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Weather.razor b/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Weather.razor deleted file mode 100644 index 43a1ecb..0000000 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Components/Pages/Weather.razor +++ /dev/null @@ -1,64 +0,0 @@ -@page "/weather" -@attribute [StreamRendering] - -Weather - -

Weather

- -

This component demonstrates showing data.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@code { - private WeatherForecast[]? forecasts; - - protected override async Task OnInitializedAsync() - { - // Simulate asynchronous loading to demonstrate streaming rendering - await Task.Delay(500); - - var startDate = DateOnly.FromDateTime(DateTime.Now); - var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; - forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast - { - Date = startDate.AddDays(index), - TemperatureC = Random.Shared.Next(-20, 55), - Summary = summaries[Random.Shared.Next(summaries.Length)] - }).ToArray(); - } - - private class WeatherForecast - { - public DateOnly Date { get; set; } - public int TemperatureC { get; set; } - public string? Summary { get; set; } - public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - } -} diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs b/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs index ebeaea9..9965a56 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs +++ b/src/BlazorAutoNet8/BlazorAutoNet8/Program.cs @@ -30,6 +30,6 @@ app.MapRazorComponents() .AddInteractiveServerRenderMode() .AddInteractiveWebAssemblyRenderMode() - .AddAdditionalAssemblies(typeof(Counter).Assembly); + .AddAdditionalAssemblies(typeof(Playground).Assembly); app.Run(); diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/app.css b/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/app.css index 2bd9b78..2118748 100644 --- a/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/app.css +++ b/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/app.css @@ -49,3 +49,14 @@ h1:focus { .darker-border-checkbox.form-check-input { border-color: #929292; } + +pre[class*="language-" ], +code[class*="language-"] { + white-space: pre-wrap !important; + overflow: auto !important; + word-break: break-word !important; +} + +.code-toolbar { + z-index: 0 !important; +} \ No newline at end of file diff --git a/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/images/logo.png b/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/images/logo.png new file mode 100644 index 0000000..5231665 Binary files /dev/null and b/src/BlazorAutoNet8/BlazorAutoNet8/wwwroot/images/logo.png differ