feat: add blog feed (#3)

* chore: begin working on post service

* chore: add debug assets

* chore: add whitelist words

* feat: add prism for syntax highlighting

* feat: updated favicon

* feat: add blog feed

* fix: add link to written by image

* feat: add custom error pages

* fix: focus on h2 since h1 is always the journal site title

* feat: use status code pages with redirects

* fix: add discernible text to link

* feat: add support for light and dark theme

* fix: wrap body with main tag

* fix: style main element in pages to take up full width of container

* fix: add heading to home page

* feat: add not-found-corgi image

* chore: add robots.txt file

* chore: clean up place holder posts

* fix: namespace header in layouts

* fix: use logger instead of console

* fix: use new text context in each test when registering services

* chore: update workflow to debug failing tests

* chore: install playwright deps

* fix: extend expect timeout

* fix: extend expect timeout

* fix: capture traces

* fix: capture traces

* fix: index file name

src/Blog/Components/Posts/Feed.razor

@@ -0,0 +1,34 @@
+@namespace Blog.Components
+@inject IPostService postService
+@inject IJSRuntime JS
+
+  @if (posts.Count == 0)
+  {
+    <div class="container">
+      <p>Looks like writers block. Check back later.</p>
+    </div>
+  }
+  else
+  {
+    <section role="feed" class="container">
+      @foreach (var post in posts)
+      {
+        <a href="/@post.Slug">
+          <article>
+            <h3 title="@post.Title" >@post.Title</h3>
+            <p class="date">@post.PublishedAt.ToString("MMMM d, yyyy")</p>
+            <p class="lead">@post.Lead</p>
+          </article>
+        </a>
+      }
+    </section>
+  }
+
+@code {
+  private List<Post> posts = [];
+
+  protected override async Task OnInitializedAsync()
+  {
+    posts = await postService.GetPostsAsync();
+  }
+}

src/Blog/Components/Posts/Feed.razor.css

@@ -0,0 +1,46 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 2rem;
+
+  & a {
+    padding: 1rem;
+    border-radius: 1rem;
+    background-color: var(--color-background-soft);
+    transition-property: transform;
+    transition-duration: 100ms;
+    transition-timing-function: ease-in-out
+  }
+
+  & a:active {
+    transform: scale(0.95)
+  }
+
+  & article {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    & h3 {
+      background: linear-gradient(to right top, #db3e3e, #df3741, #e32e44, #e72347, #eb124b);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 2rem;
+      font-weight: 900;
+    }
+    
+    & .date {
+      font-size: 0.85rem;
+    }
+
+    & h3,
+    & .date,
+    & .lead {
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}