jessa
/
inkyboo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various minor improvements

master
Boris Kubiak 2020-04-28 13:49:38 +02:00
parent 83abec6015
commit 9069e4673c
5 changed files with 72 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -1,4 +1,4 @@
lint: lint:
npx prettier --write --single-quote --tab-width=4 --print-width=120 index.js *.{html,css,md} npx prettier@2.0.5 --write --single-quote --tab-width=4 --print-width=120 *.{js,html,css,md}
dev: dev:
npx serve -s npx serve -s

54
README.md
View File

@ -2,9 +2,9 @@
[NoPaste](https://nopaste.ml/) is a client-side paste service which works with **no database**, and **no back-end code** [NoPaste](https://nopaste.ml/) is a client-side paste service which works with **no database**, and **no back-end code**
Instead, the data is **compressed** then **stored** into a unique URL that can be decoded later. For example, [this is the CSS code used by NoPaste][example] Instead, the data is **compressed** then **stored** into a unique URL that can be shared and decoded later. For example, [this is the CSS code used by NoPaste][example]
As a result, there is no risk of data being lost, censored or deleted. The whole data stored is **in the link** and nowhere else! 🤯 As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely **in the links** and nowhere else!
**Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, line wrapping, embedding...) **Note:** This project is a copy of [Topaz's paste service][topaz-example], with a reworked design and a few additional features (syntax highlighting, line numbers, line wrapping, embedding...)
@ -12,9 +12,34 @@ As a result, there is no risk of data being lost, censored or deleted. The whole
When you click on "Generate Link", NoPaste compresses the whole text using the When you click on "Generate Link", NoPaste compresses the whole text using the
[LZMA algorithm](https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Markov_chain_algorithm), encodes it in [LZMA algorithm](https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Markov_chain_algorithm), encodes it in
[Base64](https://en.wikipedia.org/wiki/Base64), and puts it just after the first `/`, in the URL: `nopaste.ml/<your data goes here>` [Base64](https://en.wikipedia.org/wiki/Base64), and puts it in the optional URL fragment, after the first `#` symbol: `nopaste.ml/#<your data goes here>`
When you open a link, NoPaste reads, decodes, and decompresses whatever is after the `/`, and displays the result in the editor When you open a link, NoPaste reads, decodes, and decompresses whatever is after the `#`, and displays the result in the editor.
This process is done entirely **in your browser**, and the web server hosting NoPaste [never has access to the fragment](https://en.wikipedia.org/wiki/Fragment_identifier)
## Maximum sizes for links
NoPaste is great for sharing code snippets on various platforms.
These are the maximum link lengths on some apps and browsers.
| App | Max length |
| ------- | ---------- |
| Reddit | 10,000 |
| Twitter | 4,088 |
| Slack | 4,000 |
| QR Code | 2,610 |
| Bitly | 2,048 |
| Browser | Max length | Notes |
| --------------- | ------------------------- | --------------------------------------- |
| Google Chrome | (win) 32,779 (mac) 10,000 | Will not display, but larger links work |
| Firefox | >64,000 | |
| Microsoft IE 11 | 4,043 | Will not show more than 2,083 |
| Microsoft Edge | 2,083 | Anything over 2083 will fail |
| Android | 8,192 | |
| Safari | Lots | |
## Embedded NoPaste snippets ## Embedded NoPaste snippets
@ -24,6 +49,21 @@ You can include NoPaste code snippets into your own website by clicking the _Emb
Feel free to edit the generated `height` and `width` attributes, so they suit your needs Feel free to edit the generated `height` and `width` attributes, so they suit your needs
[intro-img]: https://nopaste.ml/XQAAAQA6BAAAAAAAAAAFYH9Ev4Ly6wIDoAZQ25VXENWodOrWpmx8bfd8j6jeNeL/0fGICEpU6gh9GhXuFjqBBpJFOvefaxUXJquUWRQarmV+S0SHFOLUFyg/dw8OQI6RB6Y1yliOBWGL916HxAGqgwyLqjkH4w450OLk+q9oJYS6PrZfXU5uBC5DLe76OkG25ibvbsasKN51JuVyRedgoF/d7F9d6L7p02q0jHAM9pnPpKOKqlIVsNnXwYKXK10tnZ0GdiwJ3EeT//52uhw=?lang=python ## Generate NoPaste links
[example]: https://nopaste.ml/XQAAAQAWDQAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY+xe+w0AeNB0EtEDMR1jPECOrMSz2rcy5XqUVTzusmFXo407ujwufsB1Va3cy02BV4Chx15I+SbM8Ei2WS8/MaZa0wIOjHf0s6B9Kcwi1J73qYeIcKm39PEWGnBM4Ym5aXFOF1Irrn1N95vEcl4YI+98rydudZHmsNCmt995GvCpLImwH7yj3SlMadWaQA0jHCrY1ZBvhjSJ9mAAdYjCJLduITZuXomgpqtr3sYI1WKeRGNmPSD8J8WRLtCx0BZl3yWZZrUxJbmVod8cYiPJnlO+CzQA03qA/GZnxhMYd9TPc2Xlq8UIhBX6gmvo/xhHJc/WHnuBFB32xJ37O5FZlZuXGy6wFE/lakVteoqEqgvyaoBBB7p/UrGWZ0h4Wd8Hc3ceZ7KjJwmu2wLmbnWNnZ+bpusiwWhRNzdD/7u4a0FLd21QpiH8iXr9oQOFOctkswDCs8h1dio2ZWUFDAqVC586qrdFgrKRtCuJF9Zwlf2tQLY0BvyiK0c5EedA1rXK55OevIfKb6FVCUIbJVbcV/F9HpOY94Dha5mrokfqF7zj2fzRHR/1y2LEfmnt/wxN3Y5nwbm5rH6NDsCKadz9f0HzqVmgXW6p5SaxcT472M8dwmLM6yxNp5af7bpn33zyJhBhQifJciHOVJX+7oU7hfU/dmmt2fknBqRYv1WDbypIDe1TeKBba9sW7XFJChXGjZRhtinSL94WtDc7/l/USbiv9iAfBAVHs0XzU7naUtAKUFLyDqo4UWpauv4sNzaA7n5BbvPm+/xz+0uVgBsZBUyLpz/OUNGYaqbGFv44IVt99K3/cJwu8najWju0S6JJzZsSdI4CY4fHQ8bcI+WPUDzf49CE9hxZIVO5dCjmtnXs68RqSD4/wq6IwIGS6d8oku/0R/InHjqE2dZa0tU2Ko8DIIgrDnW1DNt89D/gWOQFOXN5+o3Mp1vgQL6AImLzudbiVamcAkrAVbRDcaq3AeI3dH1gKkvDUvpbSJuc+yPFRtnDByfTxt1EQCmbbCLck2UHQF4tWtJ2eQT4ICYborFh6Ams1TsOAUua5xqYGo9HXtDLeWcz21rNOtnc+Jtc+AtMg2UmEMZJXm+Jk/n280FNm+B6hbkafsHDJNQKyxCFX+N7/1yfwgVCkCKd3Hrad8ETI5rgso718tUiC0i4odYMpHCw2WfKUZm2DCUzmcEW9v8PWIM8okPFM+NgWNhusqQsilOu3RePRWdzdMpz/vt4w6qMJZMKDq/7C8eDPoxomrVCd++WA1v7qL46pT9ivyEMoQtagUsCaaj92Y9EoVkL5BbSl9yEkRA2LEIZf//FGYpQ97eu0KWgHDpGIdoQPh7RQB7oJgSA4i2x9n6iYn0HrlJKGgw+QXskkrBlWZsxua/6MWK/bqga14G3PqoB0CFXMhRcf4d4xUJiwUURFsaisIaMQM6Sy2O9TQN8wjEE7XYRTAgLfVIG8QyH3sBqXp00UaFouDRv0jRybuh0I1weudvBlJXcpTb6S0r2DjVr0u7Uy5b9LojNdXkuMZh4vGX5ZfW0bs2H0WPG5+11buP4A4u8IXIMD76Yt+p3GylpzO1PXbIjLhP5FnEc=?lang=css
[topaz-example]: https://topaz.github.io/paste/#XQAAAQDzAAAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXgSRMepMuokjoACV4UPgBzwM3p+V/N2rCi8m90FkQfsRuMJ4LrZVFgr81wKDc2okcywbJBz7OGNPpc8xu2lAkpSekqRO+I/OYMpqBE6w6JLw+cFocCptTbd+jBPuNfBVQrhYyQ3mN0BXmj+rejvVB8jG6J/HPP4u+m32pm0UBS0eb8rmaeDnanRkVI8/gs09nh8YK93sjVfIOAYOXoB2da//bUcos= NoPaste links can be created easily from your system's command line:
```bash
# Linux
echo -n 'Hello World' | lzma | base64 | xargs -0 printf "https://nopaste.ml/#%s"
# Mac
echo -n 'Hello World' | lzma | base64 -w0 | xargs -0 printf "https://nopaste.ml/#%s"
# Windows / WSL
echo -n 'Hello World' | xz --format=lzma | base64 -w0 | printf "https://nopaste.ml/#%s" "$(cat -)"
```
[intro-img]: https://nopaste.ml/?lang=python#XQAAAQA6BAAAAAAAAAAFYH9Ev4Ly6wIDoAZQ25VXENWodOrWpmx8bfd8j6jeNeL/0fGICEpU6gh9GhXuFjqBBpJFOvefaxUXJquUWRQarmV+S0SHFOLUFyg/dw8OQI6RB6Y1yliOBWGL916HxAGqgwyLqjkH4w450OLk+q9oJYS6PrZfXU5uBC5DLe76OkG25ibvbsasKN51JuVyRedgoF/d7F9d6L7p02q0jHAM9pnPpKOKqlIVsNnXwYKXK10tnZ0GdiwJ3EeT//52uhw=
[example]: https://nopaste.ml/?lang=css#XQAAAQB2DQAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY+xe+w0AeNB0EtEDMR1jPECOrMSz2rcy5XqUVTzusmFXo407ujwufsB1Va3cy02BV4Chx15I+SbM8Ei2WS8/MaZa0wIOjHf0s6B9Kcwi1J73qYeIcKm39PEWGnBM4Ym5aXFOF1Irrn1N95vEcl4YI+98rydudZHmsNCmt995GvCpLImwH7yj3SlMadWaQA0jHCrY1ZBvhjSJ9mAAdYjCJLduITZuXomgpqtr3sYI1WKeRGNmPSD8J8WRLtCx0BZl3yWZZrUxJbmVod8cYiPJnlO+CzQA03qA/GZnxhMYd9TPc2Xlq8UIhBX6gmvo/xhHJc/WHnuBFB32xJ37O5FZlZuXGy6wFE/lakVteoqEqgvyan4LfaiL0pMfYapWjV8YoPa/KyVGugANNjvtRw0hRr+Z1IgKoVL2a1xqvQiB65vIXkw68/ui82O1ko9HTbsLMHX/2/CgWZ8TkTEvgr0+dzVqQYIpaWpB3hDnUTHMkG2UehM5iJyJXAgODNqk8IiWCJn5k/j2FeFpchSTWdgi7AeaCowubmWnFTNgNFXLf5zzARWBUGQFT55TiC0ah4HL17jG3rY6fXvAXlm6CWc88ne7wF0opHkLnhfPslssDYo75hDmCfYwJ6asQ/YBkSuuLJjdCEXVjF7Pdw2FhsOiiB0gNXC6ehieM28M+PMGSDRqt0Q0KveMgE44YJ8zFOvpu2Gg41qDkrsYS7Xb/iMnHz66tt69I1rGzrHx88PuI2/CZx+kv+z7a+/Eiq4JC3KTDx4IbNUYptmrIOC2bxGrcjd8TBKGe+dNi8a/PEnXrUXc/OD7D680/Awo+scE8VKuRVN5R7OPg0tmKVQSQkyCf+I3//kGmREyhh6/bCv6tvbEc7hNPNE1js2svlVBF001JlLY7g1w6ls2pjxrKxuCLrkjba1n4s5WlfrbwcX18rqgbfL2tVibHggsy3Lgq4i7fXtuO3JifxfauO66YIRjEWFnACrHbZ14FbHDMylN7GMvo5TusxestU0s6+kiibWq2qZVpi7C5JVKURNQrGEabICn5nUDoOPMZSfNrdmlTOhu4qjKW09XdQPNazTMc83KjG1YOKNjRP23i1oav5muBFRGMDkSXt7wCgv5PCpLZM9w2jC5GCa5oHuH92IWJu5d80fvTRw3GxNQzfMRxgjzfH6xxrzu+EghhbzayUhb3U5aSRSxOtPTPfjT9mxgk7j3f1mRlbYheuhko4/LBIKYvfA5CnN2Yr3VyBYqoZ/ZgP871LU0ix8ZLeaecao0SDj6V35bZ6RB53mcU8BRPfcyZhj0H6BrFcrcfXKVwnNVro/cIrwnoG3GwlpCXGYJmDDeUdlbBj2HrVmvMncd3w8SzPtxw5RAWQP9YPJdE4Tc490BMX4zAkPqirRHLcxG/K5ECLtKtGsnCkg24+XwFo4XRcGfMsbkSSYD7oZ2HkD+1NXYqJKgk+7uee+yrYCZF6xbsb0ca/7r3w8nU9DueSa6XPiaCLSeJ+phw8iK1U4+FcCzqLW4LzgfcGjz64+HM+Xst0YuqzrAI2RU80H2Mr0FnC/qL+klbM+p0yNUBxBd4IQ64SJmh6Irgi7fZq2wfuTuVEAI1qKKwGwBQ6x9UDyY/OqkD63mtRL//oHeipA==
[topaz-example]: https://topaz.github.io/paste/#XQAAAQADAQAAAAAAAAAFFgvDUiqpf8dDPleMqfsqtbQYE28suCtDTB9iyFgGByXgSRMepMuokjoACV4UPgBzwM3p+V/N2rCi8m90FkQfsRuMJ4LrZVFgr81wKDc2okcywbJBz7OGNPpc8xu2lAkpSekqRO+I/OYUUvgB2ckKBp+2avxmAKn6H73WV3t1D5Ip9hwthecGUnLwFSGpPFNI0zb4Ettx7QnIu6NiftBuencR3Bn/l3BNoh8M5NQL2MoInMQAnQ1gGwSQg6uEnIvK70ERxjllyP2v2fH/N5CRAA==

16
index.html
View File

@ -7,6 +7,7 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/> />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>NoPaste - No-database paste service</title> <title>NoPaste - No-database paste service</title>
<link <link
rel="stylesheet" rel="stylesheet"
@ -23,8 +24,9 @@ npm/codemirror@5.52.0/theme/dracula.min.css
<link href="/favicon.ico" rel="icon" type="image/x-icon" /> <link href="/favicon.ico" rel="icon" type="image/x-icon" />
<meta <meta
name="description" name="description"
content="NoPaste is a client-side paste service which works with no database, and no back-end code. The whole data is stored in the generated links and nowhere else" content="NoPaste is a client-side paste service which works with no database, and no back-end code. The data is stored entirely in the links and nowhere else"
/> />
<link rel="canonical" href="https://nopaste.ml/" />
</head> </head>
<body class="m-0"> <body class="m-0">
<script> <script>
@ -124,10 +126,14 @@ npm/codemirror@5.52.0/theme/dracula.min.css
<div id="description" class="hidden shadow-bottom p-3"> <div id="description" class="hidden shadow-bottom p-3">
NoPaste is a client-side paste service which works with <b>no database</b>, and NoPaste is a client-side paste service which works with <b>no database</b>, and
<b>no back-end code</b>.<br /><br /> <b>no back-end code</b>.<br /><br />
Instead, the data is <b>compressed</b> then <b>stored</b> into a unique link that can be decoded Instead, the data is <b>compressed</b> then <b>stored</b> into a unique URL that can be shared and
later.<br /><br /> decoded later.<br /><br />
As a result, there is no risk of data being lost, censored or deleted. The whole data is stored
<b>in the link</b> and nowhere else! As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely
<b>in the links</b> and nowhere else!<br /><br />
You can find more detailed information on
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank">Github</a>
</div> </div>
</div> </div>
<svg class="hidden"> <svg class="hidden">

21
index.js
View File

@ -6,7 +6,14 @@ let select = null;
let clipboard = null; let clipboard = null;
let statsEl = null; let statsEl = null;
const initCodeEditor = (initialValue) => { const init = () => {
initCodeEditor();
initLangSelector();
initCode();
initClipboard();
};
const initCodeEditor = () => {
CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js'; CodeMirror.modeURL = 'https://cdn.jsdelivr.net/npm/codemirror@5.52.0/mode/%N/%N.js';
editor = new CodeMirror(byId('editor'), { editor = new CodeMirror(byId('editor'), {
lineNumbers: true, lineNumbers: true,
@ -14,18 +21,15 @@ const initCodeEditor = (initialValue) => {
readOnly: readOnly, readOnly: readOnly,
lineWrapping: false, lineWrapping: false,
scrollbarStyle: 'simple', scrollbarStyle: 'simple',
value: initialValue,
}); });
if (readOnly) { if (readOnly) {
document.body.classList.add('readonly'); document.body.classList.add('readonly');
} }
statsEl = byId('stats'); statsEl = byId('stats');
statsEl.innerHTML = `Length: ${initialValue.length} | Lines: ${editor['doc'].size}`;
editor.on('change', () => { editor.on('change', () => {
statsEl.innerHTML = `Length: ${editor.getValue().length} | Lines: ${editor['doc'].size}`; statsEl.innerHTML = `Length: ${editor.getValue().length} | Lines: ${editor['doc'].size}`;
}); });
initLangSelector();
}; };
const initLangSelector = () => { const initLangSelector = () => {
@ -50,16 +54,14 @@ const initLangSelector = () => {
const initCode = () => { const initCode = () => {
const base64 = location.pathname.substr(1) || location.hash.substr(1); const base64 = location.pathname.substr(1) || location.hash.substr(1);
if (base64.length === 0) { if (base64.length === 0) {
initCodeEditor('');
return; return;
} }
decompress(base64, (code, err) => { decompress(base64, (code, err) => {
if (err) { if (err) {
alert('Failed to decompress data: ' + err); alert('Failed to decompress data: ' + err);
initCodeEditor('');
return; return;
} }
initCodeEditor(code); editor.setValue(code);
}); });
}; };
@ -130,7 +132,7 @@ const openInNewTab = () => {
const buildUrl = (rawData, mode) => { const buildUrl = (rawData, mode) => {
const base = `${location.protocol}//${location.host}/`; const base = `${location.protocol}//${location.host}/`;
const query = `?lang=${encodeURIComponent(select.selected())}`; const query = `?lang=${encodeURIComponent(select.selected())}`;
const url = rawData.length <= 4000 ? base + rawData + query : base + query + '#' + rawData; const url = base + query + '#' + rawData;
if (mode === 'markdown') { if (mode === 'markdown') {
return `[NoPaste snippet](${url})`; return `[NoPaste snippet](${url})`;
} }
@ -210,5 +212,4 @@ const testAllModes = () => {
} }
}; };
initCode(); // Will decode URL, create code editor, and language selector init();
initClipboard();

2
style.css
View File

@ -57,6 +57,8 @@ a,
a:hover, a:hover,
a:active { a:active {
color: #fff; color: #fff;
}
#controls a {
text-decoration: none; text-decoration: none;
} }
.CodeMirror { .CodeMirror {