Fixes #88 + refactoring of head.html
This commit is contained in:
Panos Sakkos
parent
0923585986
commit
f1bf70cb10
7 changed files with 55 additions and 32 deletions
|
|
@ -31,7 +31,7 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll-
|
||||||
* Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest and VKontakte share buttons
|
* Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest and VKontakte share buttons
|
||||||
* RSS feed
|
* RSS feed
|
||||||
* Cool (anti-procrastinating) 404 page
|
* Cool (anti-procrastinating) 404 page
|
||||||
* [Android] Web App mode(https://developer.chrome.com/multidevice/android/installtohomescreen)
|
* iOS and Android Web App mode
|
||||||
* Forcing of https protocol
|
* Forcing of https protocol
|
||||||
* Protection from Email harvesting
|
* Protection from Email harvesting
|
||||||
* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
|
* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
|
||||||
|
|
@ -69,7 +69,10 @@ The theme contains documentation in the form of [blog posts](https://panossakkos
|
||||||
### Mobile rendering
|
### Mobile rendering
|
||||||
|
|
||||||
### Web App mode
|
### Web App mode
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## How to run locally
|
## How to run locally
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,8 @@ pages_list:
|
||||||
|
|
||||||
web-app-mode: True
|
web-app-mode: True
|
||||||
|
|
||||||
# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
|
# Icons for Web App mode
|
||||||
|
|
||||||
icon-36p: "/img/web-app/icon-36p.png"
|
icon-36p: "/img/web-app/icon-36p.png"
|
||||||
icon-48p: "/img/web-app/icon-48p.png"
|
icon-48p: "/img/web-app/icon-48p.png"
|
||||||
icon-72p: "/img/web-app/icon-72p.png"
|
icon-72p: "/img/web-app/icon-72p.png"
|
||||||
|
|
|
||||||
13
_includes/force-https.html
Normal file
13
_includes/force-https.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
{% if site.force-https %}
|
||||||
|
|
||||||
|
<!-- Force HTTPS Start -->
|
||||||
|
<script>
|
||||||
|
// Don't force http when serving the website locally
|
||||||
|
if (!(window.location.host.startsWith("127.0.0.1")) && (window.location.protocol != "https:"))
|
||||||
|
window.location.protocol = "https";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Force HTTPS End -->
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
@ -2,13 +2,7 @@
|
||||||
<!-- HEAD Start -->
|
<!-- HEAD Start -->
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
{% if site.force-https %}
|
{% include force-https.html %}
|
||||||
<script>
|
|
||||||
// Don't force http when serving the website locally
|
|
||||||
if (!(window.location.host.startsWith("127.0.0.1")) && (window.location.protocol != "https:"))
|
|
||||||
window.location.protocol = "https";
|
|
||||||
</script>
|
|
||||||
{% endif %}
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
@ -46,21 +40,9 @@
|
||||||
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
|
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if site.web-app-mode %}
|
{% include web-app.html %}
|
||||||
|
|
||||||
<!-- Android Web App mode -->
|
{% include syntax-highlight.html %}
|
||||||
|
|
||||||
<link rel="manifest" href="{{site.baseurl}}/manifest.json">
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if site.syntax-highlight and page.section-type == "post"%}
|
|
||||||
|
|
||||||
<!-- Syntax highlight in post pages -->
|
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
||||||
8
_includes/syntax-highlight.html
Normal file
8
_includes/syntax-highlight.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
{% if site.syntax-highlight and page.section-type == "post"%}
|
||||||
|
|
||||||
|
<!-- Syntax highlight in post pages -->
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/monokai_sublime.min.css">
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
18
_includes/web-app.html
Normal file
18
_includes/web-app.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
|
||||||
|
{% if site.web-app-mode %}
|
||||||
|
|
||||||
|
<!-- iOS Web App mode -->
|
||||||
|
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<link rel="apple-touch-icon" sizes="36x36" href="{{site.baseurl}}{{site.icon-36p}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="48x48" href="{{site.baseurl}}{{site.icon-48p}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="{{site.baseurl}}{{site.icon-72p}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="96x96" href="{{site.baseurl}}{{site.icon-96p}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="{{site.baseurl}}{{site.icon-144p}}">
|
||||||
|
<link rel="apple-touch-icon" sizes="192x192" href="{{site.baseurl}}{{site.icon-192p}}">
|
||||||
|
|
||||||
|
<!-- Android Web App mode -->
|
||||||
|
|
||||||
|
<link rel="manifest" href="{{site.baseurl}}/manifest.json">
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
@ -5,15 +5,13 @@ title: Web app mode
|
||||||
category: tech
|
category: tech
|
||||||
tags: [ 'tutorial']
|
tags: [ 'tutorial']
|
||||||
---
|
---
|
||||||
You can make your website behave like a native web app in
|
You can make your website behave like a native web app in iOS and Android devices
|
||||||
[Android](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
by setting the web-app-mode variable to True and providing links for the icons for each resolution:
|
||||||
devices by setting the web-app-mode variable to True and providing links for the
|
|
||||||
icons for each resolution:
|
|
||||||
|
|
||||||
<pre><code data-trim class="yaml">
|
<pre><code data-trim class="yaml">
|
||||||
web-app-mode: True
|
web-app-mode: True
|
||||||
|
|
||||||
# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
|
# Icons for Web App mode
|
||||||
icon-36p: "/img/web-app/icon-36p.png"
|
icon-36p: "/img/web-app/icon-36p.png"
|
||||||
icon-48p: "/img/web-app/icon-48p.png"
|
icon-48p: "/img/web-app/icon-48p.png"
|
||||||
icon-72p: "/img/web-app/icon-72p.png"
|
icon-72p: "/img/web-app/icon-72p.png"
|
||||||
|
|
@ -24,10 +22,10 @@ icon-192p: "/img/web-app/icon-192p.png"
|
||||||
|
|
||||||
This is how the website will look when added to the homescreen:
|
This is how the website will look when added to the homescreen:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
And when the user opens it (note that it renders in fullscreen):
|
And when the user opens it (note that it renders in fullscreen):
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<small>iOS Web App support is on [its](https://github.com/PanosSakkos/personal-jekyll-theme/issues/88) way</small>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue