Skip to content

Instantly share code, notes, and snippets.

@tjmonsi
Created November 1, 2016 09:51
Show Gist options
  • Save tjmonsi/4f2c23dcd9c4c5e03db0ee02f6761e76 to your computer and use it in GitHub Desktop.
Save tjmonsi/4f2c23dcd9c4c5e03db0ee02f6761e76 to your computer and use it in GitHub Desktop.
qairoe-starter-kit generator index.html template
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<!-- TITLE START -->
<title><%= projectName %></title>
<!-- TITLE ENDS -->
<!-- DESCRIPTION START -->
<meta name="description" content="<%= projectDescription %>">
<!-- DESCRIPTION END -->
<link rel="icon" href="/images/favicon.ico">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="/manifest.json">
<!-- See https://goo.gl/qRE0vM -->
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<!-- CHROME TITLE STARTS -->
<meta name="application-name" content="<%= projectName %>">
<!-- CHROME TITLE ENDS -->
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- IOS TITLE STARTS -->
<meta name="apple-mobile-web-app-title" content="<%= projectName %>">
<!-- IOS TITLE ENDS -->
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<!-- Script used to load Polymer and to load webcomponents when needed -->
<script>
// Setup Polymer options
// Based on https://youtu.be/Rd0plknSPYU?t=19m58s
// Making Chromsestatus.com a Lightning-fast PWA (Polymer Summit 2016)
window.Polymer = {
// Use native Shadow DOM (if available)
dom: 'shadow',
// Delay Polymer startup work until instance-time,
lazyRegister: 'max'
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/<%= projectNameSlugged %>-app-shell.html">
<style>
/* INDEX STYLE STARTS */
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
}
/* INDEX STYLE ENDS */
</style>
</head>
<body>
<<%= projectNameSlugged %>-app-shell></<%= projectNameSlugged %>-app-shell>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment