DOCSEARCHbyAlgolia
Submit Docs

Oqtane Framework

repository·dev·Indexed 24 days ago

https://github.com/oqtane/oqtane.framework

An open source CMS and Application Framework for developing web, mobile, and desktop applications using .NET and Blazor. It supports Static Blazor, Blazor Server, Blazor WebAssembly, and Blazor Hybrid via .NET MAUI. The framework includes a Visual Studio Project Template for scaffolding projects and integrates Open Iconic for web-ready icons in SVG, Webfont, and raster formats.

Tokens
1.9K
Snippets
11
Records
14
Agent score
79%

What's inside oqtane.framework

  1. Overview of the Oqtane Framework

    dev

    Oqtane is an open source CMS and Application Framework designed for developing web, mobile, and desktop applications using .NET. It uses Blazor to create dynamic digital experiences and supports multiple hosting models, including:

    • Static Blazor
    • Blazor Server
    • Blazor WebAssembly
    • Blazor Hybrid (via .NET MAUI)

  2. Understand Oqtane API Decorator Attributes

    dev

    Oqtane uses special decorator attributes to control which parts of the codebase are exposed as public APIs in the official documentation. This is managed by the API Code Generator.

    Currently, the framework follows an 'opt-out' documentation model: most APIs are documented by default, and you must use the [PrivateApi] attribute to exclude an item from the public documentation.

    Note: The framework may transition to an 'opt-in' model in the future, where only items explicitly marked with a [PublicApi] attribute will be documented.

  3. Use Open Iconic SVG Sprites

    dev

    Open Iconic provides an SVG sprite that allows you to load all icons in a single request. To use an icon, reference the sprite file and the specific icon ID using the <use> tag.

    Styling Tips:

    • Sizing: Set equal width and height on the <svg> tag.
    • Coloring: Use the CSS fill property on the <use> tag to change the icon color.
    • Best Practice: Add a general class to the <svg> tag for shared sizing and a unique class to the <use> tag for specific icon styling.
    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>
    .icon {
  width: 16px;
  height: 16px;
}

.icon-account-login {
  fill: #f00;
}

  7. Install and create a new Oqtane application

    dev

    Oqtane development projects use a Visual Studio Project Template powered by the .NET CLI. You can install the template and scaffold a new project without needing the oqtane.framework source code locally, as Oqtane is treated as a standard application dependency.

    Follow these steps to install the template, create a project, and run the server:

    # Install the Oqtane Application Template
dotnet new install Oqtane.Application.Template

# Create a new project named MyCompany.MyProject
dotnet new oqtane-app -o MyCompany.MyProject

# Build the project
cd MyCompany.MyProject
dotnet build

# Run the server
cd Server
dotnet run

  8. Use Open Iconic's SVG Sprite

    dev

    The SVG sprite allows you to load all icons in a single request. To use an icon, reference the specific ID within the open-iconic.svg file using the <use> tag inside an <svg> element.

    Styling

    • Sizing: Set equal width and height on the <svg> tag.
    • Coloring: Use the CSS fill property on the <use> tag to change the icon color.

    Tip: Add a general class to the <svg> tag for shared styles and a unique class to the <use> tag for icon-specific overrides (like color).

    <svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

  11. Project structure and development conventions

    dev

    The generated Oqtane solution is organized into three primary folders where custom functionality is implemented:

    • Client: For client-side logic and assets.
    • Server: For server-side logic and API implementations.
    • Shared: For code shared between the Client and Server.

    To add additional modules or themes, follow the standard Oqtane folder and namespace conventions within these projects.

    Important Naming Constraint: To avoid namespace conflicts, do not use the terms Oqtane or Module in your project's output name.