Offline support with service worker

.gitignore

@@ -5,6 +5,7 @@ node_modules
 .DS_Store
 npm-debug.log
 _includes/readmes/*.md
+.idea
 
 # testing
 coverage

_config.yml

@@ -48,6 +48,7 @@ default_js:
   - "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"
   - "https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"
   - "/scripts/search.js"
+  - "/scripts/service-worker.init.js"
   - "/scripts/clipboard.js"
   - "/scripts/open-in-repl.js"
 

_includes/header.html

@@ -1,5 +1,10 @@
 <input type="checkbox" id="babel-toggle-search" class="babel-toggle-search-checkbox" />
 <header class="navbar navbar-default navbar-fixed-top babel-nav" id="top" role="banner">
+
+  <div id="offline-indicator" class="hidden">
+    You are offline
+  </div>
+
   <div class="container">
     <a href="/" class="navbar-brand logo">Babel</a>
     <div class="babel-navbar-toggles">

_sass/_main.scss

@@ -77,8 +77,9 @@ body {
 @import "components/_tick-list.scss";
 @import "components/_type.scss";
 @import "components/_user.scss";
+@import "components/_offline-indicator.scss";
 @import "components/_video.scss";
-
+@import "components/_offline.scss";
 @import "pages/_404.scss";
 @import "pages/_blog.scss";
 @import "pages/_docs.scss";

_sass/components/_offline-indicator.scss

@@ -0,0 +1,6 @@
+#offline-indicator {
+  text-align: center;
+  color: white;
+  padding: 5px;
+  background: #323330;
+}

_sass/components/_offline.scss

@@ -0,0 +1,6 @@
+.offline_hero {
+  height: calc(100vh - 50px);
+  .hero__content {
+    margin-top: 5%;
+  }
+}

offline.md

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+<div class="hero offline_hero">
+  <div class="hero__content">
+    <h1>You are offline!</h1>
+    <p>Try again later</p>
+  </div>
+</div>