Minifying web resources at compile time

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "aira"
-version = "0.0.1"
+version = "0.0.2"
 authors = ["Hardcore Sushi <hardcore.sushi@disroot.org>"]
 edition = "2018"
 
@@ -36,4 +36,7 @@ multicast_dns = "0.5" #mDNS browser
 pnet_datalink = "0.27.2"
 base64 = "0.13.0"
 scrypt = "0.7.0"
-zeroize = "1.2.0"
+zeroize = "1.2.0"
+
+[build-dependencies]
+html-minifier = "3.0.11"

build.rs

@@ -0,0 +1,44 @@
+use std::{env, fs::{File, read_to_string, create_dir}, path::Path, io::{Write, ErrorKind}};
+
+#[allow(dead_code)]
+fn minify_content(content: &str, language: &str) -> Option<String> {
+    match language {
+        "html" => Some(html_minifier::minify(content).unwrap()),
+        "js" => Some(html_minifier::js::minify(content)),
+        "css" => Some(html_minifier::css::minify(content).unwrap()),
+        _ => None,
+    }
+}
+
+#[allow(dead_code)]
+fn minify_web_files() {
+    let out_dir = env::var("OUT_DIR").unwrap();
+    let out_dir = Path::new(&out_dir);
+    let src_dir = Path::new("src/frontend");
+
+    if let Err(e) = create_dir(out_dir.join("commons")) {
+        if e.kind() != ErrorKind::AlreadyExists {
+            panic!("Failed to create \"commons\" directory");
+        }
+    }
+
+    [
+        "login.html",
+        "index.html",
+        "index.css",
+        "index.js",
+        "commons/style.css",
+        "commons/script.js"
+    ].iter().for_each(|file_name| {
+        let file_name = Path::new(file_name);
+        let content = read_to_string(src_dir.join(file_name)).unwrap();
+        let minified_content = minify_content(&content, file_name.extension().unwrap().to_str().unwrap()).unwrap();
+        let mut dst = File::create(out_dir.join(file_name)).unwrap();
+        dst.write(minified_content.as_bytes()).unwrap();
+    });
+}
+
+fn main() {
+    #[cfg(not(debug_assertions))]
+    minify_web_files();
+}

src/frontend/commons/script.js

