diff --git a/README.md b/README.md index eba7faa..816c042 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ > # Mendi.Blazor.DynamicNavigation ->>This package allows dynamic routing in your Blazor application. It configures your app to route to pages within your application without changing URLs, making it a single page. It is safe and also prevents URL tempering and hijacking +>>This package allows dynamic routing in your Blazor application. It configures your app to route to pages within your application without changing URLs, making it truly a single-page app. It is safe and also prevents URL tempering and hijacking ## 👏Features - [x] Static URL - *Urls do not change when you navigate to any routable page* @@ -7,9 +7,10 @@ - [x] Previous Page History - *It can navigate back to previous pages visited* - [x] Nav Menu Binding - *Navigate to any routable page from your nav menu* - [x] Multi-App Switching - *Switch between multiple apps within your project. This is very useful for controlling the UI* +- [ ] Handle catch-all url param redirect - *dev work* ## 📖Installation -To begin, install the **Mendi.Blazor.DynamicNavigation** Nuget package from Visual Studio or use the CLI: +To begin, install the **Mendi.Blazor.DynamicNavigation** Nuget package from Visual Studio or use the Command-line tool: `dotnet add package Mendi.Blazor.DynamicNavigation` ## 🔧Configuration @@ -20,8 +21,8 @@ var app = await builder.UseDynamicNavigator(); await app.RunAsync(); ``` -Now create a `BaseComponent.cs` class in the pages folder or wherever it would be convenient for you. You can change the `BaseComponent.cs` name of course. -You'll have to inherit the `DynamicNavigatorComponentBase` class and add the `NavigatorBaseComponent` attribute. Your class should look similar to this: +Now create a `BaseComponent.cs` class in the pages folder or wherever would be convenient for you. You can change the `BaseComponent.cs` name of course. +Inherit the `DynamicNavigatorComponentBase` class and add the `NavigatorBaseComponent` attribute to your base component class. Your class should look similar to this: ```csharp using Mendi.Blazor.DynamicNavigation; using Mendi.Blazor.DynamicNavigation.Common; @@ -46,7 +47,7 @@ After that, add the **BlazorDynamicPageNavigator** component to the Home.razor o ## 🚀Using It -The **Mendi.Blazor.DynamicNavigation** is merely used for configuring your project. You'll use class and property attributes to define your routable components and parameter properties. +The **Mendi.Blazor.DynamicNavigation** is used for configuring your project. You'll use class and property attributes to define your routable components and parameter properties. To define a routable component, decorate it with the `NavigatorRoutableComponent` attribute, and decorate your callback event properties with the `NavigatorClickEvent` attribute. Here's a typical example ``` csharp @@ -110,7 +111,66 @@ namespace Test.Pages.HiJack Once your routable components are decorated. The rest is up to **Mendi.Blazor.DynamicNavigation.CLI** tool to complete😉 - > # Mendi.Blazor.DynamicNavigation.CLI >>Command line tool for generating page routes and building routes for the dynamic navigation use in your application +## 📖Installation +To install the **Mendi.Blazor.DynamicNavigation.CLI** tool, run `dotnet tool install -g Mendi.Blazor.DynamicNavigation.CLI` from command line + +## 🔧Configuration + +Add a `DynamicNavigator.config` with the following code +``` + + + + + + + +``` +Replace the value with the actual path to your project's .dll directory + +## 🚀Using It + +The CLI is responsible for generating route pages and building them. To use it, open command-line tool to the directory of your project to run the following commands: + +- To generate route pages +``` +dynamicnav-engine scaffold getpageroutes +``` + +You can likewise open the command-line tool from any location to run this command but with the `-p` or `--path` +``` +dynamicnav-engine scaffold getpageroutes -p path\to\your\projet\directory +``` + +- To build route pages +``` +dynamicnav-engine scaffold buildpageroutes +``` +You can likewise open the command-line tool from any location to run this command but with the `-p` or `--path` +``` +dynamicnav-engine scaffold buildpageroutes -p path\to\your\projet\directory +``` + +Once the command runs successfully, your BaseComponent class will be populated with the required methods. + +Lastly, Open the `Home.razor.cs` file and add the following code +``` csharp +protected override async Task OnInitializedAsync() +{ + await GetPageRoutes(); +} +``` + +Now run the project, and don't forget to check your browser's dev tool console for extra log information if you ever get into an issue + + +Cheers! + + + + + +