feat: add site header (#2)

* tests: setup initial infra for end to end tests

* tests: rework end to end host

* tests: remove need for bang operator

* tests: correct header component tests

* docs: add README.md to blog directory with instructions on setting up local dev environment with and without docker

* docs: update non-developer run command

* feat: finish layout of header

* feat: add favicon

* tests: setup test coverage

* chore: update workflow with missing playwright step

* chore: add install command

src/Blog/Components/App.razor

@@ -7,6 +7,7 @@
   <base href="/" />
   <link rel="stylesheet" href="app.css" />
   <link rel="stylesheet" href="Blog.styles.css" />
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 

src/Blog/Components/Layout/Header.razor

@@ -0,0 +1,13 @@
+@namespace Blog.Components
+
+<header class="container">
+  <div class="title-container">
+    <a href="/">
+      <h1>journal</h1>
+    </a>
+  </div>
+  <div class="author-container">
+    <span>by</span>
+    <img src="https://github.com/StevanFreeborn.png" alt="Stevan Freeborn" />
+  </div>
+</header>

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

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+
+  & .title-container h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  & .author-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    & img {
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+    }
+  }
+}

src/Blog/Components/Layout/MainLayout.razor

@@ -1,6 +1,10 @@
 @inherits LayoutComponentBase
+@rendermode InteractiveServer
 
-@Body
+<div class="container">
+  <Header />
+  @Body
+</div>
 
 <div id="blazor-error-ui">
   An unhandled error has occurred.

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

@@ -1,3 +1,13 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 42rem;
+  padding: 1.25rem;
+  width: 100%;
+}
+
 #blazor-error-ui {
   background: lightyellow;
   bottom: 0;

src/Blog/Components/Pages/Home.razor

@@ -1,6 +1,10 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>journal - A blog by Stevan Freeborn</PageTitle>
+
+<HeadContent>
+    <meta name="description" content="A blog by Stevan Freeborn" />
+</HeadContent>
 
 <h1>Hello, world!</h1>