From 4fa27ea626255ffcff5221c7bad4694de941f474 Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Sun, 10 Mar 2024 21:42:32 +0000
Subject: [PATCH 1/2] // WIP

---
 .../BeauFindlay.Client.csproj                 |   4 +
 .../Components/Button/Button.razor            |   2 +-
 .../BeauFindlay.Client/Layout/NavBar.razor    |   2 +-
 .../src/BeauFindlay.Client/Pages/About.razor  |  74 +++++++++++++
 .../src/BeauFindlay.Client/Pages/Home.razor   |   2 +-
 .../BeauFindlay.Client/Pages/ThisApp.razor    |   7 --
 .../wwwroot/css/app.min.css                   | 100 ++++++------------
 .../src/BeauFindlay.Client/wwwroot/index.html |   2 +
 .../wwwroot/js/smoothScroll.js                |  10 ++
 9 files changed, 127 insertions(+), 76 deletions(-)
 create mode 100644 BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
 delete mode 100644 BeauFindlay/src/BeauFindlay.Client/Pages/ThisApp.razor
 create mode 100644 BeauFindlay/src/BeauFindlay.Client/wwwroot/js/smoothScroll.js

diff --git a/BeauFindlay/src/BeauFindlay.Client/BeauFindlay.Client.csproj b/BeauFindlay/src/BeauFindlay.Client/BeauFindlay.Client.csproj
index 4d4cdc2..86e804c 100644
--- a/BeauFindlay/src/BeauFindlay.Client/BeauFindlay.Client.csproj
+++ b/BeauFindlay/src/BeauFindlay.Client/BeauFindlay.Client.csproj
@@ -15,4 +15,8 @@
     <ProjectReference Include="..\BeauFindlay.Shared\BeauFindlay.Shared.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <_ContentIncludedByDefault Remove="Components\AnchorNavigation\AnchorNavigation.razor" />
+  </ItemGroup>
+
 </Project>
diff --git a/BeauFindlay/src/BeauFindlay.Client/Components/Button/Button.razor b/BeauFindlay/src/BeauFindlay.Client/Components/Button/Button.razor
index f413027..46e1dab 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Components/Button/Button.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Components/Button/Button.razor
@@ -1,5 +1,5 @@
 <button type="@Type" disabled="@IsLoading"
