M README.md → README.md

@@ -2,17 +2,18 @@ [![Intro](https://github.com/bokub/nopaste/raw/images/intro.png)][intro-img]
 
 # 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...)
 

M index.html → index.html

@@ -58,26 +58,15 @@ <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 @@ <div id="editor"></div>
         <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 @@ </footer>
         <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>

M script.js → script.js

@@ -48,6 +48,7 @@ onChange: (e) => {
             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 @@ return;
     }
     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);

M style.css → style.css

@@ -64,6 +64,10 @@ #controls a,
 #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 @@ display: block;
 }
 .modal-content {
     background-color: #3b3b47;
-    max-width: 500px;
+    max-width: 600px;
     max-height: 100vh;
     overflow-y: auto;
     box-sizing: border-box;