404 page rework, including title fix to the title (#330)

- Closes #329. Fix 404-page title so that we can find 404 pages more easily using analytics.
- Simplify page, and make it a bit more DRY -- avoid repeating links that are in main nav and footer.

config.yaml

@@ -5,6 +5,7 @@ disableKinds: [taxonomy, taxonomyTerm]
 pygmentsCodeFences: true
 
 params:
+  repo: https://github.com/grpc/grpc.io
   locale: en_US
   grpc_release_tag: v1.30.0
   grpc_java_release_tag: v1.30.1

layouts/404.html

@@ -1,58 +1,43 @@
-{{ define "main" }}
+{{ define "title" -}}
-<section class="hero is-medium has-background-image">
+404 Page not found - {{ site.Title -}}
+{{ end -}}
+
+{{ define "main" -}}
+{{ $newIssuePath := "issues/new?title=Unexpected%20page-not-found%20error&body=URL%3A%20%0AExpected%20page%3A%20" -}}
+{{ $newIssueUrl := printf "%s/%s" site.Params.repo $newIssuePath -}}
+
+<section class="hero is-primary has-background-image">
   <div class="hero-body">
     <div class="container has-text-centered">
-      <p class="title is-size-1 is-size-2-mobile has-text-weight-bold is-spaced">
+      <p class="title is-size-1 is-size-2-mobile has-text-weight-bold">
-        <span class="has-text-white">
-          404
-        </span>
-        <span class="has-text-secondary">
-          !
-        </span>
-      </p>
-
-      <p class="subtitle is-size-3 is-size-4-mobile has-text-grey-lighter has-text-weight-medium">
         Page not found
       </p>
+      <p class="subtitle is-size-3 is-size-4-mobile has-text-grey-lighter has-text-weight-medium">
+        404
+      </p>
     </div>
   </div>
 </section>
 
 <section class="section">
   <div class="container has-text-centered">
-    <div class="content has-bottom-padding is-medium">
+    <div class="content">
       <p>
-        Sorry, but that link wasn't found. Perhaps you were looking for one of the following:
+        The page that you requested doesn't exist.
       </p>
-
+      <p>
-      <a class="is-size-4 is-size-5-mobile" href="/">
+        Check the URL's spelling.
-        Main page
+      </p>
-      </a>
+      <p>
-
+        If you think that the page should exist,
-      <br />
+        <a href="{{ $newIssueUrl }}" target="_blank" rel="noopener">create an issue.</a>
-
+      </p>
-      <a class="is-size-4 is-size-5-mobile" href="/docs">
+      <p>
-        Documentation
+        <a class="button is-primary" href="/">
-      </a>
+          Homepage
-
-      <br />
-
-      <a class="is-size-4 is-size-5-mobile" href="/blog">
-        Blog
-      </a>
-
-      <br />
-
-      <a class="is-size-4 is-size-5-mobile" href="/community">
-        Community
-      </a>
-
-      <br />
-
-      <a class="is-size-4 is-size-5-mobile" href="/faq">
-        FAQ
         </a>
+      </p>
     </div>
   </div>
 </section>
-{{ end }}
+{{ end -}}