-        class="border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:bg-gray-800">
+        class="border-0 ring-1 ring-inset ring-gray-300 bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:bg-gray-800 disabled:cursor-progress">
     @if (IsLoading)
     {
         <LoadingSpinner Size="LoadingSpinnerSize.Small"/>
diff --git a/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor b/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
index bc88f61..f6684b3 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Layout/NavBar.razor
@@ -5,7 +5,7 @@
     <NavLink href="/contact" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
         Contact
     </NavLink>
-    <NavLink href="/this" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
+    <NavLink href="/about" Match="NavLinkMatch.All" ActiveClass="border-l-2 border-r-2 px-2 rounded">
         This App
     </NavLink>
 </nav>
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
new file mode 100644
index 0000000..9ad5f4d
--- /dev/null
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/About.razor
@@ -0,0 +1,74 @@
+@page "/About"
+
+@inject IJSRuntime JSRuntime
+
+@if (!hasPreviouslyRendered)
+{
+    <h1 class="text-4xl">
+        <Typewriter Text="This app"/>
+    </h1>
+}
+else
+{
+    <h1 class="text-4xl">This app<span class="blinking-cursor">|</span></h1>
+}
+
+<p class="py-4 text-xl">Below is a brief outline of how this app is made and what technologies are used. If you'd like to dive straight in then full project is available on my <a href="https://github.com/bdfin/my-portfolio" target="_blank" class="underline underline-offset-2">GitHub</a>.</p>
+
+<section class="py-6" id="@FrontEndSection">
+    <h2 class="text-2xl">Front-end</h2>
+    
+    <p class="py-4">I wanted to create a decent, modern client-side experience for this app and given my <em class="text-xs">(very...)</em> limited front-end expertise I decided to choose <a href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor" target="_blank" class="underline underline-offset-2">.NET Blazor Webassembly</a>. Blazor is Microsoft's take on component-based SPAs (single page applications) and offers us back-end focussed devs a way of producing decent client experiences without needing to dive into another front-end specific technology.</p>
+    
+    <p class="py-4">Blazor traditionally came in two flavours, server and webassembly with an additional third option (Blazor Web App) recently released with .NET 8 which is an amalgamation of both. <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-server" target="_blank" class="underline underline-offset-2">Blazor Server</a> initially generates content on the server and utilises web-sockets to communicate dynamic UI updates with the client without requiring a page load, whereas <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-8.0#blazor-webassembly" target="_blank" class="underline underline-offset-2">Blazor Webassembly</a> downloads the entire app to the client browser on first load alongside a light-weight .NET run-time to execute code directly on the browsers UI thread.</p>
+    
+    <p class="py-4">As Blazor server requires a dedicated server to host the application, I chose Blazor webassembly to enable me to host this app for free using an <a href="https://azure.microsoft.com/en-gb/products/app-service/static" target="_blank" class="underline underline-offset-2">Azure Static Web App</a>. You can read more about this in the <a @onclick="() => ScrollToElementAsync(HostingSection)" class="underline underline-offset-2 cursor-pointer">hosting</a> section.</p>
+</section>
+
+<section class="py-6" id="@BackEndSection">
+    <h2 class="text-2xl pb-4">Back-end</h2>
+    <p class="my-4">As the </p>
+</section>
+
+
+<section class="py-6" id="@HostingSection">
+    <h2 class="text-2xl pb-4">Hosting</h2>
+    <p></p>
+</section>
+
+<AnchorNavigation />
+
+@code {
+    private const string ComponentKey  = "ComponentRendered_About";
+    private const string FrontEndSection = "front-end";
+    private const string BackEndSection = "back-end";
+    private const string HostingSection = "hosting";
+    
+    private bool hasPreviouslyRendered;
+    
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            var renderedBeforeAsString = await JSRuntime.InvokeAsync<string>("localStorage.getItem", ComponentKey);
+
+            var previousValue = hasPreviouslyRendered;
+            hasPreviouslyRendered = !string.IsNullOrEmpty(renderedBeforeAsString) && bool.Parse(renderedBeforeAsString);
+
+            if (!hasPreviouslyRendered)
+            {
+                await JSRuntime.InvokeVoidAsync("localStorage.setItem", ComponentKey, "true");
+            }
+            
+            if (previousValue != hasPreviouslyRendered)
+            {
+                StateHasChanged();
+            }
+        }
+    }
+
+    private async Task ScrollToElementAsync(string elementId)
+    {
+        await JSRuntime.InvokeVoidAsync("scrollToElement", elementId);
+    }
+}
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
index 9fe35ec..e9418a5 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
+++ b/BeauFindlay/src/BeauFindlay.Client/Pages/Home.razor
@@ -30,7 +30,7 @@
 }
 else
 {
-    <h1 class="text-4xl">Hi, I'm Beau.</h1>
+    <h1 class="text-4xl">Hi, I'm Beau.<span class="blinking-cursor">|</span></h1>
 
     <p class="text-xl mt-4">I'm a UK-based software engineer and I love building cool stuff.</p>
 
diff --git a/BeauFindlay/src/BeauFindlay.Client/Pages/ThisApp.razor b/BeauFindlay/src/BeauFindlay.Client/Pages/ThisApp.razor
deleted file mode 100644
index 920be09..0000000
--- a/BeauFindlay/src/BeauFindlay.Client/Pages/ThisApp.razor
+++ /dev/null
@@ -1,7 +0,0 @@
-@page "/this"
-
-<h3>ThisApp</h3>
-
-@code {
-    
-}
\ No newline at end of file
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
index 7e23f81..4c5ec61 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/css/app.min.css
@@ -569,6 +569,11 @@ video {
   margin-right: auto;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .ml-3 {
   margin-left: 0.75rem;
 }
@@ -675,6 +680,10 @@ video {
   animation: spin 1s linear infinite;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -716,18 +725,10 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
-}
-
 .border-0 {
   border-width: 0px;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-l-2 {
   border-left-width: 2px;
 }
@@ -741,16 +742,6 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-green-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
-}
-
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
 .fill-gray-600 {
   fill: #4b5563;
 }
@@ -759,11 +750,6 @@ video {
   padding: 1rem;
 }
 
-.px-10 {
-  padding-left: 2.5rem;
-  padding-right: 2.5rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -809,19 +795,24 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
 
-.pt-10 {
-  padding-top: 2.5rem;
-}
-
 .pb-4 {
   padding-bottom: 1rem;
 }
 
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -886,24 +877,14 @@ video {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
-.text-green-400 {
+.text-green-500 {
   --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-green-700 {
+.text-red-500 {
   --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
-.text-red-400 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
 .text-red-600 {
@@ -911,16 +892,6 @@ video {
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.text-red-800 {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
-}
-
 .text-slate-100 {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity));
@@ -941,25 +912,14 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
 
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -971,6 +931,10 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1067,6 +1031,10 @@ video {
   outline-color: #4b5563;
 }
 
+.disabled\:cursor-progress:disabled {
+  cursor: progress;
+}
+
 .disabled\:bg-gray-800:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
index 44827c5..4b260d3 100644
--- a/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/index.html
@@ -24,7 +24,9 @@
         </p>
     </div>
 </div>
+<script src="js/smoothScroll.js"></script>
 <script src="_framework/blazor.webassembly.js"></script>
+
 </body>
 
 </html>
diff --git a/BeauFindlay/src/BeauFindlay.Client/wwwroot/js/smoothScroll.js b/BeauFindlay/src/BeauFindlay.Client/wwwroot/js/smoothScroll.js
new file mode 100644
index 0000000..1535999
--- /dev/null
+++ b/BeauFindlay/src/BeauFindlay.Client/wwwroot/js/smoothScroll.js
@@ -0,0 +1,10 @@
+function scrollToElement(id) {
+    const element = document.getElementById(id);
+    if (element instanceof HTMLElement) {
+        element.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+            inline: "nearest"
+        });
+    }
+}
\ No newline at end of file

From 43cfa28d068336a0711ef5c7a4256417e620f54e Mon Sep 17 00:00:00 2001
From: Beau Findlay <me@beaufindlay.com>
Date: Tue, 12 Mar 2024 19:26:15 +0000
Subject: [PATCH 2/2] Test use base address

---
 BeauFindlay/src/BeauFindlay.Client/Program.cs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/BeauFindlay/src/BeauFindlay.Client/Program.cs b/BeauFindlay/src/BeauFindlay.Client/Program.cs
index 6f15f4e..35091e5 100644
--- a/BeauFindlay/src/BeauFindlay.Client/Program.cs
+++ b/BeauFindlay/src/BeauFindlay.Client/Program.cs
@@ -10,7 +10,7 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
 var apiBase = builder.Configuration["ApiBase"]
               ?? throw new ArgumentException("API base address not found in config.");
 
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBase) });
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
 builder.Services.AddSingleton<ITypewriterNotificationService, TypewriterNotificationService>();