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

This commit is contained in:
pietervdvn 2021-01-18 03:25:15 +01:00
parent b104feb080
commit 16458d4fec
5 changed files with 13576 additions and 113 deletions

View file

@ -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>

After

Width:  |  Height:  |  Size: 875 B

View file

@ -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,

13605
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -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",

View file

@ -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){
if(layout.hideFromOverview){
function generateWikiEntry(layout: LayoutConfig) {
if (layout.hideFromOverview) {
return "";
}
const languages = layout.language.map(ln => `{{#language:${ln}|en}}`).join(", ")
let auth = "Yes";
if(layout.maintainer !== "" && layout.maintainer !== "MapComplete"){
auth=`Yes, by ${layout.maintainer};`
if (layout.maintainer !== "" && layout.maintainer !== "MapComplete") {
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,16 +125,21 @@ 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);
/* svg2img(iconPath,
// @ts-ignore
{width: size, height: size, preserveAspectRatio: true})
.then((buffer) => {
console.log("Writing icon", newname)
writeFileSync(newname, buffer);
}).catch((error) => {
console.log("ERROR while writing" + iconPath, error)
});
//*/
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})
.then((buffer) => {
console.log("Writing icon", newname)
writeFileSync(newname, buffer);
}).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, ""));
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
writeFile(manifestLocation, manif, err);
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);
writeFile(enc(layout.id) + ".html", landing, err)
wikiPage += "\n"+generateWikiEntry(layout);
createLandingPage(layout).then(landing => {
writeFile(enc(layout.id) + ".html", landing, err)
wikiPage += "\n" + generateWikiEntry(layout);
});
}
wikiPage += "\n|}"