New highlighting system

package-lock.json

@@ -12,6 +12,7 @@
         "@node-minify/core": "^8.0.6",
         "@node-minify/uglify-js": "^8.0.6",
         "express": "^4.18.2",
+        "himalaya": "^1.1.0",
         "minify-html": "^0.0.2",
         "ws": "^8.16.0",
         "youtubei.js": "^9.0.2"
@@ -486,6 +487,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/himalaya": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/himalaya/-/himalaya-1.1.0.tgz",
+      "integrity": "sha512-LLase1dHCRMel68/HZTFft0N0wti0epHr3nNY7ynpLbyZpmrKMQ8YIpiOV77TM97cNpC8Wb2n6f66IRggwdWPw==",
+      "license": "ISC"
+    },
     "node_modules/http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@@ -1341,6 +1348,11 @@
         "function-bind": "^1.1.2"
       }
     },
+    "himalaya": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/himalaya/-/himalaya-1.1.0.tgz",
+      "integrity": "sha512-LLase1dHCRMel68/HZTFft0N0wti0epHr3nNY7ynpLbyZpmrKMQ8YIpiOV77TM97cNpC8Wb2n6f66IRggwdWPw=="
+    },
     "http-errors": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@node-minify/core": "^8.0.6",
     "@node-minify/uglify-js": "^8.0.6",
     "express": "^4.18.2",
+    "himalaya": "^1.1.0",
     "minify-html": "^0.0.2",
     "ws": "^8.16.0",
     "youtubei.js": "^9.0.2"

pageUpdater.js

@@ -5,7 +5,8 @@ const path = require('path'),
     uglifyJs = require("@node-minify/uglify-js"),
     htmlMinifier = require("minify-html"),
     activityToHTML = require("./overcomplicatedStatuses.js"),
-    randomThemer = require("./randomThemer.js")
+    randomThemer = require("./randomThemer.js"),
+    himalaya = require("himalaya")
 
 var constants = JSON.parse(fs.readFileSync(path.join(__dirname, 'constants.json')))
 
@@ -44,22 +45,13 @@ function timeFormatter(seconds) {
 
 }
 
