Fallback page for disabled js in browser (#534)

* Add fallback page in case when js is disabled in browser * fix: adjust fallback UI and UPWARD settings
magento · Nov 28, 2018 · 137445f · 137445f
1 parent 9a65584
commit 137445f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/venia-concept/media/veniaClosed.png b/packages/venia-concept/media/veniaClosed.png
diff --git a/packages/venia-concept/templates/generic-shell.mst b/packages/venia-concept/templates/generic-shell.mst
@@ -1,4 +1,5 @@
 {{> templates/doctype-and-head-start}}
+{{> templates/js-unavailable}}
     <title>Venia</title>
   </head>
   <body>

diff --git a/packages/venia-concept/templates/js-unavailable.mst b/packages/venia-concept/templates/js-unavailable.mst
@@ -0,0 +1,49 @@
+<link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
+<noscript>
+    <div class="container">
+        <img class="veniaClosed" src="./veniaClosed.png">
+        <div class="textBlock">
+            <h2 class="header">Oops! JavaScript is disabled</h2>
+            <div class="main">
+                <div class="textTile1">
+                    To continue using the Venia store
+                </div>
+                    <a class="enableLink" href="https://www.enable-javascript.com/">enable JavaScript in your browser</a>
+            </div>
+        </div>
+    </div>
+    <style>
+        #root {
+            display: none;
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 2.5rem;
+            font-family: Muli, -apple-system, BlinkMacSystemFont, sans-serif;
+        }
+        .veniaClosed {
+            width: 7.5625rem;
+        }
+        .textBlock {
+            width: 18.25rem;
+        }
+        .textTile1 {
+            white-space: nowrap;
+        }
+        .header {
+            font-size: 1.25rem;
+            margin: 2.125rem 0 2.5rem;
+        }
+        .main {
+            font-size: 1rem;
+            font-weight: 300;
+            line-height: 1.75rem;
+        }
+        .header, .main, .enableLink {
+            text-align: center;
+            color: #444444;
+        }
+    </style>
+</noscript>
diff --git a/packages/venia-concept/templates/notfound-shell.mst b/packages/venia-concept/templates/notfound-shell.mst
@@ -1,4 +1,5 @@
 {{> templates/doctype-and-head-start}}
+{{> templates/js-unavailable}}
     <title>Venia - Not Found</title>
   </head>
   <body>

diff --git a/packages/venia-concept/templates/product-shell.mst b/packages/venia-concept/templates/product-shell.mst
@@ -1,4 +1,5 @@
 {{> templates/doctype-and-head-start}}
+{{> templates/js-unavailable}}
     <title>{{model.name}} - {{site.name}}</title>
     {{#model}}
     <meta name="title" content="{{name}}">

diff --git a/packages/venia-concept/venia-upward.yml b/packages/venia-concept/venia-upward.yml
@@ -8,15 +8,15 @@ response:
       pattern: '^/(graphql|rest|media/)'
       use: proxy
     - matches: request.url.pathname
-      pattern: '^/favicon.ico'
-      use: favicon
+      pattern: '^/(favicon.ico|veniaClosed.png)'
+      use: media
     - matches: urlKey
       pattern: '.'
       use: appShell
     - matches: request.url.pathname
       pattern: '^/$'
       use: appShell
-  default: static
+  default: bundles
 
 proxy:
   target: env.MAGENTO_BACKEND_URL
@@ -107,18 +107,10 @@ genericObject:
       inline:
         "Hello world!"
 
-favicon:
-  inline:
-    status: 200
-    headers:
-      inline:
-        content-type:
-          inline: image/vnd.microsoft.icon
-    body:
-      file:
-        inline: ./media/favicon.ico
-      encoding: binary
-
-static:
+bundles:
   directory:
     inline: './dist'
+
+media:
+  directory:
+    inline: './media'