fixes blank page upon invalid urls (#98)

adrianoc · Apr 3, 2024 · 25fb5ec · 25fb5ec
1 parent 6b09000
commit 25fb5ec
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/Cecilifier.Core/Constants.cs b/Cecilifier.Core/Constants.cs
@@ -60,5 +60,10 @@ public struct Common
         public const string RuntimeHelpersInitializeArrayMethodName = "InitializeArray";
         public const string RuntimeConfigJsonExt = ".runtimeconfig.json";
     }
+
+    public struct FrontEnd
+    {
+        public const string PathNotFoundRedirectQueryParameter = "redirectedFrom";
+    }
 }
 
diff --git a/Cecilifier.Web/Pages/Index.cshtml b/Cecilifier.Web/Pages/Index.cshtml
@@ -1,4 +1,5 @@
 @page
+@using Cecilifier.Core
 @model CecilifierApplication
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 
@@ -161,7 +162,7 @@
 </script>
 
 <script>
-    initializeSite("@Model.ErrorAccessingGist", "@fromGist", "@Request.Path", "@Request.Query["remove"]", "@GetType().Assembly.GetName().Version");
+    initializeSite("@Model.ErrorAccessingGist", "@fromGist", "@Request.Path", "@Request.Query["remove"]", "@Request.Query[Constants.FrontEnd.PathNotFoundRedirectQueryParameter]", "@GetType().Assembly.GetName().Version");
 </script>
 
 <script>

diff --git a/Cecilifier.Web/Startup.cs b/Cecilifier.Web/Startup.cs
@@ -142,10 +142,17 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                 }
                 else
                 {
-                    await next();
+                    await next(context);
                 }
             });
-
+
+            // Upon http errors (404 being the most common one), redirect to the landing page.
+            app.UseStatusCodePages(context =>
+            {
+                context.HttpContext.Response.Redirect($"/?{Constants.FrontEnd.PathNotFoundRedirectQueryParameter}={context.HttpContext.Request.Path.Value}");
+                return Task.CompletedTask;
+            });
+
             async Task SendStatisticsAsync(WebSocket webSocket)
             {
                 var cecilifiedWebResult = new CecilifiedWebResult

diff --git a/Cecilifier.Web/wwwroot/js/cecilifier.js b/Cecilifier.Web/wwwroot/js/cecilifier.js
@@ -127,7 +127,24 @@ function decreaseFocusedEditorFontSize() {
     const newFontSize = options.fontSize -  1;
     focusedEditor.updateOptions({ fontSize: newFontSize });
 }
-function initializeSite(errorAccessingGist, gist, requestPath, removeStoredSnippet, version) {
+function initializeSite(
+    errorAccessingGist, // error message if accessing the gist produced an error. 
+    gist, // contents of a gist; this is set when user navigates to https://cecilifier.me?gistid=[gistid] 
+    requestPath, // something like `/name` where `name` is the string used to store the snippet in the browser local store.
+    removeStoredSnippet, // user has requested to remove the contents of a snippet from the browser local store
+    pageNotFoundPath, // if user navigated to a non-existing page in cecilifier this will contain the path of the page.
+    version) {
+
+    if (pageNotFoundPath != null && pageNotFoundPath.length > 0) {
+        SnackBar({
+            message: `Requested path ${pageNotFoundPath} is not valid.`,
+            dismissible: true,
+            status: "Warning",
+            timeout: 30000,
+            icon: "exclamation"
+        });
+    }
+
     require.config({ paths: { vs: 'lib/node_modules/monaco-editor/min/vs' } });
 
     require(['vs/editor/editor.main'], function () {