#51 add simple UI and API with initial projects layered and structure

src/.gitignore

@@ -3,6 +3,12 @@
 ##
 ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
 
+# Client packages (bootstrap, etc.)
+lib/
+
+# Compiled css
+/FluentCMS.Web.UI/wwwroot/css/*.css
+
 # User-specific files
 *.rsuser
 *.suo

src/FluentCMS.Domain/FluentCMS.Domain.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
     <RootNamespace>FluentCMS</RootNamespace>

src/FluentCMS.Repository.LiteDb.Tests/FluentCMS.Repository.LiteDb.Tests.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
 

src/FluentCMS.Repository.LiteDb/FluentCMS.Repository.LiteDb.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <ImplicitUsings>enable</ImplicitUsings>
     <Nullable>enable</Nullable>
   </PropertyGroup>

src/FluentCMS.Shared/ConfigurationExtensions.cs

@@ -0,0 +1,36 @@
+using Microsoft.Extensions.Hosting;
+
+namespace Microsoft.Extensions.Configuration;
+
+public static class ConfigurationExtensions
+{
+    public static IConfigurationBuilder AddConfig(this IConfigurationBuilder configBuilder, IHostEnvironment env, string configFolder = "\\Config\\")
+    {
+        var folderName = env.ContentRootPath + configFolder;
+
+        // setting base path for config folder
+        configBuilder.SetBasePath(folderName);
+
+        foreach (var filename in Directory.GetFiles(folderName))
+        {
+            // read only json files
+            if (Path.GetExtension(filename) != ".json")
+                continue;
+
+            // accept only root config files
+            if (Path.GetFileName(filename).Split(".").Length != 2)
+                continue;
+
+            // adding config file
+            configBuilder.AddJsonFile(filename, optional: true, reloadOnChange: true)
+              .AddJsonFile($"{Path.GetFileNameWithoutExtension(filename)}.{env.EnvironmentName}.json", optional: true, reloadOnChange: true);
+        }
+
+        return configBuilder;
+    }
+
+    public static T GetInstance<T>(this IConfiguration configuration, string sectionName)
+    {
+        return configuration.GetSection(sectionName).Get<T>();
+    }
+}

src/FluentCMS.Shared/Controllers/BaseController.cs

@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace FluentCMS.Web.Controllers;
+
+[Route("api/[controller]/[action]/")]
+[ApiController]
+[Produces("application/json")]
+public abstract class BaseController : ControllerBase
+{
+
+}

src/FluentCMS.Shared/Controllers/WeatherForecastController.cs

@@ -0,0 +1,33 @@
+using FluentCMS.Models;
+using Microsoft.AspNetCore.Mvc;
+
+namespace FluentCMS.Web.Controllers;
+
+public class WeatherForecastController : BaseController
+{
+    private static readonly string[] Summaries =
+    [
+        "Freezing",
+        "Bracing",
+        "Chilly",
+        "Cool",
+        "Mild",
+        "Warm",
+        "Balmy",
+        "Hot",
+        "Sweltering",
+        "Scorching"
+    ];
+
+    [HttpGet]
+    public IEnumerable<WeatherForecast> GetAll()
+    {
+        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+        {
+            Date = DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+        })
+        .ToArray();
+    }
+}

src/FluentCMS.Shared/FluentCMS.Shared.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+  </PropertyGroup>
+  <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.13" />
+    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\FluentCMS.Domain\FluentCMS.Domain.csproj" />
+  </ItemGroup>
+</Project>

src/FluentCMS.Shared/Models/WeatherForecast.cs

@@ -0,0 +1,9 @@
+namespace FluentCMS.Models;
+
+public class WeatherForecast
+{
+    public DateOnly Date { get; set; }
+    public int TemperatureC { get; set; }
+    public string? Summary { get; set; }
+    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+}

src/FluentCMS.Shared/SwaggerServiceExtensions.cs

@@ -0,0 +1,46 @@
+using Microsoft.AspNetCore.Builder;
+using Microsoft.OpenApi.Models;
+
+namespace Microsoft.Extensions.DependencyInjection;
+
+public static class SwaggerServiceExtensions
+{
+    private static string _applicationName = string.Empty;
+    private static string _applicationVersion = string.Empty;
+
+    public static IServiceCollection AddApiDocumentation(this IServiceCollection services, string applicationName = "FluentCMS API", string version = "v.1.0.0")
+    {
+        _applicationName = applicationName;
+        _applicationVersion = version;
+
+        services.AddEndpointsApiExplorer();
+
+        services.AddSwaggerGen(c =>
+        {
+            c.OrderActionsBy(x => x.RelativePath);
+            c.SwaggerDoc("v1", new OpenApiInfo { Title = applicationName, Version = version });
+        });
+
+        //services.AddSwaggerGenNewtonsoftSupport();
+
+        return services;
+
+    }
+
+    public static IApplicationBuilder UseApiDocumentation(this IApplicationBuilder app, string routePrefix = "doc")
+    {
+        // Enable middleware to serve generated Swagger as a JSON endpoint.
+        app.UseSwagger();
+
+        // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),
+        // specifying the Swagger JSON endpoint.
+        app.UseSwaggerUI(c =>
+        {
+            c.DisplayRequestDuration();
+            c.SwaggerEndpoint("/swagger/v1/swagger.json", _applicationName + ", Version " + _applicationVersion);
+            c.RoutePrefix = routePrefix;
+        });
+
+        return app;
+    }
+}

src/FluentCMS.Web.UI/App.razor

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base href="/" />
+    <title>FluentCMS</title>
+    <link rel="stylesheet" href="/css/app.min.css">
+    <HeadOutlet @rendermode="@RenderMode.InteractiveServer" />
+</head>
+<body>
+    <Routes @rendermode="@RenderMode.InteractiveServer" />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+</html>

src/FluentCMS.Web.UI/Components/Badge.razor

@@ -0,0 +1,12 @@
+@inherits BaseComponent
+@{
+    base.BuildRenderTree(__builder);
+}
+@code {
+    [Parameter]
+    [CssProperty]
+    public Colors Color { get; set; } = Colors.Primary;
+
+    [Parameter]
+    public override string Tag { get; set; } = "span";
+}

src/FluentCMS.Web.UI/Components/Base/BaseComponent.cs

@@ -0,0 +1,142 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace FluentCMS.Web.UI.Components;
+
+// All components will be inherited from this class
+public partial class BaseComponent : ComponentBase
+{
+    static int _counter = 0;
+    public BaseComponent()
+    {
+        _counter++;
+    }
+
+    public const string DEFAULT_PREFIX = "f";
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public virtual Dictionary<string, object?> Attributes { get; set; } = [];
+
+    [Parameter]
+    public virtual string Class { get; set; } = string.Empty;
+
+    [Parameter]
+    public virtual string Tag { get; set; } = "div";
+
+    [Parameter]
+    public virtual string Prefix { get; set; } = DEFAULT_PREFIX;
+
+    [Parameter]
+    public virtual RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public ElementReference? Ref { get; set; }
+
+    [Parameter]
+    [Html]
+    public virtual string? Id { get; set; }
+
+    [Parameter]
+    public virtual string? UniqueName { get; set; }
+
+    [Parameter]
+    public EventCallback<ElementReference> RefChanged { get; set; }
+
+    protected override Task OnInitializedAsync()
+    {
+        if (string.IsNullOrEmpty(UniqueName))
+            UniqueName = GetType().Name;
+
+        if (string.IsNullOrEmpty(Id))
+            Id = $"{UniqueName}-{_counter}";
+
+        return base.OnInitializedAsync();
+    }
+
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        //base.BuildRenderTree(builder);
+
+        var _cssClasses = $"{Prefix}-{UniqueName?.PascalToKebabCase()} {GetCssClasses()}";
+        if (!string.IsNullOrEmpty(Class))
+            _cssClasses += $" {Class}";
+
+        builder.OpenElement(0, Tag);
+
+        if (Attributes?.Any() == true)
+            builder.AddMultipleAttributes(1, Attributes);
+
+        builder.AddMultipleAttributes(1, GetHtmlAttributes());
+
+        builder.AddAttribute(2, "class", $"{_cssClasses}");
+
+        if (Ref != null)
+        {
+            builder.AddElementReferenceCapture(3, async capturedRef =>
+            {
+                Ref = capturedRef;
+                await RefChanged.InvokeAsync(Ref.Value);
+            });
+        }
+
+        builder.AddContent(4, ChildContent);
+
+        builder.CloseElement();
+    }
+
+    // This function will return an space separated string for generate CSS classes
+    // It uses reflection to get all properties which have CssProperty attribute and their values
+    private string GetCssClasses()
+    {
+        var _dict = GetCssProps();
+
+        if (_dict == null || _dict.Count == 0)
+            return string.Empty;
+
+        var _cssClasses = string.Empty;
+
+        var x = _dict
+            .Where(x => !string.IsNullOrEmpty(x.Value))
+            .Select(item => $"{Prefix}-{UniqueName?.PascalToKebabCase()}-{item.Key.PascalToKebabCase()}-{item.Value.PascalToKebabCase()}");
+
+        return string.Join(" ", x);
+
+    }
+
+    // This is a function which returns a dictionary of property name and its value
+    // It will return the properties with CssProperty attribute
+    private Dictionary<string, string> GetCssProps()
+    {
+        var _dict = new Dictionary<string, string>();
+
+        var properties = GetType().GetProperties().Where(prop => Attribute.IsDefined(prop, typeof(CssPropertyAttribute)));
+        foreach (var property in properties)
+        {
+            var propertyName = property.Name;
+            var propertyValue = property.GetValue(this) ?? string.Empty;
+
+            _dict.Add(propertyName, propertyValue.ToString());
+        }
+        return _dict;
+    }
+
+    // This is a function which returns a dictionary of property name and its value
+    // It will return the properties with CssProperty attribute
+    private Dictionary<string, object> GetHtmlAttributes()
+    {
+        var _dict = new Dictionary<string, object>();
+
+        var properties = GetType().GetProperties().Where(prop => Attribute.IsDefined(prop, typeof(HtmlAttribute)));
+        foreach (var property in properties)
+        {
+            var propertyName = property.Name;
+            var propertyValue = property.GetValue(this) ?? string.Empty;
+
+            if (propertyValue is bool && (bool)propertyValue == false)
+                continue;
+
+            _dict.Add(propertyName.PascalToKebabCase(), propertyValue.ToString().PascalToKebabCase());
+        }
+        return _dict;
+    }
+}

src/FluentCMS.Web.UI/Components/Base/Colors.cs

@@ -0,0 +1,15 @@
+namespace FluentCMS.Web.UI.Components;
+
+public enum Colors
+{
+    Primary,
+    Secondary,
+    Success,
+    Danger,
+    Warning,
+    Info,
+    Light,
+    Dark,
+    White,
+    Transparent
+}