diff --git a/src/routes/static_files.rs b/src/routes/static_files.rs index 7aceded..548d010 100644 --- a/src/routes/static_files.rs +++ b/src/routes/static_files.rs @@ -1,7 +1,10 @@ -use std::path::{Path, PathBuf}; use rocket::fs::NamedFile; +use rocket::response::status::NotFound; +use std::path::{Path, PathBuf}; #[get("/", rank = 3)] -pub async fn static_files(file: PathBuf) -> Option { - NamedFile::open(Path::new("static/").join(file)).await.ok() +pub async fn static_files(file: PathBuf) -> Result> { + NamedFile::open(Path::new("static/").join(file)) + .await + .map_err(|e| NotFound(e.to_string())) } diff --git a/static/css/index.css b/static/css/index.css new file mode 100644 index 0000000..45aa997 --- /dev/null +++ b/static/css/index.css @@ -0,0 +1,72 @@ +html, +body { + overflow-y: hidden; +} + +body { + height: 95vh; + font-family: monospace; + + display: grid; +} + +form.highlight { + border: 1vh dashed #F29718; +} + +.grid_form { + display: grid; + grid-template-columns: 4fr 1fr 1fr; + height: 100vh; + margin-top: 1vh; + align-items: start; + justify-items: center; +} + +textarea { + height: 90%; + width: 100%; + + background: none; + border: none; + + resize: none; + overflow: auto; + + color: inherit; + font-family: monospace; + line-height: inherit; +} + +select { + color: inherit; + background-color: #0f1419; + border: none; + padding: 0 1em 0 0; + margin: 0; + width: 80%; + font-family: inherit; + font-size: inherit; + cursor: inherit; + line-height: inherit; +} + +button[type="submit"] { + background-color: #F29718; + border: none; + padding: 0 1em 0 0; + margin: 0; + width: 50%; + font-family: inherit; + font-size: inherit; + line-height: inherit; + cursor: pointer; +} + +*:focus { + outline: none; +} + +*.hidden { + display: none; +} \ No newline at end of file diff --git a/static/js/index.js b/static/js/index.js new file mode 100644 index 0000000..f796c8d --- /dev/null +++ b/static/js/index.js @@ -0,0 +1,105 @@ +const body = document.querySelector('body'); +const form = document.querySelector('form'); +const grid_form = document.querySelector('.grid_form'); +const textarea = document.querySelector('textarea'); +const select = document.querySelector('select'); +const submitButton = document.querySelector('button[type="submit"]'); + +const onInput = () => { + submitButton.classList.toggle('hidden', !textarea.value); + select.classList.toggle('hidden', !textarea.value); +} +textarea.addEventListener('input', onInput); +onInput(); + +document.body.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && e.ctrlKey) { + form.submit(); + } +}); + +async function postData(url = '', data) { + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: data + }); + + const text = await response.text(); + return text; +} + +function preventDefaults(e) { + e.preventDefault() + e.stopPropagation() +} + +// Prevent default drag behaviors +['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + form.addEventListener(eventName, preventDefaults, false); + document.body.addEventListener(eventName, preventDefaults, false); +}); + +// highlight the dragarea +['dragenter', 'dragover'].forEach(eventName => { + form.addEventListener(eventName, highlight, false); +}); + +// unhighlight the dragarea +['dragleave', 'drop'].forEach(eventName => { + form.addEventListener(eventName, unhighlight, false); +}); + +function highlight(e) { + form.classList.add('highlight'); + grid_form.classList.add('hidden'); +} + +function unhighlight(e) { + form.classList.remove('highlight'); + grid_form.classList.remove('hidden'); +} + +// Files are dropped +function dropHandler(ev) { + ev.preventDefault(); + + if (ev.dataTransfer.items) { + var item = ev.dataTransfer.items[0]; + var blob = item.getAsFile(); + const ext = blob.name.split(".")[1]; + var url = window.location.href; + + // Give a visual cue + grid_form.classList.add('hidden'); + + postData(url, blob) + .then(data => { + window.location.href = data + "." + ext; + }) + .catch(function (err) { + console.info(err + " url: " + url); + }); + } +} + + +// pasting files from the clipboard +document.onpaste = function (pasteEvent) { + var item = pasteEvent.clipboardData.items[0]; + var blob = item.getAsFile(); + + if (blob !== null && blob !== '') { + var url = window.location.href; + + postData(url, blob) + .then(data => { + window.location.href = data; + }) + .catch(function (err) { + console.info(err + " url: " + url); + }); + } +} \ No newline at end of file diff --git a/templates/base.html.tera b/templates/base.html.tera index 87c5f30..0dc86c4 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -11,7 +11,6 @@ {{ title }} + {% block styles %} + {% endblock styles %} {% block head %} {% endblock head %} diff --git a/templates/index.html.tera b/templates/index.html.tera index 5d53c2d..82c7826 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -1,79 +1,13 @@ {% extends "base" %} {% block styles %} - -html, body { - overflow-y:hidden; -} - -body { - height: 100vh; - font-family: monospace; - - display: grid; -} - -.grid_form { - display: grid; - grid-template-columns: 4fr 1fr 1fr; - height: 100vh; - align-items: start; - justify-items: center; -} - -textarea { - height: 90%; - width: 100%; - - background: none; - border: none; - - resize: none; - overflow: auto; - - color: inherit; - font-family: monospace; - line-height: inherit; -} - -select { - color: inherit; - background-color: #0f1419; - border: none; - padding: 0 1em 0 0; - margin: 0; - width: 80%; - font-family: inherit; - font-size: inherit; - cursor: inherit; - line-height: inherit; -} - -button[type="submit"] { - background-color: #F29718; - border: none; - padding: 0 1em 0 0; - margin: 0; - width: 50%; - font-family: inherit; - font-size: inherit; - line-height: inherit; - cursor: pointer; -} - -*:focus { - outline: none; -} - -select.hidden { display: none; } -button[type="submit"].hidden { display: none; } - + {% endblock styles %} {% block body %} -
-
- +" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> - + - -
+ +
- -{% endblock body %} + +{% endblock body %} \ No newline at end of file diff --git a/templates/pretty.html.tera b/templates/pretty.html.tera index 10fec50..188cffc 100644 --- a/templates/pretty.html.tera +++ b/templates/pretty.html.tera @@ -1,13 +1,16 @@ {% extends "base" %} {% block styles %} -body { - padding: 10px; -} -pre { - margin: 0px; - font-family: monospace; -} + {% endblock styles %} @@ -17,4 +20,4 @@ pre { {% block body %} {{ body | safe }} -{% endblock body %} +{% endblock body %} \ No newline at end of file