Reformat all files with prettier
This commit is contained in:
parent
e22d189376
commit
b541d3eab4
382 changed files with 50893 additions and 35566 deletions
|
|
@ -1,35 +1,34 @@
|
|||
import {appendFileSync, existsSync, mkdirSync, readFileSync, writeFile, writeFileSync} from "fs";
|
||||
import Locale from "../UI/i18n/Locale";
|
||||
import Translations from "../UI/i18n/Translations";
|
||||
import {Translation} from "../UI/i18n/Translation";
|
||||
import { appendFileSync, existsSync, mkdirSync, readFileSync, writeFile, writeFileSync } from "fs"
|
||||
import Locale from "../UI/i18n/Locale"
|
||||
import Translations from "../UI/i18n/Translations"
|
||||
import { Translation } from "../UI/i18n/Translation"
|
||||
import * as all_known_layouts from "../assets/generated/known_layers_and_themes.json"
|
||||
import {LayoutConfigJson} from "../Models/ThemeConfig/Json/LayoutConfigJson";
|
||||
import LayoutConfig from "../Models/ThemeConfig/LayoutConfig";
|
||||
import xml2js from 'xml2js';
|
||||
import ScriptUtils from "./ScriptUtils";
|
||||
import {Utils} from "../Utils";
|
||||
|
||||
const sharp = require('sharp');
|
||||
const template = readFileSync("theme.html", "utf8");
|
||||
const codeTemplate = readFileSync("index_theme.ts.template", "utf8");
|
||||
import { LayoutConfigJson } from "../Models/ThemeConfig/Json/LayoutConfigJson"
|
||||
import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"
|
||||
import xml2js from "xml2js"
|
||||
import ScriptUtils from "./ScriptUtils"
|
||||
import { Utils } from "../Utils"
|
||||
|
||||
const sharp = require("sharp")
|
||||
const template = readFileSync("theme.html", "utf8")
|
||||
const codeTemplate = readFileSync("index_theme.ts.template", "utf8")
|
||||
|
||||
function enc(str: string): string {
|
||||
return encodeURIComponent(str.toLowerCase());
|
||||
return encodeURIComponent(str.toLowerCase())
|
||||
}
|
||||
|
||||
async function createIcon(iconPath: string, size: number, alreadyWritten: string[]) {
|
||||
let name = iconPath.split(".").slice(0, -1).join("."); // drop svg suffix
|
||||
let name = iconPath.split(".").slice(0, -1).join(".") // drop svg suffix
|
||||
if (name.startsWith("./")) {
|
||||
name = name.substr(2)
|
||||
}
|
||||
|
||||
const newname = `assets/generated/images/${name.replace(/\//g,"_")}${size}.png`;
|
||||
const newname = `assets/generated/images/${name.replace(/\//g, "_")}${size}.png`
|
||||
|
||||
if (alreadyWritten.indexOf(newname) >= 0) {
|
||||
return newname;
|
||||
return newname
|
||||
}
|
||||
alreadyWritten.push(newname);
|
||||
alreadyWritten.push(newname)
|
||||
if (existsSync(newname)) {
|
||||
return newname
|
||||
}
|
||||
|
|
@ -48,20 +47,25 @@ async function createIcon(iconPath: string, size: number, alreadyWritten: string
|
|||
console.error("Could not read icon", iconPath, " to create a PNG due to", e)
|
||||
}
|
||||
|
||||
return newname;
|
||||
return newname
|
||||
}
|
||||
|
||||
async function createSocialImage(layout: LayoutConfig, template: "" | "Wide"): Promise<string> {
|
||||
if (!layout.icon.endsWith(".svg")) {
|
||||
console.warn("Not creating a social image for " + layout.id + " as it is _not_ a .svg: " + layout.icon)
|
||||
console.warn(
|
||||
"Not creating a social image for " +
|
||||
layout.id +
|
||||
" as it is _not_ a .svg: " +
|
||||
layout.icon
|
||||
)
|
||||
return undefined
|
||||
}
|
||||
const path = `./assets/generated/images/social_image_${layout.id}_${template}.svg`
|
||||
if(existsSync(path)){
|
||||
return path;
|
||||
if (existsSync(path)) {
|
||||
return path
|
||||
}
|
||||
const svg = await ScriptUtils.ReadSvg(layout.icon)
|
||||
let width: string = svg.$.width;
|
||||
let width: string = svg.$.width
|
||||
if (width === undefined) {
|
||||
throw "The logo at " + layout.icon + " does not have a defined width"
|
||||
}
|
||||
|
|
@ -74,15 +78,16 @@ async function createSocialImage(layout: LayoutConfig, template: "" | "Wide"): P
|
|||
delete svg["defs"]
|
||||
delete svg["$"]
|
||||
let templateSvg = await ScriptUtils.ReadSvg("./assets/SocialImageTemplate" + template + ".svg")
|
||||
templateSvg = Utils.WalkJson(templateSvg,
|
||||
templateSvg = Utils.WalkJson(
|
||||
templateSvg,
|
||||
(leaf) => {
|
||||
const {cx, cy, r} = leaf["circle"][0].$
|
||||
const { cx, cy, r } = leaf["circle"][0].$
|
||||
return {
|
||||
$: {
|
||||
id: "icon",
|
||||
transform: `translate(${cx - r},${cy - r}) scale(${(r * 2) / Number(width)}) `
|
||||
transform: `translate(${cx - r},${cy - r}) scale(${(r * 2) / Number(width)}) `,
|
||||
},
|
||||
g: [svg]
|
||||
g: [svg],
|
||||
}
|
||||
},
|
||||
(mightBeTokenToReplace) => {
|
||||
|
|
@ -93,73 +98,76 @@ async function createSocialImage(layout: LayoutConfig, template: "" | "Wide"): P
|
|||
}
|
||||
)
|
||||
|
||||
|
||||
const builder = new xml2js.Builder();
|
||||
const xml = builder.buildObject({svg: templateSvg});
|
||||
const builder = new xml2js.Builder()
|
||||
const xml = builder.buildObject({ svg: templateSvg })
|
||||
writeFileSync(path, xml)
|
||||
console.log("Created social image at ", path)
|
||||
return path
|
||||
}
|
||||
|
||||
async function createManifest(layout: LayoutConfig, alreadyWritten: string[]): Promise<{
|
||||
manifest: any,
|
||||
async function createManifest(
|
||||
layout: LayoutConfig,
|
||||
alreadyWritten: string[]
|
||||
): Promise<{
|
||||
manifest: any
|
||||
whiteIcons: string[]
|
||||
}> {
|
||||
Translation.forcedLanguage = "en"
|
||||
const icons = [];
|
||||
const icons = []
|
||||
|
||||
const whiteIcons: string[] = []
|
||||
let icon = layout.icon;
|
||||
let icon = layout.icon
|
||||
if (icon.endsWith(".svg") || icon.startsWith("<svg") || icon.startsWith("<?xml")) {
|
||||
// This is an svg. Lets create the needed pngs and do some checkes!
|
||||
|
||||
const whiteBackgroundPath = "./assets/generated/images/theme_" + layout.id + "_white_background.svg"
|
||||
const whiteBackgroundPath =
|
||||
"./assets/generated/images/theme_" + layout.id + "_white_background.svg"
|
||||
{
|
||||
const svg = await ScriptUtils.ReadSvg(icon)
|
||||
const width: string = svg.$.width;
|
||||
const height: string = svg.$.height;
|
||||
const width: string = svg.$.width
|
||||
const height: string = svg.$.height
|
||||
|
||||
const builder = new xml2js.Builder();
|
||||
const withRect = {rect: {"$": {width, height, style: "fill:#ffffff;"}}, ...svg}
|
||||
const xml = builder.buildObject({svg: withRect});
|
||||
const builder = new xml2js.Builder()
|
||||
const withRect = { rect: { $: { width, height, style: "fill:#ffffff;" } }, ...svg }
|
||||
const xml = builder.buildObject({ svg: withRect })
|
||||
writeFileSync(whiteBackgroundPath, xml)
|
||||
}
|
||||
|
||||
let path = layout.icon;
|
||||
let path = layout.icon
|
||||
if (layout.icon.startsWith("<")) {
|
||||
// THis is already the svg
|
||||
path = "./assets/generated/images/" + layout.id + "_logo.svg"
|
||||
writeFileSync(path, layout.icon)
|
||||
}
|
||||
|
||||
const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
|
||||
const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512]
|
||||
for (const size of sizes) {
|
||||
const name = await createIcon(path, size, alreadyWritten);
|
||||
const name = await createIcon(path, size, alreadyWritten)
|
||||
const whiteIcon = await createIcon(whiteBackgroundPath, size, alreadyWritten)
|
||||
whiteIcons.push(whiteIcon)
|
||||
icons.push({
|
||||
src: name,
|
||||
sizes: size + "x" + size,
|
||||
type: "image/png"
|
||||
type: "image/png",
|
||||
})
|
||||
}
|
||||
icons.push({
|
||||
src: path,
|
||||
sizes: "513x513",
|
||||
type: "image/svg"
|
||||
type: "image/svg",
|
||||
})
|
||||
} else if (icon.endsWith(".png")) {
|
||||
icons.push({
|
||||
src: icon,
|
||||
sizes: "513x513",
|
||||
type: "image/png"
|
||||
type: "image/png",
|
||||
})
|
||||
} else {
|
||||
console.log(icon)
|
||||
throw "Icon is not an svg for " + layout.id
|
||||
}
|
||||
const ogTitle = Translations.T(layout.title).txt;
|
||||
const ogDescr = Translations.T(layout.description ?? "").txt;
|
||||
const ogTitle = Translations.T(layout.title).txt
|
||||
const ogDescr = Translations.T(layout.description ?? "").txt
|
||||
|
||||
const manifest = {
|
||||
name: ogTitle,
|
||||
|
|
@ -171,48 +179,50 @@ async function createManifest(layout: LayoutConfig, alreadyWritten: string[]): P
|
|||
description: ogDescr,
|
||||
orientation: "portrait-primary, landscape-primary",
|
||||
icons: icons,
|
||||
categories: ["map", "navigation"]
|
||||
};
|
||||
categories: ["map", "navigation"],
|
||||
}
|
||||
return {
|
||||
manifest,
|
||||
whiteIcons
|
||||
whiteIcons,
|
||||
}
|
||||
}
|
||||
|
||||
async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alreadyWritten) {
|
||||
|
||||
Locale.language.setData(layout.language[0]);
|
||||
Locale.language.setData(layout.language[0])
|
||||
const targetLanguage = layout.language[0]
|
||||
const ogTitle = Translations.T(layout.title).textFor(targetLanguage).replace(/"/g, '\\"');
|
||||
const ogDescr = Translations.T(layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap").textFor(targetLanguage).replace(/"/g, '\\"');
|
||||
let ogImage = layout.socialImage;
|
||||
const ogTitle = Translations.T(layout.title).textFor(targetLanguage).replace(/"/g, '\\"')
|
||||
const ogDescr = Translations.T(
|
||||
layout.shortDescription ?? "Easily add and edit geodata with OpenStreetMap"
|
||||
)
|
||||
.textFor(targetLanguage)
|
||||
.replace(/"/g, '\\"')
|
||||
let ogImage = layout.socialImage
|
||||
let twitterImage = ogImage
|
||||
if (ogImage === LayoutConfig.defaultSocialImage && layout.official) {
|
||||
ogImage = await createSocialImage(layout, "") ?? layout.socialImage
|
||||
twitterImage = await createSocialImage(layout, "Wide") ?? layout.socialImage
|
||||
ogImage = (await createSocialImage(layout, "")) ?? layout.socialImage
|
||||
twitterImage = (await createSocialImage(layout, "Wide")) ?? layout.socialImage
|
||||
}
|
||||
if (twitterImage.endsWith(".svg")) {
|
||||
// svgs are badly supported as social image, we use a generated svg instead
|
||||
twitterImage = await createIcon(twitterImage, 512, alreadyWritten);
|
||||
twitterImage = await createIcon(twitterImage, 512, alreadyWritten)
|
||||
}
|
||||
|
||||
if(ogImage.endsWith(".svg")){
|
||||
|
||||
if (ogImage.endsWith(".svg")) {
|
||||
ogImage = await createIcon(ogImage, 512, alreadyWritten)
|
||||
}
|
||||
|
||||
let customCss = "";
|
||||
let customCss = ""
|
||||
if (layout.customCss !== undefined && layout.customCss !== "") {
|
||||
|
||||
try {
|
||||
const cssContent = readFileSync(layout.customCss);
|
||||
customCss = "<style>" + cssContent + "</style>";
|
||||
const cssContent = readFileSync(layout.customCss)
|
||||
customCss = "<style>" + cssContent + "</style>"
|
||||
} catch (e) {
|
||||
customCss = `<link rel='stylesheet' href="${layout.customCss}"/>`
|
||||
}
|
||||
}
|
||||
|
||||
const og = `
|
||||
<meta property="og:image" content="${ogImage ?? 'assets/SocialImage.png'}">
|
||||
<meta property="og:image" content="${ogImage ?? "assets/SocialImage.png"}">
|
||||
<meta property="og:title" content="${ogTitle}">
|
||||
<meta property="og:description" content="${ogDescr}">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
|
|
@ -222,11 +232,11 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
|
|||
<meta name="twitter:description" content="${ogDescr}">
|
||||
<meta name="twitter:image" content="${twitterImage}">`
|
||||
|
||||
let icon = layout.icon;
|
||||
let icon = layout.icon
|
||||
if (icon.startsWith("<?xml") || icon.startsWith("<svg")) {
|
||||
// This already is an svg
|
||||
icon = `./assets/generated/images/${layout.id}_icon.svg`
|
||||
writeFileSync(icon, layout.icon);
|
||||
writeFileSync(icon, layout.icon)
|
||||
}
|
||||
|
||||
const apple_icons = []
|
||||
|
|
@ -244,31 +254,49 @@ async function createLandingPage(layout: LayoutConfig, manifest, whiteIcons, alr
|
|||
og,
|
||||
customCss,
|
||||
`<link rel="icon" href="${icon}" sizes="any" type="image/svg+xml">`,
|
||||
...apple_icons
|
||||
...apple_icons,
|
||||
].join("\n")
|
||||
|
||||
const loadingText = Translations.t.general.loadingTheme.Subs({theme: ogTitle});
|
||||
const loadingText = Translations.t.general.loadingTheme.Subs({ theme: ogTitle })
|
||||
let output = template
|
||||
.replace("Loading MapComplete, hang on...", loadingText.textFor(targetLanguage))
|
||||
.replace("Powered by OpenStreetMap", Translations.t.general.poweredByOsm.textFor(targetLanguage))
|
||||
.replace(
|
||||
"Powered by OpenStreetMap",
|
||||
Translations.t.general.poweredByOsm.textFor(targetLanguage)
|
||||
)
|
||||
.replace(/<!-- THEME-SPECIFIC -->.*<!-- THEME-SPECIFIC-END-->/s, themeSpecific)
|
||||
.replace(/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s, layout.shortDescription.textFor(targetLanguage))
|
||||
.replace("<script src=\"./index.ts\"></script>", `<script src='./index_${layout.id}.ts'></script>`);
|
||||
0
|
||||
.replace(
|
||||
/<!-- DESCRIPTION START -->.*<!-- DESCRIPTION END -->/s,
|
||||
layout.shortDescription.textFor(targetLanguage)
|
||||
)
|
||||
.replace(
|
||||
'<script src="./index.ts"></script>',
|
||||
`<script src='./index_${layout.id}.ts'></script>`
|
||||
)
|
||||
0
|
||||
try {
|
||||
output = output
|
||||
.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%">`);
|
||||
.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;
|
||||
return output
|
||||
}
|
||||
|
||||
async function createIndexFor(theme: LayoutConfig) {
|
||||
const filename = "index_" + theme.id + ".ts"
|
||||
writeFileSync(filename, `import * as themeConfig from "./assets/generated/themes/${theme.id}.json"\n`)
|
||||
writeFileSync(
|
||||
filename,
|
||||
`import * as themeConfig from "./assets/generated/themes/${theme.id}.json"\n`
|
||||
)
|
||||
appendFileSync(filename, codeTemplate)
|
||||
}
|
||||
|
||||
|
|
@ -279,17 +307,28 @@ function createDir(path) {
|
|||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
|
||||
|
||||
const alreadyWritten = []
|
||||
createDir("./assets/generated")
|
||||
createDir("./assets/generated/layers")
|
||||
createDir("./assets/generated/themes")
|
||||
createDir("./assets/generated/images")
|
||||
|
||||
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom", "theme"]
|
||||
const blacklist = [
|
||||
"",
|
||||
"test",
|
||||
".",
|
||||
"..",
|
||||
"manifest",
|
||||
"index",
|
||||
"land",
|
||||
"preferences",
|
||||
"account",
|
||||
"openstreetmap",
|
||||
"custom",
|
||||
"theme",
|
||||
]
|
||||
// @ts-ignore
|
||||
const all: LayoutConfigJson[] = all_known_layouts.themes;
|
||||
const all: LayoutConfigJson[] = all_known_layouts.themes
|
||||
const args = process.argv
|
||||
const theme = args[2]
|
||||
if (theme !== undefined) {
|
||||
|
|
@ -303,18 +342,18 @@ async function main(): Promise<void> {
|
|||
const layout = new LayoutConfig(layoutConfigJson, true)
|
||||
const layoutName = layout.id
|
||||
if (blacklist.indexOf(layoutName.toLowerCase()) >= 0) {
|
||||
console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`);
|
||||
continue;
|
||||
console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`)
|
||||
continue
|
||||
}
|
||||
const err = err => {
|
||||
const err = (err) => {
|
||||
if (err !== null) {
|
||||
console.log("Could not write manifest for ", layoutName, " because ", err)
|
||||
}
|
||||
};
|
||||
const {manifest, whiteIcons} = await createManifest(layout, alreadyWritten)
|
||||
const manif = JSON.stringify(manifest, undefined, 2);
|
||||
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
|
||||
writeFile(manifestLocation, manif, err);
|
||||
}
|
||||
const { manifest, whiteIcons } = await createManifest(layout, alreadyWritten)
|
||||
const manif = JSON.stringify(manifest, undefined, 2)
|
||||
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest"
|
||||
writeFile(manifestLocation, manif, err)
|
||||
|
||||
// Create a landing page for the given theme
|
||||
const landing = await createLandingPage(layout, manifest, whiteIcons, alreadyWritten)
|
||||
|
|
@ -322,23 +361,25 @@ async function main(): Promise<void> {
|
|||
await createIndexFor(layout)
|
||||
}
|
||||
|
||||
const { manifest } = await createManifest(
|
||||
new LayoutConfig({
|
||||
icon: "./assets/svg/mapcomplete_logo.svg",
|
||||
id: "index",
|
||||
layers: [],
|
||||
socialImage: "assets/SocialImage.png",
|
||||
startLat: 0,
|
||||
startLon: 0,
|
||||
startZoom: 0,
|
||||
title: { en: "MapComplete" },
|
||||
description: { en: "A thematic map viewer and editor based on OpenStreetMap" },
|
||||
}),
|
||||
alreadyWritten
|
||||
)
|
||||
|
||||
const {manifest} = await createManifest(new LayoutConfig({
|
||||
icon: "./assets/svg/mapcomplete_logo.svg",
|
||||
id: "index",
|
||||
layers: [],
|
||||
socialImage: "assets/SocialImage.png",
|
||||
startLat: 0,
|
||||
startLon: 0,
|
||||
startZoom: 0,
|
||||
title: {en: "MapComplete"},
|
||||
description: {en: "A thematic map viewer and editor based on OpenStreetMap"}
|
||||
}), alreadyWritten);
|
||||
|
||||
const manif = JSON.stringify(manifest, undefined, 2);
|
||||
const manif = JSON.stringify(manifest, undefined, 2)
|
||||
writeFileSync("index.manifest", manif)
|
||||
}
|
||||
|
||||
main().then(() => {
|
||||
console.log("All done!")
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue