Merge 96cef82885 into 8fd6730e0d

content.json

@@ -0,0 +1,39 @@
+{
+    "fork_info": "Forked by <a class=\"link\" target=\"_blank\" href=\"http://github.com/Roslund/\">Roslund</a>, augmented by dogvisor.",
+    "title": "STHLM-MESH MAP",
+    "home_url": "https://sthlm-mesh.se/",
+    "base_url": "https://map.sthlm-mesh.se/",
+    "announcement": {
+        "enabled": true,
+        "id": "1",
+        "header": "Viktigt!",
+        "content": "I Stockholm används LoRa preset <b>Medium Range - Fast</b>. För mer info <a href=\"https://sthlm-mesh.se/blog/2025/övergång-till-mediumfast-den-27-september/\" type=\"button\" class=\"link\">klicka här</a>."
+    },
+    "lat": 59.3,
+    "lng": 378.1,
+    "zoom": 10,
+    "description": "En interaktiv karta över Meshtastic-noder i STHLM-MESH.",
+    "info_blocks": [
+        {
+            "header": "Beskrivning",
+            "content": "Detta är en karta som enbart fokuserar på Stockholm. Den är baserad på Liam Cottle's open source projekt Meshtastic Map, men har flertalet ändringar och nya funktioner som gör att vi bättre kan analysera Meshen i Stockholm."
+        },
+        {
+            "header": "Frågor och svar",
+            "content": [
+                {
+                    "header": "Hur får jag min nod att synas på kartan?",
+                    "content": "Din nod behöver anting ha en GPS, ha en fast position inställd, eller att din telefon delar sin position. Utöver detta måste platsdelning vara påslåget under kanalinställningarna för MediumFast kanalen (vanligtvis kanal 0)."
+                },
+                {
+                    "header": "Min nod är på fel plats på kartan",
+                    "content": "Detta är troligtvis för att din nod inte delar <b>exakt position</b>. Som standard är positionsprecisionen inställd på ± 3 km, vilket betyder att noden kan befinna sig inom en cirkel med radien 3 kilometer. Du kan ändra positions precisionen i kanalinställningarna. För mer info om positions precisionen, klicka här."
+                },
+                {
+                    "header": "Hur kan jag ansluta min nod till MQTT servern?",
+                    "content": "Då vi enbart vill analysera Meshen i stockholm är MQTT servern inte öppen för alla. Endast ett fåtal noder är uppkopplade till MQTT för att kunna analysera trafiken som faktiskt går över LoRa. De noder som är kopplade mot MQTT servern bör: <ul class=\"list-disc list-inside\"><li>Vara på en unik geografisk plats, då vi vill se hur trafiken fördelas</li><li>Ha en stabil fast koppling till internet (via Ethernet eller WiFi)</li><li>Ha hög tillgänglighet</li><li>Ha direktkontakt med flertalet andra noder</li></ul>Tror du att din nod kan bidra, kontakta @Roslund på Discord."
+                }
+            ]
+        }
+    ]
+}

docker-compose.yml

@@ -29,6 +29,8 @@ services:
     environment:
       DATABASE_URL: "mysql://root:password@database:3306/meshtastic-map?connection_limit=100"
       MAP_OPTS: "" # add any custom index.js options here
+    volumes:
+      - content.json:/app/src/content.json:ro
 
   # publishes mqtt packets via websocket
   meshtastic-ws:

package-lock.json

@@ -14,6 +14,7 @@
         "command-line-usage": "^7.0.3",
         "compression": "^1.8.1",
         "cors": "^2.8.5",
+        "ejs": "^4.0.1",
         "express": "^5.2.1",
         "mqtt": "^5.14.1",
         "protobufjs": "^7.5.4",
@@ -69,7 +70,6 @@
       "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -1771,6 +1771,12 @@
         "node": ">=12.17"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/babel-jest": {
       "version": "30.1.2",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-30.1.2.tgz",
@@ -1873,7 +1879,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/base64-js": {
@@ -1959,7 +1964,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
       "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -2010,7 +2014,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001737",
         "electron-to-chromium": "^1.5.211",
@@ -2692,6 +2695,21 @@
         "fast-check": "^3.23.1"
       }
     },
+    "node_modules/ejs": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-4.0.1.tgz",
+      "integrity": "sha512-krvQtxc0btwSm/nvnt1UpnaFDFVJpJ0fdckmALpCgShsr/iGYHTnJiUliZTgmzq/UxTX33TtOQVKaNigMQp/6Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.9.1"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.12.18"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.212",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.212.tgz",
@@ -3062,6 +3080,27 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3717,6 +3756,23 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jest": {
       "version": "30.1.3",
       "resolved": "https://registry.npmjs.org/jest/-/jest-30.1.3.tgz",
