feat: 404 page

See #210
spring-io · Mar 19, 2024 · ed5eec8 · ed5eec8
1 parent 7e3b08a
commit ed5eec8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 17 deletions.
diff --git a/src/css/spring/spring-404.css b/src/css/spring/spring-404.css
@@ -0,0 +1,20 @@
+body.status-404 .page-404 {
+  text-align: center;
+  margin: 0 auto;
+  padding: 4rem 0;
+}
+body.status-404 h1.page {
+  color: #6db33f;
+  font-size: 130px;
+  font-weight: 100;
+  line-height: 110px;
+  margin: 0;
+  padding: 0;
+  font-family: var(--body-font-family);
+}
+body.status-404 .strong {
+  font-weight: bold;
+}
+body.status-404 a {
+  color: #086dc3;
+}
diff --git a/src/css/spring/spring-site.css b/src/css/spring/spring-site.css
@@ -17,4 +17,5 @@
 @import "spring-base.css";
 @import "spring-doc.css";
 @import "spring-toc.css";
+@import "spring-404.css";
 @import "spring-switchtheme.css";
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -8,12 +8,17 @@
   var navToggle1 = document.querySelector('#nav-toggle-1')
   var navToggle2 = document.querySelector('#nav-toggle-2')
   var isNavOpen = window.localStorage && window.localStorage.getItem('sidebar') === 'open'
-
-  navToggle1.addEventListener('click', showNav)
-  navToggle2.addEventListener('click', showNav)
-  navContainer.addEventListener('click', trapEvent)
-
-  var menuPanel = navContainer.querySelector('[data-panel=menu]')
+  if (navToggle1) {
+    navToggle1.addEventListener('click', showNav)
+  }
+  if (navToggle2) {
+    navToggle2.addEventListener('click', showNav)
+  }
+  var menuPanel
+  if (navContainer) {
+    navContainer.addEventListener('click', trapEvent)
+    menuPanel = navContainer.querySelector('[data-panel=menu]')
+  }
   if (!menuPanel) return
   var nav = navContainer.querySelector('.nav')
 

diff --git a/src/layouts/404.hbs b/src/layouts/404.hbs
@@ -5,7 +5,11 @@
   </head>
   <body class="status-404">
 {{> header}}
-{{> body}}
+  <main class="article">
+    <div class="content">
+{{> article-404}}
+    </div>
+  </main>
 {{> footer}}
   </body>
 </html>
diff --git a/src/partials/article-404.hbs b/src/partials/article-404.hbs
@@ -1,10 +1,8 @@
-<article class="doc">
-<h1 class="page">{{{or page.title 'Page Not Found'}}}</h1>
-<div class="paragraph">
-<p>The page you&#8217;re looking for does not exist. It may have been moved. You can{{#with site.homeUrl}} return to the <a href="{{{this}}}">start page</a>, or{{/with}} follow one of the links in the navigation to the left.</p>
-</div>
-<div class="paragraph">
-<p>If you arrived on this page by clicking on a link, please notify the owner of the site that the link is broken.
-If you typed the URL of this page manually, please double check that you entered the address correctly.</p>
-</div>
-</article>
+<article class="page-404">
+  <h1 class="page">404</h1>
+  <div class="paragraph">
+    <p class="strong">Oops! The page can’t be found.</p>
+    <p>{{#with site.homeUrl}}Go to
+        <a href="{{{this}}}">homepage</a>{{/with}}</p>
+  </div>
+</article>