bin/templates/index.html.tera
Gunwant Jain fbc92b669d index: drag & drop redirects to the syntax highlighted pages
Signed-off-by: Gunwant Jain <mail@wantguns.dev>
2021-07-11 15:50:04 +05:30

173 lines
3.9 KiB
Plaintext

{% extends "base" %}
{% block styles %}
html, body {
overflow-y:hidden;
}
body {
height: 100vh;
font-family: monospace;
display: flex;
}
form { flex: 1; }
textarea {
height: 100%;
width: 100%;
background: none;
border: none;
resize: none;
overflow: auto;
color: inherit;
font-family: monospace;
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;
}
*:focus {
outline: none;
}
button[type="submit"].hidden { display: none; }
{% endblock styles %}
{% block body %}
<form action="/submit" method="post">
<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
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
SEE ALSO
github.com/wantguns/bin
AUTHOR
Gunwant Jain
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false"></textarea>
<button type="submit" title="Paste">&#x2398</button>
</form>
<script>
const form = document.querySelector('form');
const input = document.querySelector('textarea');
const button = document.querySelector('button[type="submit"]');
const onInput = () => button.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 %}