Improve UI and error handling
Boris Kubiak
parent
cc766d60db
commit
7e47ecf9b7
15
README.md
15
README.md
|
|
@ -2,17 +2,18 @@
|
|||
|
||||
# What is NoPaste?
|
||||
|
||||
[NoPaste](https://nopaste.ml/) is a website similar to Pastebin where you can store any text or code, and generate links for easy sharing
|
||||
[NoPaste](https://nopaste.ml/) is an open-source website similar to Pastebin where you can store any piece of code, and generate links for easy sharing
|
||||
|
||||
However, what makes NoPaste special is that it works with **no database**, and **no back-end code**. Instead, the data is compressed and **stored entirely in the link** that you share, nowhere else!
|
||||
|
||||
### Because of this design:
|
||||
- 🗑️ Your data **cannot be deleted** from NoPaste
|
||||
- 🔞 Your data **cannot be censored**
|
||||
- 👁️ The server hosting NoPaste (or any clone of it) **cannot read or access** your data
|
||||
- ⏳ Your data will be accessible **forever** (as long as you have the link)
|
||||
- 🔀 You can access your data on **every NoPaste clone**, including [your own](https://github.com/bokub/nopaste/wiki/Deploy-your-own-version-of-NoPaste)
|
||||
- 🔍 Google **will not index** your data, even if your link is publically available
|
||||
|
||||
- 🗑️ Your data **cannot be deleted** from NoPaste
|
||||
- 🔞 Your data **cannot be censored**
|
||||
- 👁️ The server hosting NoPaste (or any clone of it) **cannot read or access** your data
|
||||
- ⏳ Your data will be accessible **forever** (as long as you have the link)
|
||||
- 🔀 You can access your data on **every NoPaste clone**, including [your own](https://github.com/bokub/nopaste/wiki/Deploy-your-own-version-of-NoPaste)
|
||||
- 🔍 Google **will not index** your data, even if your link is public
|
||||
|
||||
> **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...)
|
||||
|
||||
|
|
|
|||
58
index.html
58
index.html
|
|
@ -57,27 +57,16 @@ npm/microtip@0.2.2/microtip.min.css
|
|||
<h1 class="my-0"><span>{</span> NoPaste <span>}</span></h1>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a
|
||||
href="https://github.com/bokub/nopaste"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
class="mx-1"
|
||||
aria-label="Source code"
|
||||
data-microtip-position="bottom"
|
||||
role="tooltip"
|
||||
>
|
||||
<span class="icon-github"></span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="mx-1"
|
||||
aria-label="What is NoPaste?"
|
||||
class="mx-3"
|
||||
aria-label="Click to know more about NoPaste"
|
||||
data-microtip-position="bottom"
|
||||
role="tooltip"
|
||||
data-micromodal-trigger="description-modal"
|
||||
>About</a
|
||||
>
|
||||
<span class="mx-2 icon-question"></span>
|
||||
</a>
|
||||
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="mx-3">Source</a>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
<div class="col-auto my-1">
|
||||
|
|
@ -122,7 +111,7 @@ npm/microtip@0.2.2/microtip.min.css
|
|||
<footer id="footer" class="shadow-top container-fluid">
|
||||
<div class="row my-1">
|
||||
<div class="col mono hide-readonly" id="stats">Length: 0 | Lines: 1</div>
|
||||
<div class="col mono show-readonly">Hosted on NoPaste.ml</div>
|
||||
<div class="col mono show-readonly">Powered by NoPaste</div>
|
||||
<div class="col-auto mono show-readonly">
|
||||
<a href="javascript:void(0)" onclick="openInNewTab()">
|
||||
<span class="icon-edit"></span>
|
||||
|
|
@ -134,16 +123,37 @@ npm/microtip@0.2.2/microtip.min.css
|
|||
<div id="description-modal" class="modal">
|
||||
<div tabindex="-1" data-micromodal-close class="modal-overlay">
|
||||
<div role="dialog" class="modal-content shadow-bottom p-3 m-3" data-micromodal-close>
|
||||
NoPaste is a client-side paste service which works with <span class="pink">no database</span>, and
|
||||
<span class="pink">no back-end code</span>.<br /><br />
|
||||
Instead, the data is <span class="pink">compressed</span> then <span class="pink">stored</span> into a unique URL that
|
||||
can be shared and decoded later.<br /><br />
|
||||
<h2 class="mt-0">What is NoPaste?</h2>
|
||||
|
||||
As a result, there is no risk of data being lost, censored or deleted. The data is stored entirely
|
||||
<span class="pink">in the links</span> and nowhere else!<br /><br />
|
||||
<span class="pink">NoPaste</span> is an open-source website similar to Pastebin where you can store any piece of code,
|
||||
and generate links for easy sharing<br /><br />
|
||||
|
||||
You can find more detailed information on
|
||||
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank">Github</a>
|
||||
However, what makes NoPaste special is that it works with <span class="pink">no database</span>, and
|
||||
<span class="pink">no back-end code</span>.<br />
|
||||
Instead, the data is compressed and <span class="pink">stored entirely in the link</span> that you share, nowhere else!
|
||||
|
||||
<h3>Because of this design:</h3>
|
||||
🗑️ Your data <span class="pink">cannot be deleted</span> from NoPaste<br />
|
||||
🔞 Your data <span class="pink">cannot be censored</span><br />
|
||||
👁️ The server hosting NoPaste (or any clone of it) <span class="pink">cannot read or access</span> your data<br />
|
||||
⏳ Your data will be accessible <span class="pink">forever</span> (as long as you have the link)<br />
|
||||
🔀 You can access your data on <span class="pink">every NoPaste clone</span>, including
|
||||
<a href="https://github.com/bokub/nopaste/wiki/Deploy-your-own-version-of-NoPaste" rel="noopener" target="_blank"
|
||||
>your own</a
|
||||
><br />
|
||||
🔍 Google <span class="pink">will not index</span> your data, even if your link is public<br />
|
||||
<br />
|
||||
If you want to know more, you can find more information on
|
||||
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="pink">Github</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="error-modal" class="modal">
|
||||
<div tabindex="-1" data-micromodal-close class="modal-overlay">
|
||||
<div role="dialog" class="modal-content shadow-bottom p-3 m-3" data-micromodal-close>
|
||||
NoPaste cannot decompress the URL<br /><br />
|
||||
It's possible that you clicked on an invalid link<br /><br />
|
||||
Sorry about that
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ const initLangSelector = () => {
|
|||
const language = e.data || { mime: null, mode: null };
|
||||
editor.setOption('mode', language.mime);
|
||||
CodeMirror.autoLoadMode(editor, language.mode);
|
||||
document.title = e.text && e.text !== 'Plain Text' ? `NoPaste - ${e.text} code snippet` : 'NoPaste';
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -63,7 +64,8 @@ const initCode = () => {
|
|||
}
|
||||
decompress(base64, (code, err) => {
|
||||
if (err) {
|
||||
alert('Failed to decompress data: ' + err);
|
||||
console.error('Failed to decompress data: ' + err);
|
||||
MicroModal.show('error-modal');
|
||||
return;
|
||||
}
|
||||
editor.setValue(code);
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@ a:focus {
|
|||
#footer a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#controls a:hover {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
height: 100%;
|
||||
font-family: JetBrainsMono, sans-serif;
|
||||
|
|
@ -89,7 +93,7 @@ h1 {
|
|||
}
|
||||
.modal-content {
|
||||
background-color: #3b3b47;
|
||||
max-width: 500px;
|
||||
max-width: 600px;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
Loading…
Reference in New Issue