something

package.json

@@ -30,6 +30,7 @@
     "@mapbox-controls/zoom": "^1.1.0",
     "bootstrap": "^5.3.2",
     "mapbox-gl": "^3.1.0",
+    "rollup-plugin-ejs": "^4.0.0",
     "showdown": "^2.1.0"
   }
 }

src/components/components.js

@@ -1,5 +1,7 @@
 import { Converter } from "showdown";
-import l from "./locales";
+import l from "../locales";
+
+import tags from "./country/tags.ejs";
 
 let converter = new Converter();
 
@@ -7,7 +9,7 @@ export function countryPopup(country, properties) {
   return `<div class="row" style="padding: 5px;">
   ${img(country.img)}
   ${title(country.name)}
-  ${tags(properties.tags)}
+  ${tags({ tags: properties.tags })}
   <div class="col-12 glass p-2"> 
     ${l("founded")}: ${new Date(country.date).toLocaleDateString()}<br/>
     ${
@@ -27,14 +29,6 @@ export function countryPopup(country, properties) {
 </div>`;
 }
 
-function tags(tags) {
-  let tagstxt = JSON.parse(tags || "[]").join(", ");
-
-  return tagstxt
-    ? `<div class="col-12 glass p-2 text-center mb-2"> ${tagstxt}</div>`
-    : "";
-}
-
 function img(url) {
   return `<div class="col-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${url}"></div>`;
 }

src/components/country/popup.ejs

@@ -0,0 +1,21 @@
+<div class="row" style="padding: 5px;">
+  <%= include("./img.ejs") %>
+  <%= include("./title.ejs") %>
+  <%= include("./tags.ejs") %>
+  <div class="col-12 glass p-2"> 
+    ${l("founded")}: ${new Date(country.date).toLocaleDateString()}<br/>
+    ${
+      country.description
+        ? `<div>${converter.makeHtml(country.description)}</div>`
+        : ""
+    }<br/>
+    ${l("area")}: ${properties.area} ${l("km")}²
+  </div>
+  <div class="col-12 text-center mt-2">
+    ${
+      country.about
+        ? `<a href="${country.about}" class="about">${l("about")}</a>`
+        : ""
+    }
+  </div>
+</div>

src/components/country/tags.ejs

@@ -0,0 +1,9 @@
+<% 
+
+  let tagstxt = JSON.parse(locals.tags || "[]").join(", ");
+
+  if (tagstxt) {
+    %> <div class="col-12 glass p-2 text-center mb-2"> <%= tagstxt %> </div> <%
+  }
+
+%>

src/index.js

@@ -17,7 +17,7 @@ import "@mapbox-controls/zoom/src/index.css";
 import "bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 
-import { countryPopup, markerPopup } from "./components";
+import { countryPopup, markerPopup } from "./components/components";
 
 import l from "./locales";
 import { info, error, log } from "./logging";

src/rollup.config.js

@@ -3,6 +3,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import copy from "rollup-plugin-copy";
 import css from "rollup-plugin-import-css";
 import terser from "@rollup/plugin-terser";
+import ejs from "rollup-plugin-ejs";
 
 export default [
   {
@@ -19,6 +20,7 @@ export default [
         output: "index.css",
         minify: true,
       }),
+      ejs(),
       resolve(),
       commonjs(),
       copy({