Fix CSP violation from inline script on layout (#41)

The section header toggle was defined as an inline <script> in
default.hbs, which was blocked by the site's script-src 'self' Content
Security Policy. Moved it into app.js where it's loaded as an external
file.

Author: bigtiger

default.hbs

@@ -27,20 +27,6 @@
 
     {{> "footer"}}
 
-    <script>
-      let sections = document.querySelectorAll('.section-header');
-      function handleClick(event) {
-        const isActive = event.currentTarget.parentNode.classList.contains("active");
-        if (!isActive) {
-          event.currentTarget.parentNode.classList.add("active");
-        } else {
-          event.currentTarget.parentNode.classList.remove("active");
-        }
-      }
-      sections.forEach(function(section) {
-        section.addEventListener("click", handleClick);
-      });
-    </script>
     {{!-- Outputs important scripts - should always be included before closing body tag --}}
     {{ghost_foot}}
   </body>

src/js/app/index.js

@@ -1,6 +1,12 @@
 import "../../css/app.css"
 import './navigation-top';
 
+document.querySelectorAll('.section-header').forEach((header) => {
+    header.addEventListener('click', function () {
+        this.parentNode.classList.toggle('active');
+    });
+});
+
 // LiveReload server
 if (ENV === 'development') {
   const script = document.createElement('script');