Enable highlighting feature.

mark.js Source is at https://github.com/captn3m0/minimal-mark.js
With license attribution

_includes/app.js

@@ -40,4 +40,30 @@ document.addEventListener('DOMContentLoaded', function () {
       detailsElement.classList.add('viewed');
     }
   });
+
+  // Set highlight words
+  if(hw = document.getElementById('highlight-words')) {
+    hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join("\n");
+  }
+
+  // Save settings
+  if(document.getElementById('btn-settings-save')) {
+    document.getElementById('btn-settings-save').addEventListener('click', function (e) {
+      val = document.getElementById('highlight-words').value.split("\n").map(function(x){return x.trim()});
+      localStorage.setItem('highlightWords', JSON.stringify(val));
+      return false;
+    });
+  }
+
+  // Enable highlighting
+  if(words = localStorage.getItem('highlightWords')) {
+    var scriptTag = document.createElement('script');
+    scriptTag.setAttribute('src','/assets/mark.min.js');
+    scriptTag.async=scriptTag.defer = true;
+    document.body.appendChild(scriptTag);
+    scriptTag.onload = function() {
+      var markInstance = new Mark(document.querySelector("main"));
+      markInstance.mark(JSON.parse(words), {});
+    }
+  }
 });

_includes/footer.html

@@ -13,6 +13,7 @@
     <ul style="display: inline;">
       <li><a href="/about/">About</a></li>
       <li><a href="/roadmap/">Roadmap</a></li>
+      <li><a href="/settings/">Settings</a></li>
     </ul>
   </nav>
 

_includes/style.css

@@ -9,7 +9,6 @@ body {
   max-width: 550px;
   margin: 0 auto;
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-
 }
 
 main {
@@ -76,7 +75,7 @@ h2 {
 }
 
 .button:link,
-.button:visited {
+.button:visited, button, input[type=button] {
     background-color: #660033;
     color: white;
     border: 1px solid #660033;
@@ -127,4 +126,10 @@ details .trigger-warning {
 }
 details[open] .trigger-warning {
   display: none;
+}
+
+mark {
+  background: #ff0;
+  padding: 0px 2px;
+  color: #000;
 }

_layouts/default.html

@@ -10,7 +10,7 @@
   <p>Text-Only
     <a class="full-version-link button" href="https://apps.apple.com/in/app/beatroot-news/id1618735924">iOS</a>
     <a class="full-version-link button" href="https://play.google.com/store/apps/details?id=com.beatrootnews.app">Android</a>
-    <a title="Mobile-Web only" class="full-version-link button" href="https://app.beatrootnews.com/">Web</a>
+    <a class="full-version-link button" href="https://app.beatrootnews.com/" title="Mobile-Web only">Web</a>
   </p>
 </header>
 
@@ -20,6 +20,6 @@
 
 <div class="hr-line"></div>
 {% include_cached footer.html %}
-<script>{% include_cached app.js %}</script>
+<script>{% include app.js %}</script>
 </body>
 </html>

settings.html

@@ -0,0 +1,16 @@
+---
+layout: article
+title: Settings
+permalink: /settings/
+# Not supported currently
+# https://github.com/jekyll/jekyll-seo-tag/issues/100
+noindex: true
+---
+
+<form>
+	<section>
+		<label for="highlight-words">Highlight Words (comma-separated):</label><br>
+		<textarea oninput="this.parentNode.dataset.value = this.value" rows="1" id="highlight-words" style="width:100%" rows=3></textarea>
+	</section>
+	<input type=button id="btn-settings-save" value=Save>
+</form>