Skip to content

Commit 235a521

Browse files
chrisvfritzchrisvfritz
authored
(Hopefully) Complete PWA support (fixes vuejs#769, vuejs#771) (vuejs#918)
* vuejs#769 Add manifest and icons * fix ie icons * simple offline support * complete offline support
1 parent cc22854 commit 235a521

37 files changed

+1097
-450
lines changed

‎_config.yml

+31
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,37 @@ markdown:
9393
smartLists: true
9494
smartypants: true
9595

96+
# Offline
97+
## Config passed to sw-precache
98+
## https://github.com/JLHwung/hexo-offline
99+
offline:
100+
maximumFileSizeToCacheInBytes: 10485760
101+
staticFileGlobs:
102+
- public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,json,xml}
103+
stripPrefix: public
104+
verbose: true
105+
runtimeCaching:
106+
- urlPattern: /*
107+
handler: cacheFirst
108+
options:
109+
origin: sendgrid.sp1.convertro.com
110+
- urlPattern: /*
111+
handler: cacheFirst
112+
options:
113+
origin: ad.doubleclick.net
114+
- urlPattern: /*
115+
handler: cacheFirst
116+
options:
117+
origin: cdn.jsdelivr.net
118+
- urlPattern: /*
119+
handler: cacheFirst
120+
options:
121+
origin: fonts.googleapis.com
122+
- urlPattern: /*
123+
handler: cacheFirst
124+
options:
125+
origin: fonts.gstatic.com
126+
96127
# Deployment
97128
## Docs: http://zespia.tw/hexo/docs/deployment.html
98129
deploy:

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"hexo-generator-feed": "^1.1.0",
1515
"hexo-generator-index": "^0.2.0",
1616
"hexo-generator-tag": "^0.2.0",
17+
"hexo-offline": "^0.2.0",
1718
"hexo-renderer-ejs": "^0.2.0",
1819
"hexo-renderer-marked": "^0.2.10",
1920
"hexo-renderer-stylus": "^0.3.1",

‎src/menu/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
type: menu
3+
---

‎themes/vue/layout/layout.ejs

+22-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,28 @@
1717
<meta name="twitter:description" content="<%- theme.site_description %>">
1818
<meta name="twitter:image" content="https://<%- theme.root_domain %>/images/logo.png">
1919

20+
<link rel="apple-touch-icon" sizes="57x57" href="<%- url_for("/images/icons/apple-icon-57x57.png") %>">
21+
<link rel="apple-touch-icon" sizes="60x60" href="<%- url_for("/images/icons/apple-icon-60x60.png") %>">
22+
<link rel="apple-touch-icon" sizes="72x72" href="<%- url_for("/images/icons/apple-icon-72x72.png") %>">
23+
<link rel="apple-touch-icon" sizes="76x76" href="<%- url_for("/images/icons/apple-icon-76x76.png") %>">
24+
<link rel="apple-touch-icon" sizes="114x114" href="<%- url_for("/images/icons/apple-icon-114x114.png") %>">
25+
<link rel="apple-touch-icon" sizes="120x120" href="<%- url_for("/images/icons/apple-icon-120x120.png") %>">
26+
<link rel="apple-touch-icon" sizes="144x144" href="<%- url_for("/images/icons/apple-icon-144x144.png") %>">
27+
<link rel="apple-touch-icon" sizes="152x152" href="<%- url_for("/images/icons/apple-icon-152x152.png") %>">
28+
<link rel="apple-touch-icon" sizes="180x180" href="<%- url_for("/images/icons/apple-icon-180x180.png") %>">
29+
<link rel="icon" type="image/png" sizes="192x192" href="<%- url_for("/images/icons/android-icon-192x192.png") %>">
30+
<link rel="icon" type="image/png" sizes="32x32" href="<%- url_for("/images/icons/favicon-32x32.png") %>">
31+
<link rel="icon" type="image/png" sizes="96x96" href="<%- url_for("/images/icons/favicon-96x96.png") %>">
32+
<link rel="icon" type="image/png" sizes="16x16" href="<%- url_for("/images/icons/favicon-16x16.png") %>">
33+
<meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
2034
<link rel="icon" href="<%- url_for("/images/logo.png") %>" type="image/png">
2135

36+
<meta name="msapplication-TileColor" content="#4fc08d">
37+
<meta name="theme-color" content="#4fc08d">
38+
39+
<meta name="msapplication-config" content="browserconfig.xml">
40+
<link rel="manifest" href="/manifest.json">
41+
2242
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'>
2343
<link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'>
2444

@@ -70,7 +90,8 @@
7090
<script>
7191
[
7292
'#search-query-nav',
73-
'#search-query-sidebar'
93+
'#search-query-sidebar',
94+
'#search-query-menu'
7495
].forEach(function (selector) {
7596
if (!document.querySelector(selector)) return
7697
// search index defaults to v2

‎themes/vue/layout/page.ejs

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<% if (page.type) { %>
2-
<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
2+
<%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %>
33
<% } else { %>
44
<div class="sidebar">
55
<ul class="main-menu">
@@ -9,7 +9,14 @@
99
<% } %>
1010
<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %> <%- page.type === 'guide' ? page.path.replace(/.+\//, '').replace('.html', '') + '-guide' : '' %>">
1111
<% if (page.type) { %>
12-
<%- partial('partials/ad') %>
12+
<% if (page.type === 'menu') { %>
13+
<form id="search-form">
14+
<input type="text" id="search-query-menu" class="search-query st-default-search-input">
15+
</form>
16+
<%- partial('partials/toc', { type: 'guide' }) %>
17+
<% } else { %>
18+
<%- partial('partials/ad') %>
19+
<% } %>
1320
<% } %>
1421
<% if (page.title.trim()) { %>
1522
<h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>

‎themes/vue/layout/partials/sidebar.ejs

+1-38
Original file line numberDiff line numberDiff line change
@@ -23,43 +23,6 @@
2323
</select>
2424
<% } %>
2525
</h2>
26-
<ul class="menu-root">
27-
<% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
28-
<% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
29-
<% if (type === 'guide') { %>
30-
<% if (fileName === 'installation') { %>
31-
<li><h3>Essentials</h3></li>
32-
<% } %>
33-
<% if (fileName === 'reactivity') { %>
34-
<li><h3>Advanced</h3></li>
35-
<% } %>
36-
<% if (fileName === 'migration') { %>
37-
<li><h3>Migrating</h3></li>
38-
<% } %>
39-
<% if (fileName === 'comparison') { %>
40-
<li><h3>Meta</h3></li>
41-
<% } %>
42-
<% } %>
43-
<% if (type === 'cookbook') { %>
44-
<% if (p.order === 1.1) { %>
45-
<li><h3>Vue Instance</h3></li>
46-
<% } %>
47-
<!-- Move cookbook sections here once they have -->
48-
<!-- at least one recipe -->
49-
<% } %>
50-
<li>
51-
<a href="<%- url_for(p.path) %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
52-
</li>
53-
<% }) %>
54-
<% if (type === 'cookbook') { %>
55-
<li><h3>Components</h3></li>
56-
<li><h4>Form Inputs</h4></li>
57-
<li><h4>3rd-Party Integrations</h4></li>
58-
<li><h3>Transitions</h3></li>
59-
<li><h3>Directives</h3></li>
60-
<li><h3>Vue Router</h3></li>
61-
<li><h3>Vuex</h3></li>
62-
<% } %>
63-
</ul>
26+
<%- partial('partials/toc', { type: type }) %>
6427
</div>
6528
</div>

‎themes/vue/layout/partials/toc.ejs

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<ul class="menu-root">
2+
<% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
3+
<% var fileName = p.path.replace(/^.+?\/([\w-]+)\.html/, '$1') %>
4+
<% if (type === 'guide') { %>
5+
<% if (fileName === 'installation') { %>
6+
<li><h3>Essentials</h3></li>
7+
<% } %>
8+
<% if (fileName === 'reactivity') { %>
9+
<li><h3>Advanced</h3></li>
10+
<% } %>
11+
<% if (fileName === 'migration') { %>
12+
<li><h3>Migrating</h3></li>
13+
<% } %>
14+
<% if (fileName === 'comparison') { %>
15+
<li><h3>Meta</h3></li>
16+
<% } %>
17+
<% } %>
18+
<% if (type === 'cookbook') { %>
19+
<% if (p.order === 1.1) { %>
20+
<li><h3>Vue Instance</h3></li>
21+
<% } %>
22+
<!-- Move cookbook sections here once they have -->
23+
<!-- at least one recipe -->
24+
<% } %>
25+
<li>
26+
<a href="<%- url_for(p.path) %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
27+
</li>
28+
<% }) %>
29+
<% if (type === 'cookbook') { %>
30+
<li><h3>Components</h3></li>
31+
<li><h4>Form Inputs</h4></li>
32+
<li><h4>3rd-Party Integrations</h4></li>
33+
<li><h3>Transitions</h3></li>
34+
<li><h3>Directives</h3></li>
35+
<li><h3>Vue Router</h3></li>
36+
<li><h3>Vuex</h3></li>
37+
<% } %>
38+
</ul>

‎themes/vue/source/browserconfig.xml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<browserconfig>
3+
<msapplication>
4+
<tile>
5+
<square70x70logo src="/images/icons/ms-icon-70x70.png" />
6+
<square150x150logo src="/images/icons/ms-icon-150x150.png" />
7+
<square310x310logo src="/images/icons/ms-icon-310x310.png" />
8+
<TileColor>#ffffff</TileColor>
9+
</tile>
10+
</msapplication>
11+
</browserconfig>

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.content.menu
2+
font-size: 1.2em
3+
.menu-root
4+
padding-left: 0
5+
#search-form, .algolia-autocomplete, input
6+
width: 100%
7+
.aa-dropdown-menu
8+
box-sizing: border-box
9+
h3
10+
margin: 1.5em 0 .75em
11+
&:before, &:after
12+
display: none
13+
li
14+
list-style-type: none
15+
margin-top: .1em

‎themes/vue/source/css/page.styl

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@import "_sponsor"
55
@import "_migration"
66
@import "_sidebar"
7+
@import "_offline-menu"
78

89
#header
910
box-shadow 0 0 1px rgba(0,0,0,.25)

‎themes/vue/source/images/icons/android-icon-144x144.png

5.46 KB
Loading

‎themes/vue/source/images/icons/android-icon-192x192.png

6.39 KB
Loading

‎themes/vue/source/images/icons/android-icon-36x36.png

1.73 KB
Loading

‎themes/vue/source/images/icons/android-icon-48x48.png

2.15 KB
Loading

‎themes/vue/source/images/icons/android-icon-72x72.png

2.69 KB
Loading

‎themes/vue/source/images/icons/android-icon-96x96.png

3.54 KB
Loading

‎themes/vue/source/images/icons/apple-icon-114x114.png

4.26 KB
Loading

‎themes/vue/source/images/icons/apple-icon-120x120.png

4.46 KB
Loading

‎themes/vue/source/images/icons/apple-icon-144x144.png

5.46 KB
Loading

‎themes/vue/source/images/icons/apple-icon-152x152.png

5.64 KB
Loading

‎themes/vue/source/images/icons/apple-icon-180x180.png

7.18 KB
Loading

‎themes/vue/source/images/icons/apple-icon-57x57.png

2.22 KB
Loading

‎themes/vue/source/images/icons/apple-icon-60x60.png

2.38 KB
Loading

‎themes/vue/source/images/icons/apple-icon-72x72.png

2.69 KB
Loading

‎themes/vue/source/images/icons/apple-icon-76x76.png

2.96 KB
Loading

‎themes/vue/source/images/icons/apple-icon-precomposed.png

6.95 KB
Loading

‎themes/vue/source/images/icons/apple-icon.png

6.95 KB
Loading

‎themes/vue/source/images/icons/favicon-16x16.png

1.09 KB
Loading

‎themes/vue/source/images/icons/favicon-32x32.png

1.82 KB
Loading

‎themes/vue/source/images/icons/favicon-96x96.png

3.54 KB
Loading

‎themes/vue/source/images/icons/favicon.ico

1.12 KB
Binary file not shown.

‎themes/vue/source/images/icons/ms-icon-144x144.png

5.46 KB
Loading

‎themes/vue/source/images/icons/ms-icon-150x150.png

5.64 KB
Loading

‎themes/vue/source/images/icons/ms-icon-310x310.png

15.9 KB
Loading

‎themes/vue/source/images/icons/ms-icon-70x70.png

2.58 KB
Loading

‎themes/vue/source/manifest.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"background_color": "#ffffff",
3+
"description": "The Progressive JavaScript Framework",
4+
"display": "standalone",
5+
"icons": [
6+
{
7+
"src": "\/images\/icons\/android-icon-36x36.png",
8+
"sizes": "36x36",
9+
"type": "image\/png",
10+
"density": "0.75"
11+
},
12+
{
13+
"src": "\/images\/icons\/android-icon-48x48.png",
14+
"sizes": "48x48",
15+
"type": "image\/png",
16+
"density": "1.0"
17+
},
18+
{
19+
"src": "\/images\/icons\/android-icon-72x72.png",
20+
"sizes": "72x72",
21+
"type": "image\/png",
22+
"density": "1.5"
23+
},
24+
{
25+
"src": "\/images\/icons\/android-icon-96x96.png",
26+
"sizes": "96x96",
27+
"type": "image\/png",
28+
"density": "2.0"
29+
},
30+
{
31+
"src": "\/images\/icons\/android-icon-144x144.png",
32+
"sizes": "144x144",
33+
"type": "image\/png",
34+
"density": "3.0"
35+
},
36+
{
37+
"src": "\/images\/icons\/android-icon-192x192.png",
38+
"sizes": "192x192",
39+
"type": "image\/png",
40+
"density": "4.0"
41+
}
42+
],
43+
"lang": "en-US",
44+
"name": "Vue.js",
45+
"short_name": "Vue",
46+
"start_url": "./menu",
47+
"theme_color": "#4fc08d"
48+
}

0 commit comments

Comments
 (0)