Adding option to not-minify js, creating updateScrollShadows() function and applying to configured selectors

config.yaml

@@ -27,6 +27,7 @@ default: &default
   debug-settings:
     preview: false
     inflate-css: true
+    inflate-js: true
 
 prod:
   <<: *default

site/js/main.js

@@ -1,6 +1,12 @@
+let sideScrollingSelectors = ["pre.sourceCode"]
+
 window.addEventListener("load", () => {
     writeCopyrightYear()
-    addCodeScrolling()
+    sideScrollingSelectors.forEach(updateScrollShadowsSelector)
+})
+
+window.addEventListener("resize", () => {
+    sideScrollingSelectors.forEach(updateScrollShadowsSelector)
 })
 
 function writeCopyrightYear() {
@@ -12,28 +18,58 @@ function writeCopyrightYear() {
     })
 }
 
-function addCodeScrolling() {
-    document.querySelectorAll("pre.sourceCode").forEach(wrapper => {
-        let content = wrapper.querySelector("code.sourceCode")
-        let contentScrollWidth = content.scrollWidth - wrapper.offsetWidth
-        if (contentScrollWidth <= 0) {
-            return;
-        }
+function updateScrollShadowsSelector(selector) {
+    document.querySelectorAll(selector).forEach(wrapper => updateScrollShadows(wrapper))
+}
+
+function updateScrollShadows(wrapper) {
+    // identity the scrolling content within the wrapper
+    let contentQuery = wrapper.querySelector(".scroll-content")
+    let content
+    if (contentQuery) {
+        content = contentQuery
+    } else {
+        content = wrapper.firstChild
+        content.classList.add("scroll-content")
+    }
 
-        let leftShadow = document.createElement("div")
-        leftShadow.classList.add("shadow", "shadow-left")
-        wrapper.appendChild(leftShadow)
+    let contentScrollWidth = content.scrollWidth - wrapper.offsetWidth
+    // remove shadows if no scrolling is needed
+    if (contentScrollWidth <= 0) {
+        wrapper.querySelectorAll(".shadow").forEach(x => x.remove())
+        delete wrapper.updateScrollShadows
+        return
+    }
 
-        let rightShadow = document.createElement("div")
-        rightShadow.classList.add("shadow", "shadow-right")
-        wrapper.appendChild(rightShadow)
+    // skip if scroll shadows already added
+    if (wrapper.updateScrollShadows) {
+        return;
+    }
 
-        function setScroll() {
-            let currentScroll = content.scrollLeft / contentScrollWidth
-            leftShadow.style.opacity = currentScroll
-            rightShadow.style.opacity = 1 - currentScroll
+    // create scroll shadows
+    let [leftShadow, rightShadow] = ["left", "right"].map(side => {
+        let shadowQuery = wrapper.querySelector(`.shadow-${side}`)
+        let shadow
+        if (shadowQuery) {
+            shadow = shadowQuery
+        } else {
+            shadow = document.createElement("div")
+            shadow.classList.add("shadow", `shadow-${side}`)
+            wrapper.appendChild(shadow)
+        }
+        return shadow
+    })
+    // add method to update shadow opacity relative to scroll
+    wrapper.updateScrollShadows = () => {
+        let currentScroll = content.scrollLeft / contentScrollWidth
+        leftShadow.style.opacity = currentScroll
+        rightShadow.style.opacity = 1 - currentScroll
+    }
+    // attach event listener to update shadows
+    content.addEventListener("scroll", function () {
+        if (wrapper.updateScrollShadows) {
+            wrapper.updateScrollShadows()
         }
-        setScroll();
-        content.addEventListener("scroll", setScroll);
     })
+    wrapper.updateScrollShadows()
 }

src/Green/Config.hs

@@ -11,7 +11,8 @@ import qualified Hakyll as H
 
 data SiteDebug = SiteDebug
   { _debugPreview :: Bool,
-    _debugInflateCss :: Bool
+    _debugInflateCss :: Bool,
+    _debugInflateJs :: Bool
   }
   deriving (Show)
 
@@ -21,7 +22,8 @@ defaultSiteDebug :: SiteDebug
 defaultSiteDebug =
   SiteDebug
     { _debugPreview = False,
-      _debugInflateCss = False
+      _debugInflateCss = False,
+      _debugInflateJs = False
     }
 
 instance FromJSON SiteDebug where
@@ -29,12 +31,14 @@ instance FromJSON SiteDebug where
     SiteDebug
       <$> debug .:? "preview" .!= (defaultSiteDebug ^. debugPreview)
       <*> debug .:? "inflate-css" .!= (defaultSiteDebug ^. debugInflateCss)
+      <*> debug .:? "inflate-js" .!= (defaultSiteDebug ^. debugInflateJs)
 
 instance ToJSON SiteDebug where
   toJSON SiteDebug {..} =
     object
       [ "preview" .= _debugPreview,
-        "inflate-css" .= _debugInflateCss
+        "inflate-css" .= _debugInflateCss,
+        "inflate-js" .= _debugInflateJs
       ]
 
 data SiteInfo = SiteInfo
@@ -206,8 +210,9 @@ parseSiteConfigJSON env timeLocale time = withObject "SiteConfig" \allConfig ->
     envKey = fromMaybe "default" $ lookup "SITE_ENV" env
     overrideDebugSettings debug =
       debug
-        & debugInflateCss %~ (\x -> maybe x read $ lookup "SITE_INFLATE_CSS" env)
         & debugPreview %~ (\x -> maybe x read $ lookup "SITE_PREVIEW" env)
+        & debugInflateCss %~ (\x -> maybe x read $ lookup "SITE_INFLATE_CSS" env)
+        & debugInflateJs %~ (\x -> maybe x read $ lookup "SITE_INFLATE_JS" env)
 
 parseConfigYaml :: [(String, String)] -> TimeLocale -> ZonedTime -> ByteString -> Either String SiteConfig
 parseConfigYaml env timeLocale time =

src/Green/Site.hs

@@ -21,7 +21,7 @@ site :: SiteConfig -> Rules ()
 site config = do
   brokenLinks
   images
-  js
+  js config
   scss config
   templatesDependency <- templates
   rulesExtraDependencies [templatesDependency] do

src/Green/Site/Js.hs

@@ -1,14 +1,19 @@
 module Green.Site.Js where
 
 import qualified Data.ByteString.Lazy.Char8 as C
-import Hakyll
+import Green.Common
+import Green.Config
 import Text.Jasmine
 
-js :: Rules ()
-js =
+js :: SiteConfig -> Rules ()
+js config =
   match "js/**.js" do
     route idRoute
     compile do
-      let minifyJS = C.unpack . minify . C.pack . itemBody
       s <- getResourceString
-      return $ itemSetBody (minifyJS s) s
+      return $ itemSetBody (processJS $ itemBody s) s
+  where
+    processJS
+      | config ^. siteDebug . debugInflateJs = id
+      | otherwise = minifyJS
+    minifyJS = C.unpack . minify . C.pack