Fixes creating images with sharp instead of svg2img, add playground icon as svg

assets/themes/playgrounds/playground.svg

@@ -0,0 +1 @@
+<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" overflow="inherit"><path d="M7.206 31.141c2.885 0 5.219-2.399 5.219-5.368 0-2.953-2.334-5.353-5.219-5.353-2.873 0-5.206 2.4-5.206 5.353 0 2.968 2.333 5.368 5.206 5.368zm29.23 9.216c.243-.172.564-.12.741.117l.965 1.372c.164.238.114.58-.116.766l-7.08 5.287c-.229.172-.562.118-.743-.118l-.962-1.372c-.165-.238-.113-.579.116-.764l7.079-5.288zm-8.003-6.817l-2.808-5.063-1.474 1.107 2.808 5.09zm-6.551-11.827l-10.92-19.713-2.089.014 11.522 20.82zm10.281 10.43c.617-.461 2.029-1.143 2.837-1.143h10c1.974 0 3 1.986 3 4.004 0 2.03-1.026 2.996-3 2.996h-9l-10.836 8.502c-3.808 2.819-6.116-.278-6.116-.278l-8.483-8.729c-1.423-1.753-1.115-5.089.591-6.566l11.739-8.597c1.166-1 2.897-.843 3.885.343.976 1.2.822 2.994-.346 3.996l-7.515 5.657 5.399 5.484 7.845-5.669z"/></svg>

assets/themes/playgrounds/playgrounds.json

@@ -13,7 +13,7 @@
     "nl"
   ],
   "maintainer": "",
-  "icon": "https://upload.wikimedia.org/wikipedia/commons/0/00/Map_icons_by_Scott_de_Jonge_-_playground.svg",
+  "icon": "./assets/themes/playgrounds/playground.svg",
   "version": "0",
   "startLat": 50.535,
   "startLon": 4.399,

package.json

@@ -49,6 +49,7 @@
     "osm-auth": "^1.0.2",
     "osmtogeojson": "^3.0.0-beta.4",
     "parcel": "^1.12.4",
