Moved social accounts to introduction card

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor

@@ -1,20 +1,32 @@
 @using LinkDotNet.Blog.Domain
+@inject AppConfiguration configuration
 @inherits LinkDotNet.Blog.Web.Features.MarkdownComponentBase
 
-<div style="--profile-background: url(@Introduction.BackgroundUrl)" class="@IntroductionClass">
+<div style="--profile-background: url(@configuration.Introduction.BackgroundUrl)" class="@IntroductionClass">
     <div class="introduction-container">
-        <div class="profile-picture" style="--profile-image: url(@Introduction.ProfilePictureUrl)">
+        <div class="profile-picture" style="--profile-image: url(@configuration.Introduction.ProfilePictureUrl)">
         </div>
-        <div class="profile-text">
-            @RenderMarkupString(Introduction.Description)
+        <div class="profile-text d-flex flex-column">
+            <div>@RenderMarkupString(configuration.Introduction.Description)</div>
+            <div class="d-flex flex-row justify-content-center">
+                @if (configuration.HasLinkedinAccount)
+                {
+                        <a id="linkedin" class="nav-link" target="_blank" href="@configuration.LinkedinAccountUrl">
+                            <i class="fab fa-linkedin"></i>
+                        </a>
+                }
+                @if (configuration.HasGithubAccount)
+                {
+                    <a id="github" class="nav-link" target="_blank" href="@configuration.GithubAccountUrl">
+                        <i class="fab fa-github"></i>
+                    </a>
+                }
+            </div>
         </div>
     </div>
 </div>
 @code {
-    [Parameter]
-    public Introduction Introduction { get; set; }
-
-    private string IntroductionClass => !string.IsNullOrEmpty(Introduction.BackgroundUrl)
+    private string IntroductionClass => !string.IsNullOrEmpty(configuration.Introduction.BackgroundUrl)
         ? "introduction-background"
         : string.Empty;
 }

src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css

@@ -37,5 +37,5 @@
     font-size: clamp(0.9rem, 0.6479rem + 1.1268vw, 1.5rem);
     color: var(--text-color-inverted);
     line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);
-    text-align: center
+    text-align: center;
 }

src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor

@@ -23,21 +23,6 @@
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5">
                 <li class="nav-item active"><a class="nav-link" href="/"><i class="fa-solid fa-house"></i> Home</a></li>
                 <li class="nav-item active"><a class="nav-link" href="/archive"><i class="fa-solid fa-box-archive"></i> Archive</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>
-                }
-                @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>
-                }
                 @if (configuration.IsAboutMeEnabled)
                 {
                     <li class="nav-item">

src/LinkDotNet.Blog.Web/Features/Home/Index.razor

@@ -15,7 +15,7 @@
         AbsolutePreviewImageUrl="@ImageUrl"
         Description="@(Markdown.ToPlainText(appConfiguration.Introduction.Description))"></OgData>
 <section class="introduction">
-    <IntroductionCard Introduction="appConfiguration.Introduction"></IntroductionCard>
+    <IntroductionCard></IntroductionCard>
 </section>
 
 <section>

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

@@ -28,30 +28,6 @@ public void ShouldNavigateToSearchPage()
         navigationManager.Uri.Should().EndWith("search/Text");
     }
 
-    [Theory]
-    [InlineData(null, null, false, false)]
-    [InlineData(null, "linkedin", false, true)]
-    [InlineData("github", null, true, false)]
-    public void ShouldDisplayGithubAndLinkedInPageWhenOnlyWhenSet(
-        string github,
-        string linkedin,
-        bool githubAvailable,
-        bool linkedinAvailable)
-    {
-        var config = new AppConfiguration
-        {
-            GithubAccountUrl = github,
-            LinkedinAccountUrl = linkedin,
-        };
-        Services.AddScoped(_ => config);
-        this.AddTestAuthorization();
-
-        var cut = RenderComponent<NavMenu>();
-
-        cut.FindAll("li").Any(l => l.TextContent.Contains("Github")).Should().Be(githubAvailable);
-        cut.FindAll("li").Any(l => l.TextContent.Contains("LinkedIn")).Should().Be(linkedinAvailable);
-    }
-
     [Fact]
     public void ShouldDisplayAboutMePage()
     {

tests/LinkDotNet.Blog.UnitTests/Web/Features/Home/Components/IntroductionCardTests.cs

@@ -2,7 +2,9 @@
 using AngleSharp.Css.Dom;
 using Bunit;
 using LinkDotNet.Blog.Domain;
+using LinkDotNet.Blog.Web;
 using LinkDotNet.Blog.Web.Features.Home.Components;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace LinkDotNet.Blog.UnitTests.Web.Features.Home.Components;
 
@@ -15,9 +17,13 @@ public void ShouldSetBackgroundWhenSet()
         {
             BackgroundUrl = "something_but_null",
         };
+        var appConfiguration = new AppConfiguration
+        {
+            Introduction = introduction,
+        };
+        Services.AddScoped(_ => appConfiguration);
 
-        var cut = RenderComponent<IntroductionCard>(
-            p => p.Add(s => s.Introduction, introduction));
+        var cut = RenderComponent<IntroductionCard>();
 
         var background = cut.FindAll(".introduction-background");
         background.Should().NotBeNullOrEmpty();
@@ -34,11 +40,39 @@ public void ShouldNotSetBackgroundWhenNotSet(string url)
         {
             BackgroundUrl = url,
         };
+        var appConfiguration = new AppConfiguration
+        {
+            Introduction = introduction,
+        };
+        Services.AddScoped(_ => appConfiguration);
 
-        var cut = RenderComponent<IntroductionCard>(
-            p => p.Add(s => s.Introduction, introduction));
+        var cut = RenderComponent<IntroductionCard>();
 
         var background = cut.FindAll(".introduction-background");
         background.Should().BeNullOrEmpty();
     }
+
+    [Theory]
+    [InlineData(null, null, false, false)]
+    [InlineData(null, "linkedin", false, true)]
+    [InlineData("github", null, true, false)]
+    public void ShouldDisplayGithubAndLinkedInPageWhenOnlyWhenSet(
+        string github,
+        string linkedin,
+        bool githubAvailable,
+        bool linkedinAvailable)
+    {
+        var config = new AppConfiguration
+        {
+            Introduction = new Introduction(),
+            GithubAccountUrl = github,
+            LinkedinAccountUrl = linkedin,
+        };
+        Services.AddScoped(_ => config);
+
+        var cut = RenderComponent<IntroductionCard>();
+
+        cut.FindAll("#github").Any().Should().Be(githubAvailable);
+        cut.FindAll("#linkedin").Any().Should().Be(linkedinAvailable);
+    }
 }