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/Blog.csproj

@@ -11,4 +11,9 @@
     <PackageReference Include="Markdig" Version="0.36.2" />
   </ItemGroup>
 
+  <ItemGroup>
+    <InternalsVisibleTo Include="$(AssemblyName).Tests" />
+    <InternalsVisibleTo Include="DynamicProxyGenAssembly2" />
+  </ItemGroup>
+
 </Project>

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>
 

src/Blog/Program.cs

@@ -23,4 +23,6 @@ app
   .MapRazorComponents<App>()
   .AddInteractiveServerRenderMode();
 
-app.Run();
+app.Run();
+
+public partial class Program {}

src/Blog/README.md

@@ -0,0 +1,48 @@
+# Blog
+
+## Setup for development
+
+### Clone the repository
+
+```sh
+git clone https://github.com/StevanFreeborn/blog.stevanfreeborn.com.git
+```
+
+### Generate development SSL certificates
+
+```sh
+dotnet dev-certs https -ep ${HOME}/.aspnet/https/Blog.pfx -p <password>
+dotnet dev-certs https --trust
+```
+
+```powershell
+dotnet dev-certs https -ep $env:USERPROFILE\.aspnet\https\Blog.pfx -p <password> --trust
+```
+
+### Developing with Docker
+
+#### Create `.env.development` file
+
+```sh
+cp src/Blog/example.env.development src/Blog/.env.development
+```
+
+#### Build and run the Docker container
+
+```sh
+docker-compose -f docker-compose.dev.yml up --build
+```
+
+### Developing without Docker
+
+#### Create `appsettings.Development.json` file
+
+```sh
+cp src/Blog/appsettings.example.json src/Blog/appsettings.Development.json
+```
+
+#### Run the application
+
+```sh
+dotnet run --project src/Blog/Blog.csproj
+```

src/Blog/appsettings.example.json

@@ -0,0 +1,3 @@
+{
+  "Urls": "https://localhost:4500;http://localhost:4501"
+}

src/Blog/example.env.development

@@ -0,0 +1,15 @@
+URLS=https://0.0.0.0:4500;http://0.0.0.0:4501
+
+# Path needs to match the path where the cert file
+# is mounted in the container
+ASPNETCORE_Kestrel__Certificates__Default__Path=
+
+# Password needs to match the password for the cert file
+# you generated
+ASPNETCORE_Kestrel__Certificates__Default__Password=
+
+# This is the hostname that the dotnet watch process will use to connect to the browser
+# The first url in the list is the port that the browser will attempt to connect to
+# The second url in the list is the port that the dotnet watch process will be running
+# on in the container. This is necessary for hot reload to work.
+DOTNET_WATCH_AUTO_RELOAD_WS_HOSTNAME=localhost:1234;http://0.0.0.0:5555;http://127.0.0.1

src/Blog/wwwroot/app.css

@@ -1,3 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
+
+/* Resets */
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button {
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  list-style-type: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* Site */
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Merriweather', serif;
+  font-size: 16px;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 h1:focus {
   outline: none;
 }