Scripts: rework more of the documentation files, prepere for translated docs

scripts/generateDocs.ts

@@ -1,4 +1,3 @@
-import BaseUIElement from "../src/UI/BaseUIElement"
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs"
 import { AllKnownLayouts } from "../src/Customizations/AllKnownLayouts"
 import SimpleMetaTaggers from "../src/Logic/SimpleMetaTagger"
@@ -34,6 +33,8 @@ import * as unitUsage from "../Docs/Schemas/UnitConfigJson.schema.json"
 import { ThemeConfigJson } from "../src/Models/ThemeConfig/Json/ThemeConfigJson"
 import { ServerSourceInfo, SourceOverview } from "../src/Models/SourceOverview"
 import { Lists } from "../src/Utils/Lists"
+import { Translation, TypedTranslation } from "../src/UI/i18n/Translation"
+import language_translations from "../src/assets/language_translations.json"
 
 /**
  * Converts a markdown-file into a .json file, which a walkthrough/slideshow element can use
@@ -177,8 +178,13 @@ export class GenerateDocs extends Script {
         this.generateBuiltinUnits()
         await this.generateSourcesOverview()
 
+        if (!existsSync("./Docs/themes_nl")) {
+            mkdirSync("./Docs/themes_nl")
+        }
         Array.from(AllKnownLayouts.allKnownLayouts.values()).map((theme) => {
             this.generateForTheme(theme)
+            // this.generateForTheme(theme, { path: "./Docs/themes_nl", lang: "nl" })
+
             ScriptUtils.erasableLog("Written docs for theme", theme.id)
         })
 
@@ -247,7 +253,7 @@ export class GenerateDocs extends Script {
 
         let md = markdown
 
-        if (options?.noTableOfContents !== false) {
+        if (options?.noTableOfContents !== true) {
             md = TableOfContents.insertTocIntoMd(md, lang, options?.tocMaxDepth)
         }
 
@@ -260,15 +266,17 @@ export class GenerateDocs extends Script {
         const warnAutomated =
             "[//]: # (WARNING: this file is automatically generated. Please find the sources at the bottom and edit those sources)\n\n"
 
-        const generatedFrom = [
-            "This document is autogenerated from",
-            autogenSource
-                .map(
-                    (s) =>
-                        `[${s}](https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/${s})`
-                )
-                .join(", "),
-        ].join(" ")
+
+        const sources = autogenSource.map(
+            (s) => `[${s}](https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/${s})`).join(", ")
+
+        const generatedFrom =
+            new TypedTranslation<{ sources }>({
+                en: "This document is autogenerated from {sources}",
+                nl: "Dit document werd gegenereerd op basis van {sources}",
+            }).Subs({ sources }).textFor(lang)
+
+
 
         writeFileSync(filename, warnAutomated + md + "\n\n" + generatedFrom + "\n")
     }
@@ -417,7 +425,7 @@ export class GenerateDocs extends Script {
             if (inlineSource !== undefined) {
                 source = `assets/themes/${inlineSource}/${inlineSource}.json`
             }
-            this.writeMarkdownFile(targetDirectory+ "/" + layer.id + ".md", element, [source])
+            this.writeMarkdownFile(targetDirectory + "/" + layer.id + ".md", element, [source], { lang })
         })
     }
 
@@ -509,45 +517,73 @@ export class GenerateDocs extends Script {
         ])
     }
 
-    private generateForTheme(theme: ThemeConfig): void {
+    private generateForTheme(theme: ThemeConfig, options?: { path?: string, lang?: string }): void {
         const allLayers = AllSharedLayers.sharedLayers
         const layersToShow = theme.layers.filter(
             (l) => l.id !== "favourite" && Constants.added_by_default.indexOf(<any>l.id) < 0
         )
+        const lang = options?.lang ?? "en"
         const layersToInline = layersToShow.filter((l) => !allLayers.has(l.id))
         const el = [
             [
                 "##",
-                theme.title,
+                theme.title.textFor(lang),
                 "(",
                 `[${theme.id}](https://mapcomplete.org/${theme.id})`,
                 ")",
             ].join(" "),
-
-            "_This document details some technical information about this MapComplete theme, mostly about the attributes used in the theme. Various links point toward more information about the attributes, e.g. to the OpenStreetMap-wiki, to TagInfo or tools creating statistics_",
-            "The theme introduction reads:\n",
             "> " + parse_html(theme.description.textFor("en")).textContent.replace(/\n/g, "  "),
             "",
-            "This theme contains the following layers:",
+            new Translation({
+                en: "This theme contains the following layers:",
+                nl: "Dit kaartthema bevat de volgende lagen",
+            }).textFor(lang),
             MarkdownUtils.list(
                 layersToShow.map((l) => {
                     if (allLayers.has(l.id)) {
                         return `[${l.id}](../Layers/${l.id}.md)`
                     }
-                    return `[${l.id} (defined in this theme)](#${l.id.trim().replace(/ /g, "-")})`
+                    return `[${l.id} (${l.name?.textFor(lang)})](#${l.id.trim().replace(/ /g, "-")})`
                 })
             ),
-            "Available languages:",
-            MarkdownUtils.list(theme.language.filter((ln) => ln !== "_context")),
-            "# Layers defined in this theme configuration file",
-            "These layers can not be reused in different themes.",
-            ...layersToInline.map((l) => l.generateDocumentation({ usedInThemes: null })),
-        ].join("\n")
+            new Translation(
+                {
+                    en: "This theme is available in the following languages:",
+                    nl: "Deze kaart is beschikbaar in de volgende talen:",
+                },
+            ).textFor(lang),
+            MarkdownUtils.list(theme.language.filter((ln) => ln !== "_context").map(ln => {
+                    if (language_translations[ln]) {
+                        return ln + " (" + new Translation(language_translations[ln]).textFor(lang) + ")"
+                    } else {
+                        return ln
+                    }
+                },
+            )),
+        ]
+
+        if (layersToInline.length > 0) {
+            el.push(MarkdownUtils.title(1, new Translation({
+                en: "Layers defined in this theme configuration file",
+                nl: "Lagen gedefinieerd in dit kaartthema-bestand",
+            })).textFor(lang))
+            el.push(MarkdownUtils.list(layersToInline.map(id => `[${id}](#${id})`)))
+
+            el.push(new Translation({
+                en: "These layers can not be reused in different themes.",
+                nl: "Deze lagen kunnen niet in andere kaartthemas hergebruikt worden",
+            }).textFor(lang))
+            el.push(
+                ...layersToInline.map((l) => l.generateDocumentation({ usedInThemes: null, lang })),
+            )
+        }
+
+        const path = options?.path ?? "./Docs/Themes"
         this.writeMarkdownFile(
-            "./Docs/Themes/" + theme.id + ".md",
-            el,
+            path + "/" + theme.id + ".md",
+            el.join("\n"),
             [`assets/themes/${theme.id}/${theme.id}.json`],
-            { noTableOfContents: true }
+            { noTableOfContents: true, lang },
         )
     }
 
@@ -681,7 +717,7 @@ export class GenerateDocs extends Script {
      * Generates the documentation for the layers overview page
      * @constructor
      */
-    private generateLayerOverviewText(): BaseUIElement {
+    private generateLayerOverviewText(): void {
         for (const id of Constants.priviliged_layers) {
             if (!AllSharedLayers.sharedLayers.has(id)) {
                 console.error("Priviliged layer definition not found: " + id)