Created
March 5, 2018 13:27
-
-
Save oneybee/7db87c2454850edd8de9ecf0aa4bea00 to your computer and use it in GitHub Desktop.
reactapp/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>reactapp</title> | |
| <meta name="description" content="Lightweight solution for deploying single page apps with GitHub Pages. Code and concept by Rafael Pedicini."> | |
| <style> | |
| html, body, div, span, a, p, ul, li, h1, code, nav { | |
| margin: 0; | |
| border: 0; | |
| padding: 0; | |
| box-sizing: inherit; | |
| font: inherit; | |
| text-decoration: inherit; | |
| text-align: inherit; | |
| color: inherit; | |
| background: transparent; | |
| } | |
| /*pass window height (w/o scroll bars) down to react app, note can't use vh becasue that | |
| includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/ | |
| html, body { height: 100%; } | |
| html { background-color: #CEF6F5; } | |
| h1 { test-align: center; } | |
| #root { background-color: #CEF6F5; min-height: 100%; } | |
| /*required for IE/Edge to be compatible with left:50vw & transform:translate(-50%, 0), | |
| otherwise there is a phantom div on the right side of the screen (from the left:50vw), | |
| that the window will scroll to. Note the left:50vw and transform is used to center content | |
| horizaontally based on vw to prevent content jump when vertical scroll bar show/hide.*/ | |
| body { overflow-x: hidden; } | |
| </style> | |
| <!-- start favicon --> | |
| <link rel="apple-touch-icon" sizes="57x57" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-57x57.png"> | |
| <link rel="apple-touch-icon" sizes="60x60" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-60x60.png"> | |
| <link rel="apple-touch-icon" sizes="72x72" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-72x72.png"> | |
| <link rel="apple-touch-icon" sizes="76x76" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-76x76.png"> | |
| <link rel="apple-touch-icon" sizes="114x114" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-114x114.png"> | |
| <link rel="apple-touch-icon" sizes="120x120" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-120x120.png"> | |
| <link rel="apple-touch-icon" sizes="144x144" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-144x144.png"> | |
| <link rel="apple-touch-icon" sizes="152x152" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-152x152.png"> | |
| <link rel="apple-touch-icon" sizes="180x180" href="http://favicon.rafrex.com/green-grid-144-168-192/apple-touch-icon-180x180.png"> | |
| <link rel="icon" type="image/png" href="http://favicon.rafrex.com/green-grid-144-168-192/favicon-32x32.png" sizes="32x32"> | |
| <link rel="icon" type="image/png" href="http://favicon.rafrex.com/green-grid-144-168-192/favicon-194x194.png" sizes="194x194"> | |
| <link rel="icon" type="image/png" href="http://favicon.rafrex.com/green-grid-144-168-192/favicon-96x96.png" sizes="96x96"> | |
| <link rel="icon" type="image/png" href="http://favicon.rafrex.com/green-grid-144-168-192/android-chrome-192x192.png" sizes="192x192"> | |
| <link rel="icon" type="image/png" href="http://favicon.rafrex.com/green-grid-144-168-192/favicon-16x16.png" sizes="16x16"> | |
| <link rel="manifest" href="http://favicon.rafrex.com/green-grid-144-168-192/manifest.json"> | |
| <link rel="mask-icon" href="http://favicon.rafrex.com/green-grid-144-168-192/safari-pinned-tab.svg" color="#00a800"> | |
| <link rel="shortcut icon" href="http://favicon.rafrex.com/green-grid-144-168-192/favicon.ico"> | |
| <meta name="msapplication-TileColor" content="#000000"> | |
| <meta name="msapplication-TileImage" content="http://favicon.rafrex.com/green-grid-144-168-192/mstile-144x144.png"> | |
| <meta name="msapplication-config" content="http://favicon.rafrex.com/green-grid-144-168-192/browserconfig.xml"> | |
| <meta name="theme-color" content="#000000"> | |
| <!-- end favicon --> | |
| <!-- Start Single Page Apps for GitHub Pages --> | |
| <script type="text/javascript"> | |
| // Single Page Apps for GitHub Pages | |
| // https://github.com/rafrex/spa-github-pages | |
| // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License | |
| // ---------------------------------------------------------------------- | |
| // This script checks to see if a redirect is present in the query string | |
| // and converts it back into the correct url and adds it to the | |
| // browser's history using window.history.replaceState(...), | |
| // which won't cause the browser to attempt to load the new url. | |
| // When the single page app is loaded further down in this file, | |
| // the correct url will be waiting in the browser's history for | |
| // the single page app to route accordingly. | |
| (function(l) { | |
| if (l.search) { | |
| var q = {}; | |
| l.search.slice(1).split('&').forEach(function(v) { | |
| var a = v.split('='); | |
| q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&'); | |
| }); | |
| if (q.p !== undefined) { | |
| window.history.replaceState(null, null, | |
| l.pathname.slice(0, -1) + (q.p || '') + | |
| (q.q ? ('?' + q.q) : '') + | |
| l.hash | |
| ); | |
| } | |
| } | |
| }(window.location)) | |
| </script> | |
| <!-- End Single Page Apps for GitHub Pages --> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <!-- single page app in bundle.js --> | |
| <script src="/reactapp/build/bundle.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment