--- a/mod_http_muc_log/mod_http_muc_log.lua	Fri Dec 02 22:06:40 2022 +0100
+++ b/mod_http_muc_log/mod_http_muc_log.lua	Sun Dec 04 22:10:07 2022 +0100
@@ -40,6 +40,8 @@
 	end
 end
 
+local resources = module:get_option_path(module.name .. "_resources", "static");
+
 -- local base_url = module:http_url() .. '/'; -- TODO: Generate links in a smart way
 local get_link do
 	local link, path = { path = '/' }, { "", "", is_directory = true };
@@ -248,6 +250,7 @@
 	response.headers.content_type = "text/html; charset=utf-8";
 	local room_obj = get_room(room);
 	return render(template, {
+		static = "../@static";
 		room = room_obj._data;
 		jid = room_obj.jid;
 		jid_node = jid_split(room_obj.jid);
@@ -467,6 +470,7 @@
 	response.headers.content_type = "text/html; charset=utf-8";
 	local room_obj = get_room(room);
 	return render(template, {
+		static = "../@static";
 		date = date;
 		room = room_obj._data;
 		jid = room_obj.jid;
@@ -517,6 +521,7 @@
 
 	response.headers.content_type = "text/html; charset=utf-8";
 	return render(template, {
+		static = "./@static";
 		title = module:get_option_string("name", "Prosody Chatrooms");
 		jid = module.host;
 		hide_presence = hide_presence(request);
@@ -526,6 +531,20 @@
 	});
 end
 
+local serve_static
+do
+	if prosody.process_type == "prosody" then
+		-- Prosody >= 0.12
+		local http_files = require "net.http.files";
+		serve = http_files.serve;
+	else
+		-- Prosody <= 0.11
+		serve = module:depends "http_files".serve;
+	end
+	local mime_map = module:shared("/*/http_files/mime").types or { css = "text/css"; js = "application/javascript" };
+	serve_static = serve({ path = resources; mime_map = mime_map });
+end
+
 module:provides("http", {
 	title = module:get_option_string("name", "Chatroom logs");
 	route = {
@@ -535,6 +554,10 @@
 		-- thus:
 		-- GET /room --> years_page (via logs_page)
 		-- GET /room/yyyy-mm-dd --> logs_page (for real)
+
+		["GET /@static/*"] = serve_static;
+		-- There are not many ASCII characters that are safe to use in URLs but not
+		-- valid in JID localparts, '@' seemed the only option.
 	};
 });
 

--- a/mod_http_muc_log/res/http_muc_log.html	Fri Dec 02 22:06:40 2022 +0100
+++ b/mod_http_muc_log/res/http_muc_log.html	Sun Dec 04 22:10:07 2022 +0100
@@ -5,59 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 {date&<meta name="dcterms.date" content="{date}">}
 <title>{title?{room.name?{jid_node}}{date& - {date}}}</title>
-<style>
-:link,:visited{color:#3465a4;text-decoration:none;}
-:link:hover,:visited:hover{color:#6197df;}
-body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;}
-ul,ol{padding:0;}
-li{list-style:none;}
-hr{visibility:hidden;clear:both;}
-br{clear:both;}
-header,footer{margin:1ex 1em;}
-footer{font-size:smaller;color:#babdb6;}
-nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;}
-footer nav .up{display:none;}
-@media screen and (min-width: 460px) {
-nav {font-size:x-large;margin:1ex 1em;}
-}
-nav a{padding:1ex}
-nav li,nav dt{margin:1ex}
-nav .up{font-size:smaller;display:block;clear:both;}
-nav .up::before{content:"↑ ";}
-nav .prev{float:left;}
-nav .next{float:right;}
-nav .next::after{content:" →";}
-nav .prev::before{content:"← ";}
-nav .last::after{content:" ⇥";}
-nav :empty::after,nav :empty::before{content:""}
-table{display:inline-block; margin:1ex 1em;vertical-align:top;}
-th{font-size:x-small}
-td{text-align:right;color:#bababa}
-td > a, td > span{padding:0.4em}
-.content{background-color:white;padding:1em;list-style-position:inside;}
-.time{float:right;font-size:small;opacity:0.2;}
-li:hover .time{opacity:1;}
-.description{font-size:smaller;}
-.body{white-space:pre-line;}
-.body::before,.body::after{content:"";}
-.presence .verb{font-style:normal;color:#30c030;}
-.unavailable .verb{color:#c03030;}
-.button{display:inline-block}
-.button>a{color:white;background-color:orange;border-radius:4px}
-.reaction{font-size:smaller;outline:1px solid silver;border-radius:2px}
-form{text-align:right}
-li.edited{display:none}
-li:target{outline:1px gray dotted;display:inherit}
-figure img{max-height:9em;max-width:16em}
-@media (prefers-color-scheme: dark) {
-html{color:#eee}
-body{background-color:#161616}
-.content{background-color:#1c1c1c}
-footer{color:#444}
-td{color:#444}
-.button>a{background-color:#282828}
-}
-</style>
+<link rel="stylesheet" type="text/css" href="{static}/style.css">
 </head>
 <body>
 <header>
@@ -130,25 +78,6 @@
 <br>
 <div class="powered-by">Prosody</div>
 </footer>
-<script>
-/*
-* Local timestamps
-*/
-(function () {
-var timeTags = document.getElementsByTagName("time");
-var i = 0, tag, date;
-while(timeTags[i]) {
-tag = timeTags[i++];
-if(date = tag.getAttribute("datetime")) {
-date = new Date(date);
-tag.textContent = date.toLocaleTimeString(navigator.language);
-tag.setAttribute("title", date.toString());
-}
-}
-document.forms[0].elements.p.addEventListener("change", function() {
-document.forms[0].submit();
-});
-})();
-</script>
+<script defer type="application/javascript" src="{static}/timestamps.js"></script>
 </body>
 </html>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mod_http_muc_log/static/style.css	Sun Dec 04 22:10:07 2022 +0100
@@ -0,0 +1,52 @@
+:link,:visited{color:#3465a4;text-decoration:none;}
+:link:hover,:visited:hover{color:#6197df;}
+body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;}
+ul,ol{padding:0;}
+li{list-style:none;}
+hr{visibility:hidden;clear:both;}
+br{clear:both;}
+header,footer{margin:1ex 1em;}
+footer{font-size:smaller;color:#babdb6;}
+nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;}
+footer nav .up{display:none;}
+@media screen and (min-width: 460px) {
+nav {font-size:x-large;margin:1ex 1em;}
+}
+nav a{padding:1ex}
+nav li,nav dt{margin:1ex}
+nav .up{font-size:smaller;display:block;clear:both;}
+nav .up::before{content:"↑ ";}
+nav .prev{float:left;}
+nav .next{float:right;}
+nav .next::after{content:" →";}
+nav .prev::before{content:"← ";}
+nav .last::after{content:" ⇥";}
+nav :empty::after,nav :empty::before{content:""}
+table{display:inline-block; margin:1ex 1em;vertical-align:top;}
+th{font-size:x-small}
+td{text-align:right;color:#bababa}
+td > a, td > span{padding:0.4em}
+.content{background-color:white;padding:1em;list-style-position:inside;}
+.time{float:right;font-size:small;opacity:0.2;}
+li:hover .time{opacity:1;}
+.description{font-size:smaller;}
+.body{white-space:pre-line;}
+.body::before,.body::after{content:"";}
+.presence .verb{font-style:normal;color:#30c030;}
+.unavailable .verb{color:#c03030;}
+.button{display:inline-block}
+.button>a{color:white;background-color:orange;border-radius:4px}
+.reaction{font-size:smaller;outline:1px solid silver;border-radius:2px}
+form{text-align:right}
+li.edited{display:none}
+li:target{outline:1px gray dotted;display:inherit}
+figure img{max-height:9em;max-width:16em}
+@media (prefers-color-scheme: dark) {
+html{color:#eee}
+body{background-color:#161616}
+.content{background-color:#1c1c1c}
+footer{color:#444}
+td{color:#444}
+.button>a{background-color:#282828}
+}
+

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mod_http_muc_log/static/timestamps.js	Sun Dec 04 22:10:07 2022 +0100
@@ -0,0 +1,19 @@
+/*
+* Local timestamps
+*/
+(function () {
+var timeTags = document.getElementsByTagName("time");
+var i = 0, tag, date;
+while(timeTags[i]) {
+tag = timeTags[i++];
+if(date = tag.getAttribute("datetime")) {
+date = new Date(date);
+tag.textContent = date.toLocaleTimeString(navigator.language);
+tag.setAttribute("title", date.toString());
+}
+}
+document.forms[0].elements.p.addEventListener("change", function() {
+document.forms[0].submit();
+});
+})();
+