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
|
||||
* RSS feed
|
||||
* 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
|
||||
* Protection from Email harvesting
|
||||
* 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
|
||||
|
||||
### Web App mode
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## How to run locally
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ pages_list:
|
|||
|
||||
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-48p: "/img/web-app/icon-48p.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>
|
||||
{% if site.force-https %}
|
||||
<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 %}
|
||||
{% include force-https.html %}
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -46,21 +40,9 @@
|
|||
<meta http-equiv="refresh" content="20; url={{site.baseurl}}/">
|
||||
{% endif %}
|
||||
|
||||
{% if site.web-app-mode %}
|
||||
{% include web-app.html %}
|
||||
|
||||
<!-- Android Web App mode -->
|
||||
|
||||
<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 %}
|
||||
{% include syntax-highlight.html %}
|
||||
|
||||
</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
|
||||
tags: [ 'tutorial']
|
||||
---
|
||||
You can make your website behave like a native web app in
|
||||
[Android](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||
devices by setting the web-app-mode variable to True and providing links for the
|
||||
icons for each resolution:
|
||||
You can make your website behave like a native web app in iOS and Android 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">
|
||||
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-48p: "/img/web-app/icon-48p.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:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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