Give option to remove and add new entries

Author: linkdotnet

LinkDotNet.Blog.Web/Pages/AboutMe.razor

@@ -1,12 +1,15 @@
 @page "/AboutMe"
+@using Microsoft.AspNetCore.Http
 @inject AppConfiguration appConfiguration
+@inject IHttpContextAccessor httpContextAccessor
 /* TODO: Meta Tags About Me - [Name here] */
 
 <div class="page">
     <div class="container">
         <div class="row">
             <div class="col-lg-3 col-md-4">
-                <Profile ProfileImageUrl="@appConfiguration.Introduction.ProfilePictureUrl"/>
+                <Profile ProfileImageUrl="@appConfiguration.Introduction.ProfilePictureUrl" 
+                IsAuthenticated="@httpContextAccessor.HttpContext.User.Identity.IsAuthenticated"/>
             </div>
             <div class="col-lg-9 col-md-8 tab-container">
                 <div class="row">

LinkDotNet.Blog.Web/Shared/AddProfileShortItem.razor

@@ -0,0 +1,24 @@
+<li><input type="text" @bind-value="@key" />:<input type="text" @bind-value="@value"/>
+    <button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
+        <i class="far fa-plus-square" aria-hidden="true"></i>
+    </button>
+</li>
+
+@code {
+    [Parameter] 
+    public EventCallback<KeyValuePair<string, string>> ValueAdded { get; set; }
+    
+    private string key = string.Empty;
+    private string value = string.Empty;
+
+    private async Task AddItemAsync()
+    {
+        if (string.IsNullOrWhiteSpace(key) || string.IsNullOrWhiteSpace(value))
+        {
+            return;
+        }
+
+        await ValueAdded.InvokeAsync(new KeyValuePair<string, string>(key, value));
+        key = value = string.Empty;
+    }
+}

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

@@ -1,10 +1,10 @@
 @using LinkDotNet.Domain
 @inherits MarkdownComponentBase
 
-<div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);"
+<div style="--profile-background: url(@Introduction.BackgroundUrl)"
      class="inverted-colors introduction-background">
     <div class="introduction-container">
-        <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
+        <div class="profile-picture" style="--profile-image: url(@Introduction.ProfilePictureUrl)">
 
         </div>
         <div class="profile-text">

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor.css

@@ -1,6 +1,7 @@
 .introduction-background {
     background-repeat: no-repeat;
     background-size: cover;
+    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background);
 }
 
 .introduction-container {
@@ -21,6 +22,7 @@
     border: white;
     margin: 4px 0 0 4px;
     box-shadow: 0 0 0 4px white;
+    background-image: var(--profile-image);
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;

LinkDotNet.Blog.Web/Shared/MarkdownComponentBase.cs

@@ -3,7 +3,7 @@
 
 namespace LinkDotNet.Blog.Web.Shared
 {
-    public class MarkdownComponentBase : ComponentBase
+    public abstract class MarkdownComponentBase : ComponentBase
     {
         private static readonly MarkdownPipeline MarkdownPipeline = new MarkdownPipelineBuilder()
             .UseAdvancedExtensions()

LinkDotNet.Blog.Web/Shared/Profile.razor

@@ -11,13 +11,35 @@
     <ul class="profile-keypoints">
         @foreach (var (key, value) in cv)
         {
-            <li><bold> @RenderMarkupString(key)</bold>: @RenderMarkupString(value)</li>
+            <li><bold>@RenderMarkupString(key)</bold>: @RenderMarkupString(value)
+                @if (IsAuthenticated)
+                {
+                    <button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(key)">
+                        <i class="fas fa-trash-alt" aria-hidden="true"></i>
+                    </button>
+                }
+            </li>
+        }
+        @if (IsAuthenticated)
+        {
+            <AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
         }
     </ul>
 </div>
+
+<ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete" 
+OnYesPressed="DeleteItem"></ConfirmDialog>
+
 @code {
     [Parameter]
     public string ProfileImageUrl { get; set; }
+    
+    [Parameter]
+    public bool IsAuthenticated { get; set; }
+    
+    private ConfirmDialog Dialog { get; set; }
+
+    private string currentDeleteKey;
 
     private readonly Dictionary<string, string> cv = new()
     {
@@ -27,4 +49,20 @@
         {"LinkedIn", "[Steven Giesel](https://www.linkedin.com/in/steven.giesel)"},
         {"Github", "<i class=\"fab fa-github \"></i>[linkdotnet](https://github.com/linkdotnet)"},
     };
+
+    private void ShowDeleteDialog(string key)
+    {
+        currentDeleteKey = key;
+        Dialog.Open();
+    }
+
+    private void DeleteItem()
+    {
+        cv.Remove(currentDeleteKey);
+    }
+
+    private void AddValue(KeyValuePair<string, string> toAdd)
+    {
+        cv.Add(toAdd.Key, toAdd.Value);
+    }
 }

LinkDotNet.Blog.Web/appsettings.json

@@ -22,5 +22,6 @@
     "ClientId": "",
     "ClientSecret": ""
   },
-  "BlogPostsPerPage": 10
+  "BlogPostsPerPage": 10,
+  "IsAboutMeEnabled": true
 }