@@ -5064,7 +5120,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -5150,7 +5205,6 @@
       "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@prisma/config": "6.16.2",
         "@prisma/engines": "6.16.2"

package.json

@@ -14,6 +14,7 @@
     "command-line-usage": "^7.0.3",
     "compression": "^1.8.1",
     "cors": "^2.8.5",
+    "ejs": "^4.0.1",
     "express": "^5.2.1",
     "mqtt": "^5.14.1",
     "protobufjs": "^7.5.4",

src/index.js

@@ -13,6 +13,9 @@ const statsRoutes = require('./stats.js');
 const { PrismaClient } = require("@prisma/client");
 const prisma = new PrismaClient();
 
+// Load content
+const content = require('./content.json');
+
 // return big ints as string when using JSON.stringify
 BigInt.prototype.toJSON = function() {
     return this.toString();
@@ -77,6 +80,10 @@ function formatNodeInfo(node) {
 
 const app = express();
 
+// set view engine to ejs
+app.set('view engine', 'ejs');
+app.set('views', path.join(__dirname, 'views'));
+
 // enable compression
 app.use(compression());
 
@@ -87,7 +94,7 @@ app.use('/api', cors());
 app.use('/', express.static(path.join(__dirname, 'public')));
 
 app.get('/', async (req, res) => {
-    res.sendFile(path.join(__dirname, 'public/index.html'));
+    res.render('index', content);
 });
 
 // stats API in separate file

src/views/index.ejs

@@ -3,16 +3,16 @@
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <title>STHLM-MESH MAP</title>
+    <title><%= title %></title>
-    <meta name="title" content="Meshtastic Map">
+    <meta name="title" content="<%= title %>">
-    <meta name="description" content="An interactive map of all Meshtastic nodes.">
+    <meta name="description" content="<%= description %>">
     <link rel="icon" type="image/png" href="/icon.png"/>
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://map.sthlm-mesh.se">
+    <meta property="og:url" content="<%= base_url %>">
-    <meta property="og:title" content="STHLM-MESH MAP">
+    <meta property="og:title" content="<%= title %>">
-    <meta property="og:description" content="An interactive map of all Meshtastic nodes.">
+    <meta property="og:description" content="<%= description %>">
 
     <!-- tailwind css -->
     <script src="assets/js/tailwindcss/tailwind-v3.4.3-forms-v0.5.7.js"></script>
@@ -173,9 +173,9 @@
 
                 <!-- info -->
                 <div class="my-auto leading-tight">
-                    <div class="font-bold">Viktigt!</div>
+                    <div class="font-bold"><%- announcement.header %></div>
                     <div class="text-sm">
-                        <span>I Stockholm används LoRa preset <b>Medium Range - Fast</b>. För mer info <a href="https://sthlm-mesh.se/blog/2025/övergång-till-mediumfast-den-27-september/" type="button" class="link">klicka här</a>.</span>
+                        <span><%- announcement.content %></span>
                     </div>
                 </div>
 
@@ -191,10 +191,9 @@
                 </div>
 
             </div>
-
+            
             <!-- header -->
             <div class="flex p-3 h-16" style="background-color: 30a552;">
-
                 <!-- close mobile search button -->
                 <div v-if="isShowingMobileSearch" class="my-auto">
                     <a @click="isShowingMobileSearch = false" href="javascript:void(0)" class="rounded-full">
@@ -213,7 +212,7 @@
 
                 <!-- app info -->
                 <div v-if="!isShowingMobileSearch" class="my-auto leading-tight">
-                    <a href="https://sthlm-mesh.se"><div class="font-bold" style="color: #ffffff; font-size: 1.25rem;">STHLM-MESH</div></a>
+                    <a href="<%= home_url %>"><div class="font-bold" style="color: #ffffff; font-size: 1.25rem;"><%= title %></div></a>
                 </div>
 
                 <!-- search bar -->
@@ -356,45 +355,26 @@
                                     <img src="./icon.png" class="mx-auto w-16 h-16 rounded mb-1"/>
                                     <h1 class="font-bold">Meshtastic Map</h1>
                                     <h2>Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a></h2>
-                                    <h2>Forked by <a class="link" target="_blank" href="http://github.com/Roslund/">Roslund</a></h2>
+                                    <h2><%- fork_info %></h2>
                                 </div>
 
                                 <!-- Beskrivning -->
-                                <div>
+                                <% info_blocks.forEach(function(info_block) { %>
-                                    <div class="font-bold mb-2">Beskrivning</div>
+                                    <div>
-                                    <div class="space-y-2">
+                                        <div class="font-bold mb-2"><%- info_block.header %></div>
-                                        <div class="bg-gray-100 rounded p-2 border border-gray-200">
+                                        <% if (typeof info_block.content == 'string') { info_block.content = [{content: info_block.content}]} %>
-                                            <div>Detta är en karta som enbart fokuserar på Stockholm.</div>
+                                        <% info_block.content.forEach(function(content_item) { %>
-                                            <div>Den är baserad på Liam Cottle's open source projekt Meshtastic Map, men har flertalet ändringar och nya funktioner som gör att vi bättre kan analysera Meshen i Stockholm.</div>
+                                            <div class="space-y-2">
-                                        </div>
+                                                <div class="bg-gray-100 rounded p-2 border border-gray-200">
+                                                    <% if (content_item.header) { %>
+                                                    <div class="font-semibold"><%- content_item.header %></div>
+                                                    <% } %>
+                                                    <div><%- content_item.content %></div>
+                                                </div>
+                                            </div>
+                                        <% }); %>
                                     </div>
-                                    <br>
+                                <% }); %>
-                                    <div class="font-bold mb-2">Frågor och svar</div>
-                                    <div class="space-y-2">
-                                        <div class="bg-gray-100 rounded p-2 border border-gray-200">
-                                            <div class="font-semibold">Hur får jag min nod att synas på kartan?</div>
-                                            <div>Din nod behöver anting ha en GPS, ha en fast position inställd, eller att din telefon delar sin position.</div> 
-                                            <div>Utöver detta måste platsdelning vara påslåget under kanalinställningarna för MediumFast kanalen (vanligtvis kanal 0).</div>
-                                        </div>
-                                        <div class="bg-gray-100 rounded p-2 border border-gray-200">
-                                            <div class="font-semibold">Min nod är på fel plats på kartan</div>
-                                            <div>Detta är troligtvis för att din nod inte delar <b>exakt position</b>. Som standard är positionsprecisionen inställd på &plusmn; 3 km, vilket betyder att noden kan befinna sig inom en cirkel med radien 3 kilometer.</div>
-                                            <div>Du kan ändra positions precisionen i kanalinställningarna. För mer info om positions precisionen, <a href="https://sthlm-mesh.se/docs/position/#position-precision">klicka här</a>.</div>
-                                        </div>
-                                        <div class="bg-gray-100 rounded p-2 border border-gray-200">
-                                            <div class="font-semibold">Hur kan jag ansluta min nod till MQTT servern?</div>
-                                            <div>Då vi enbart vill analysera Meshen i stockholm är MQTT servern inte öppen för alla. Endast ett fåtal noder är uppkopplade till MQTT för att kunna analysera trafiken som faktiskt går över LoRa.</div>
-                                            <div>De noder som är kopplade mot MQTT servern bör:</div> 
-                                            <ul class="list-disc list-inside">
-                                                <li>Vara på en unik geografisk plats, då vi vill se hur trafiken fördelas</li>
-                                                <li>Ha en stabil fast koppling till internet (via Ethernet eller WiFi)</li>
-                                                <li>Ha hög tillgänglighet</li>
-                                                <li>Ha direktkontakt med flertalet andra noder</li>
-                                            </ul>
-                                            <div>Tror du att din nod kan bidra, kontakta @Roslund på Discord.</div>
-                                        </div>
-                                    </div>
-                                </div>
                                 <!-- legal -->
                                 <div>
                                     <div class="font-bold mb-2">Legal</div>
@@ -1874,11 +1854,15 @@
         methods: {
             getAnnouncementId: function() {
                 // change this when making a new announcement
-                return "1";
+                return "<%= announcement.id %>";
             },
             shouldShowAnnouncement: function() {
                 const lastSeenAnnouncementId = window.localStorage.getItem("last-seen-announcement-id");
-                return lastSeenAnnouncementId?.toString() !== this.getAnnouncementId();
+                <% if (announcement.enabled) { %>
+                  return lastSeenAnnouncementId?.toString() !== this.getAnnouncementId();
+                <% } else { %>     
+                  return false;
+                <% } %>
             },
             dismissAnnouncement: function() {
                 window.localStorage.setItem("last-seen-announcement-id", this.getAnnouncementId());
@@ -2752,13 +2736,16 @@
         [100, 500], // bottom right
     ];
 
-    // create map positioned over Stockholm
+    // create map positioned according to content.json
     var map = L.map('map', {
         maxBounds: bounds,
-    }).setView([
+    }).setView(
-        59.3,
+        [
-        378.1,
+            <%= lat %>,
-    ], 10);
+            <%= lng %>,
+        ],
+        <%= zoom %>
+    );
 
     // remove leaflet link
     map.attributionControl.setPrefix('');