Fixed some of the open data tag issues

Author: linkdotnet

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -3,6 +3,7 @@
 @page "/{blogPostId}"
 @using LinkDotNet.Domain
 @using LinkDotNet.Infrastructure.Persistence
+@using Markdig
 @using Microsoft.AspNetCore.Components.Web.Extensions.Head
 @inject IRepository _repository
 @inject IJSRuntime _jsRuntime
@@ -15,7 +16,7 @@
 else
 {
     <Title Value="@BlogPost.Title"></Title>
-    <OgData Title="@BlogPost.Title" PreviewImageUrl="@BlogPost.PreviewImageUrl"></OgData>
+    <OgData Title="@BlogPost.Title" AbsolutePreviewImageUrl="@BlogPost.PreviewImageUrl" Description="@(Markdown.ToPlainText(BlogPost.ShortDescription))"></OgData>
     <div class="blog-outer-box">
     <div class="content blog-container">
         <div class="blog-content">

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -4,8 +4,11 @@
 @using Markdig
 @inject IRepository _repository
 @inject AppConfiguration _appConfiguration
+@inject NavigationManager _navigationManager
 
-<OgData Title="@(Markdown.ToPlainText(_appConfiguration.Introduction.Description))" PreviewImageUrl="@_appConfiguration.Introduction.BackgroundUrl"></OgData>
+<OgData Title="@(Markdown.ToPlainText(_appConfiguration.BlogName))" 
+        AbsolutePreviewImageUrl="@GetAbsolutePreviewImageUrl()"
+        Description="@(Markdown.ToPlainText(_appConfiguration.Introduction.Description))"></OgData>
 <section>
     <IntroductionCard Introduction="_appConfiguration.Introduction"></IntroductionCard>
 
@@ -23,4 +26,20 @@
         _blogPosts = (await _repository.GetAllAsync(orderBy: b => b.UpdatedDate)).ToList();
     }
 
+    private string GetAbsolutePreviewImageUrl()
+    {
+        var backgroundUrl = _appConfiguration.Introduction.BackgroundUrl;
+        if (IsAbsoluteUrl(backgroundUrl))
+        {
+            return backgroundUrl;
+        }
+
+        var successful = Uri.TryCreate(new Uri(_navigationManager.BaseUri, UriKind.Absolute), new Uri(backgroundUrl, UriKind.RelativeOrAbsolute), out var uri);
+        return successful ? uri.ToString() : backgroundUrl;
+    }
+    
+    private bool IsAbsoluteUrl(string url)
+    {
+        return Uri.TryCreate(url, UriKind.Absolute, out _);
+    }
 }

LinkDotNet.Blog.Web/Pages/_Host.cshtml

@@ -13,7 +13,6 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>@_appConfiguration.BlogName</title>
-    <meta name="description" content="@(Markdown.ToPlainText(_appConfiguration.Introduction.Description))" />
     <base href="~/"/>
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

LinkDotNet.Blog.Web/Shared/IntroductionCard.razor

@@ -2,8 +2,6 @@
 @using Microsoft.AspNetCore.Components.Web.Extensions.Head
 @inherits MarkdownComponentBase
 
-<Meta property="og:image" content="@Introduction.ProfilePictureUrl" />
-
 <div style="background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(@Introduction.BackgroundUrl);" class="introduction-container">
     <div class="profile-picture" style="background-image: url(@Introduction.ProfilePictureUrl)">
 

LinkDotNet.Blog.Web/Shared/OgData.razor

@@ -1,13 +1,13 @@
 @using Microsoft.AspNetCore.Components.Web.Extensions.Head
 @inject NavigationManager _navigationManager
 
-<Meta property="og:title" content="@Title" />
-<Meta name="image" property="og:image" content="@PreviewImageUrl" />
+<Meta name="title" property="og:title" content="@Title" />
+<Meta name="image" property="og:image" content="@AbsolutePreviewImageUrl" />
 <Meta property="og:type" content="article" />
 <Meta property="og:url" content="@_navigationManager.Uri" />
 @if (Description != null)
 {
-    <Meta propertty="og:description" content="@Description" />
+    <Meta name="description" property="og:description" content="@Description" />
 }
 
 @code {
@@ -16,7 +16,7 @@
     public string Title { get; set; }
 
     [Parameter]
-    public string PreviewImageUrl { get; set; }
+    public string AbsolutePreviewImageUrl { get; set; }
 
     [Parameter]
     public string Description { get; set; }