add a button to show hidden topics

README.md

@@ -4,9 +4,11 @@ title: About This Site
 permalink: /about/
 ---
 
-This site is a text-only minimal version of [Beatroot News](https://app.beatrootnews.com/), a new news app by Freemedia Interactive Private Limited.
+This site is a text-only minimal version of [Beatroot News](https://app.beatrootnews.com/) 
+[[iOS](https://apps.apple.com/in/app/beatroot-news/id1618735924)], 
+[[Android](https://play.google.com/store/apps/details?id=com.beatrootnews.app)], a new news app by Freemedia Interactive Private Limited.
 
-It is maintained by [Nemo](https://github.com/captn3m0), and is meant as a minimal news website that you can check once a day.
+It is maintained by [Nemo](https://github.com/captn3m0), and is meant as a minimal indian news website that you can check once a day.
 
 This text-only version is unaffiliated with Beatroot News or Freemedia Interactive Private Limited.
 
@@ -19,4 +21,9 @@ This text-only version is unaffiliated with Beatroot News or Freemedia Interacti
 - The content is updated every 30 minutes.
 - There are no trackers or ads.
 
+## Configuration
+- Read articles are marked in grey. You can reset read articles in Settings.
+- Highlight words can be configured in settings, and will be highlighted across all news articles and headlines.
+- You can hide specific topics under settings.
+
 [^1]: List of sources considered as syndicated: PTI, Hindustan Times, Indian Express

_includes/app.js

@@ -100,6 +100,12 @@ document.addEventListener('DOMContentLoaded', function () {
   // Set checkboxes from local storage in settings.html
   let x = localStorage.getItem('hiddenTopics');
   let hiddenTopics = x ? JSON.parse(x) : [];
+
+  // Set hidden count in the button and show it.
+  if (hiddenTopics && document.getElementById("hidden-notifier")) {
+    document.getElementById("hidden-count").innerText = hiddenTopics.length;
+    document.getElementById("hidden-notifier").style.display = "inline";
+  }
   for (let topic of hiddenTopics) {
     let topicCheckbox = document.querySelector(`#checkbox-hide-${topic}`);
     if (topicCheckbox) {
@@ -107,6 +113,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   }
 
+  // Show hidden elements on clicking the button
+  if (document.getElementById("hidden-notifier")) {
+    document.getElementById("hidden-notifier").addEventListener('click', function (e) {
+      document.getElementById('hidden-style').remove();
+      document.getElementById("hidden-notifier").style.display = "none";
+    });
+  }
+
   // On clicking checkbox, add it to localstorage
   let checkboxes = document.querySelectorAll('.checkbox-hide');
   for (let checkbox of checkboxes) {

_includes/hide.js

@@ -6,5 +6,4 @@ innerStyle = "";
 for (let topic of hiddenTopics) {
   innerStyle += `.topic-${topic} {display:none} `;
 }
-console.log(innerStyle)
-document.head.insertAdjacentHTML("beforeend", `<style>${innerStyle}</style>`)
+document.head.insertAdjacentHTML("beforeend", `<style id="hidden-style">${innerStyle}</style>`)

_includes/style.css

@@ -144,4 +144,8 @@ mark {
   background: #ff0;
   padding: 0px 2px;
   color: #000;
+}
+
+.hidden-notifier {
+  display: none;
 }

index.html

@@ -17,4 +17,5 @@ layout: default
 	{% endfor %}
 </div>
 {% endfor %}
+<button id="hidden-notifier">Show <span id="hidden-count"></span> hidden topics</button>
 </div>