(Hopefully) Complete PWA support (fixes #769, #771)

_config.yml

@@ -93,6 +93,37 @@ markdown:
   smartLists: true
   smartypants: true
 
+# Offline
+## Config passed to sw-precache
+## https://github.com/JLHwung/hexo-offline
+offline:
+  maximumFileSizeToCacheInBytes: 10485760
+  staticFileGlobs:
+    - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,json,xml}
+  stripPrefix: public
+  verbose: true
+  runtimeCaching:
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: sendgrid.sp1.convertro.com
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: ad.doubleclick.net
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: cdn.jsdelivr.net
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: fonts.googleapis.com
+    - urlPattern: /*
+      handler: cacheFirst
+      options:
+        origin: fonts.gstatic.com
+
 # Deployment
 ## Docs: http://zespia.tw/hexo/docs/deployment.html
 deploy:

package.json

@@ -14,6 +14,7 @@
     "hexo-generator-feed": "^1.1.0",
     "hexo-generator-index": "^0.2.0",
     "hexo-generator-tag": "^0.2.0",
+    "hexo-offline": "^0.2.0",
     "hexo-renderer-ejs": "^0.2.0",
     "hexo-renderer-marked": "^0.2.10",
     "hexo-renderer-stylus": "^0.3.1",

src/menu/index.md

@@ -0,0 +1,3 @@
+---
+type: menu
+---

themes/vue/layout/layout.ejs

@@ -17,8 +17,28 @@
         <meta name="twitter:description" content="<%- theme.site_description %>">
         <meta name="twitter:image" content="https://<%- theme.root_domain %>/images/logo.png">
 
+        <link rel="apple-touch-icon" sizes="57x57" href="<%- url_for("/images/icons/apple-icon-57x57.png") %>">
+        <link rel="apple-touch-icon" sizes="60x60" href="<%- url_for("/images/icons/apple-icon-60x60.png") %>">
+        <link rel="apple-touch-icon" sizes="72x72" href="<%- url_for("/images/icons/apple-icon-72x72.png") %>">
+        <link rel="apple-touch-icon" sizes="76x76" href="<%- url_for("/images/icons/apple-icon-76x76.png") %>">
+        <link rel="apple-touch-icon" sizes="114x114" href="<%- url_for("/images/icons/apple-icon-114x114.png") %>">
+        <link rel="apple-touch-icon" sizes="120x120" href="<%- url_for("/images/icons/apple-icon-120x120.png") %>">
+        <link rel="apple-touch-icon" sizes="144x144" href="<%- url_for("/images/icons/apple-icon-144x144.png") %>">
+        <link rel="apple-touch-icon" sizes="152x152" href="<%- url_for("/images/icons/apple-icon-152x152.png") %>">
+        <link rel="apple-touch-icon" sizes="180x180" href="<%- url_for("/images/icons/apple-icon-180x180.png") %>">
+        <link rel="icon" type="image/png" sizes="192x192"  href="<%- url_for("/images/icons/android-icon-192x192.png") %>">
+        <link rel="icon" type="image/png" sizes="32x32" href="<%- url_for("/images/icons/favicon-32x32.png") %>">
+        <link rel="icon" type="image/png" sizes="96x96" href="<%- url_for("/images/icons/favicon-96x96.png") %>">
+        <link rel="icon" type="image/png" sizes="16x16" href="<%- url_for("/images/icons/favicon-16x16.png") %>">
+        <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
         <link rel="icon" href="<%- url_for("/images/logo.png") %>" type="image/png">
 
+        <meta name="msapplication-TileColor" content="#4fc08d">
+        <meta name="theme-color" content="#4fc08d">
+
+        <meta name="msapplication-config" content="browserconfig.xml">
+        <link rel="manifest" href="/manifest.json">
+
         <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
         <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'>
 
@@ -70,7 +90,8 @@
         <script>
         [
           '#search-query-nav',
-          '#search-query-sidebar'
+          '#search-query-sidebar',
+          '#search-query-menu'
         ].forEach(function (selector) {
           if (!document.querySelector(selector)) return
           // search index defaults to v2

themes/vue/layout/page.ejs

@@ -1,5 +1,5 @@
 <% if (page.type) { %>
-    <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
+    <%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %>
 <% } else { %>
   <div class="sidebar">
     <ul class="main-menu">
@@ -9,7 +9,14 @@
 <% } %>
 <div class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>">
     <% if (page.type) { %>
-      <%- partial('partials/ad') %>
+      <% if (page.type === 'menu') { %>
+        <form id="search-form">
+          <input type="text" id="search-query-menu" class="search-query st-default-search-input">
+        </form>
+        <%- partial('partials/toc', { type: 'guide' }) %>
+      <% } else { %>
+        <%- partial('partials/ad') %>
+      <% } %>
     <% } %>
     <% if (page.title.trim()) { %>
       <h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>

themes/vue/layout/partials/sidebar.ejs

@@ -23,43 +23,6 @@
                 </select>
             <% } %>
         </h2>
-        <ul class="menu-root">
-            <% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
-                <% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
-                <% if (type === 'guide') { %>
-                    <% if (fileName === 'installation') { %>
-                      <li><h3>Essentials</h3></li>
-                    <% } %>
-                    <% if (fileName === 'reactivity') { %>
-                      <li><h3>Advanced</h3></li>
-                    <% } %>
-                    <% if (fileName === 'migration') { %>
-                      <li><h3>Migrating</h3></li>
-                    <% } %>
-                    <% if (fileName === 'comparison') { %>
-                      <li><h3>Meta</h3></li>
-                    <% } %>
-                <% } %>
-                <% if (type === 'cookbook') { %>
-                    <% if (p.order === 1.1) { %>
-                      <li><h3>Vue Instance</h3></li>
-                    <% } %>
-                    <!-- Move cookbook sections here once they have -->
-                    <!-- at least one recipe -->
-                <% } %>
-                <li>
-                    <a href="<%- url_for(p.path) %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
-                </li>
-            <% }) %>
-            <% if (type === 'cookbook') { %>
-                <li><h3>Components</h3></li>
-                <li><h4>Form Inputs</h4></li>
-                <li><h4>3rd-Party Integrations</h4></li>
-                <li><h3>Transitions</h3></li>
-                <li><h3>Directives</h3></li>
-                <li><h3>Vue Router</h3></li>
-                <li><h3>Vuex</h3></li>
-            <% } %>
-        </ul>
+        <%- partial('partials/toc', { type: type }) %>
     </div>
 </div>

themes/vue/layout/partials/toc.ejs

@@ -0,0 +1,38 @@
+<ul class="menu-root">
+    <% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
+        <% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
+        <% if (type === 'guide') { %>
+            <% if (fileName === 'installation') { %>
+                <li><h3>Essentials</h3></li>
+            <% } %>
+            <% if (fileName === 'reactivity') { %>
+                <li><h3>Advanced</h3></li>
+            <% } %>
+            <% if (fileName === 'migration') { %>
+                <li><h3>Migrating</h3></li>
+            <% } %>
+            <% if (fileName === 'comparison') { %>
+                <li><h3>Meta</h3></li>
+            <% } %>
+        <% } %>
+        <% if (type === 'cookbook') { %>
+            <% if (p.order === 1.1) { %>
+                <li><h3>Vue Instance</h3></li>
+            <% } %>
+            <!-- Move cookbook sections here once they have -->
+            <!-- at least one recipe -->
+        <% } %>
+        <li>
+            <a href="<%- url_for(p.path) %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
+        </li>
+    <% }) %>
+    <% if (type === 'cookbook') { %>
+        <li><h3>Components</h3></li>
+        <li><h4>Form Inputs</h4></li>
+        <li><h4>3rd-Party Integrations</h4></li>
+        <li><h3>Transitions</h3></li>
+        <li><h3>Directives</h3></li>
+        <li><h3>Vue Router</h3></li>
+        <li><h3>Vuex</h3></li>
+    <% } %>
+</ul>

themes/vue/source/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/images/icons/ms-icon-70x70.png" />
+            <square150x150logo src="/images/icons/ms-icon-150x150.png" />
+            <square310x310logo src="/images/icons/ms-icon-310x310.png" />
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

themes/vue/source/css/_offline-menu.styl

@@ -0,0 +1,15 @@
+.content.menu
+    font-size: 1.2em
+    .menu-root
+        padding-left: 0
+    #search-form, .algolia-autocomplete, input
+        width: 100%
+    .aa-dropdown-menu
+        box-sizing: border-box
+    h3
+        margin: 1.5em 0 .75em
+        &:before, &:after
+          display: none
+    li
+        list-style-type: none
+        margin-top: .1em

themes/vue/source/css/page.styl

@@ -4,6 +4,7 @@
 @import "_sponsor"
 @import "_migration"
 @import "_sidebar"
+@import "_offline-menu"
 
 #header
     box-shadow 0 0 1px rgba(0,0,0,.25)

themes/vue/source/manifest.json

@@ -0,0 +1,48 @@
+{
+  "background_color": "#ffffff",
+  "description": "The Progressive JavaScript Framework",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "\/images\/icons\/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image\/png",
+      "density": "0.75"
+    },
+    {
+      "src": "\/images\/icons\/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image\/png",
+      "density": "1.0"
+    },
+    {
+      "src": "\/images\/icons\/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image\/png",
+      "density": "1.5"
+    },
+    {
+      "src": "\/images\/icons\/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image\/png",
+      "density": "2.0"
+    },
+    {
+      "src": "\/images\/icons\/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image\/png",
+      "density": "3.0"
+    },
+    {
+      "src": "\/images\/icons\/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image\/png",
+      "density": "4.0"
+    }
+  ],
+  "lang": "en-US",
+  "name": "Vue.js",
+  "short_name": "Vue",
+  "start_url": "./menu",
+  "theme_color": "#4fc08d"
+}