Showcase (#966)

---------

Co-authored-by: dominikcrha <[email protected]>

Havit.Blazor.Documentation.Server/Program.cs

@@ -1,5 +1,6 @@
 using System.Globalization;
 using Havit.Blazor.Documentation.DemoData;
+using Havit.Blazor.Documentation.Pages.Showcase.Data;
 using Havit.Blazor.Documentation.Server.Services;
 using Havit.Blazor.Documentation.Services;
 using Havit.Blazor.Documentation.Shared.Components.DocColorMode;
@@ -43,6 +44,7 @@ public static void Main(string[] args)
 			.WithInferenceBackend<OpenAIInferenceBackend>();
 		builder.Services.AddSingleton<LocalEmbedder>();
 
+		builder.Services.AddSingleton<IShowcaseDataService, ShowcaseDataService>();
 		builder.Services.AddTransient<IComponentApiDocModelBuilder, ComponentApiDocModelBuilder>();
 		builder.Services.AddSingleton<IDocXmlProvider, DocXmlProvider>();
 		builder.Services.AddSingleton<IDocPageNavigationItemsTracker, DocPageNavigationItemsTracker>();

Havit.Blazor.Documentation/Pages/Showcase/Data/IShowcaseDataService.cs

@@ -0,0 +1,10 @@
+
+namespace Havit.Blazor.Documentation.Pages.Showcase.Data;
+
+public interface IShowcaseDataService
+{
+	ShowcaseModel GetNextShowcase(string currentKey);
+	ShowcaseModel GetPreviousShowcase(string currentKey);
+	ShowcaseModel GetShowcase(string key);
+	IEnumerable<ShowcaseModel> GetShowcases();
+}

Havit.Blazor.Documentation/Pages/Showcase/Data/ShowcaseDataService.cs

@@ -0,0 +1,94 @@
+namespace Havit.Blazor.Documentation.Pages.Showcase.Data;
+
+public class ShowcaseDataService : IShowcaseDataService
+{
+	private readonly List<ShowcaseModel> _data = new()
+	{
+		new()
+		{
+			Id = "goran",
+			Title = "Goran",
+			Description = "SaaS ERP for small businesses",
+			ImageUrl = "images/showcase/Goran.png",
+			Author = "HAVIT",
+			AuthorUrl = "https://www.havit.eu",
+			ProjectUrl = "https://havit-g3.goran.cz",
+			SourceCodeTitle = "GitHub (Premium)",
+			SourceCodeUrl = "premium/access-content?url=https%3A%2F%2Fgithub.com%2Fhavit%2FGoranG3"
+		},
+		new()
+		{
+			Id = "bety",
+			Title = "Bety",
+			Description = "Broker pool CRM",
+			ImageUrl = "images/showcase/Bety.png",
+			Author = "HAVIT",
+			AuthorUrl = "https://www.havit.eu",
+			ProjectUrl = "https://bety2.brokertrust.cz",
+		},
+		new()
+		{
+			Id = "autronic",
+			Title = "Autronic",
+			Description = "B2B furniture e-shop",
+			ImageUrl = "images/showcase/Autronic.png",
+			Author = "HAVIT",
+			AuthorUrl = "https://www.havit.eu",
+			ProjectUrl = "https://www.autronic.cz",
+		},
+		new()
+		{
+			Id = "patria-web-trader",
+			Title = "Web Trader",
+			Description = "Trading platform",
+			ImageUrl = "images/showcase/Patria.png",
+			Author = "Patria + HAVIT",
+		},
+		new()
+		{
+			Id = "edenred",
+			Title = "Edenred",
+			Description = "Fintech card management",
+			ImageUrl = "images/showcase/Edenred.png",
+			Author = "HAVIT",
+			AuthorUrl = "https://www.havit.eu",
+		},
+	};
+
+	public ShowcaseModel GetShowcase(string key)
+	{
+		var showcase = _data.FirstOrDefault(s => s.Id == key);
+		if (showcase == null)
+		{
+			throw new ArgumentException($"Showcase with key '{key}' not found.");
+		}
+		return showcase;
+	}
+
+	public IEnumerable<ShowcaseModel> GetShowcases()
+	{
+		return _data;
+	}
+
+	public ShowcaseModel GetPreviousShowcase(string currentKey)
+	{
+		var currentIndex = _data.FindIndex(s => s.Id == currentKey);
+		if (currentIndex == -1)
+		{
+			throw new ArgumentException($"Showcase with key '{currentKey}' not found.");
+		}
+		var previousIndex = (currentIndex - 1 + _data.Count) % _data.Count;
+		return _data[previousIndex];
+	}
+
+	public ShowcaseModel GetNextShowcase(string currentKey)
+	{
+		var currentIndex = _data.FindIndex(s => s.Id == currentKey);
+		if (currentIndex == -1)
+		{
+			throw new ArgumentException($"Showcase with key '{currentKey}' not found.");
+		}
+		var nextIndex = (currentIndex + 1) % _data.Count;
+		return _data[nextIndex];
+	}
+}

Havit.Blazor.Documentation/Pages/Showcase/Data/ShowcaseModel.cs

@@ -0,0 +1,16 @@
+namespace Havit.Blazor.Documentation.Pages.Showcase.Data;
+
+public record ShowcaseModel
+{
+	public required string Id { get; init; }
+	public required string Title { get; init; }
+	public required string Description { get; init; }
+	public required string ImageUrl { get; init; }
+	public required string Author { get; init; }
+	public string AuthorUrl { get; init; }
+	public string ProjectUrl { get; init; }
+	public string SourceCodeUrl { get; init; }
+	public string SourceCodeTitle { get; init; }
+
+}
+

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseDetail.razor

@@ -0,0 +1,60 @@
+@page "/showcase/{Id}"
+@layout HomeLayout
+
+<PageTitle>@_showcase.Title Showcase | HAVIT Blazor Bootstrap - Free components for ASP.NET Core Blazor</PageTitle>
+<DocHeadContent CanonicalRelativeUrl="@($"showcase/{_showcase.Id}")" />
+
+
+<div class="showcase-detail-header hero" style="--hero-opacity: .15;">
+	<div class="container d-flex justify-content-between align-items-center" style="height: 200px;">
+		<ShowcaseNavigationLink Direction="Previous" Title="@_previousShowcase.Title" IconStart="BootstrapIcon.ArrowLeft" Href="@($"showcase/{_previousShowcase.Id}")" />
+
+		<div class="current text-center">
+			<div class="small text-primary">@_showcase.Description</div>
+			<h1 class="fw-bold">@_showcase.Title</h1>
+
+		</div>
+		<ShowcaseNavigationLink Direction="Next" Title="@_nextShowcase.Title" IconEnd="BootstrapIcon.ArrowRight" Href="@($"showcase/{_nextShowcase.Id}")" />
+	</div>
+</div>
+<div class="showcase-detail bg-body-tertiary">
+	<div class="container d-flex gap-3 flex-wrap justify-content-center">
+		<img src="@_showcase.ImageUrl" class="w-100 rounded-3 border shadow-lg" alt="@_showcase.Title">
+	</div>
+</div>
+<div class="showcase-detail-meta">
+	<div class="container">
+		<div class="d-flex align-items-center justify-content-center gap-5 my-5 small opacity-75">
+			<div class="d-flex flex-column gap-2">
+				<div class="fw-medium">Author</div>
+				<div>
+					@if (_showcase.AuthorUrl != null)
+					{
+						<a href="@_showcase.AuthorUrl">@_showcase.Author</a>
+					}
+					else
+					{
+						@_showcase.Author
+					}
+				</div>
+			</div>
+			@if (_showcase.ProjectUrl != null)
+			{
+				<div class="vr"></div>
+				<div class="d-flex flex-column gap-2">
+					<div class="fw-medium">URL</div>
+					<div><a href="@_showcase.ProjectUrl">@_showcase.ProjectUrl</a></div>
+				</div>
+			}
+			@if (_showcase.SourceCodeUrl != null)
+			{
+				<div class="vr"></div>
+				<div class="d-flex flex-column gap-2">
+					<div class="fw-medium">Source code</div>
+					<div><a href="@_showcase.SourceCodeUrl">@(_showcase.SourceCodeTitle ?? _showcase.SourceCodeUrl)</a></div>
+				</div>
+			}
+		</div>
+	</div>
+</div>
+

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseDetail.razor.cs

@@ -0,0 +1,23 @@
+using Havit.Blazor.Documentation.Pages.Showcase.Data;
+
+namespace Havit.Blazor.Documentation.Pages.Showcase;
+public partial class ShowcaseDetail(
+	IShowcaseDataService showcaseDataService)
+{
+	[Parameter] public string Id { get; set; }
+
+	private readonly IShowcaseDataService _showcaseDataService = showcaseDataService;
+	private ShowcaseModel _showcase;
+	private ShowcaseModel _previousShowcase;
+	private ShowcaseModel _nextShowcase;
+
+	protected override void OnParametersSet()
+	{
+		if (_showcase?.Id != Id)
+		{
+			_showcase = _showcaseDataService.GetShowcase(Id);
+			_previousShowcase = _showcaseDataService.GetPreviousShowcase(Id);
+			_nextShowcase = _showcaseDataService.GetNextShowcase(Id);
+		}
+	}
+}

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseList.razor

@@ -0,0 +1,29 @@
+@page "/showcase"
+@layout HomeLayout
+@inject IShowcaseDataService ShowcaseDataService
+
+<PageTitle>Showcase | HAVIT Blazor Bootstrap - Free components for ASP.NET Core Blazor</PageTitle>
+<DocHeadContent CanonicalRelativeUrl="showcase" />
+
+
+<div class="hero py-5">
+    <div class="text-center py-4 my-4">
+        <h1 class="fw-bold display-3">You can build anything with HAVIT Blazor</h1>
+        <p class="lead">HAVIT Blazor gives you the tools to create amazing projects.<br/>It might not launch you into space, but it’s perfect for building the app to navigate your journey!</p>
+    </div>
+    <div class="d-flex align-items-center justify-content-center gap-3 my-4">    
+        <p class="lead mb-0">Feel like showing off?</p>
+        <a href="mailto:[email protected]" class="btn btn-dark btn-lg rounded-pill">
+            Submit your project
+            <HxIcon Icon="BootstrapIcon.SendFill" />
+        </a>
+    </div>
+</div>
+<div class="container">
+    <div class="showcase-list d-flex gap-3 flex-wrap justify-content-center">
+        @foreach (var item in ShowcaseDataService.GetShowcases())
+        {
+            <ShowcaseListItem Showcase="item" />
+        }
+    </div>
+</div>

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseListItem.razor

@@ -0,0 +1,16 @@
+<div class="showcase-item-container" style="flex-basis: 420px;">
+    <HxNavLink Href="@($"showcase/{Showcase.Id}")">
+        <div class="showcase-item p-4 bg-body-tertiary rounded-3 d-flex flex-column gap-3">
+			<img src="@Showcase.ImageUrl" class="rounded-2 w-100 shadow" alt="@Showcase.Title" />
+            <div class="d-flex flex-column gap-1">
+				<div class="title fw-medium">@Showcase.Title</div>
+				<div class="description text-secondary small">@Showcase.Description</div>
+            </div>
+        </div>
+    </HxNavLink>
+</div>
+
+@code
+{
+    [Parameter] public ShowcaseModel Showcase { get; set; }
+}

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseNavigationLink.razor

@@ -0,0 +1,29 @@
+<div class="showcase-navigation-link">
+    <HxNavLink CssClass="py-3" Href="@Href">
+        <div class="showcase-navigation-link-text small icon-link icon-link-hover">
+            @if(IconStart != null)
+            {
+                <HxIcon Icon="@IconStart" />
+            }
+
+            @Direction
+
+            @if(IconEnd != null)
+            {
+                <HxIcon Icon="@IconEnd" />
+            }
+        </div>
+        <div class="showcase-navigation-link-title fw-medium">
+            @Title
+        </div>
+    </HxNavLink>
+</div>
+
+@code
+{
+    [Parameter] public string Href { get; set; }
+    [Parameter] public string Title { get; set; }
+    [Parameter] public string Direction { get; set; }
+    [Parameter] public IconBase IconStart { get; set; }
+    [Parameter] public IconBase IconEnd { get; set; }
+}

Havit.Blazor.Documentation/Pages/Showcase/ShowcaseNavigationLink.razor.css

@@ -0,0 +1,19 @@
+.showcase-navigation-link-text {
+    color: var(--bs-secondary);
+}
+
+.showcase-navigation-link:hover .showcase-navigation-link-text {
+    color: var(--bs-primary);
+}
+
+::deep .hx-icon {
+    transition: .2s ease-in-out transform;
+}
+
+.showcase-navigation-link:hover ::deep .bi-arrow-left {
+    transform: translate3d(-.25em,0,0);
+}
+
+.showcase-navigation-link:hover ::deep .bi-arrow-right {
+    transform: translate3d(.25em,0,0);
+}

Havit.Blazor.Documentation/Pages/Showcase/_Imports.razor

@@ -0,0 +1 @@
+@using Havit.Blazor.Documentation.Pages.Showcase.Data;

Havit.Blazor.Documentation/Program.cs

@@ -3,6 +3,7 @@
 using Havit.Blazor.Documentation.Services;
 using Havit.Blazor.Documentation.DemoData;
 using Havit.Blazor.Documentation.Shared.Components.DocColorMode;
+using Havit.Blazor.Documentation.Pages.Showcase.Data;
 
 namespace Havit.Blazor.Documentation;
 
@@ -24,6 +25,7 @@ public static async Task Main(string[] args)
 		builder.Services.AddSingleton<IDocXmlProvider, DocXmlProvider>();
 		builder.Services.AddSingleton<IDocPageNavigationItemsTracker, DocPageNavigationItemsTracker>();
 		builder.Services.AddSingleton<IHttpContextProxy, WebAssemblyHttpContextProxy>();
+		builder.Services.AddSingleton<IShowcaseDataService, ShowcaseDataService>();
 
 		builder.Services.AddScoped<IDocColorModeProvider, DocColorModeProvider>();
 		builder.Services.AddCascadingValue<ColorMode>(services =>

Havit.Blazor.Documentation/Shared/Navbar.razor

@@ -16,11 +16,9 @@
 				<HxNavLink Href="https://blocks.havit.blazor.eu" CssClass="px-3 link-body-emphasis link-opacity-75 link-opacity-100-hover" Match="NavLinkMatch.All">
 					Blocks
 				</HxNavLink>
-				@*
-				<HxNavLink Href="/showcase" CssClass="px-3 link-body-emphasis link-opacity-75 link-opacity-100-hover" Match="NavLinkMatch.All">
-				Showcase
+				<HxNavLink Href="/showcase" CssClass="px-3 link-body-emphasis link-opacity-75 link-opacity-100-hover" Match="NavLinkMatch.Prefix">
+					Showcase
 				</HxNavLink>
-				*@
 				<HxNavLink Href="/premium" CssClass="px-3 link-body-emphasis link-opacity-75 link-opacity-100-hover" Match="NavLinkMatch.All">
 					Premium
 				</HxNavLink>

Havit.Blazor.Documentation/Shared/Navbar.razor.css

@@ -9,9 +9,9 @@
 }
 
 .nav-container {
-	--bs-bg-opacity: .8;
+	--bs-bg-opacity: .5;
 	background-color: rgba(var(--bs-body-bg-rgb),var(--bs-bg-opacity)) !important;
-	backdrop-filter: saturate(120%) blur(20px);
 	-webkit-backdrop-filter: saturate(120%) blur(20px);
+	backdrop-filter: saturate(120%) blur(20px);
 	z-index: 1030;
 }

Havit.Blazor.Documentation/wwwroot/css/site.css

@@ -129,4 +129,8 @@ pre[class*="language-"] {
 [data-bs-theme=dark] .token.operator {
 	color: var(--bs-secondary-color);
 	background-color: transparent;
+}
+
+.hero {
+    background-image: radial-gradient(56.1514% 56.1514% at 49.972% 38.959%, rgba(var(--bs-primary-rgb), var(--hero-opacity, .3)) 0%, var(--bs-body-bg) 100%);
 }