mapcomplete/scripts/generateLayouts.ts

286 lines
9.3 KiB
TypeScript
Raw Normal View History

2020-11-11 16:28:49 +01:00
// We HAVE to mark this while importing
2021-01-06 02:21:50 +01:00
import {Utils} from "../Utils";
Utils.runningFromConsole = true;
2020-11-11 16:28:49 +01:00
2021-01-06 02:21:50 +01:00
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import {existsSync, mkdirSync, readFileSync, writeFile, writeFileSync} from "fs";
2020-11-17 02:22:48 +01:00
import Locale from "../UI/i18n/Locale";
import Translations from "../UI/i18n/Translations";
import {Translation} from "../UI/i18n/Translation";
import Constants from "../Models/Constants";
2021-04-10 15:01:28 +02:00
import * as all_known_layouts from "../assets/generated/known_layers_and_themes.json"
import {LayoutConfigJson} from "../Customizations/JSON/LayoutConfigJson";
2021-03-17 14:17:33 +01:00
const sharp = require('sharp');
2021-01-06 02:21:50 +01:00
function enc(str: string): string {
return encodeURIComponent(str.toLowerCase());
}
2020-11-11 16:23:49 +01:00
function validate(layout: LayoutConfig) {
const translations: Translation[] = [];
const queue: any[] = [layout]
while (queue.length > 0) {
const item = queue.pop();
for (const key in item) {
const v = item[key];
if (v === undefined) {
continue;
}
if (v instanceof Translation || v?.translations !== undefined) {
translations.push(v);
} else if (
["string", "function", "boolean", "number"].indexOf(typeof (v)) < 0) {
queue.push(v)
}
}
}
const missing = {}
const present = {}
2020-11-11 16:23:49 +01:00
for (const ln of layout.language) {
missing[ln] = 0;
present[ln] = 0;
for (const translation of translations) {
if (translation.translations["*"] !== undefined) {
continue;
}
const txt = translation.translations[ln];
const isMissing = txt === undefined || txt === "" || txt.toLowerCase().indexOf("todo") >= 0;
if (isMissing) {
console.log(` ${layout.id}: No translation for`, ln, "in", translation.translations, "got:", txt)
missing[ln]++
} else {
present[ln]++;
}
}
}
let message = `Translation completeness for theme ${layout.id}`
let isComplete = true;
2020-11-11 16:23:49 +01:00
for (const ln of layout.language) {
const amiss = missing[ln];
const ok = present[ln];
const total = amiss + ok;
message += `\n${ln}: ${ok}/${total}`
if (ok !== total) {
isComplete = false;
}
}
if (isComplete) {
console.log(`${layout.id} is fully translated!`)
} else {
console.log(message)
}
}
2020-09-17 19:06:32 +02:00
const alreadyWritten = []
async function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
let name = iconPath.split(".").slice(0, -1).join(".");
2020-11-17 16:29:51 +01:00
if (name.startsWith("./")) {
name = name.substr(2)
}
const newname = `${name}${size}.png`
2020-11-06 03:17:27 +01:00
.replace(/\//g, "_")
.replace("assets_", "assets/generated/");
if (alreadyWritten.indexOf(newname) >= 0) {
return newname;
}
alreadyWritten.push(newname);
try {
readFileSync(newname);
return newname; // File already exists - nothing to do
} catch (e) {
// Errors are normal here if this file exists
}
try {
// We already read to file, in order to crash here if the file is not found
2020-11-06 03:17:27 +01:00
readFileSync(iconPath);
let img = await sharp(iconPath)
let resized = await img.resize(size)
await resized.toFile(newname)
} catch (e) {
console.error("Could not read icon", iconPath, "due to", e)
}
return newname;
2020-07-25 18:00:08 +02:00
}
async function createManifest(layout: LayoutConfig, relativePath: string) {
const name = layout.id;
2021-03-16 20:03:19 +01:00
Translation.forcedLanguage = "en"
const icons = [];
2020-08-22 03:15:42 +02:00
let icon = layout.icon;
2020-11-06 03:17:27 +01:00
if (icon.endsWith(".svg") || icon.startsWith("<svg") || icon.startsWith("<?xml")) {
// This is an svg. Lets create the needed pngs!
2020-11-06 03:17:27 +01:00
let path = layout.icon;
if (layout.icon.startsWith("<")) {
// THis is already the svg
2020-11-17 16:29:51 +01:00
path = "./assets/generated/" + layout.id + "_logo.svg"
2020-11-06 03:17:27 +01:00
writeFileSync(path, layout.icon)
}
const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
for (const size of sizes) {
const name = await createIcon(path, size, layout);
icons.push({
src: name,
sizes: size + "x" + size,
type: "image/png"
})
}
icons.push({
2020-11-06 03:17:27 +01:00
src: path,
sizes: "513x513",
type: "image/svg"
})
} else {
2020-11-06 03:17:27 +01:00
console.log(icon)
throw "Icon is not an svg for " + layout.id
}
const ogTitle = Translations.W(layout.title).InnerRender();
2020-08-22 03:15:42 +02:00
const ogDescr = Translations.W(layout.description ?? "").InnerRender();
2021-03-17 14:17:33 +01:00
return {
name: name,
short_name: ogTitle,
start_url: `${relativePath}/${layout.id.toLowerCase()}.html`,
display: "standalone",
background_color: "#fff",
description: ogDescr,
orientation: "portrait-primary, landscape-primary",
icons: icons
2021-03-17 14:17:33 +01:00
};
}
const template = readFileSync("index.html", "utf8");
2021-03-17 14:17:33 +01:00
async function createLandingPage(layout: LayoutConfig, manifest) {
2020-11-11 16:23:49 +01:00
Locale.language.setData(layout.language[0]);
const ogTitle = Translations.W(layout.title)?.InnerRender();
const ogDescr = Translations.W(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap")?.InnerRender();
const ogImage = layout.socialImage;
let customCss = "";
if (layout.customCss !== undefined && layout.customCss !== "") {
try {
const cssContent = readFileSync(layout.customCss);
customCss = "<style>" + cssContent + "</style>";
} catch (e) {
customCss = `<link rel='stylesheet' href="${layout.customCss}"/>`
}
}
const og = `
2021-04-07 20:28:13 +02:00
<meta property="og:image" content="${ogImage ?? './assets/SocialImage.png'}">
<meta property="og:title" content="${ogTitle}">
<meta property="og:description" content="${ogDescr}">`
2020-11-06 03:17:27 +01:00
let icon = layout.icon;
if (icon.startsWith("<?xml") || icon.startsWith("<svg")) {
// This already is an svg
2020-11-17 16:29:51 +01:00
icon = `./assets/generated/${layout.id}_icon.svg`
2020-11-06 03:17:27 +01:00
writeFileSync(icon, layout.icon);
}
2021-03-17 14:17:33 +01:00
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}">`)
}
2021-03-16 20:03:19 +01:00
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">`,
2021-03-17 14:17:33 +01:00
...apple_icons
2021-03-16 20:03:19 +01:00
].join("\n")
let output = template
.replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
2021-03-16 20:03:19 +01:00
.replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific);
try {
output = output
2020-11-06 03:17:27 +01:00
.replace(/<!-- DECORATION 0 START -->.*<!-- DECORATION 0 END -->/s, `<img src='${icon}' width="100%" height="100%">`)
.replace(/<!-- DECORATION 1 START -->.*<!-- DECORATION 1 END -->/s, `<img src='${icon}' width="100%" height="100%">`);
} catch (e) {
console.warn("Error while applying logo: ", e)
}
return output;
}
2020-11-17 16:29:51 +01:00
const generatedDir = "./assets/generated";
if (!existsSync(generatedDir)) {
2020-11-17 16:29:51 +01:00
mkdirSync(generatedDir)
}
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom"]
// @ts-ignore
2021-04-10 15:01:28 +02:00
const all : LayoutConfigJson[] = all_known_layouts.themes;
2020-09-17 19:06:32 +02:00
2021-04-10 15:01:28 +02:00
for (const i in all) {
const layoutConfigJson : LayoutConfigJson = all[i]
const layout = new LayoutConfig(layoutConfigJson, true, "generating layouts")
const layoutName = layout.id
if (blacklist.indexOf(layoutName.toLowerCase()) >= 0) {
console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`);
continue;
}
const err = err => {
if (err !== null) {
console.log("Could not write manifest for ", layoutName, " because ", err)
}
};
validate(layout)
createManifest(layout, "").then(manifObj => {
2021-02-28 23:46:47 +01:00
const manif = JSON.stringify(manifObj, undefined, 2);
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
writeFile(manifestLocation, manif, err);
2021-03-17 14:17:33 +01:00
// Create a landing page for the given theme
createLandingPage(layout, manifObj).then(landing => {
writeFile(enc(layout.id) + ".html", landing, err)
});
})
2021-03-17 14:17:33 +01:00
}
2020-10-25 17:26:15 +01:00
2021-03-16 20:03:19 +01:00
createManifest(new LayoutConfig({
2021-02-28 00:49:26 +01:00
icon: "./assets/svg/mapcomplete_logo.svg",
id: "index",
language: "en",
layers: [],
maintainer: "Pieter Vander Vennet",
startLat: 0,
startLon: 0,
startZoom: 0,
title: "MapComplete",
version: Constants.vNumber,
2021-03-16 20:03:19 +01:00
description: "MapComplete as a map viewer and editor which show thematic POI based on OpenStreetMap"
}), "").then(manifObj => {
const manif = JSON.stringify(manifObj, undefined, 2);
writeFileSync("index.manifest", manif)
})
2020-08-22 03:15:42 +02:00
console.log("Counting all translations")
2020-07-31 17:11:44 +02:00
Translations.CountTranslations();
2020-09-17 19:06:32 +02:00
console.log("All done!");