[change] JS/CSS optimizations

- Merged dark-theme.js in theme.js
- Renamed index-top-feature.js to just index.js (used in index.html)
- Load the minified version of index.js instead of the full one
- Load the pruned/minified version of the CSS

Author: nemesifier

content/pages/index.html

@@ -467,6 +467,6 @@ <h2 class="title is-size-3 is-size-4-mobile is-spaced">Try the demo</h2>
     <script>
       const featuresBasePath = "{{ SITEURL }}/features/";
     </script>
-    <script src="{{ SITEURL }}/theme/js/index-top-feature.js"></script>
+    <script src="{{ SITEURL }}/theme/js/index.min.js?v=1"></script>
   </body>
 </html>

js/dark-theme.js

@@ -31,3 +31,14 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
+
+// Dark theme: apply theme based on stored preference or system setting
+const storedTheme = localStorage.getItem("theme");
+if (storedTheme) {
+  document.documentElement.setAttribute("data-theme", storedTheme);
+} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  document.documentElement.classList.add("dark");
+  document.documentElement.setAttribute("data-theme", "dark");
+} else {
+  document.documentElement.setAttribute("data-theme", "light");
+}

js/index-top-feature.js js/index.jsjs/index-top-feature.js renamed to js/index.js

@@ -11,11 +11,10 @@
     "build:js": "babel js/*.js js/activity/feed.js --out-dir theme/static/js && concat js/activity/*.min.js theme/static/js/feed.js -o theme/static/js/activity.js && rm theme/static/js/feed.js",
     "minify:activity": "terser theme/static/js/activity.js --config-file .terserrc -o theme/static/js/activity.min.js",
     "minify:theme": "terser theme/static/js/theme.js --config-file .terserrc -o theme/static/js/theme.min.js",
-    "minify:dark-theme": "terser theme/static/js/dark-theme.js --config-file .terserrc -o theme/static/js/dark-theme.min.js",
     "minify:faq": "terser theme/static/js/faq.js --config-file .terserrc -o theme/static/js/faq.min.js",
     "minify:modal": "terser theme/static/js/modal.js --config-file .terserrc -o theme/static/js/modal.min.js",
-    "minify:top-feature": "terser theme/static/js/index-top-feature.js --config-file .terserrc -o theme/static/js/index-top-feature.min.js",
-    "minify": "npm run minify:activity && npm run minify:theme && npm run minify:dark-theme && npm run minify:faq && npm run minify:modal && npm run minify:top-feature",
+    "minify:index": "terser theme/static/js/index.js --config-file .terserrc -o theme/static/js/index.min.js",
+    "minify": "npm run minify:activity && npm run minify:theme && npm run minify:faq && npm run minify:modal && npm run minify:index",
     "build": "npm run build:css && npm run build:js && npm run minify",
     "serve": "http-server -a 0.0.0.0 -p 8080 ./output/",
     "start": "concurrently \"npm run serve\" \"npm run build:sass\" \"npm run build:postcss\"",

js/theme.js

@@ -14,7 +14,7 @@
         content="width=device-width, initial-scale=1, shrink-to-fit=no"
       />
       {% block extra_meta %}{% endblock %}
-      <link rel="stylesheet" href="{{ SITEURL }}/theme/css/theme.css?v=2" />
+      <link rel="stylesheet" href="{{ SITEURL }}/theme/css/theme.min.css?v=1" />
       <link
         rel="icon"
         type="image/x-icon"
@@ -90,7 +90,6 @@
           title="{{ SITENAME|striptags }} Tags RSS Feed"
         />
       {% endif %}
-      <script src="{{ SITEURL }}/theme/js/dark-theme.min.js?v=1"></script>
       <meta name="generator" content="Pelican" />
     {% endblock head %}
   </head>
@@ -230,7 +229,7 @@
         </div>
       </div>
     </footer>
-    <script src="{{ SITEURL }}/theme/js/theme.min.js?v=1" defer></script>
+    <script src="{{ SITEURL }}/theme/js/theme.min.js?v=2" defer></script>
     {% block scripts %}{% endblock %}
     {% if MATOMO_SITE_ID %}
       <!-- Matomo -->