bin/templates/index.html.tera

{% 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: 70%;
    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 %}
<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)

NAME
       bin - A highly opinionated and minamalistic Pastebin

ROUTES
       GET /<id>
           Get raw pastes
       GET /p/<id> 
           Get highlighted pastes 
       GET /p/<id>.<ext> 
           Get syntax highlighted pastes. 
           E.g. https://bin.wantguns.dev/p/foobaz.cpp should return a C++ syntax
           highlighted paste

WEB USAGE
       Drag a file and drop it here, or
       Paste an image from your clipboard using Ctrl + v, or
       After typing, press the big yellow button to paste, or
       Just press Ctrl + Enter once done typing.

       Tip: Set your browser's monospace font to the one you prefer

CLI USAGE
       Client available at /client

SEE ALSO
       github.com/wantguns/bin

AUTHOR
       Gunwant Jain
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
        spellcheck="false"></textarea>

    <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);
            select.classList.toggle('hidden', !input.value);
        }
    input.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
        });
        return response;
    }

    // drag and drop files
    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;

            postData(url, blob)
                .then(data => {
                    window.location.href = data.url + "." + ext;
                })
                .catch(function (err) {
                    console.info(err + " url: " + url);
                });
        }
    }

    function dragOverHandler(ev) {
        ev.preventDefault();
    }

    // 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.url;
                })
                .catch(function (err) {
                    console.info(err + " url: " + url);
                });
        }
    }

</script>
{% endblock body %}