@@ -1,6 +1,6 @@
-function generateAvatar(name){
+function generateAvatar(name) {
     let span = document.createElement("span");
-    if (typeof name == "undefined"){
+    if (typeof name == "undefined") {
         span.appendChild(document.createTextNode("?"));
     } else if (name.length > 0) {
         span.appendChild(document.createTextNode(name[0].toUpperCase()));

src/frontend/commons/style.css

@@ -4,7 +4,7 @@
 }
 
 :root {
-    --accent: #FF3C00;
+    --accent: #19a52c;
     --transparent: #00000000;
 }
 

src/frontend/index.css

@@ -1,3 +1,6 @@
+:root {
+    --button-background: #52585C
+}
 body {
     margin: 0;
     height: 100%;
@@ -24,7 +27,7 @@ button {
     cursor: pointer;
 }
 button::after {
-    background-color: #52585C;
+    background-color: var(--button-background);
     border-radius: 100%;
     display: block;
     width: 20px;
@@ -43,7 +46,7 @@ input[type="file"] {
     cursor: pointer;
 }
 .file_picker::after {
-    content: url("/static/imgs/icons/attach/FF3C00");
+    content: url("/static/imgs/icons/attach/19a52c");
     width: 2em;
 }
 .popup {
@@ -102,7 +105,7 @@ input[type="file"] {
     margin: 10px;
 }
 .popup button {
-    background-color: #52585C;
+    background-color: var(--button-background);
     color: white;
     cursor: pointer;
     padding: 10px 20px;
@@ -120,7 +123,7 @@ input[type="file"] {
     font-size: 0.9em;
 }
 .popup h2.warning::before {
-    content: url("/static/imgs/icons/warning/FF3C00");
+    content: url("/static/imgs/icons/warning/19a52c");
     width: 9%;
     display: inline-block;
     vertical-align: middle;
@@ -208,7 +211,7 @@ input[type="file"] {
     background-color: #333940;
 }
 #left_panel ul li p::after {
-    content: url("/static/imgs/icons/warning/FF3C00");
+    content: url("/static/imgs/icons/warning/19a52c");
     display: inline-block;
     width: 1em;
     margin-left: 5px;
@@ -218,7 +221,7 @@ input[type="file"] {
     content: unset;
 }
 #left_panel ul li.is_verified p::after {
-    content: url("/static/imgs/icons/verified/FF3C00");
+    content: url("/static/imgs/icons/verified/19a52c");
 }
 #left_panel ul li .not_seen_marker {
     width: 12px;
@@ -226,12 +229,14 @@ input[type="file"] {
     background-color: var(--accent);
     border-radius: 12px;
 }
+#aira_version {
+    opacity: 0.5;
+    font-weight: bold;
+    margin: 8px;
+}
 #refresher button::after {
     content: url("/static/imgs/icons/refresh");  
 }
-#connect_box {
-    margin-bottom: 20px;
-}
 #refresher, #connect_box>div {
     position: relative;
 }
@@ -250,7 +255,7 @@ input[type="file"] {
 }
 #show_local_ips:hover::after {
     background-color: unset;
-    content: url("/static/imgs/icons/info/FF3C00");
+    content: url("/static/imgs/icons/info/19a52c");
 }
 .popup ul {
     list-style-type: unset;
@@ -275,7 +280,7 @@ input[type="file"] {
     margin: 0;
 }
 #chat_header p::after {
-    content: url("/static/imgs/icons/warning/FF3C00");
+    content: url("/static/imgs/icons/warning/19a52c");
     display: inline-block;
     width: 1.2em;
     vertical-align: middle;
@@ -285,7 +290,7 @@ input[type="file"] {
     content: unset;
 }
 #chat_header.is_verified p::after {
-    content: url("/static/imgs/icons/verified/FF3C00");
+    content: url("/static/imgs/icons/verified/19a52c");
 }
 #chat_header.is_contact #delete_conversation::after {
     content: url("/static/imgs/icons/delete_conversation");
@@ -337,7 +342,7 @@ input[type="file"] {
 #file_cancel::after {
     background-color: unset;
     width: 20px;
-    content: url("/static/imgs/icons/cancel/FF3C00");
+    content: url("/static/imgs/icons/cancel/19a52c");
 }
 #file_progress {
     display: none;
@@ -411,7 +416,7 @@ input[type="file"] {
     color: var(--accent);
 }
 #msg_log .file a::after {
-    content: url("/static/imgs/icons/download/FF3C00");
+    content: url("/static/imgs/icons/download/19a52c");
     display: block;
     width: 2em;
     margin-left: 15px;

src/frontend/index.html

@@ -29,6 +29,7 @@
                     <p class="section_title">Add a new peer by IP:</p>
                     <input type="text" id="ip_input" placeholder="Enter IP address">
                 </div>
+                <p id="aira_version">AIRA vAIRA_VERSION</p>
             </div>
             <div id="right_panel" class="panel">
                 <div id="chat_header">

src/frontend/index.js

@@ -21,7 +21,7 @@ function onClickSession(event) {
         displaySessions();
         displayHeader();
         displayChatBottom();
-        dislayHistory();
+        displayHistory();
     }
 }
 let ip_input = document.getElementById("ip_input");
@@ -45,7 +45,7 @@ document.getElementById("show_local_ips").onclick = function() {
     }
     mainDiv.appendChild(ul);
     showPopup(mainDiv);
-}
+};
 let message_input = document.getElementById("message_input");
 message_input.addEventListener("keyup", function(event) {
     if (event.key === "Enter") {
@@ -68,17 +68,17 @@ document.getElementById("delete_conversation").onclick = function() {
         socket.send("delete_conversation "+currentSessionId);
         msgHistory.get(currentSessionId).length = 0;
         removePopup();
-        dislayHistory();
-    }
+        displayHistory();
+    };
     mainDiv.appendChild(button);
     showPopup(mainDiv);
-}
+};
 document.getElementById("add_contact").onclick = function() {
     socket.send("contact "+currentSessionId+" "+sessionsData.get(currentSessionId).name);
     sessionsData.get(currentSessionId).isContact = true;
     displayHeader();
     displaySessions();
-}
+};
 document.getElementById("remove_contact").onclick = function() {
     let mainDiv = document.createElement("div");
     mainDiv.appendChild(generatePopupWarningTitle());
@@ -101,12 +101,12 @@ document.getElementById("remove_contact").onclick = function() {
         }
         displayHeader();
         displaySessions();
-        dislayHistory();
+        displayHistory();
         removePopup();
-    }
+    };
     mainDiv.appendChild(button);
     showPopup(mainDiv);
