diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index c283f80..a064df2 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -20,11 +20,11 @@ jobs: uses: actions/setup-dotnet@v1 with: dotnet-version: 7.0.x - + # Install dotnet wasm buildtools workload - name: Install .NET WASM Build Tools run: dotnet workload install wasm-tools - + # Publishes Blazor project to the release-folder - name: Publish .NET Core Project run: dotnet publish samples/Thinktecture.Blazor.Sample/Thinktecture.Blazor.Sample.csproj -c:Release -p:GHPages=true -o dist/Web --nologo diff --git a/src/Thinktecture.Blazor.AsyncClipboard/README.md b/src/Thinktecture.Blazor.AsyncClipboard/README.md index 7a347e2..e27d3ac 100644 --- a/src/Thinktecture.Blazor.AsyncClipboard/README.md +++ b/src/Thinktecture.Blazor.AsyncClipboard/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.AsyncClipboard](https://www.nuget.org/packages/PatrickJahr.Blazor.AsyncClipboard/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.AsyncClipboard [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.AsyncClipboard?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.AsyncClipboard/) @@ -59,7 +63,7 @@ else ``` Internally, this method tests for the presence of the `write()` method on the `navigator.clipboard` object of the target browser. -This method allows copying (more or less) arbitrary data to the clipboard. +This method allows copying (more or less) arbitrary data to the clipboard. Please note that Firefox only supports the `writeText()` method which writes plain text to the clipboard. If you want to support browsers that only ship with support for `writeText()`, please implement a custom check. @@ -103,7 +107,7 @@ With the following JavaScript code: ```js export function getTextPromise() { - return new Promise((resolve) => resolve("Hello world")); + return new Promise((resolve) => resolve("Hello world")); } ``` diff --git a/src/Thinktecture.Blazor.Badging/README.md b/src/Thinktecture.Blazor.Badging/README.md index 96285a8..e980521 100644 --- a/src/Thinktecture.Blazor.Badging/README.md +++ b/src/Thinktecture.Blazor.Badging/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.Badging](https://www.nuget.org/packages/PatrickJahr.Blazor.Badging/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.Badging [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.Badging?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.Badging/) diff --git a/src/Thinktecture.Blazor.FileHandling/README.md b/src/Thinktecture.Blazor.FileHandling/README.md index 2591e37..a659685 100644 --- a/src/Thinktecture.Blazor.FileHandling/README.md +++ b/src/Thinktecture.Blazor.FileHandling/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.FileHandling](https://www.nuget.org/packages/PatrickJahr.Blazor.FileHandling/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.FileHandling [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.FileHandling?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.FileHandling/) @@ -69,12 +73,14 @@ The `action` property contains the address that should be launched when a file w ```json { - "file_handlers": [{ - "action": "./", - "accept": { - "text/plain": [".txt"] + "file_handlers": [ + { + "action": "./", + "accept": { + "text/plain": [".txt"] + } } - }] + ] } ``` @@ -100,10 +106,10 @@ if (isSupported) if (fileSystemHandle is FileSystemFileHandle fileSystemFileHandle) { var file = await fileSystemFileHandle.GetFileAsync(); - + var text1 = await file.TextAsync(); Console.WriteLine(text1); - + var bytes = await file.ArrayBufferAsync(); var text2 = System.Text.Encoding.UTF8.GetString(bytes); Console.WriteLine(text2); diff --git a/src/Thinktecture.Blazor.GrpcWeb.DevTools/README.md b/src/Thinktecture.Blazor.GrpcWeb.DevTools/README.md index 56d37d6..f7777fd 100644 --- a/src/Thinktecture.Blazor.GrpcWeb.DevTools/README.md +++ b/src/Thinktecture.Blazor.GrpcWeb.DevTools/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.GrpcWeb.DevTools](https://www.nuget.org/packages/PatrickJahr.Blazor.GrpcWeb.DevTools/), which offers improved features and better compatibility with the latest Blazor versions. + ## Introduction [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.GrpcWeb.DevTools?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.GrpcWeb.DevTools/) @@ -21,7 +25,6 @@ You also need the gRPC-Web Developer Tools Chrome Extsion [Install gRPC-Web Developer Tools](https://chrome.google.com/webstore/detail/grpc-web-developer-tools/kanmilmfkjnoladbbamlclhccicldjaj) - ### Platform support The gRPC-Web Developer Tools only available for Google Chrome and Microsoft Edge browser. @@ -38,7 +41,6 @@ dotnet add package Thinktecture.Blazor.GrpcWebDevTools The package can be used in Blazor WebAssembly projects. - ### Enable gRPC-Web Developer Tools on your project At first you have to register a `GrpcChannel` in your `ServiceCollection` like this: @@ -46,12 +48,12 @@ At first you have to register a `GrpcChannel` in your `ServiceCollection` like t ```csharp builder.Services.AddScoped(services => { - var channel = GrpcChannel.ForAddress(backendUrl, - new GrpcChannelOptions - { - HttpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()) + var channel = GrpcChannel.ForAddress(backendUrl, + new GrpcChannelOptions + { + HttpHandler = new GrpcWebHandler(GrpcWebMode.GrpcWeb, new HttpClientHandler()) }); - + return channel; }); ``` diff --git a/src/Thinktecture.Blazor.PwaUpdate/README.md b/src/Thinktecture.Blazor.PwaUpdate/README.md index af9716d..a4905c6 100644 --- a/src/Thinktecture.Blazor.PwaUpdate/README.md +++ b/src/Thinktecture.Blazor.PwaUpdate/README.md @@ -1,5 +1,8 @@ -# Thinktecture.Blazor.PwaUpdate +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.PwaUpdate](https://www.nuget.org/packages/PatrickJahr.Blazor.PwaUpdate/), which offers improved features and better compatibility with the latest Blazor versions. +# Thinktecture.Blazor.PwaUpdate [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.PwaUpdate?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.PwaUpdate/) @@ -41,6 +44,7 @@ To make the UpdateService available on all pages, register it at the IServiceCol builder.Services.AddUpdateService(); ``` + ### Add to Imports To use the default UpdateModal component on the hole app razor files, register it in the `_Imports.razor` file. @@ -77,37 +81,37 @@ To use the default update modal, add the component to the main layout. For examp ... - ``` + As soon as an update is available, a modal will appear in the upper right corner as shown in the example. ![Pwa Update Model](../../images/update_sample.png) -If you do not want to use the default layout, you can also pass a ChildContent, which will be displayed instead of the default. +If you do not want to use the default layout, you can also pass a ChildContent, which will be displayed instead of the default. ```html -
Update available!
- +
Update available!
+
``` Another option is to override CSS variables: + - The color of the close icon can be changed by this variable: `--close-icon-color` - - The color must be an rgb valur like this: `255, 255, 255` + - The color must be an rgb valur like this: `255, 255, 255` - The action button color can be changed by this variable: `--action-button-color` - - The color must be an rgb valur like this: `208, 188, 255` + - The color must be an rgb valur like this: `208, 188, 255` - The background color of the modal can be changed by this variable: `--modal-background` - The text color of the modal can be changed by this variable: `--on-modal-background` ### Update Service -If you do not want to use the modal, you can also use only the update service. To do this, you can make the `IUpdateService` service available to the component, -page, or service via dependency injection. To receive the event for an update, simply register for the `UpdateAvailable` event. +If you do not want to use the modal, you can also use only the update service. To do this, you can make the `IUpdateService` service available to the component, +page, or service via dependency injection. To receive the event for an update, simply register for the `UpdateAvailable` event. Then call the initialization method `InitializeServiceWorkerUpdateAsync` to start the registration of the `StateChanged` event of the service worker. - ```csharp protected override async Task OnInitializedAsync() { @@ -117,8 +121,6 @@ protected override async Task OnInitializedAsync() } ``` - - ## Acknowledgements Thanks to [Kristoffer Strube](https://twitter.com/kstrubeg) who provides [a Blazor wrapper for the File System Access API](https://github.com/KristofferStrube/Blazor.FileSystemAccess). diff --git a/src/Thinktecture.Blazor.ScreenWakeLock/README.md b/src/Thinktecture.Blazor.ScreenWakeLock/README.md index 2eb96de..edbe16b 100644 --- a/src/Thinktecture.Blazor.ScreenWakeLock/README.md +++ b/src/Thinktecture.Blazor.ScreenWakeLock/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.ScreenWakeLock](https://www.nuget.org/packages/PatrickJahr.Blazor.ScreenWakeLock/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.ScreenWakeLock [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.ScreenWakeLock?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.ScreenWakeLock/) @@ -60,16 +64,16 @@ else ### Request screen wake lock To request a screen wake lock, you need to call the `RequestWakeLockAsync()` method from the `IScreenWakeLockService` service. -The browser can refuse the request for various reasons (for example, because the battery charge level is too low), -so it's a good practice to wrap the call in a `try…catch` statement. +The browser can refuse the request for various reasons (for example, because the battery charge level is too low), +so it's a good practice to wrap the call in a `try…catch` statement. The exception's message will contain more details in case of failure. ```csharp -try +try { await _screenWakeLockService.RequestWakeLockAsync(); } -catch(Exception e) +catch(Exception e) { // Handle exxception } @@ -89,18 +93,17 @@ As soon as the object was released the action `WakeLockReleased` will be fired. protected override async Task OnInitializedAsync() { //... - + _screenWakeLockService.WakeLockReleased = () => { _wakeLockRequested = false; }; - + //... await base.OnInitializedAsync(); } ``` - ## Related articles - [Documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/WakeLock) diff --git a/src/Thinktecture.Blazor.ViewTransitions/README.md b/src/Thinktecture.Blazor.ViewTransitions/README.md index 6ac7b6e..238e5ee 100644 --- a/src/Thinktecture.Blazor.ViewTransitions/README.md +++ b/src/Thinktecture.Blazor.ViewTransitions/README.md @@ -1,8 +1,13 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.ViewTransitions](https://www.nuget.org/packages/PatrickJahr.Blazor.ViewTransitions/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.ViewTransitions [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.ViewTransitions?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.ViewTransitions/) ## Introduction + This package should help you to use the View Transition API in your Blazor application. The package contains two ways to use the View Transition API. If you want to know how the View Transition API works look [here](https://drafts.csswg.org/css-view-transitions/#viewtransition). @@ -22,14 +27,12 @@ Please note that View Transition API is not yet supported in all major browsers. ### Installation - You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line: ``` dotnet add package Thinktecture.Blazor.ViewTransitions ``` - ## Usage The package can be used in Blazor WebAssembly projects. @@ -57,16 +60,16 @@ For this, you must add the component `RoutingViewTransition` to App.razor. - - - - - - Not found - -

Sorry, there's nothing at this address.

-
-
+ + + + + + Not found + +

Sorry, there's nothing at this address.

+
+
``` @@ -74,39 +77,40 @@ For this, you must add the component `RoutingViewTransition` to App.razor. The second option is to start the View Transition API using the IViewTransitionService. The following steps are necessary for this: + - Add the IViewTransitionService to the component or class using DependencyInjection. `[Inject] private IViewTransitionService _viewTransitionService { get; set; } = default!;` - To perform a view transition, use the method `StartViewTransitionAsync()`. This takes two parameters. - - The first parameter is a task. This Task specifies when the transition can be performed. That means the new view is ready, and the transition can start. Please note that the View Transition API must first take a screenshot of the current state before the DOM is changed. The following example opens a dialog. The method `StartViewTransitionAsync()`, passed as a task, first waits briefly before setting the necessary parameters. - - ```csharp - private async Task ShowDialog(User user) - { - await _viewTransitionService.StartViewTransitionAsync( - InternalShowDialog(user), - CancellationToken.None); - } - - private async Task InternalShowDialog(User user) - { - // New user is set and will dispatched - _dialogUser = user; - _dispatcher.Dispatch(new SelectUserAction(user)); - // Wait for the first Screenshot of the current state - await Task.Delay(32); - // Reset the selected user. Because a view-transition-name css property may appear only once in the DOM. - _dispatcher.Dispatch(new SelectUserAction(null)); - // Wait until the state has changed. - await Task.Delay(32); - _showDialog = true; - StateHasChanged(); - } - ``` - - - The second parameter is the `CancellationToken` to cancel the operation. + - The first parameter is a task. This Task specifies when the transition can be performed. That means the new view is ready, and the transition can start. Please note that the View Transition API must first take a screenshot of the current state before the DOM is changed. The following example opens a dialog. The method `StartViewTransitionAsync()`, passed as a task, first waits briefly before setting the necessary parameters. + + ```csharp + private async Task ShowDialog(User user) + { + await _viewTransitionService.StartViewTransitionAsync( + InternalShowDialog(user), + CancellationToken.None); + } + + private async Task InternalShowDialog(User user) + { + // New user is set and will dispatched + _dialogUser = user; + _dispatcher.Dispatch(new SelectUserAction(user)); + // Wait for the first Screenshot of the current state + await Task.Delay(32); + // Reset the selected user. Because a view-transition-name css property may appear only once in the DOM. + _dispatcher.Dispatch(new SelectUserAction(null)); + // Wait until the state has changed. + await Task.Delay(32); + _showDialog = true; + StateHasChanged(); + } + ``` + + - The second parameter is the `CancellationToken` to cancel the operation. That's it. Just try it out, and feel free to give feedback :-) diff --git a/src/Thinktecture.Blazor.WebShare/README.md b/src/Thinktecture.Blazor.WebShare/README.md index 1f72b58..f8083fe 100644 --- a/src/Thinktecture.Blazor.WebShare/README.md +++ b/src/Thinktecture.Blazor.WebShare/README.md @@ -1,3 +1,7 @@ +⚠️ **This package is deprecated and will no longer receive updates.** + +We recommend migrating to the new package, [PatrickJahr.WebShare](https://www.nuget.org/packages/PatrickJahr.Blazor.WebShare/), which offers improved features and better compatibility with the latest Blazor versions. + # Thinktecture.Blazor.WebShare [![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/Thinktecture.Blazor.WebShare?label=NuGet%20Downloads)](https://www.nuget.org/packages/Thinktecture.Blazor.WebShare/) @@ -93,7 +97,7 @@ Please note that the `CanShareAsync()` method throws an exception if the `canSha ### Sharing data To share the data, call the `ShareAsync()` method and pass an instance of `WebShareDataModel` to it. -Please note that this method may throw an exception in case the `share()` method is not supported by the target platform, the user agent does not support sharing the data, or the user denied sharing it (e.g., by dismissing the share sheet). +Please note that this method may throw an exception in case the `share()` method is not supported by the target platform, the user agent does not support sharing the data, or the user denied sharing it (e.g., by dismissing the share sheet). ```csharp try @@ -122,8 +126,8 @@ The following JavaScript function generates a plain text file with `foo` as its ```js export function generateSampleFile() { - const blob = new Blob(['foo'], { type: 'text/plain' }); - return new File([blob], 'text.txt', { type: blob.type }); + const blob = new Blob(["foo"], { type: "text/plain" }); + return new File([blob], "text.txt", { type: blob.type }); } ```