Move out scripts and styles

Signed-off-by: baalajimaestro <me@baalajimaestro.me>

Cargo.lock

@@ -19,6 +19,29 @@ dependencies = [
  "tokio-util",
 ]
 
+[[package]]
+name = "actix-files"
+version = "0.6.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d832782fac6ca7369a70c9ee9a20554623c5e51c76e190ad151780ebea1cf689"
+dependencies = [
+ "actix-http",
+ "actix-service",
+ "actix-utils",
+ "actix-web",
+ "askama_escape",
+ "bitflags",
+ "bytes",
+ "derive_more",
+ "futures-core",
+ "http-range",
+ "log",
+ "mime",
+ "mime_guess",
+ "percent-encoding",
+ "pin-project-lite",
+]
+
 [[package]]
 name = "actix-http"
 version = "3.2.2"
@@ -230,6 +253,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "askama_escape"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "619743e34b5ba4e9703bba34deac3427c72507c7159f5fd030aea8cac0cfe341"
+
 [[package]]
 name = "autocfg"
 version = "1.1.0"
@@ -677,6 +706,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.8.0"
@@ -891,6 +926,16 @@ version = "0.3.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a60c7ce501c71e03a9c9c0d35b861413ae925bd979cc7a4e30d060069aaac8d"
 
+[[package]]
+name = "mime_guess"
+version = "2.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4192263c238a5f0d0c6bfd21f336a313a4ce1c450542449ca191bb657b4642ef"
+dependencies = [
+ "mime",
+ "unicase",
+]
+
 [[package]]
 name = "miniz_oxide"
 version = "0.5.4"
@@ -989,6 +1034,7 @@ checksum = "b1de2e551fb905ac83f73f7aedf2f0cb4a0da7e35efa24a202a936269f1f18e1"
 name = "paste-frontend"
 version = "0.1.0"
 dependencies = [
+ "actix-files",
  "actix-web",
  "base64 0.20.0",
  "mime",
@@ -1675,6 +1721,15 @@ dependencies = [
  "unic-common",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
+dependencies = [
+ "version_check",
+]
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.8"

Cargo.toml

@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 actix-web = { version = "4", default-features = false, features = ["macros", "compress-brotli", "compress-gzip", "cookies"]}
+actix-files = "0.6.2"
 tera = "1.17.1"
 serde = { version = "1.0", features = ["derive"] }
 reqwest = { version = "0.11", default-features = false, features = ["rustls-tls"] }

src/main.rs

@@ -1,4 +1,5 @@
 use actix_web::{get, App, HttpResponse, HttpServer, Responder, web::{Data, Query}, http::header::ContentType};
+use actix_files as fs;
 use tera::{Tera, Context};
 use serde::{Serialize, Deserialize};
 use reqwest::{Client, header::HeaderMap};
@@ -74,6 +75,7 @@ async fn main() -> std::io::Result<()> {
         App::new()
             .app_data(Data::clone(&data))
             .service(paste_render)
+            .service(fs::Files::new("/static", "static"))
     })
     .bind(env::var("BIND_ADDRESS").unwrap_or("0.0.0.0:8080".to_string()))?
     .run()

static/scripts.js

@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    const elem = document.getElementById('pastecontent');
+    hljs.highlightElement(elem);
+  });

static/styles.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.cdnfonts.com/css/ibm-plex-sans');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack-subset.css');
+
+body {
+    font-family: 'IBM Plex Sans';
+}
+
+pre {
+    font-family: Hack, monospace;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}

templates/paste.html

@@ -4,32 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
-  <link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
+  <link rel="stylesheet" href="/static/styles.css" />
-  <link rel="stylesheet"
+  <script src="/static/scripts.js"></script>
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack-subset.css" integrity="sha512-/qDvulLjBL2EaRMJOIXQhkiKwhlkDdT2qY000siiuS02OOxbL8BrBOW1aJBjPkC/QJzc8VbnIe4zzGsISNnTHg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
-
-  <style>
-    body {
-    font-family: 'Inter';
-    }
-    pre {
-        font-family: Hack, monospace;
-        overflow-x: auto;
-        white-space: pre-wrap;
-        white-space: -moz-pre-wrap;
-        white-space: -pre-wrap;
-        white-space: -o-pre-wrap;
-        word-wrap: break-word;
-    }
-  </style>
-<script>
-document.addEventListener('DOMContentLoaded', (event) => {
-    const elem = document.getElementById('pastecontent');
-    hljs.highlightElement(elem);
-  });
-</script>
   <body class="bg-zinc-800">
     <div class="flex flex-col items-center space-y-12">
         <h2 class="text-3xl font-bold text-gray-300">