-}
+};
 document.getElementById("verify").onclick = function() {
     let session = sessionsData.get(currentSessionId);
     if (typeof session !== "undefined") {
@@ -146,7 +146,7 @@ document.getElementById("verify").onclick = function() {
         mainDiv.appendChild(buttonRow);
         showPopup(mainDiv);
     }
-}
+};
 document.getElementById("logout").onclick = function() {
     let mainDiv = document.createElement("div");
     mainDiv.appendChild(generatePopupWarningTitle());
@@ -161,7 +161,7 @@ document.getElementById("logout").onclick = function() {
     button.onclick = logout;
     mainDiv.appendChild(button);
     showPopup(mainDiv);
-}
+};
 document.getElementById("attach_file").onchange = function(event) {
     let files = event.target.files;
     let useLargeFileTransfer = false;
@@ -214,10 +214,10 @@ document.getElementById("attach_file").onchange = function(event) {
             });
         };
     }
-}
+};
 document.getElementById("file_cancel").onclick = function() {
     socket.send("abort "+currentSessionId);
-}
+};
 let msg_log = document.getElementById("msg_log");
 msg_log.onscroll = function() {
     if (sessionsData.get(currentSessionId).isContact) {
@@ -225,7 +225,7 @@ msg_log.onscroll = function() {
             socket.send("load_msgs "+currentSessionId);
         }
     }
-}
+};
 let profile_div = document.querySelector("#me>div");
 profile_div.onclick = function() {
     let mainDiv = document.createElement("div");
@@ -327,14 +327,14 @@ profile_div.onclick = function() {
         deleteButton.textContent = "Delete";
         deleteButton.onclick = function() {
             socket.send("disappear");
-        }
+        };
         mainDiv.appendChild(deleteButton);
         showPopup(mainDiv);
-    }
+    };
     sectionDelete.appendChild(deleteButton);
     mainDiv.appendChild(sectionDelete);
     showPopup(mainDiv);
-}
+};
 let chatHeader = document.getElementById("chat_header");
 chatHeader.children[0].onclick = function() {
     let session = sessionsData.get(currentSessionId);
@@ -366,10 +366,10 @@ chatHeader.children[0].onclick = function() {
         }
         showPopup(mainDiv);
     }
-}
+};
 document.querySelector("#refresher button").onclick = function() {
     socket.send("refresh");
-}
+};
 
 //source: https://stackoverflow.com/a/14919494
 function humanFileSize(bytes, dp=1) {
@@ -423,7 +423,7 @@ socket.onopen = function() {
         if (currentSessionId != -1) {
             socket.send("set_seen "+currentSessionId);
         }
-    }
+    };
     if (Notification.permission === "granted") {
         notificationAllowed = true;
     } else if (Notification.permission !== "denied") {
@@ -494,10 +494,10 @@ socket.onmessage = function(msg) {
                 logout();
         }
     }
