From d7ca6fd2f6a942e60b59cb8cf241179d6f817ede Mon Sep 17 00:00:00 2001
From: Hannah Wolfe <github.erisds@gmail.com>
Date: Thu, 10 Aug 2017 14:34:23 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Added=20specific=20404=20templat?=
 =?UTF-8?q?e=20&=20simplified=20fallback=20(#348)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue

- The 404 Error template can have a little more fancy logic than other templates
- Therefore, we make the 404 template have the get helper
- The fallback general error template has no use of the get helper
- This helps ensure that errors can be rendered
---
 error-404.hbs | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++
 error.hbs     | 17 +++-------------
 2 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 error-404.hbs
diff --git a/error-404.hbs b/error-404.hbs
new file mode 100644
index 0000000..c3ab978
--- /dev/null
+++ b/error-404.hbs
@@ -0,0 +1,56 @@
+{{!--
+This error template is used for all 404 errors, which might occur on your site.
+It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+--}}
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
+</head>
+<body class="error-template">
+    <div class="site-wrapper">
+
+        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+            <div class="inner">
+                <nav class="site-nav-center">
+                    {{#if @blog.logo}}
+                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                    {{else}}
+                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                    {{/if}}
+                </nav>
+            </div>
+        </header>
+
+        <main id="site-main" class="site-main outer" role="main">
+            <div class="inner">
+
+                <section class="error-message">
+                    <h1 class="error-code">{{code}}</h1>
+                    <p class="error-description">{{message}}</p>
+                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+                </section>
+            </div>
+        </main>
+
+        {{#get "posts" limit="3"}}
+        <aside class="outer">
+            <div class="inner">
+                <div class="post-feed">
+                    {{#foreach posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </div>
+        </aside>
+        {{/get}}
+
+    </div>
+</body>
+</html>
diff --git a/error.hbs b/error.hbs
index a79bd4c..da1c655 100644
--- a/error.hbs
+++ b/error.hbs
@@ -1,5 +1,7 @@
 {{!--
-This error template is used for all 400/500 errors which might occur on your site. It's a good idea to keep this template as minimal as possible in terms of both file size and complexity. You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
+This error template is used for all 400/500 errors, except 404, which might occur on your site.
+It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
 --}}
 
 <!DOCTYPE html>
@@ -56,19 +58,6 @@ This error template is used for all 400/500 errors which might occur on your sit
 
             </div>
         </main>
-
-        {{#get "posts" limit="3"}}
-        <aside class="outer">
-            <div class="inner">
-                <div class="post-feed">
-                    {{#foreach posts}}
-                        {{> "post-card"}}
-                    {{/foreach}}
-                </div>
-            </div>
-        </aside>
-        {{/get}}
-
     </div>
 </body>
 </html>
