midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <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="./vendor/leaflet.css"/>
<link rel="stylesheet" href="./index.css"/> <link rel="stylesheet" href="./index.css"/>
<link rel="stylesheet" href="./css/userbadge.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.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
<link rel="stylesheet" href="./css/slideshow.css"/> <link rel="stylesheet" href="./css/slideshow.css"/>
<link rel="stylesheet" href="css/ReviewElement.css"/>
<link href="css/ReviewElement.css" rel="stylesheet"/>
<link rel="stylesheet" href="vendor/MarkerCluster.css"/> <link rel="stylesheet" href="vendor/MarkerCluster.css"/>
<link rel="stylesheet" href="vendor/MarkerCluster.Default.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"> <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> <style>
#decoration-desktop img { #decoration-desktop img {
width: 100%; 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-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="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... Loading MapComplete, hang on...
</div> </div>

35
scripts/createLayouts.ts
View file

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