-}
+};
 socket.onclose = function() {
     console.log("Disconnected");
-}
+};
 
 function onNewSession(sessionId, outgoing, fingerprint, ip, name) {
     if (sessionsData.has(sessionId)) {
@@ -542,7 +542,7 @@ function onIsContact(sessionId, verified, fingerprint, name) {
 }
 function onMsgOrFileReceived(sessionId, outgoing, body) {
     if (currentSessionId == sessionId) {
-        dislayHistory();
+        displayHistory();
         if (!document.hidden && !outgoing) {
             socket.send("set_seen "+sessionId);
         }
@@ -631,14 +631,14 @@ function onAskLargeFiles(sessionId, encodedDownloadLocation, filesInfo) {
         if (currentSessionId == sessionId) {
             displayChatBottom();
         }
-    }
+    };
     buttonRow.appendChild(buttonDownload);
     let buttonRefuse = document.createElement("button");
     buttonRefuse.textContent = "Refuse";
     buttonRefuse.onclick = function() {
         removePopup();
         socket.send("abort "+sessionId);
-    }
+    };
     buttonRow.appendChild(buttonRefuse);
     mainDiv.appendChild(buttonRow);
     showPopup(mainDiv, false);
@@ -688,13 +688,13 @@ function onIncFilesTransfer(sessionId, chunkSize) {
 function onMsgLoad(sessionId, outgoing, msg) {
     msgHistory.get(sessionId).unshift([outgoing, false, msg]);
     if (currentSessionId == sessionId) {
-        dislayHistory(false);
+        displayHistory(false);
     }
 }
 function onFileLoad(sessionId, outgoing, uuid, fileName) {
     msgHistory.get(sessionId).unshift([outgoing, true, [uuid, fileName]]);
     if (currentSessionId == sessionId) {
-        dislayHistory(false);
+        displayHistory(false);
     }
 }
 function onDisconnected(sessionId) {
@@ -721,7 +721,7 @@ function onFileReceived(sessionId, uuid, file_name) {
 function onFileSent(sessionId, uuid, file_name) {
     msgHistory.get(sessionId).push([true, true, [uuid, file_name]]);
     if (currentSessionId == sessionId) {
-        dislayHistory();
+        displayHistory();
     }
 }
 function onNameSet(newName) {
@@ -763,7 +763,7 @@ function beautifyFingerprint(f) {
         f = f.slice(0, i)+" "+f.slice(i);
     }
     return f;
-};
+}
 function addSession(sessionId, name, outgoing, fingerprint, ip, isContact, isVerified, isOnline) {
     sessionsData.set(sessionId, {
         "name": name,
@@ -994,7 +994,7 @@ function displayChatBottom(speed = undefined) {
         }
     }
 }
-function dislayHistory(scrollToBottom = true) {
+function displayHistory(scrollToBottom = true) {
     msg_log.style.display = "block";
     msg_log.innerHTML = "";
     let previousOutgoing = undefined;

src/main.rs

@@ -475,7 +475,11 @@ fn handle_login(req: HttpRequest, mut params: web::Form<LoginParams>) -> HttpRes
 }
 
 fn get_login_body(error_msg: Option<&str>) -> Result<String, rusqlite::Error> {
-    Ok(include_str!("frontend/login.html")
+    #[cfg(debug_assertions)]
+    let html = fs::read_to_string("src/frontend/login.html").unwrap();
+    #[cfg(not(debug_assertions))]
+    let html = include_str!(concat!(env!("OUT_DIR"), "/login.html"));
+    Ok(html
         .replace("ERROR_MSG", &match error_msg {
             Some(error_msg) => format!("Error: {}.", error_msg),
             None => String::new()
@@ -543,8 +547,13 @@ async fn handle_index(req: HttpRequest) -> HttpResponse {
     let global_vars = req.app_data::<Data<Arc<RwLock<GlobalVars>>>>().unwrap();
     if is_authenticated(&req) {
         let global_vars_read = global_vars.read().unwrap();
+        #[cfg(debug_assertions)]
+        let html = fs::read_to_string("src/frontend/index.html").unwrap();
+        #[cfg(not(debug_assertions))]
+        let html = include_str!(concat!(env!("OUT_DIR"), "/index.html"));
         HttpResponse::Ok().body(
-            include_str!("frontend/index.html")
+            html
+                .replace("AIRA_VERSION", env!("CARGO_PKG_VERSION"))
                 .replace("IDENTITY_FINGERPRINT", &crypto::generate_fingerprint(&global_vars_read.session_manager.get_my_public_key()))
                 .replace("WEBSOCKET_PORT", &global_vars_read.websocket_port.to_string())
                 .replace("IS_IDENTITY_PROTECTED", &Identity::is_protected().unwrap().to_string())
@@ -566,13 +575,13 @@ fn handle_static(req: HttpRequest) -> HttpResponse {
                 #[cfg(debug_assertions)]
                 return response_builder.body(fs::read_to_string("src/frontend/index.js").unwrap());
                 #[cfg(not(debug_assertions))]
-                return response_builder.body(include_str!("frontend/index.js"));
+                return response_builder.body(include_str!(concat!(env!("OUT_DIR"), "/index.js")));
             }
             "index.css" => {
                 #[cfg(debug_assertions)]
                 return response_builder.body(fs::read_to_string("src/frontend/index.css").unwrap());
                 #[cfg(not(debug_assertions))]
-                return response_builder.body(include_str!("frontend/index.css"));
+                return response_builder.body(include_str!(concat!(env!("OUT_DIR"), "/index.css")));
             }
             "imgs" => {
                 if splits[2] == "icons" && splits.len() <= 5 {
@@ -620,8 +629,19 @@ fn handle_static(req: HttpRequest) -> HttpResponse {
             "commons" => {
                 if splits.len() == 3 {
                     match splits[2] {
-                        "script.js" => return response_builder.content_type(JS_CONTENT_TYPE).body(include_str!("frontend/commons/script.js")),
-                        "style.css" => return response_builder.body(include_str!("frontend/commons/style.css")),
+                        "script.js" => {
+                            response_builder.content_type(JS_CONTENT_TYPE);
+                            #[cfg(debug_assertions)]
+                            return response_builder.body(fs::read_to_string("src/frontend/commons/script.js").unwrap());
+                            #[cfg(not(debug_assertions))]
+                            return response_builder.body(include_str!(concat!(env!("OUT_DIR"), "/commons/script.js")))
+                        }
+                        "style.css" => {
+                            #[cfg(debug_assertions)]
+                            return response_builder.body(fs::read_to_string("src/frontend/commons/style.css").unwrap());
+                            #[cfg(not(debug_assertions))]
+                            return response_builder.body(include_str!(concat!(env!("OUT_DIR"), "/commons/style.css")));
+                        }
                         _ => {}
                     }
                 }