midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add apple touch icons, fix for #223

Browse source
This commit is contained in:
pietervdvn 2021-03-17 14:17:33 +01:00
parent e7159ce833
commit 6a03410f56
3 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apple_touch_icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

22
index.html
View file

@ -4,7 +4,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>MapComplete</title>
<link rel="stylesheet" href="./vendor/leaflet.css"/>
<link rel="stylesheet" href="./index.css"/>
<link rel="stylesheet" href="./css/userbadge.css"/>
@ -16,20 +15,18 @@
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/ReviewElement.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>
<!-- $$$CUSTOM-CSS -->
<!-- $$$MANIFEST -->
<link rel="manifest" href="./index.manifest">
<link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">
<meta property="og:type" content="website">
<!-- $$$OG-META -->
<!-- THEME-SPECIFIC -->
<title>MapComplete</title>
<link rel="manifest" href="./index.manifest">
<link rel="icon" href="./assets/svg/add.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" sizes="180x180" href="./apple_touch_icon.png">,
<!-- THEME-SPECIFIC-END-->
<style>
#decoration-desktop img {
width: 100%;
@ -59,7 +56,8 @@
<div id="bottom-left" class="absolute bottom-3 left-3 rounded-3xl z-above-map"></div>
<div id="bottom-right" class="absolute bottom-3 right-2 rounded-3xl z-above-map"></div>
<div id="centermessage" class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
<div id="centermessage"
class="clutter absolute rounded-3xl h-24 left-24 right-24 top-56 bg-white p-3 pt-5 sm:pt-8 text-xl font-bold text-center">
Loading MapComplete, hang on...
</div>

35
scripts/createLayouts.ts
View file

@ -1,8 +1,6 @@
// We HAVE to mark this while importing
import {Utils} from "../Utils";
Utils.runningFromConsole = true;
const sharp = require('sharp');
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
@ -12,6 +10,8 @@ import Translations from "../UI/i18n/Translations";
import {Translation} from "../UI/i18n/Translation";
import Constants from "../Models/Constants";
const sharp = require('sharp');
function enc(str: string): string {
return encodeURIComponent(str.toLowerCase());
@ -150,7 +150,7 @@ async function createManifest(layout: LayoutConfig, relativePath: string) {
const ogTitle = Translations.W(layout.title).InnerRender();
const ogDescr = Translations.W(layout.description ?? "").InnerRender();
const manif = {
return {
name: name,
short_name: ogTitle,
start_url: `${relativePath}/${layout.id.toLowerCase()}.html`,
@ -159,13 +159,12 @@ async function createManifest(layout: LayoutConfig, relativePath: string) {
description: ogDescr,
orientation: "portrait-primary, landscape-primary",
icons: icons
}
return manif;
};
}
const template = readFileSync("index.html", "utf8");
async function createLandingPage(layout: LayoutConfig) {
async function createLandingPage(layout: LayoutConfig, manifest) {
Locale.language.setData(layout.language[0]);
@ -195,8 +194,15 @@ async function createLandingPage(layout: LayoutConfig) {
icon = `./assets/generated/${layout.id}_icon.svg`
writeFileSync(icon, layout.icon);
}
const apple_icons = []
for (const icon of manifest.icons) {
if(icon.type !== "image/png"){
continue;
}
apple_icons.push(`<link rel="apple-touch-icon" sizes="${icon.sizes}" href="${icon.src}">`)
}
let themeSpecific = [
`<title>${ogTitle}</title>`,
`<link rel="manifest" href="${enc(layout.id)}.webmanifest">`,
@ -204,8 +210,7 @@ async function createLandingPage(layout: LayoutConfig) {
customCss,
`<link rel="icon" href="assets/svg/add.svg" sizes="any" type="image/svg+xml">`,
`<link rel="icon" href="${icon}" sizes="any" type="image/svg+xml">`,
`<link rel="shortcut icon" href="${icon}">`,
`<link rel="apple-touch-icon" href="${icon}">`,
...apple_icons
].join("\n")
let output = template
@ -247,11 +252,13 @@ for (const layoutName in all) {
const manif = JSON.stringify(manifObj, undefined, 2);
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
writeFile(manifestLocation, manif, err);
// Create a landing page for the given theme
createLandingPage(layout, manifObj).then(landing => {
writeFile(enc(layout.id) + ".html", landing, err)
});
})
// Create a landing page for the given theme
createLandingPage(layout).then(landing => {
writeFile(enc(layout.id) + ".html", landing, err)
});
}
createManifest(new LayoutConfig({