Add line-wrapping feature & a few icons
Boris Kubiak
parent
05b601792e
commit
8991febab3
|
|
@ -6,7 +6,7 @@ Instead, the data is **compressed** then **stored** into a unique URL that can b
|
|||
|
||||
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! 🤯
|
||||
|
||||
**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, 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...)
|
||||
|
||||
## How it works
|
||||
|
||||
|
|
@ -25,5 +25,5 @@ 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
|
||||
|
||||
[intro-img]: https://nopaste.ml/XQAAAQA6BAAAAAAAAAAFYH9Ev4Ly6wIDoAZQ25VXENWodOrWpmx8bfd8j6jeNeL/0fGICEpU6gh9GhXuFjqBBpJFOvefaxUXJquUWRQarmV+S0SHFOLUFyg/dw8OQI6RB6Y1yliOBWGL916HxAGqgwyLqjkH4w450OLk+q9oJYS6PrZfXU5uBC5DLe76OkG25ibvbsasKN51JuVyRedgoF/d7F9d6L7p02q0jHAM9pnPpKOKqlIVsNnXwYKXK10tnZ0GdiwJ3EeT//52uhw=?lang=python
|
||||
[example]: https://nopaste.ml/XQAAAQAJCgAAAAAAAAAXioAj/ZZaukKWizx++f8w08qY4GA8LGtu7D/+DJgBVbs7/H2nJiaW8ID1VsHyIYWju5V2entWd4LyJ3xLdIHOdqb6g4zCuKHW0LDkvxJASgscbV2ZWQYLqVAGQt2rZZb+5p53hL6Z3WVof2ddJK47JK2Q1NCpMOZAcKeH9qzh9kDYOOB3NrWiyPoQMYdvZrGIhl7witUWpqgp6yr+ktHW4199Cdzdx1pOwNcRHkMIf8lCsLbb3O0QELaOwY11bn1qgoSFSRSNdClnM3V8rZkAAhE3RbRh0zUBGqjBkDqa0Yjw5ZrNIIm1v8aSd0s2ygAcrwfWhm1vQEfJLbScPHXYJ2zeB6QYodQyRb47gvQ2KTVGJhmfJaeh4/9Vz1lArsRUhbXrTOl4fS1tOI+etrSMv1tkPP12MrEGUjFPiioVd+RIOWG+g9AFKte9YJM5E5XQgOiOAnt/O4eHw+Hd3ssC+Y5MpZXlSUck3v0Vzn3mW0NyygeT3VpdvtruJ2WMXvPAkF9nHbf2DCIVf5TOCqhLOtDrhYENn225Suw3XVhp9U7mzCNLIXFMZdFGNMhXQDaGgo9gxRiSVurY6BeUKGezHjcSCJKszaweI3/+FDdb7hKVHXzCppXITy5tEI41fOzJ54l3cDn9G0oGl8wrNdP5Enp5y/R+NwXq2LJra1oDYUO8E1A+Kk3c5w6z5Vq1+qgWlzjdIgkQ+7a3Aycnl43zA+cPNMHJaJ+HyaMUxCOp/NX++0Cq3EVfuPAQddyP+hewz0q479ktMOQf+f6a+D0Kkz4U47LIBA+6cN9vy07MSZyy0txqWbXVC6HmxeVrhfR9VrshwwvZniXuDewi8+jm0hhr0KosTLs+8pjbqrB7du2szOIJUEzdB5AaFROEoTUL8BWHFGnLmh42kujEKrGdaMrDdm6MgA9qRg7ioyFAvhvrLZ33zMDgNRtQ3rMmtYusQOx2XAtTtHQQI5fwuRck0ZWPeVMUFLo8AcCl06kNwtG8XxnRzkRaoiieulaOi2kVEUl/FBBgKt08Xar1j5xTlV0VtL0NLIAC8LqGtyjqvZUxafmwAHZc/16zBnylT1v4mJfCgJa+Y/Inj9OFDQL5yPa5crUoDEdjtyFQCOo6pVd189UkR/PhNp4LyZT9llIyzfcSqtMN235OxHcwc6WWek5P0/sN+Kq1PS//UrDrBtvl0XFegyPa3AO5F+67vjmJNdmogMVxI3cffIsYG123ujkiRHNcU/uT7XJhw6xMPu/e10HiMEz/8VclWg==?lang=css
|
||||
[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=
|
||||
|
|
|
|||
94
index.html
94
index.html
|
|
@ -23,7 +23,7 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
|
||||
<meta
|
||||
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 shareable links and nowhere else!"
|
||||
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"
|
||||
/>
|
||||
</head>
|
||||
<body class="m-0">
|
||||
|
|
@ -53,18 +53,48 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
</div>
|
||||
<div id="controls" class="container-fluid shadow-bottom hide-readonly">
|
||||
<div class="row align-items-center justify-content-end my-1">
|
||||
<div class="col mb-1">
|
||||
<div class="col-auto mb-1">
|
||||
<h1 class="title my-0">{ NoPaste }</h1>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="mx-1">
|
||||
<svg class="icon"><use xlink:href="#icon-github"></use></svg>
|
||||
</a>
|
||||
<a href="javascript:void(0)" onclick="byId('overlay').classList.remove('hidden')" class="mx-1">
|
||||
<svg class="icon mx-2"><use xlink:href="#icon-question"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col-auto my-1">
|
||||
<select id="language"></select>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<button class="py-1 px-2 mx-0" onclick="generateLink('url')" type="button">Generate link</button>
|
||||
<button class="py-1 px-2 mx-1" onclick="generateLink('markdown')" type="button">
|
||||
<div class="col-auto">
|
||||
<button
|
||||
onclick="enableLineWrapping()"
|
||||
type="button"
|
||||
id="enable-line-wrapping"
|
||||
title="Enable line wrapping"
|
||||
class="hidden"
|
||||
>
|
||||
<svg class="icon"><use xlink:href="#icon-notes"></use></svg>
|
||||
</button>
|
||||
<button
|
||||
onclick="disableLineWrapping()"
|
||||
type="button"
|
||||
id="disable-line-wrapping"
|
||||
title="Disable line wrapping"
|
||||
>
|
||||
<svg class="icon"><use xlink:href="#icon-wrap-text"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="py-1 px-2 mx-0 my-1" onclick="generateLink('url')" type="button">
|
||||
Generate link
|
||||
</button>
|
||||
<button class="py-1 px-2 mx-1 my-1" onclick="generateLink('markdown')" type="button">
|
||||
Generate markdown
|
||||
</button>
|
||||
<button class="py-1 px-2 mx-0" onclick="generateLink('iframe')" type="button">Embed</button>
|
||||
<button class="py-1 px-2 mx-0 my-1" onclick="generateLink('iframe')" type="button">Embed</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,24 +103,55 @@ npm/codemirror@5.52.0/theme/dracula.min.css
|
|||
<footer id="footer" class="shadow-top container-fluid">
|
||||
<div class="row my-1">
|
||||
<div class="col mono" id="stats"></div>
|
||||
<div class="col-auto">
|
||||
<a href="javascript:void(0)" class="description-trigger">What is NoPaste?</a>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="hidden" id="overlay" onclick="this.classList.add('hidden')">
|
||||
<div id="description" class="hidden shadow-bottom p-3">
|
||||
NoPaste is a client-side paste service which works with <b>no database</b>, and
|
||||
<b>no back-end code</b>.<br /><br />
|
||||
Instead, the data is <b>compressed</b> then <b>stored</b> into a unique URL that can be decoded
|
||||
Instead, the data is <b>compressed</b> then <b>stored</b> into a unique link that can be 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!
|
||||
</div>
|
||||
<div class="hidden" id="overlay"></div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<svg class="hidden">
|
||||
<defs>
|
||||
<symbol id="icon-wrap-text" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17.016 11.016q1.641 0 2.813 1.172t1.172 2.813-1.172 2.813-2.813 1.172h-2.016v2.016l-3-3
|
||||
3-3v2.016h2.25q0.797 0 1.406-0.609t0.609-1.406-0.609-1.406-1.406-0.609h-13.266v-1.969h13.031zM20.016
|
||||
5.016v1.969h-16.031v-1.969h16.031zM3.984 18.984v-1.969h6v1.969h-6z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="icon-notes" viewBox="0 0 24 24">
|
||||
<path d="M3 12.984v-1.969h18v1.969h-18zM3 6h18v2.016h-18v-2.016zM3 18v-2.016h12v2.016h-12z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-github" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.3471.094-0.77
|
||||
0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993
|
||||
0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74
|
||||
1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234
|
||||
0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070
|
||||
4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743
|
||||
7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925
|
||||
1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="icon-question" viewBox="0 0 17 28">
|
||||
<path
|
||||
d="M11 19.625v3.75c0 0.344-0.281 0.625-0.625 0.625h-3.75c-0.344 0-0.625-0.281-0.625-0.625v-3.75c0-0.344
|
||||
0.281-0.625 0.625-0.625h3.75c0.344 0 0.625 0.281 0.625 0.625zM15.937 10.25c0 2.969-2.016 4.109-3.5 4.937-0.922
|
||||
0.531-1.5 1.609-1.5 2.063v0c0 0.344-0.266 0.75-0.625 0.75h-3.75c-0.344 0-0.562-0.531-0.562-0.875v-0.703c0-1.891
|
||||
1.875-3.516 3.25-4.141 1.203-0.547 1.703-1.062 1.703-2.063 0-0.875-1.141-1.656-2.406-1.656-0.703 0-1.344
|
||||
0.219-1.687 0.453-0.375 0.266-0.75 0.641-1.672 1.797-0.125 0.156-0.313 0.25-0.484 0.25-0.141
|
||||
0-0.266-0.047-0.391-0.125l-2.562-1.953c-0.266-0.203-0.328-0.547-0.156-0.828 1.687-2.797 4.062-4.156
|
||||
7.25-4.156 3.344 0 7.094 2.672 7.094 6.25z"
|
||||
></path>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
<script src="https://cdn.jsdelivr.net/combine/
|
||||
npm/lzma@2.3.2/src/lzma.min.js,
|
||||
npm/slim-select@1.25.0/dist/slimselect.min.js,
|
||||
|
|
@ -104,4 +165,5 @@ npm/codemirror@5.52.0/addon/scroll/simplescrollbars.js,
|
|||
npm/codemirror@5.52.0/mode/meta.min.js
|
||||
"></script>
|
||||
<script src="/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
16
index.js
16
index.js
|
|
@ -20,6 +20,7 @@ const initCodeEditor = () => {
|
|||
lineNumbers: true,
|
||||
theme: 'dracula',
|
||||
readOnly: readOnly,
|
||||
lineWrapping: true,
|
||||
scrollbarStyle: 'simple',
|
||||
});
|
||||
if (readOnly) {
|
||||
|
|
@ -90,10 +91,11 @@ const generateLink = (mode) => {
|
|||
|
||||
// Open the "Copy" bar and select the content
|
||||
const showCopyBar = (dataToCopy) => {
|
||||
byId('copy').classList.remove('hidden');
|
||||
const linkInput = byId('copy-link');
|
||||
linkInput.value = dataToCopy;
|
||||
linkInput.focus();
|
||||
linkInput.setSelectionRange(0, dataToCopy.length);
|
||||
byId('copy').classList.remove('hidden');
|
||||
};
|
||||
|
||||
// Close the "Copy" bar
|
||||
|
|
@ -111,6 +113,18 @@ const hideCopyBar = (success) => {
|
|||
}, 800);
|
||||
};
|
||||
|
||||
const disableLineWrapping = () => {
|
||||
byId('disable-line-wrapping').classList.add('hidden');
|
||||
byId('enable-line-wrapping').classList.remove('hidden');
|
||||
editor.setOption('lineWrapping', false);
|
||||
};
|
||||
|
||||
const enableLineWrapping = () => {
|
||||
byId('enable-line-wrapping').classList.add('hidden');
|
||||
byId('disable-line-wrapping').classList.remove('hidden');
|
||||
editor.setOption('lineWrapping', true);
|
||||
};
|
||||
|
||||
// Build a shareable URL
|
||||
const buildUrl = (rawData, mode) => {
|
||||
const url = `${location.protocol}//${location.host}/` + rawData + `?lang=${encodeURIComponent(select.selected())}`;
|
||||
|
|
|
|||
30
style.css
30
style.css
|
|
@ -56,6 +56,7 @@ a,
|
|||
a:hover,
|
||||
a:active {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
|
|
@ -68,23 +69,23 @@ a:active {
|
|||
.mono {
|
||||
font-family: JetBrainsMono, sans-serif;
|
||||
}
|
||||
.description-trigger:hover + #description {
|
||||
#description {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
margin: 40px;
|
||||
right: 0;
|
||||
max-width: 350px;
|
||||
top: 0;
|
||||
margin: 45px;
|
||||
left: 0;
|
||||
max-width: 370px;
|
||||
}
|
||||
.description-trigger:hover + #description + #overlay {
|
||||
#overlay {
|
||||
/* Used to un-hover on mobile */
|
||||
display: block;
|
||||
position: fixed;
|
||||
background: transparent;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 25px;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#description b {
|
||||
|
|
@ -155,3 +156,14 @@ button:hover {
|
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.icon {
|
||||
display: inline-block;
|
||||
font-size: 21px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue