TablerForNet: An SEO-Optimized Framework for Blazor Based on Tabler

Elevate your Blazor development with TablerForNet. This state-of-the-art framework integrates responsive design with SEO capabilities, enabling developers to create web applications that not only deliver outstanding user experiences but also achieve strong search engine visibility.

Step-by-Step Guide to Installing TablerForNet

The guide showcases the installation on a fresh Blazor Server .NET 7 project. Kindly adhere to the following steps:

• Step 1: Install the 'TablerForNet' NuGet package.
• Step 2: Incorporate necessary 'usings' and register the TablerForNet service in the Program.cs file.
• Step 3: Integrate required 'usings' into the _imports.razor file.
• Step 4: Modify the PageTitle Tag.
• Step 5: Add 'tablerForNet' CSS and JS files to the _Host.cshtml file.
• Step 6: Remove Bootstrap and related assets.
• Step 7: Update NavMenu.razor accordingly.
• Step 8: Refine MainLayout.razor.
• Step 9: Adjust Index, Counter, and FetchData pages.

Step 1: NuGet Package Installation

Proceed as per the guidelines on nuget.org.

Step 2: Register TablerForNet Service

using TablerForNet;
 builder.Services.AddTablerForNet();

Step 3: Incorporate 'usings'

@using TablerForNet;
 @using TablerForNet.Components
 @using TablerForNet.Icons
 @using TablerForNet.Flags

Step 4: PageTitle Tag Conflict

There's a naming collision between the PageTitle tag of TablerForNet and the Microsoft's PageTitle tag. It's advised to either eliminate the former or explicitly rename it to 'TablerForNet.Components.PageTitle'. Ensure modifications in the following files:

• App.razor
• Index.razor
• Counter.razor
• Fetchdata.razor
• MainLayout.razor

Step 5: Integrate CSS and JS

<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

Step 6: Delete Bootstrap

Erase the Bootstrap folder within the CSS directory. Additionally, remove the 'open-iconic' folder since you'll be using the tabler icons. Eliminate the associated link in the _Host.cshtml file as shown below:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Step 7: NavMenu Overhaul

<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" Filled="true" />
			</MenuItemIcon>
		</NavbarMenuItem>
	</NavbarMenu>
</Navbar>

@code {
	private bool collapseNavMenu = true;

	private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

	private void ToggleNavMenu()
	{
		collapseNavMenu = !collapseNavMenu;
	}
}

Step 8: MainLayout Fine-tuning

@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

Step 9: Adjust Other Pages

As observed below, a 'div' tag has been added to the index page. It's recommended to replicate this across all other pages.

@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

Congratulations! You've successfully integrated TablerForNet into your Blazor project. With these steps completed, you are well on your way to harnessing the full potential of this powerful framework. Embrace the enhanced capabilities and create outstanding web applications. Should you encounter any challenges, remember that every hurdle is an opportunity for growth. Happy coding!