Add apple touch icons, fix for #223

osmfj · Mar 17, 2021 · 6a03410 · 6a03410
1 parent e7159ce
commit 6a03410
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 26 deletions.
diff --git a/apple_touch_icon.png b/apple_touch_icon.png
diff --git a/index.html b/index.html
@@ -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>
 

diff --git a/scripts/createLayouts.ts b/scripts/createLayouts.ts
@@ -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,17 +194,23 @@ 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">`,
         og,
         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({