misc: handling static and custom static overrides

example/content/2024-10-19-what-is-marmite-static-site-generator.md

@@ -211,8 +211,10 @@ Other options are available and can be viewed on [repository](https://github.com
 ## Theme customization
 
 The embedded templates are created with [picocss.com](https://picocss.com/) and 
-it is easy to customize, just put a `style.css` in the same folder where the markdown 
-files are located and use anything that pico supports or just be creative with css.
+it is easy to customize, just put a `custom.css` and a `custom.js` 
+in your root folder and use anything that pico supports or just be creative with css.
+
+If customizing the css and js is not enough then you can create your own theme.
 
 ## Creating a new Theme
 

example/static/custom.js

@@ -0,0 +1 @@
+/* Customize me */

example/static/marmite.css

@@ -121,3 +121,7 @@ article footer {
   justify-content: space-between;
   align-items: center;
 }
+
+.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
+.spoiler:not(:hover) { color: transparent;background-color: #808080}
+.spoiler:not(:hover) > * { opacity: 0 }

example/static/marmite.js

@@ -0,0 +1,90 @@
+// Theme switcher - light/dark
+const themeSwitcher = {
+    // Config
+    _scheme: "auto",
+    toggleButton: document.getElementById("theme-toggle"),
+    rootAttribute: "data-theme",
+    localStorageKey: "picoPreferredColorScheme",
+
+    // Init
+    init() {
+        this.scheme = this.schemeFromLocalStorage;
+        this.initToggle();
+        this.updateIcon();
+    },
+
+    // Get color scheme from local storage
+    get schemeFromLocalStorage() {
+        return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+    },
+
+    // Preferred color scheme
+    get preferredColorScheme() {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    },
+
+    // Init toggle
+    initToggle() {
+        this.toggleButton.addEventListener(
+            "click",
+            (event) => {
+                event.preventDefault();
+                // Toggle scheme
+                this.scheme = this.scheme === "dark" ? "light" : "dark";
+                this.updateIcon();
+            },
+            false
+        );
+    },
+
+    // Set scheme
+    set scheme(scheme) {
+        if (scheme == "auto") {
+            this._scheme = this.preferredColorScheme;
+        } else if (scheme == "dark" || scheme == "light") {
+            this._scheme = scheme;
+        }
+        this.applyScheme();
+        this.schemeToLocalStorage();
+    },
+
+    // Get scheme
+    get scheme() {
+        return this._scheme;
+    },
+
+    // Apply scheme
+    applyScheme() {
+        document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+        // staticBase is defined on content.html template
+        document.querySelector("#highlightjs-theme")?.setAttribute("href", `${staticBase}/github-${this.scheme}.min.css`);
+    },
+
+    // Store scheme to local storage
+    schemeToLocalStorage() {
+        window.localStorage?.setItem(this.localStorageKey, this.scheme);
+    },
+
+    // Update icon based on the current scheme
+    updateIcon() {
+        if (this.scheme === "dark") {
+            this.toggleButton.innerHTML = "☼"; // Sun icon for light mode
+        } else {
+            this.toggleButton.innerHTML = "☽"; // Moon icon for dark mode
+        }
+    },
+};
+
+// Init
+themeSwitcher.init();
+
+// Menu
+
+const menuToggle = document.getElementById('menu-toggle');
+const headerMenu = document.getElementById('header-menu');
+
+menuToggle.addEventListener('click', function () {
+    headerMenu.classList.toggle('active');
+});
+
+

example/static/robots.txt

@@ -0,0 +1,5 @@
+User-agent: Mediapartners-Google
+Disallow:
+
+User-agent: *
+Allow: /

example/templates/base.html

@@ -16,7 +16,7 @@
     }
     </style>
     <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/marmite.css')}}">
-    <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/style.css')}}">
+    <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/custom.css')}}">
     {% endblock -%}
 </head>
 
@@ -62,8 +62,8 @@ <h2><a href="{{url_for(path='/')}}" class="contrast">{{ site.name }}</a></h2>
         </footer>
     </main>
     {%- block tail %}
-    <script src="{{url_for(path='/static/theme-switcher.js')}}"></script>
-    <script src="{{url_for(path='/static/menu.js')}}"></script>
+    <script src="{{url_for(path='/static/marmite.js')}}"></script>
+    <script src="{{url_for(path='/static/custom.js')}}"></script>
     {% endblock -%}
 </body>
 

src/main.rs

@@ -9,7 +9,6 @@ mod config;
 mod content;
 mod embedded;
 mod markdown;
-mod robots;
 mod server;
 mod site;
 mod tera_functions;

src/server.rs

@@ -3,7 +3,7 @@ use std::io::Cursor;
 use std::path::PathBuf;
 use std::sync::Arc;
 use std::{fs::File, path::Path};
-use tiny_http::{Response, Server};
+use tiny_http::{Header, Response, Server};
 
 pub fn start(bind_address: &str, output_folder: &Arc<PathBuf>) {
     let server = Server::http(bind_address).unwrap();
@@ -28,6 +28,7 @@ pub fn start(bind_address: &str, output_folder: &Arc<PathBuf>) {
     }
 }
 
+#[allow(clippy::case_sensitive_file_extension_comparisons)]
 fn handle_request(
     request: &tiny_http::Request,
     output_folder: &Path,
@@ -50,7 +51,12 @@ fn handle_request(
                     request_path,
                     request.http_version()
                 );
-                Ok(Response::from_data(buffer))
+                let mut resp = Response::from_data(buffer);
+                let js_header = Header::from_bytes("Content-Type", "text/javascript").unwrap();
+                if request_path.ends_with(".js") {
+                    resp.add_header(js_header);
+                }
+                Ok(resp)
             }
             Err(err) => {
                 error!("Failed to read file {}: {}", file_path.display(), err);