index: Add select for choosing languages when pasting

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

src/routes/submit.rs

@@ -7,6 +7,7 @@ use crate::models::paste_id::PasteId;
 #[derive(FromForm)]
 pub struct PasteIdForm {
     val: String,
+    ext: String,
 }
 
 #[post("/submit", data = "<paste>")]
@@ -14,9 +15,10 @@ pub async fn submit(paste: Form<PasteIdForm>) -> Redirect {
     let id = PasteId::new(6);
 
     let filename = format!("upload/{id}", id = id);
-    let content = paste.into_inner().val;
+    let content = &paste.val;
+    let ext = &paste.ext;
 
     fs::write(&filename, content).expect("Unable to write to the file");
 
-    Redirect::to(format!("/p/{id}", id = id))
-}
+    Redirect::to(format!("/p/{id}.{ext}", id = id, ext = ext))
+}

templates/index.html.tera

@@ -3,58 +3,76 @@
 {% block styles %}
 
 html, body {
-overflow-y:hidden;
+    overflow-y:hidden;
 }
 
 body {
-height: 100vh;
-font-family: monospace;
+    height: 100vh;
+    font-family: monospace;
 
-display: flex;
+    display: grid;
 }
 
-form { flex: 1; }
+.grid_form {
+    display: grid;
+    grid-template-columns: 4fr 1fr 1fr;
+    height: 100vh;
+    align-items: start;
+    justify-items: center;
+}
 
 textarea {
-height: 100%;
-width: 100%;
+    height: 90%;
+    width: 100%;
 
-background: none;
-border: none;
+    background: none;
+    border: none;
 
-resize: none;
-overflow: auto;
+    resize: none;
+    overflow: auto;
 
-color: inherit;
-font-family: monospace;
-line-height: inherit;
+    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"] {
-position: absolute;
-bottom: 1rem;
-right: 1rem;
-
-height: 4rem;
-width: 4rem;
-border: none;
-border-radius: 50%;
-background: #F29718;
-
-font-size: 0rem;
-
-cursor: pointer;
+    background-color: #F29718;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    width: 70%;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    cursor: pointer;
 }
 
 *:focus {
-outline: none;
+    outline: none;
 }
 
+select.hidden { display: none; }
 button[type="submit"].hidden { display: none; }
+
 {% endblock styles %}
 
 {% block body %}
 <form action="/submit" method="post">
+<div class=grid_form>
     <textarea name="val" style="resize: none" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" placeholder="
 
 bin(3)                                BIN                               bin(3)
@@ -81,13 +99,7 @@ WEB USAGE
        Tip: Set your browser's monospace font to the one you prefer
 
 CLI USAGE
-       curl \
-           -Ls -o /dev/null \
-           -w %{url_effective} \
-           --data-binary @file.txt \
-           https://bin.wantguns.dev | tee >(xclip -selection clipboard)
-
-       Better use cases of CLI mentioned at Github
+       Client available at /client
 
 SEE ALSO
        github.com/wantguns/bin
@@ -97,15 +109,86 @@ AUTHOR
 " autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
         spellcheck="false"></textarea>
 
-    <button type="submit" title="Paste">&#x2398</button>
+    <select id="ext" name="ext">
+        <option value="txt">Plain Text</option>
+        <option value="asa">ASP</option>
+        <option value="asp">HTML (ASP)</option>
+        <option value="as">ActionScript</option>
+        <option value="applescript">AppleScript</option>
+        <option value="bat">Batch File</option>
+        <option value="build">NAnt Build File</option>
+        <option value="cs">C#</option>
+        <option value="cpp">C++</option>
+        <option value="c">C</option>
+        <option value="css">CSS</option>
+        <option value="clj">Clojure</option>
+        <option value="d">D</option>
+        <option value="diff">Diff</option>
+        <option value="erl">Erlang</option>
+        <option value="yaws">HTML (Erlang)</option>
+        <option value="go">Go</option>
+        <option value="dot">Graphviz (DOT)</option>
+        <option value="groovy">Groovy</option>
+        <option value="html">HTML</option>
+        <option value="hs">Haskell</option>
+        <option value="lhs">Literate Haskell</option>
+        <option value="jsp">Java Server Page (JSP)</option>
+        <option value="java">Java</option>
+        <option value="properties">Java Properties</option>
+        <option value="json">JSON</option>
+        <option value="js">JavaScript</option>
+        <option value="bib">BibTeX</option>
+        <option value="tex">LaTeX</option>
+        <option value="sty">TeX</option>
+        <option value="lisp">Lisp</option>
+        <option value="lua">Lua</option>
+        <option value="make">Makefile</option>
+        <option value="md">Markdown</option>
+        <option value="matlab">MATLAB</option>
+        <option value="ml">OCaml</option>
+        <option value="mll">OCamllex</option>
+        <option value="mly">OCamlyacc</option>
+        <option value="mm">Objective-C++</option>
+        <option value="m">Objective-C</option>
+        <option value="php">PHP</option>
+        <option value="pas">Pascal</option>
+        <option value="pl">Perl</option>
+        <option value="py">Python</option>
+        <option value="R">R</option>
+        <option value="rd">Rd (R Documentation)</option>
+        <option value="rails">HTML (Rails)</option>
+        <option value="js.erb">JavaScript (Rails)</option>
+        <option value="haml">Ruby Haml</option>
+        <option value="rxml">Ruby on Rails</option>
+        <option value="erbsql">SQL (Rails)</option>
+        <option value="re">Regular Expression</option>
+        <option value="rst">reStructuredText</option>
+        <option value="rb">Ruby</option>
+        <option value="rs">Rust</option>
+        <option value="sql">SQL</option>
+        <option value="scala">Scala</option>
+        <option value="sh">Bourne Again Shell (bash)</option>
+        <option value="adp">HTML (Tcl)</option>
+        <option value="tcl">Tcl</option>
+        <option value="textile">Textile</option>
+        <option value="xml">XML</option>
+        <option value="yaml">YAML</option>
+    </select>
+
+    <button type="submit" title="Paste">Paste</button>
+</div>
 </form>
 
 <script>
     const form = document.querySelector('form');
     const input = document.querySelector('textarea');
+    const select = document.querySelector('select');
     const button = document.querySelector('button[type="submit"]');
 
-    const onInput = () => button.classList.toggle('hidden', !input.value);
+    const onInput = () => { 
+            button.classList.toggle('hidden', !input.value);
+            select.classList.toggle('hidden', !input.value);
+        }
     input.addEventListener('input', onInput);
     onInput();