disable enhance nav on album page whose links break after back button

Author: mythz

BlazorDiffusion/Components/Pages/Albums/Index.razor

@@ -14,7 +14,7 @@
             @if (artifact != null)
             {
                 <div>
-                    <NavLink href="@($"/albums/{album.Slug}")" class="@CssUtils.ClassNames("overflow-hidden flex justify-center")">
+                    <NavLink data-enhance-nav="false" href="@($"/albums/{album.Slug}")" class="@CssUtils.ClassNames("overflow-hidden flex justify-center")">
                         <div class="relative sm:p-2 flex flex-col cursor-pointer items-center w-32 h-32 sm:w-64 sm:h-64 xl:w-96 xl:h-96 2xl:w-[512px] 2xl:h-[512px]">
                             <ArtifactImage Artifact=@artifact MinSize="@artifact.Width" Class="flex rounded sm:rounded-xl w-full h-full" ImageClass="object-cover" />
 

BlazorDiffusion/wwwroot/css/app.css

@@ -1609,6 +1609,10 @@ select{
   max-width: 42rem;
 }
 
+.max-w-32 {
+  max-width: 8rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -2539,6 +2543,11 @@ select{
   padding-right: 0.25rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2852,6 +2861,10 @@ select{
   text-transform: uppercase;
 }
 
+.lowercase {
+  text-transform: lowercase;
+}
+
 .capitalize {
   text-transform: capitalize;
 }
@@ -3258,11 +3271,6 @@ select{
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
-.ring-blue-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-}
-
 .ring-gray-800 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));

BlazorDiffusion/wwwroot/mjs/app.mjs

@@ -79,7 +79,7 @@ export function mount(sel, component, props) {
     if (!hasTemplate(el, component)) {
         // Fallback for enhanced navigation clearing HTML DOM template of Vue App, requiring a force reload
         // Avoid by disabling enhanced navigation to page, e.g. by adding data-enhance-nav="false" to element
-        console.warn('Vue Compontent template is missing, force reloading...', el, component)
+        console.warn('Vue Component template is missing, force reloading...', el, component)
         blazorRefresh()
         return
     }
@@ -276,6 +276,7 @@ globalThis.logout = function () {
 
 document.addEventListener('DOMContentLoaded', () =>
     Blazor.addEventListener('enhancedload', () => {
+        console.log('enhancedload')
         remount()
         globalThis.hljs?.highlightAll()
         if (localStorage.getItem('color-scheme') == 'dark') {