feat: add individual post page (#4)

* chore: add markdown lint to ignore no h1 heading in markdown files

* chore: update example settings

* chore: update example development env file

* fix: remove fixed 100% height on container

* feat: add individual post page

* chore: update README.md

* feat: add links to headings in post and add copy button to code blocks

* tests: add tests for get post async method

* tests: remove heading for test blogs

* fix: only add links to headings in markdown body

* tests: add tests for post page

* tests: add test to check for blog content

* docs: add jsdoc comments

* chore: fix incorrect env variable format in example

* fix: don't render anything if blog post is null

* fix: don't render anything until posts are fetched

* chore: add docker compose file for prod

src/Blog/Components/Layout/MainLayout.razor.css

@@ -1,5 +1,4 @@
 .container {
-  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

src/Blog/Components/Pages/Post.razor

@@ -0,0 +1,82 @@
+@page "/{slug:nonfile}"
+@implements IAsyncDisposable
+@inject IPostService PostService
+@inject NavigationManager NavigationManager
+@inject IJSRuntime JSRuntime
+@inject ILogger<Post> Logger
+
+@if (BlogPost is null)
+{
+  return;
+}
+else
+{
+  <PageTitle>@BlogPost.Title - journal</PageTitle>
+
+  <HeadContent>
+    <meta name="description" content="@BlogPost.Lead">
+    <link rel="stylesheet" href="markdown.css">
+    <link rel="stylesheet" href="prism.css">
+    <script src="prism.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
+  </HeadContent>
+
+  <article>
+    <div class="heading-container">
+      <h2>@BlogPost.Title</h2>
+      <p>@BlogPost.PublishedAt.ToString("MMMM d, yyyy")</p>
+    </div>
+    <div class="markdown-body">
+      @((MarkupString)BlogPost.Content)
+    </div>
+  </article>
+}
+
+@code {
+  [Parameter] 
+  public string Slug { get; set; } = string.Empty;
+  private PostWithContent? BlogPost;
+  private IJSObjectReference? module;
+
+  protected override async Task OnInitializedAsync()
+  {
+    var post = await PostService.GetPostAsync(Slug);
+
+    if (post is null)
+    {
+      NavigationManager.NavigateTo("/Error/404");
+      return;
+    }
+
+    BlogPost = post;
+  }
+
+  protected override async Task OnAfterRenderAsync(bool firstRender)
+  {
+    if (firstRender)
+    {
+      module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/Post.razor.js");
+      await module.InvokeVoidAsync("addAnchors");
+      await module.InvokeVoidAsync("addClipboard");
+    }
+  }
+
+  async ValueTask IAsyncDisposable.DisposeAsync()
+  {
+    try
+    {
+      if (module is not null)
+      {
+        await module.DisposeAsync();
+      }
+    }
+    catch (Exception ex) when (ex is JSDisconnectedException)
+    {
+    }
+    catch (Exception ex)
+    {
+      Logger.LogError(ex, "Error disposing of the module");
+    }
+  }
+}

src/Blog/Components/Pages/Post.razor.css

@@ -0,0 +1,42 @@
+article {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  & .heading-container {
+    & h2 {
+      font-size: 2.5rem;
+      font-weight: 900;
+    }
+
+    & p {
+      font-size: 0.85rem;
+    }
+  }
+
+  .markdown-body {
+    & pre {
+      position: relative;
+
+      & .copy-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: pointer;
+        color: var(--primary-white);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem;
+        transition-property: color;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in-out;
+
+        & svg {
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
+}

src/Blog/Components/Pages/Post.razor.js

@@ -0,0 +1,62 @@
+
+/**
+ * @summary Adds anchors to each heading in the post
+ * so that users can link directly to them. 
+*/ 
+export function addAnchors() {
+  const selectors = [
+    '.markdown-body h2',
+    '.markdown-body h3',
+    '.markdown-body h4',
+    '.markdown-body h5',
+    '.markdown-body h6'
+  ];
+
+  // relies on AnchorJS library
+  // being loaded in Post.razor
+  anchors.add(selectors.join(','));
+}
+
+/**
+ * @summary Adds a button to each code block that
+ * allows users to copy the code to their clipboard.
+ */
+export function addClipboard() {
+  const codeBlocks = document.querySelectorAll('pre');
+  
+  codeBlocks.forEach((block) => {
+    const button = document.createElement('button');
+    button.className = 'copy-button';
+    button.type = 'button';
+    button.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
+        <path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/>
+      </svg>
+    `
+    button.onclick = () => {
+      button.style.color = 'green';
+      setTimeout(() => {
+        button.style.color = '';
+      }, 1000);
+    };
+
+    const buttonText = document.createElement('span');
+    buttonText.className = 'sr-only';
+    buttonText.textContent = 'Copy';
+
+    button.appendChild(buttonText);
+    block.appendChild(button);
+  });
+
+  // relies on ClipboardJS library
+  // being loaded in Post.razor
+  var clipboard = new ClipboardJS('.copy-button', {
+    target: (trigger) => {
+      return trigger.previousElementSibling;
+    }
+  });
+
+  clipboard.on('success', function(e) {
+    e.clearSelection();
+  });
+}

src/Blog/Components/Posts/Feed.razor

@@ -2,7 +2,12 @@
 @inject IPostService postService
 @inject IJSRuntime JS
 
-  @if (posts.Count == 0)
+
+  @if (Posts is null)
+  {
+    return;
+  }
+  else if (Posts.Count == 0)
   {
     <div class="container">
       <p>Looks like writers block. Check back later.</p>
@@ -11,7 +16,7 @@
   else
   {
     <section role="feed" class="container">
-      @foreach (var post in posts)
+      @foreach (var post in Posts)
       {
         <a href="/@post.Slug">
           <article>
@@ -25,10 +30,10 @@
   }
 
 @code {
-  private List<Post> posts = [];
+  private List<Post>? Posts;
 
   protected override async Task OnInitializedAsync()
   {
-    posts = await postService.GetPostsAsync();
+    Posts = await postService.GetPostsAsync();
   }
 }