feat(gatsby): Improve dev 404 page (#31332)

gatsbyjs · May 11, 2021 · dfaea09 · dfaea09
1 parent c210f1d
commit dfaea09
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js b/packages/gatsby/src/internal-plugins/dev-404-page/raw_dev-404-page.js
@@ -139,13 +139,20 @@ class Dev404Page extends React.Component {
               Create a React.js component like the following in your site
               directory at
               {` `}"<code>{newFilePath}</code>"{` `}
-              and this page will automatically refresh to show the new page
-              component you created.
+              and then refresh to show the new page component you created.
             </p>
-            <pre>
+            <pre
+              style={{
+                border: `1px solid lightgray`,
+                padding: `8px`,
+                maxWidth: `80ch`,
+                background: `#f3f3f3`,
+              }}
+            >
               <code
                 dangerouslySetInnerHTML={{
-                  __html: `
+                  __html: `import * as React from "react"
+
 export default function Component () {
   return "Hello world"
 }`,
@@ -163,7 +170,14 @@ export default function Component () {
               {` `}"<code>{newAPIPath}</code>"{` `}
               and refresh to execute the new API function you created.
             </p>
-            <pre>
+            <pre
+              style={{
+                border: `1px solid lightgray`,
+                padding: `8px`,
+                maxWidth: `80ch`,
+                background: `#f3f3f3`,
+              }}
+            >
               <code
                 dangerouslySetInnerHTML={{
                   __html: `