update: better language

- Add click event to the logo in actions.js
- Update documentation in docs.html

src/css/index.css

@@ -75,6 +75,10 @@ body {
     margin: 0 5px;
 }
 
+#logo {
+    cursor: pointer;
+}
+
 /* marquee */
 .banner {
     margin: 5px 0;

src/js/events/actions.js

@@ -40,6 +40,10 @@ function registerActions() {
         makeRandomPaste(null);
     });
 
+    $("#logo").on("click", () => {
+        promptNotification();
+    });
+
     registerSupport();
 }
 
@@ -93,4 +97,12 @@ function makeRandomPaste(lang) {
     toggleHelp();
 }
 
-export { registerActions, makeRandomPaste };
+function promptNotification() {
+    const agreement = $("#notification");
+    if (agreement.children().length === 1) {
+        const html = agreement.html();
+        alertify.alert("Notification 🔔", html);
+    }
+}
+
+export { registerActions, makeRandomPaste, promptNotification };

src/js/state.js

@@ -1,7 +1,5 @@
-import $ from "~/vendor/jquery-extensions";
-import { makeRandomPaste } from "~/events/actions";
+import { makeRandomPaste, promptNotification } from "~/events/actions";
 import { setMode, updateLineNumber } from "~/events/options";
-import alertify from "~/vendor/alertify-extension";
 import { getCookie, setCookie } from "./vendor/cookie-extension";
 import { setTheme } from "~/vendor/prism-extension";
 
@@ -10,7 +8,7 @@ function restoreUserPreferences() {
     restoreLanguage();
     restoreLineNumber();
     restoreTheme();
-    promptAgreement();
+    restoreNotification();
 }
 
 function restoreLanguage() {
@@ -48,18 +46,14 @@ function restoreTheme() {
     }
 }
 
-function promptAgreement() {
-    const agreement = $("#agreement");
-    const cookie = getCookie("agreement");
+function restoreNotification() {
+    const cookie = getCookie("notification");
     if (cookie !== "") {
         return;
     }
-    setCookie("agreement", "agreed", 24 * 7);   // one week
-
-    if (agreement.children().length === 1) {
-        const html = agreement.html();
-        alertify.alert("Notification 🔔", html);
-    }
+    setCookie("notification", "notified", 24 * 7);   // one week
+
+    promptNotification();
 }
 
 export { restoreUserPreferences };

src/views/index.html

@@ -30,7 +30,7 @@
         <div id="support" style="display: none;">
             <module href="/components/support.html"></module>
         </div>
-        <div id="agreement" style="display: none;">
+        <div id="notification" style="display: none;">
             <module href="/components/notification.html"></module>
         </div>
     </div>

src/views/parts/docs.html

@@ -4,17 +4,22 @@ <h1>Why Code Paste?</h1>
         <div class="doc-section">
             <div class="doc-entry">
                 <div class="doc-text doc-align-justify">
-                    <p class="doc-indent">If you want to add code snippets to your Office document like Word or
-                        PowerPoint, you'll probably find it hard to preserve the original format, especially the
-                        highlight.😢What's more, the common dark theme of the IDE is not suitable for
-                        presentation. Although you can convert code into image, but the background and size...😖
+                    <p class="doc-indent">
+                        Adding code snippets to Office documents like Word or PowerPoint often disrupts the original
+                        formatting, especially the syntax highlighting. 😢 Furthermore, the typical dark theme of most
+                        IDEs doesn't work well for presentations. While converting code to images is an option, it often
+                        suffers from non-transparent background, and apparently not as crystal clear as text. 😖
+                    </p>
+                    <p class="doc-indent">
+                        So, is there a better way to include highlighted code snippets in these documents? 🤔
+                        <b>Absolutely!</b> That's where Code Paste comes in. 😆 Simply paste your code into the left
+                        panel, choose your preferred language, and with a single click, you'll have a beautifully
+                        highlighted code snippet ready to go.
+                    </p>
+                    <p class="doc-indent">
+                        You may wonder, why "Code Paste"? 😕 Well, as you may know, "paste" can be both a verb and a
+                        noun. 😏
                     </p>
-                    <p class="doc-indent">So is there any way to create highlighted code snippets for these
-                        documents?🤔The answer is - <b>YES</b>! And this is why Code Paste is here to
-                        help.😆Just copy and paste your code to the left panel, and select the desired language,
-                        you will then get a well highlighted code snippet with one more click.</p>
-                    <p class="doc-indent">You may wonder, why "Code Paste"?😕Well, as you know, "paste" can
-                        be both a verb and a noun.😏</p>
                 </div>
             </div>
         </div>

src/views/parts/header.html

@@ -1,5 +1,5 @@
 <div class="header animate__animated animate__fadeInDown">
     <span>Code</span>
-    <span><img src="res/logo.png" alt="Stir"></span>
+    <span id="logo"><img src="res/logo.png" alt="Stir"></span>
     <span>Paste</span>
 </div>