New design for the default 404 page (umbraco#11468)

* New design for the default 404 page * remove installer reference in link to our
Nuklon · Oct 27, 2021 · 3ddb2c6 · 3ddb2c6
1 parent ba73a39
commit 3ddb2c6
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 10 deletions.
diff --git a/src/Umbraco.Web.Common/ActionsResults/PublishedContentNotFoundResult.cs b/src/Umbraco.Web.Common/ActionsResults/PublishedContentNotFoundResult.cs
@@ -44,18 +44,14 @@ public async Task ExecuteResultAsync(ActionContext context)
                 reason = "No template exists to render the document at URL '{0}'.";
             }
 
-            await response.WriteAsync("<html><body><h1>Page not found</h1>");
-            await response.WriteAsync("<h2>");
-            await response.WriteAsync(string.Format(reason, WebUtility.HtmlEncode(_umbracoContext.OriginalRequestUrl.PathAndQuery)));
-            await response.WriteAsync("</h2>");
-            if (string.IsNullOrWhiteSpace(_message) == false)
+            var viewResult = new ViewResult
             {
-                await response.WriteAsync("<p>" + _message + "</p>");
-            }
+                ViewName = "~/umbraco/UmbracoWebsite/NotFound.cshtml"
+            };
+            context.HttpContext.Items.Add("reason", string.Format(reason, WebUtility.HtmlEncode(_umbracoContext.OriginalRequestUrl.PathAndQuery)));
+            context.HttpContext.Items.Add("message", _message);
 
-            await response.WriteAsync("<p>This page can be replaced with a custom 404. Check the <a target='_blank' href='https://umbra.co/custom-error-pages'>documentation for <a href=\"https://our.umbraco.com/Documentation/Tutorials/Custom-Error-Pages/#404-errors\" target=\"_blank\">Custom 404 Error Pages</a>.</p>");
-            await response.WriteAsync("<p style=\"border-top: 1px solid #ccc; padding-top: 10px\"><small>This page is intentionally left ugly ;-)</small></p>");
-            await response.WriteAsync("</body></html>");
+            await viewResult.ExecuteResultAsync(context);
         }
     }
 }
diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj
@@ -43,6 +43,7 @@
     <Content Remove="umbraco/Data/**" />
     <Content Remove="umbraco/logs/**" />
     <Content Remove="umbraco/mediacache/**" />
+    <Content Remove="umbraco\UmbracoWebsite\NotFound.cshtml" />
     <Content Remove="wwwroot/Web.config" />
   </ItemGroup>
 

diff --git a/src/Umbraco.Web.UI/umbraco/UmbracoWebsite/NotFound.cshtml b/src/Umbraco.Web.UI/umbraco/UmbracoWebsite/NotFound.cshtml
@@ -0,0 +1,84 @@
+@using Microsoft.Extensions.Options
+@using Umbraco.Cms.Core.Configuration.Models
+@using Umbraco.Cms.Core.Hosting
+@using Umbraco.Cms.Core.Routing
+@using Umbraco.Extensions
+@inject IHostingEnvironment hostingEnvironment
+@inject IOptions<GlobalSettings> globalSettings
+@{
+    var backOfficePath = globalSettings.Value.GetBackOfficePath(hostingEnvironment);
+}
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    <title>Page Not Found</title>
+
+    <link rel="stylesheet" href="@WebPath.Combine(backOfficePath.TrimStart("~"), "/assets/css/nonodes.style.min.css")" />
+    <style type="text/css">
+        body {
+            color:initial;
+        }
+
+        section {
+            background: none;
+        }
+
+        section a, section a:focus, section a:visited {
+            color:initial;
+            border-color:currentColor;
+        }
+    </style>
+</head>
+<body>
+
+    <section>
+        <article>
+            <div>
+                <h1>Page Not Found</h1>
+                @if (hostingEnvironment.IsDebugMode)
+                {
+
+                    var reason = (string)Context.Items["reason"];
+                    var message = (string)Context.Items["message"];
+
+                    if (!reason.IsNullOrWhiteSpace())
+                    {
+                        <h3>@reason</h3>
+                    }
+                    if (!message.IsNullOrWhiteSpace())
+                    {
+                        <p>@message</p>
+                    }
+
+                    <div class="cta"></div>
+
+                    <div class="row">
+                        <div class="col">
+                            <h2>This page can be replaced</h2>
+                            <p>
+                                Custom error handling might make your site look more on-brand and minimize the impact of errors on user experience - for example, a custom 404 with some helpful links (or a search function) could bring some value to the site.
+                            </p>
+
+                            <a href="https://umbra.co/custom-error-pages" target="_blank" rel="noopener">Implementing custom error pages &rarr;</a>
+                        </div>
+
+                        <div class="col">
+                            <h2>Be a part of the community</h2>
+                            <p>The Umbraco community is the best of its kind, be sure to visit, and if you have any questions, we're sure that you can get your answers from the community.</p>
+
+                            <a href="https://our.umbraco.com/" target="_blank" rel="noopener">our.Umbraco &rarr;</a>
+                        </div>
+                    </div>
+
+                }
+            </div>
+        </article>
+
+    </section>
+
+</body>
+</html>