blzrtail Template

A template project for blzrtail (formerly known as WebKit) from Talaryon Labs. This template provides a foundation for building modern, responsive web applications using Blazor and the blzrtail framework.

Overview

blzrtail is a modern web application framework built on .NET and Blazor. It combines the power of Blazor with a comprehensive UI toolkit, including Tailwind CSS and DaisyUI, to help you build beautiful, responsive applications quickly.

Features

• Pre-built Components: Ready-to-use components including navigation, layouts, buttons, cards, and more.
• Tailwind CSS Integration: Utility-first CSS framework with DaisyUI for beautiful, responsive designs.
• Modern UI Patterns: Hero sections, feature grids, contact forms, and other common web patterns.
• Configuration Options: Easily configure metadata, navigation, and theming through clean C# code.
• Blazor Server & WebAssembly Ready: Supports both interactive server and client-side rendering modes.
• Responsive Design: Mobile-first approach with responsive breakpoints.

Getting Started

Prerequisites

• .NET 10.0+ SDK
• Node.js (for npm packages)
• Your preferred IDE (Rider, Visual Studio, VS Code, etc.)

Installation

1. Clone this repository or use it as a template
2. Open the solution in your IDE
3. Restore NuGet packages: dotnet restore
4. Install npm dependencies: npm install (in the Website directory)
5. Build the CSS file: npx @tailwindcss/cli -i Styles/app.css -o wwwroot/css/app.generated.css --watch
6. Run the application: dotnet run

Project Structure

blzrtail_template/
├── src/
│   └── Website/
│       ├── Components/
│       │   ├── Layout/           # Layout components (navbar, footer, main)
│       │   ├── Pages/           # Page components
│       │   └── App.razor         # Root component
│       ├── Styles/              # CSS and styling files
│       │   ├── app.css          # Main styles with theme configuration
│       │   ├── fonts.css        # Font configurations
│       │   └── variables.css    # CSS variables
│       ├── Properties/          # Launch settings
│       └── Program.cs           # Application configuration
└── BlzrtailTemplate.sln        # Solution file

Customization

Application Metadata

Edit Program.cs to configure your application name, title, description, and base URL:

webkit.Configure<WebKitMetaOptions>(options =>
{
    options.ApplicationName = "Your App Name";
    options.Title = "Your App Title";
    options.Description = "Your app description";
    options.Image = "assets/images/your-og-image.jpg";
    options.BaseUrl = "https://yourdomain.com";
});

Navigation

Configure navigation links in Program.cs:

webkit.Configure<WebKitNavBarOptions>(options =>
{
    options.Links = [
        new() { Text = "Home", Url = "/" },
        new() { Text = "About", Url = "/about" },
        new() { Text = "Contact", Url = "/contact" }
    ];
});

Styling and Theming

The template uses Tailwind CSS with DaisyUI for styling. Theme colors are configured in Styles/app.css. Customize the theme variables to match your brand:

@theme {
    --color-primary: #00a9a7;
    --color-secondary: #061827;
    /* ... other color variables */
}

DaisyUI themes can be configured as well:

@plugin "daisyui/theme" {
    name: "blzrtail-light";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    /* ... theme colors */
}

Pages

Add new pages in the Components/Pages directory. Each page should use the @page directive and inherit from Talaryon.WebKit.WebKitPage.

CSS Development

The project uses Tailwind CSS. To build and watch for changes during development:

npx @tailwindcss/cli -i Styles/app.css -o wwwroot/css/app.generated.css --watch

Support

For questions or issues, please contact Talaryon Labs.

License

This template is provided as-is for educational and development purposes. Please refer to the license terms provided by Talaryon Labs for the blzrtail framework.