+    "sharp": "^0.27.0",
     "turf": "^3.0.14"
   },
   "devDependencies": {
@@ -58,7 +59,6 @@
     "canvas": "^2.6.1",
     "fs": "0.0.1-security",
     "marked": "^1.1.1",
-    "promise-svg2img": "^0.2.0",
     "read-file": "^0.2.0",
     "ts-node": "^9.0.0",
     "ts-node-dev": "^1.0.0-pre.63",

scripts/createLayouts.ts

@@ -1,17 +1,17 @@
 // We HAVE to mark this while importing
 import {Utils} from "../Utils";
+
 Utils.runningFromConsole = true;
 
 import LayoutConfig from "../Customizations/JSON/LayoutConfig";
 import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
 import {existsSync, mkdirSync, readFileSync, writeFile, writeFileSync} from "fs";
 import Locale from "../UI/i18n/Locale";
-import svg2img from 'promise-svg2img';
+import * as sharp from "sharp"
 import Translations from "../UI/i18n/Translations";
 import {Translation} from "../UI/i18n/Translation";
 
 
-
 function enc(str: string): string {
     return encodeURIComponent(str.toLowerCase());
 }
@@ -75,14 +75,14 @@ function validate(layout: LayoutConfig) {
 
 }
 
-function generateWikiEntry(layout: LayoutConfig){
+function generateWikiEntry(layout: LayoutConfig) {
-    if(layout.hideFromOverview){
+    if (layout.hideFromOverview) {
         return "";
     }
     const languages = layout.language.map(ln => `{{#language:${ln}|en}}`).join(", ")
     let auth = "Yes";
-    if(layout.maintainer !== "" && layout.maintainer !== "MapComplete"){
+    if (layout.maintainer !== "" && layout.maintainer !== "MapComplete") {
-        auth=`Yes, by ${layout.maintainer};`
+        auth = `Yes, by ${layout.maintainer};`
     }
     return `{{service_item
 |name= [https://mapcomplete.osm.be/${layout.id} ${layout.id}]
@@ -101,7 +101,7 @@ function generateWikiEntry(layout: LayoutConfig){
 
 const alreadyWritten = []
 
-function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
+async function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
     let name = iconPath.split(".").slice(0, -1).join(".");
     if (name.startsWith("./")) {
         name = name.substr(2)
@@ -125,6 +125,11 @@ function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
         console.log("Creating icon ", name, newname)
         // We already read to file, in order to crash here if the file is not found
         readFileSync(iconPath);
+
+        let img = await sharp(iconPath)
+        let resized = await img.resize(size)
+        await resized.toFile(newname)
+
         /*  svg2img(iconPath,
               // @ts-ignore
               {width: size, height: size, preserveAspectRatio: true})
@@ -134,7 +139,7 @@ function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
               }).catch((error) => {
               console.log("ERROR while writing" + iconPath, error)
           });
-//*/
+  //*/
     } catch (e) {
         console.error("Could not read icon", iconPath, "due to", e)
     }
@@ -142,7 +147,7 @@ function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
     return newname;
 }
 
-function createManifest(layout: LayoutConfig, relativePath: string) {
+async function createManifest(layout: LayoutConfig, relativePath: string) {
     const name = layout.id;
 
     const icons = [];
@@ -159,10 +164,9 @@ function createManifest(layout: LayoutConfig, relativePath: string) {
         }
 
 
-        
         const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
         for (const size of sizes) {
-            const name = createIcon(path, size, layout);
+            const name = await createIcon(path, size, layout);
             icons.push({
                 src: name,
                 sizes: size + "x" + size,
@@ -195,7 +199,8 @@ function createManifest(layout: LayoutConfig, relativePath: string) {
 }
 
 const template = readFileSync("index.html", "utf8");
-function createLandingPage(layout: LayoutConfig) {
+
+async function createLandingPage(layout: LayoutConfig) {
 
     Locale.language.setData(layout.language[0]);
 
@@ -227,7 +232,7 @@ function createLandingPage(layout: LayoutConfig) {
     }
 
     let output = template
-        .replace("./manifest.manifest",`${enc(layout.id)}.webmanifest`)
+        .replace("./manifest.manifest", `${enc(layout.id)}.webmanifest`)
         .replace("<!-- $$$OG-META -->", og)
         .replace(/<title>.+?<\/title>/, `<title>${ogTitle}</title>`)
         .replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
@@ -247,11 +252,11 @@ function createLandingPage(layout: LayoutConfig) {
 }
 
 const generatedDir = "./assets/generated";
-if (! existsSync(generatedDir)) {
+if (!existsSync(generatedDir)) {
     mkdirSync(generatedDir)
 }
 
-const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap","custom"]
+const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom"]
 const all = AllKnownLayouts.allSets;
 
 let wikiPage = "{|class=\"wikitable sortable\"\n" +
@@ -259,8 +264,6 @@ let wikiPage = "{|class=\"wikitable sortable\"\n" +
     "|-";
 
 
-
-
 for (const layoutName in all) {
     if (blacklist.indexOf(layoutName.toLowerCase()) >= 0) {
         console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`);
@@ -273,16 +276,16 @@ for (const layoutName in all) {
     };
     const layout = all[layoutName];
     validate(layout)
-    const manif = JSON.stringify(createManifest(layout, ""));
+    createManifest(layout, "").then(manifObj => {
-
+        const manif = JSON.stringify(manifObj);
         const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
         writeFile(manifestLocation, manif, err);
-
+    })
     // Create a landing page for the given theme
-    const landing = createLandingPage(layout);
+    createLandingPage(layout).then(landing => {
         writeFile(enc(layout.id) + ".html", landing, err)
-
+        wikiPage += "\n" + generateWikiEntry(layout);
-    wikiPage += "\n"+generateWikiEntry(layout);
+    });
 }
 wikiPage += "\n|}"