generate static error pages with webpack

apache · Mar 3, 2021 · 577dade · 577dade
1 parent 73fae85
commit 577dade
Show file tree

Hide file tree

Showing 12 changed files with 265 additions and 420 deletions.
diff --git a/...frontend/static-pages/images/error404.png → superset-frontend/images/error404.png b/...frontend/static-pages/images/error404.png → superset-frontend/images/error404.png
diff --git a/...frontend/static-pages/images/error500.png → superset-frontend/images/error500.png b/...frontend/static-pages/images/error500.png → superset-frontend/images/error500.png
diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
diff --git a/superset-frontend/package.json b/superset-frontend/package.json
@@ -111,6 +111,7 @@
     "fontsource-inter": "^3.0.5",
     "geolib": "^2.0.24",
     "global-box": "^1.2.0",
+    "html-webpack-plugin": "^4.5.1",
     "immutable": "^4.0.0-rc.12",
     "interweave": "^11.2.0",
     "jquery": "^3.5.1",

diff --git a/...nd/static-pages/templates/error_page.html → superset-frontend/src/staticPages/404.html b/...nd/static-pages/templates/error_page.html → superset-frontend/src/staticPages/404.html
@@ -17,17 +17,13 @@
     under the License.
 -->
 
-{# 
-    Edit this template file and then run `generate_pages.py` to make changes to 404.html and 500.html    
-#}
-
 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=q, initial-scale=1.0">
-        <link rel="icon" type="image/png" href="data:image/png;base64, {{ favicon_data }}">
+        <link rel="icon" type="image/png" href="<%= require('../../images/favicon.png')%>">
         <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
         <style>
@@ -80,18 +76,18 @@
                 width: 540px;
             }
         </style>
-        <title>{{ title }}</title>
+
+        <title>404: Not found | Superset</title>
     </head>
 
     <body>
         <div class="error-page-content">
             <section>
-                <h1>{{ heading }}</h1>
-                <p>{{ body }}</p>
+                <h1>Page not found</h1>
+                <p>Sorry, we cannot find t he page you are looking for. You may have mistyped the address or the page may have moved.</p>
                 <a href="/" class="button">Back to home</a>
             </section>
-            <img alt="error graphic"                 
-            src="data:image/png;base64, {{ image_data }}">
+            <img alt="404"  src="<%= require('../../images/error404.png')%>" width="540">
         </div>
     </body>
 </html>
diff --git a/superset-frontend/src/staticPages/500.html b/superset-frontend/src/staticPages/500.html
@@ -0,0 +1,92 @@
+<!--
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=q, initial-scale=1.0">
+        <link rel="icon" type="image/png" href="<%= require('../../images/favicon.png')%>">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+        <style>
+            html { height: 100%; }
+            body {
+                color: #1985A0;
+                font-family: 'Inter', sans-serif;
+                height: 100%;
+                margin: 0;
+                display: flex;
+                align-items:stretch;
+            }
+            h1 {
+                font-weight: 600;
+                font-size: 88px;
+                margin: 0;
+            }
+            p {
+                font-weight: 500;
+                font-size: 24px;
+                line-height: 40px;
+                width: 490px;
+            }
+            .button {
+                -webkit-appearance: button;
+                -moz-appearance: button;
+                appearance: button;
+                background-color: #1985A0; /* Green */
+                border: none;
+                color: white;
+                padding: 16px 38px;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                font-size: 11px;
+                border-radius: 4px;
+                text-transform: uppercase;
+            }
+            .error-page-content {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+                max-width: 1350px;
+                margin: auto;
+                width: 100%;
+                padding: 56px;
+            }
+            img {
+                width: 540px;
+            }
+        </style>
+
+        <title>500: Internal server error | S uperset</title>
+    </head>
+
+    <body>
+        <div class="error-page-content">
+            <section>
+                <h1>Internal server error</h1>
+                <p>Sorry, something went wrong. We are fixing the mistake now. Try again later or go back to home.</p>
+                <a href="/" class="button">Back to home</a>
+            </section>
+            <img alt="500" src="<%= require('../../images/error500.png')%>" width="540">
+        </div>
+    </body>
+</html>
diff --git a/superset-frontend/static-pages/README.txt b/superset-frontend/static-pages/README.txt
diff --git a/superset-frontend/static-pages/generate_pages.py b/superset-frontend/static-pages/generate_pages.py