-function converter(html, query) {
+function converter(html) {
     var startTime = Date.now()
 
+    html = htmlMinifier.minify(html)
+
     var config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/config.json')))
     reloads += 1
-    while (html.includes("{PATH_")) {
-        var pagePath = html.substring(html.indexOf("{PATH_"))
-        pagePath = pagePath.substring(6, pagePath.indexOf('}'))
-        
-        var stringIndex = `{PATH_${pagePath}}`
-        pagePath = pagePath.toLowerCase()
-
-        var pageHTML = fs.readFileSync(path.join(__dirname, 'static', pagePath, 'index.html')).toString()
-        pageHTML = pageHTML.substring(pageHTML.indexOf('<main>') + 6, pageHTML.indexOf('</main>'))
-        html = html.replace(stringIndex, pageHTML)
-    }
 
     var statusText = ""
 
@@ -68,7 +60,7 @@ function converter(html, query) {
         var username = lanyardData.discord_user.username
 
         if (lanyardData.activities[0] && lanyardData.activities[0].type == 4) {
-            var statusText = `<hr><p>${lanyardData.activities[0].state}</p>`
+            var statusText = `<hr/><p>${lanyardData.activities[0].state}</p>`
         }
     } else {
         var statusData = constants.discStatuses.offline
@@ -101,9 +93,9 @@ function converter(html, query) {
         "CUSTOM_STATUS": statusText,
         "SELECTED_VIDEO": () => {
             if (config.dailyVideoURL) {
-                return `<h2><hr>Random video!</h2><p>I would call it random <em>daily</em> video but its not at all daily...</p>
+                return `<h2><hr/>Random video!</h2><p>I would call it random <em>daily</em> video but its not at all daily...</p>
-                <br> 
+                <br/> 
-                <video controls src="${config.dailyVideoURL}"></video>`
+                <video controls="true" src="${config.dailyVideoURL}"></video>`
             }
             return ``
         },
@@ -113,33 +105,95 @@ function converter(html, query) {
         "WEATHER_MODIFIER": randomThemer.returnTheme(),
         "WEATHER_TEXT": "",
         "ANNOUNCEMENT": fs.readFileSync(path.join(__dirname, "config/announcement.html")),
-        "CACHED_IMAGES": fs.readdirSync(path.join(__dirname, "cached")).length.toString()
+        "CACHED_IMAGES": fs.readdirSync(path.join(__dirname, "cached")).length.toString(),
+        "ACTIVITIES": activityToHTML.activitiesToHTML(lanyardData, cachedImages)
     }
 
     replacers.ALL_KEYWORDS = "{" + Object.keys(replacers).join("}{") + "} "
 
+    var parsedHTML = himalaya.parse(html)
+
+    function scanParsedHTML(json) {
+        for (var i = 0; i < json.length; i++) {
+            var element = json[i]
+            if (element.type == "element") {
+                if (element.children.length > 0) {
+                    element.children = scanParsedHTML(element.children)
+                }
+            } else if (element.type == "text") {
+
+                while (element.content.includes("{PATH_")) {
+                    var pagePath = element.content.substring(element.content.indexOf("{PATH_"))
+                    pagePath = pagePath.substring(6, pagePath.indexOf('}'))
+
+                    var stringIndex = `{PATH_${pagePath}}`
+                    pagePath = pagePath.toLowerCase()
+
+                    var pageHTML = fs.readFileSync(path.join(__dirname, 'static', pagePath, 'index.html')).toString()
+                    pageHTML = pageHTML.substring(pageHTML.indexOf('<main>') + 6, pageHTML.indexOf('</main>'))
+                    element.content = element.content.replaceAll(stringIndex, pageHTML)
+                }
+
                 var rpTable = Object.keys(replacers)
 
                 for (let index = 0; index < rpTable.length; index++) {
                     const text = rpTable[index];
-        html = html.replaceAll(`{${text}}`, replacers[text])
+                    element.content = element.content.replaceAll(`{${text}}`, replacers[text])
                 }
 
-    var bodyHTML = html.substring(html.indexOf("<body>") + 6, html.lastIndexOf("</body>"))
+                // console.log(element.content, himalaya.parse(element.content))
+
+                json[i] = element
+            }
+        }
+
+        return json
+    }
+
+    // var highTable = Object.keys(highlightedWords)
+
+    // for (let index = 0; index < highTable.length; index++) {
+    //     var term = highTable[index];
+    //     var replacement = `<span style="color: ${highlightedWords[term]}">${term}</span>`
+
+
+    //     element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
+    //     element.content = element.content.replaceAll(term, replacement)
+    //     element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
+    // }
+
+    parsedHTML = scanParsedHTML(parsedHTML)
+
+    parsedHTML = himalaya.parse(himalaya.stringify(parsedHTML))
+
+    function highlighter(json) {
+        for (var i = 0; i < json.length; i++) {
+            var element = json[i]
+            if (element.type == "element") {
+                if (element.children.length > 0) {
+                    element.children = highlighter(element.children)
+                }
+            } else if (element.type == "text") {
                 var highTable = Object.keys(highlightedWords)
 
                 for (let index = 0; index < highTable.length; index++) {
                     var term = highTable[index];
                     var replacement = `<span style="color: ${highlightedWords[term]}">${term}</span>`
             
-        bodyHTML = bodyHTML.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
+            
-        bodyHTML = bodyHTML.replaceAll(term, replacement)
+                    element.content = element.content.replaceAll(`{${term}}`, "TEMPORARY_REPLACE")
-        bodyHTML = bodyHTML.replaceAll("TEMPORARY_REPLACE", `${term}`)
+                    element.content = element.content.replaceAll(term, replacement)
+                    element.content = element.content.replaceAll("TEMPORARY_REPLACE", `${term}`)
+                }
+            }
         }
 
-    bodyHTML = bodyHTML.replaceAll("{ACTIVITIES}", activityToHTML.activitiesToHTML(lanyardData, cachedImages))
+        return json
+    }
 
-    html = html.substring(0, html.indexOf("<body>")) + bodyHTML + html.substring(html.indexOf("</body>") + 7)
+    parsedHTML = highlighter(parsedHTML)
+
+    html = himalaya.stringify(parsedHTML)
 
     html = html.replaceAll("{LOAD_TIME}", (Date.now() - startTime).toString() + "ms")