Merge pull request #52 from linkdotnet/feature/brand

Feature/brand

Author: linkdotnet

Readme.md

@@ -23,6 +23,7 @@ The appsettings.json file has a lot of options to customize the content of the b
 ```json
 {
   "BlogName": "linkdotnet",
+  "BlogBrandUrl": "http//some.url/image.png",
   "GithubAccountUrl": "",
   "LinkedInAccountUrl": "",
   "Introduction": {
@@ -59,11 +60,12 @@ The appsettings.json file has a lot of options to customize the content of the b
 
 | Property                  | Type           | Description                                                                                                                                                |
 | ------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| BlogName                  | string         | Name of your blog. Is used in the navbar and is used as the title of the page.                                                                             |
+| BlogName                  | string         | Name of your blog. Is used in the navbar and is used as the title of the page. Will not be shown when `BlogBrandUrl` is set                                |
+| BlogBrandUrl              | string         | The url to an image which is used as a brand image in the navigation bar. If not set or `null` the `BlogName` will be shown                                |
 | GithubAccountUrl          | string         | Url to your github account. If not set the navigation link is not shown                                                                                    |
 | LinkedInAccountUrl        | string         | Url to your LinkedIn account. If not set the navigation link is not shown                                                                                  |
 | Introduction              |                | Is used for the introduction part of the blog                                                                                                              |
-| Description               | MarkdownString | Small introduction text for yourself. This is also used for `<meta name="description">` tag. For this the markup will be converted to plain text.          |
+| Description               | MarkdownString | Small introduction text for yourself. This is also used for `<meta name="description">` tag. For this the markup will be converted to plain text           |
 | BackgroundUrl             | string         | Url or path to the background image                                                                                                                        |
 | ProfilePictureUrl         | string         | Url or path to your profile picture                                                                                                                        |
 | PersistenceProvider       | string         | Declares the type of the storage provider (one of the following: `SqlServer`, `SqliteServer`, `RavenDb`, `InMemory`). More in-depth explanation down below |
@@ -161,4 +163,4 @@ Furthermore the following tags are set:
 | Tag                                      | Index                                | Display Blog Post             |
 | ---------------------------------------- | ------------------------------------ | ----------------------------- |
 | Title of the web page                    | Defined in AppConfiguration.BlogName | Title of the blogpost         |
-| &lt;meta name="keyword" content="" /&gt; | not set                              | Tags defined in the Blog Post |
+| &lt;meta name="keyword" content="" /&gt; | not set                              | Tags defined in the Blog Post |

src/LinkDotNet.Blog.Web/AppConfiguration.cs

@@ -7,6 +7,8 @@ public record AppConfiguration
 {
     public string BlogName { get; init; }
 
+    public string BlogBrandUrl { get; init; }
+
     public string LinkedinAccountUrl { get; init; }
 
     public bool HasLinkedinAccount => !string.IsNullOrEmpty(LinkedinAccountUrl);

src/LinkDotNet.Blog.Web/AppConfigurationFactory.cs

@@ -14,6 +14,7 @@ public static AppConfiguration Create(IConfiguration config)
         var configuration = new AppConfiguration
         {
             BlogName = config["BlogName"],
+            BlogBrandUrl = config["BlogBrandUrl"],
             GithubAccountUrl = config["GithubAccountUrl"],
             LinkedinAccountUrl = config["LinkedInAccountUrl"],
             Introduction = config.GetSection("Introduction").Get<Introduction>(),

src/LinkDotNet.Blog.Web/Shared/MainLayout.razor

@@ -6,9 +6,7 @@
     <NavMenu/>
 
     <main>
-        <div class="page">
-            @Body
-        </div>
+        @Body
     </main>
 </div>
 <Footer></Footer>

src/LinkDotNet.Blog.Web/Shared/NavMenu.razor

@@ -2,9 +2,20 @@
 @inject NavigationManager navigationManager
 @implements IDisposable
 
-<nav class="navbar navbar-expand-lg position-absolute navbar-background inverted-colors navbar-dark" style="width: 100%">
+<nav class="navbar navbar-expand-lg navbar-background inverted-colors navbar-dark w-100">
     <div class="container-fluid">
-        <a class="nav-brand barcode ms-5" href="/">@configuration.BlogName</a>
+        @if (configuration.BlogBrandUrl != null)
+        {
+            <a class="nav-brand ms-5" href="/">
+                <img style="max-height: 62px;"
+                     src="@configuration.BlogBrandUrl.ToAbsoluteUrl(navigationManager.BaseUri)"
+                     alt="brand" />
+            </a>
+        }
+        else
+        {
+            <a class="nav-brand barcode ms-5" href="/">@configuration.BlogName</a>
+        }
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -13,23 +24,26 @@
                 <li class="nav-item active"><a class="nav-link" href="/">Home</a></li>
                 @if (configuration.HasLinkedinAccount)
                 {
-                    <li class="nav-item"><a class="nav-link" target="_blank" href="@configuration.LinkedinAccountUrl"><i 
-                                                                                                                          class="fab fa-linkedin"></i>
-                        LinkedIn</a></li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="@configuration.LinkedinAccountUrl">
+                            <i
+                                class="fab fa-linkedin"></i>
+                            LinkedIn</a></li>
                 }
                 @if (configuration.HasGithubAccount)
                 {
-                    <li class="nav-item"><a class="nav-link" target="_blank" href="@configuration.GithubAccountUrl"><i class="fab 
-                    fa-github"></i> 
-                        Github</a></li>
+                    <li class="nav-item">
+                        <a class="nav-link" target="_blank" href="@configuration.GithubAccountUrl"><i class="fab
+                    fa-github"></i>
+                            Github</a></li>
                 }
                 @if (configuration.IsAboutMeEnabled)
                 {
                     <li class="nav-item">
                         <a class="nav-link" href="AboutMe"><i class="far fa-address-card"></i> About
                             me</a></li>
                 }
-                
+
                 <AccessControl CurrentUri="@currentUri"></AccessControl>
                 <li class="nav-item d-flex">
                     <SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>

src/LinkDotNet.Blog.Web/appsettings.json

@@ -8,6 +8,7 @@
   },
   "AllowedHosts": "*",
   "BlogName": "Blogname",
+  "BlogBrandUrl": null,
   "GithubAccountUrl": "",
   "LinkedInAccountUrl": "",
   "Introduction": {

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -145,10 +145,6 @@ section {
     padding-bottom: 10px;
 }
 
-.page {
-    padding-top: 88px;
-}
-
 .table th {
     background: var(--button-primary-color);
     color: var(--white);

src/LinkDotNet.Blog.Web/wwwroot/css/bundle.min.css

@@ -1,5 +1,6 @@
 using System.Linq;
 using AngleSharp.Html.Dom;
+using AngleSharpWrappers;
 using Bunit;
 using Bunit.TestDoubles;
 using FluentAssertions;
@@ -81,8 +82,28 @@ public void ShouldPassCorrectUriToComponent()
         this.AddTestAuthorization();
         var cut = RenderComponent<NavMenu>();
 
-        Services.GetService<NavigationManager>()!.NavigateTo("test");
+        Services.GetRequiredService<NavigationManager>().NavigateTo("test");
 
         cut.FindComponent<AccessControl>().Instance.CurrentUri.Should().Contain("test");
     }
+
+    [Fact]
+    public void ShouldShowBrandImageIfAvailable()
+    {
+        var config = new AppConfiguration
+        {
+            ProfileInformation = new ProfileInformation(),
+            BlogBrandUrl = "http://localhost/img.png",
+        };
+        Services.AddScoped(_ => config);
+        this.AddTestAuthorization();
+
+        var cut = RenderComponent<NavMenu>();
+
+        var brandImage = cut.Find(".nav-brand img");
+
+        var image = brandImage.Unwrap() as IHtmlImageElement;
+        image.Should().NotBeNull();
+        image.Source.Should().Be("http://localhost/img.png");
+    }
 }

tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/NavMenuTests.cs

@@ -14,6 +14,7 @@ public void ShouldMapFromAppConfiguration()
         var inMemorySettings = new Dictionary<string, string>
             {
                 { "BlogName", "UnitTest" },
+                { "BlogBrandUrl", "http://localhost" },
                 { "GithubAccountUrl", "github" },
                 { "LinkedInAccountUrl", "linkedIn" },
                 { "ConnectionString", "cs" },
@@ -38,6 +39,7 @@ public void ShouldMapFromAppConfiguration()
         var appConfiguration = AppConfigurationFactory.Create(configuration);
 
         appConfiguration.BlogName.Should().Be("UnitTest");
+        appConfiguration.BlogBrandUrl.Should().Be("http://localhost");
         appConfiguration.GithubAccountUrl.Should().Be("github");
         appConfiguration.HasGithubAccount.Should().BeTrue();
         appConfiguration.LinkedinAccountUrl.Should().Be("linkedIn");