error.hbs

   1 {{!--
   2
   3 There are two error files in this theme, one for 404s and one for all other errors.
   4 This file is the latter, and handle all 400/500 errors that might occur.
   5
   6 Because 500 errors in particular usuall happen when a server is struggling, this
   7 template is as simple as possible. No template dependencies, no JS, no API calls.
   8 This is to prevent rendering the error-page itself compounding the issue causing
   9 the error in the first place.
  10
  11 Keep this template as lightweight as you can!
  12
  13 --}}
  14
  15 <!DOCTYPE html>
  16 <html>
  17 <head>
  18     <meta charset="utf-8" />
  19     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  20     <title>{{meta_title}}</title>
  21     <meta name="HandheldFriendly" content="True" />
  22     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  23     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
  24 </head>
  25 <body>
  26     <div class="site-wrapper">
  27
  28         <header class="site-header no-image">
  29             <div class="site-nav-main outer">
  30                 <div class="inner">
  31                     <nav class="site-nav-center">
  32                         {{#if @site.logo}}
  33                         <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}"
  34                                 alt="{{@site.title}}" /></a>
  35                         {{else}}
  36                         <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
  37                         {{/if}}
  38                     </nav>
  39                 </div>
  40             </div>
  41         </header>
  42
  43         <main class="outer error-content">
  44             <div class="inner">
  45
  46                 <section class="error-message">
  47                     <h1 class="error-code">{{statusCode}}</h1>
  48                     <p class="error-description">{{message}}</p>
  49                     <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
  50                 </section>
  51
  52                 {{#if errorDetails}}
  53                 <section class="error-stack">
  54                     <h3>Theme errors</h3>
  55                     <ul class="error-stack-list">
  56                         {{#foreach errorDetails}}
  57                             <li>
  58                                 <em class="error-stack-function">{{{rule}}}</em>
  59
  60                                 {{#foreach failures}}
  61                                     <p><span class="error-stack-file">Ref: {{ref}}</span></p>
  62                                     <p><span class="error-stack-file">Message: {{message}}</span></p>
  63                                 {{/foreach}}
  64                             </li>
  65                         {{/foreach}}
  66                     </ul>
  67                 </section>
  68                 {{/if}}
  69
  70             </div>
  71         </main>
  72     </div>
  73 </body>
  74 </html>