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