Fix index.html to include the favicon (#1347)
Fix index.html to include the favicon
This commit is contained in:
Dennis Kobert
GitHub
parent
2b9337406a
commit
40f9a7d051
|
|
@ -1,19 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@400;700" />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@400;700">
|
||||
<title>Graphite</title>
|
||||
<meta name="apple-mobile-web-app-title" content="Graphite" />
|
||||
<meta name="application-name" content="Graphite" />
|
||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="color-scheme" content="dark only" />
|
||||
<meta name="darkreader-lock" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="public/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="public/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="public/favicon-16x16.png">
|
||||
<link rel="manifest" href="/public/site.webmanifest">
|
||||
<link rel="mask-icon" href="/public/safari-pinned-tab.svg" color="#473a3a">
|
||||
<meta name="apple-mobile-web-app-title" content="Graphite">
|
||||
<meta name="application-name" content="Graphite">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="color-scheme" content="dark only">
|
||||
<meta name="darkreader-lock">
|
||||
</head>
|
||||
<body>
|
||||
<!-- This script tag points to the source of the JS file we want to load and bundle -->
|
||||
<noscript>JavaScript is required</noscript>
|
||||
<style>
|
||||
body {
|
||||
background: #222;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #eee;
|
||||
border-color: #eee transparent #eee transparent;
|
||||
animation: spinning-loading-indicator 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinning-loading-indicator {
|
||||
0% {
|
||||
transform: translate(-30px, -30px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-30px, -30px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Confirm the browser is compatible before initializing the application
|
||||
|
||||
// Display an error if the browser is incompatible with a required API
|
||||
// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
|
||||
let incompatibility;
|
||||
if (!("BigUint64Array" in window)) {
|
||||
incompatibility = `
|
||||
<style>
|
||||
body::after { content: none; }
|
||||
h2, p, a { text-align: center; color: #eee; font-family: "Source Sans Pro", Arial, sans-serif; }
|
||||
</style>
|
||||
<h2>This browser is too old to run Graphite</h2>
|
||||
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
|
||||
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
|
||||
JavaScript API must be supported by the browser for Graphite to function.)</p>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
// Load the editor application or display the incompatibility message
|
||||
if (incompatibility) {
|
||||
document.body.innerHTML += incompatibility;
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@parcel/config-default": "^2.8.3",
|
||||
"@parcel/packager-raw-url": "^2.8.3",
|
||||
"@parcel/transformer-inline-string": "^2.8.3",
|
||||
"@parcel/transformer-webmanifest": "^2.8.3",
|
||||
"@types/license-checker-webpack-plugin": "^0.2.1",
|
||||
|
|
@ -1098,6 +1099,24 @@
|
|||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/packager-raw-url": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/packager-raw-url/-/packager-raw-url-2.8.3.tgz",
|
||||
"integrity": "sha512-v8k/x2pnR3DDiIJrPTUcBd+MjH9ocpac0dsdJ02yeyGIQTecqL6nuCtu6W4m75CC7vFjjh/aCK9TJsOHOFnCFQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@parcel/plugin": "2.8.3",
|
||||
"@parcel/utils": "2.8.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0",
|
||||
"parcel": "^2.8.3"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/@parcel/packager-svg": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/packager-svg/-/packager-svg-2.8.3.tgz",
|
||||
|
|
@ -6256,6 +6275,16 @@
|
|||
"@parcel/plugin": "2.8.3"
|
||||
}
|
||||
},
|
||||
"@parcel/packager-raw-url": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/packager-raw-url/-/packager-raw-url-2.8.3.tgz",
|
||||
"integrity": "sha512-v8k/x2pnR3DDiIJrPTUcBd+MjH9ocpac0dsdJ02yeyGIQTecqL6nuCtu6W4m75CC7vFjjh/aCK9TJsOHOFnCFQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@parcel/plugin": "2.8.3",
|
||||
"@parcel/utils": "2.8.3"
|
||||
}
|
||||
},
|
||||
"@parcel/packager-svg": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@parcel/packager-svg/-/packager-svg-2.8.3.tgz",
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@parcel/config-default": "^2.8.3",
|
||||
"@parcel/packager-raw-url": "^2.8.3",
|
||||
"@parcel/transformer-inline-string": "^2.8.3",
|
||||
"@parcel/transformer-webmanifest": "^2.8.3",
|
||||
"@types/license-checker-webpack-plugin": "^0.2.1",
|
||||
|
|
@ -43,17 +44,17 @@
|
|||
"buffer": "^5.7.1",
|
||||
"concurrently": "^8.0.1",
|
||||
"license-checker-webpack-plugin": "^0.2.1",
|
||||
"parcel-transformer-svelte3-plus": "^0.2.9",
|
||||
"parcel": "^2.8.3",
|
||||
"parcel-transformer-svelte3-plus": "^0.2.9",
|
||||
"postcss": "^8.4.23",
|
||||
"process": "^0.11.10",
|
||||
"sass": "^1.62.1",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"svelte": "^3.58.0",
|
||||
"svelte-preprocess": "^5.0.3",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.0.4",
|
||||
"webpack-cli": "^5.0.2",
|
||||
"webpack": "^5.81.0"
|
||||
"webpack": "^5.81.0",
|
||||
"webpack-cli": "^5.0.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"wasm-pack": "0.12.1"
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@400;700">
|
||||
<title>Graphite</title>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#473a3a">
|
||||
<meta name="apple-mobile-web-app-title" content="Graphite">
|
||||
<meta name="application-name" content="Graphite">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<meta name="color-scheme" content="dark only">
|
||||
<meta name="darkreader-lock">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>JavaScript is required</noscript>
|
||||
<style>
|
||||
body {
|
||||
background: #222;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #eee;
|
||||
border-color: #eee transparent #eee transparent;
|
||||
animation: spinning-loading-indicator 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spinning-loading-indicator {
|
||||
0% {
|
||||
transform: translate(-30px, -30px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-30px, -30px) rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Confirm the browser is compatible before initializing the application
|
||||
|
||||
// Display an error if the browser is incompatible with a required API
|
||||
// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
|
||||
let incompatibility;
|
||||
if (!("BigUint64Array" in window)) {
|
||||
incompatibility = `
|
||||
<style>
|
||||
body::after { content: none; }
|
||||
h2, p, a { text-align: center; color: #eee; font-family: "Source Sans Pro", Arial, sans-serif; }
|
||||
</style>
|
||||
<h2>This browser is too old to run Graphite</h2>
|
||||
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
|
||||
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
|
||||
JavaScript API must be supported by the browser for Graphite to function.)</p>
|
||||
`.trim();
|
||||
}
|
||||
|
||||
// Load the editor application or display the incompatibility message
|
||||
if (!incompatibility) {
|
||||
import("/build/bundle.js");
|
||||
} else {
|
||||
document.body.innerHTML += incompatibility;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
"short_name": "Graphite",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"src": "./android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"src": "./android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue