Rewrite code with cheerio and highlightt.js

viperadnan-git · May 7, 2021 · 59aa459 · 59aa459
1 parent 84feb9a
commit 59aa459
Show file tree

Hide file tree

Showing 8 changed files with 414 additions and 79 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -10,7 +10,7 @@ $("#save").click(function() {
   $("#save").html(`<div class="spinner-border text-light spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>`);
   post_options.data = JSON.stringify({
     "heading": $("#heading").text(),
-    "body": $("#inputext").val(),
+    "content": $("#inputext").val(),
     "code": $("#is-code").is(":checked") ? true: false,
     "raw": $("#is-raw").is(":checked") ? true: false,
     "footer": $("#is-footer").is(":checked") ? true: false
@@ -23,10 +23,21 @@ $("#save").click(function() {
   });
 });
 $("#inputext").keyup(function() {
-  if ($("#is-code").is(":checked")) {
-    $("#body").show().html("<pre id='code'></pre>");
-    $("#code").text($(this).val());
+  if (!$("#content").hasClass("d-none")) {
+    if ($("#is-code").is(":checked")) {
+      $("#content").show().html("<pre><xmp id='code'></xmp></pre>");
+      $("#code").text($(this).val());
+    } else {
+      $("#content").show().html(marked($(this).val()));
+    }
+  }
+});
+$("#live-output").click(function() {
+  if ($(this).is(":checked")) {
+    $("#inputext").css("height", (screen.height / 1.6) + "px");
+    $("#content").addClass("d-none");
   } else {
-    $("#body").show().html(marked($(this).val()));
+    $("#inputext").css("height", "180px");
+    $("#content").removeClass("d-none");
   }
 });
diff --git a/assets/js/paste.js b/assets/js/paste.js
diff --git a/assets/main.html b/assets/main.html
@@ -14,7 +14,11 @@
   <style>
     textarea {
       width: 100%;
-      height: 150px;
+      height: 180px;
+      white-space: nowrap;
+      overflow: auto;
+      overflow-x: scroll;
+      overflow-y: scroll;
     }
     .bg-black {
       background-color: #333;
@@ -42,6 +46,9 @@
       border-radius: 0 3px 3px 0;
       background-color: #ededed;
     }
+    #content {
+      word-wrap: break-word;
+    }
   </style>
 </head>
 <body>
@@ -53,25 +60,29 @@
       </button>
     </div>
   </nav>
-  <div class="container my-3">
-    <div class="d-flex justify-content-end">
-      <div class="d-inline-block form-check form-switch mx-auto">
+  <div class="container my-2">
+    <div class="justify-content-start">
+      <div class="d-inline-block form-check form-switch ms-2">
         <input class="form-check-input" type="checkbox" id="is-code">
         <label class="form-check-label" for="is-code">Code</label>
       </div>
-      <div class="d-inline-block form-check form-switch mx-auto">
+      <div class="d-inline-block form-check form-switch ms-2">
         <input class="form-check-input" type="checkbox" id="is-raw" checked>
         <label class="form-check-label" for="is-raw">Raw</label>
       </div>
-      <div class="d-inline-block form-check form-switch mx-auto">
+      <div class="d-inline-block form-check form-switch ms-2">
         <input class="form-check-input" type="checkbox" id="is-footer" checked>
         <label class="form-check-label" for="is-footer">Watermark</label>
       </div>
+      <div class="d-inline-block form-check form-switch ms-2">
+        <input class="form-check-input" type="checkbox" id="live-output">
+        <label class="form-check-label" for="live-output">Expand</label>
+      </div>
     </div>
     <textarea id="inputext" class="form-control my-2" placeholder="Type something..."></textarea>
-    <div id="body"></div>
+    <div id="content"></div>
   </div>
-  <footer class="d-flex justify-content-center mb-3">
+  <footer class="d-flex justify-content-center mb-2">
     <a href="https://viperadnan-git.github.io"><span class="badge bg-black badge-left">viperadnan</span><span class="badge text-dark badge-right">&lt;&sol;&gt;</span></a>
   </footer>
   <script src="/assets/js/main.js"></script>

diff --git a/assets/paste.html b/assets/paste.html
@@ -8,8 +8,7 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png">
   <link rel="manifest" href="/assets/images/favicons/site.webmanifest">
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
   <style>
     .bg-black {
@@ -39,20 +38,16 @@
   <nav class="navbar navbar-dark bg-black">
     <div class="container-fluid">
       <span id="heading" class="navbar-brand mb-0 fw-bolder p-0"></span>
-      <button id="raw-button" class="btn btn-dark d-none py-0" onclick="window.location.href = '/raw' + window.location.pathname">
+      <button id="raw-button" class="d-none btn btn-dark py-0" onclick="window.location.href = '/raw' + window.location.pathname">
         <span>&cuepr;&nbsp;&cuesc;</span>
       </button>
     </div>
   </nav>
   <div class="container my-3">
-    <div id="body"></div>
+    <div id="content"></div>
   </div>
   <footer id="is-footer" class="d-none d-flex justify-content-center mb-3">
     <a href="https://viperadnan-git.github.io"><span class="badge bg-black badge-left">viperadnan</span><span class="badge text-dark badge-right">&lt;&sol;&gt;</span></a>
   </footer>
-  <script>
-    const json = #JSON-TEXT
-  </script>
-  <script src="/assets/js/paste.js"></script>
 </body>
 </html>
diff --git a/assets/template.html b/assets/template.html
@@ -0,0 +1,6 @@
+<h1 class="mt-4">Introduction</h1>
+<a class="text-decoration-none" href="https://pasting.codes">Pasting.codes</a> is a minimalist publishing tool that allows you to create richly formatted posts and push them to the Web in just a click.
+<strong>In simple words it's a website like Telegraph but it can be used as a pastebin too.</strong>&nbsp;&nbsp;<img width="74px" src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fpasting.codes&count_bg=%230091FF&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=Hits+%F0%9F%A4%A9&edge_flat=false" />
+<hr>
+<h6>&bull; <a class="text-decoration-none text-dark" href="/acGepc6Ct9kz">API Documentation</a></h6>
+<h6>&bull; <a class="text-decoration-none text-dark" href="https://t.me/vipercommunity">Contact Support</a></h6>
diff --git a/index.js b/index.js
@@ -3,9 +3,14 @@ const url = require('url');
 const fs = require('fs');
 const path = require('path');
 const request = require('request');
+const cheerio = require('cheerio');
+const marked = require('marked');
+const hljs = require('highlight.js');
+
 const port = process.argv[3] || process.env.PORT || 8080;
 const hostname = process.argv[2] || process.env.HOST || '127.0.0.1';
 const password = process.env.PASSWORD || "StrongestPassword";
+
 const map = {
   '.ico': 'image/x-icon',
   '.html': 'text/html',
@@ -20,20 +25,18 @@ const map = {
   '.pdf': 'application/pdf',
   '.doc': 'application/msword'
 };
+
 const page_404 = {
   "heading": "404",
-  "body": `<a onclick="window.location.href = '/'"><div class="container"><h1>404 - Page not found</h1><p><i>Unable to find your pasted code maybe it doesn't exists.</i></p><span class="text-muted small">Tap to go home</span></div></a>`,
-  "code": false,
-  "raw": false,
+  "content": `<a class="text-decoration-none text-dark" href="/"><div class="container"><h1>404 - Page not found</h1><p><i>Unable to find your pasted code maybe it doesn't exists.</i></p><span class="text-muted small">Tap to go home</span></div></a>`,
   "footer": true
 };
 const page_500 = {
   "heading": "500",
-  "body": `<a onclick="window.location.href = '/'"><div class="container"><h1>500 - Unknown Error</h1><p><i>An unknown error has occurred. Contact the developer with the url to fix it.</i></p><span class="text-muted small">Tap to go home</span></div></a>`,
-  "code": false,
-  "raw": false,
+  "content": `<a class="text-decoration-none text-dark" href="/"><div class="container"><h1>500 - Unknown Error</h1><p><i>An unknown error has occurred. Contact the developer with the url to fix it. Inconvenience is strictly regretted.</i></p><span class="text-muted small">Tap to go home</span></div></a>`,
   "footer": true
 };
+
 var post_options = {
   'method': 'POST',
   'url': 'https://dumpz.org/api/dump?password='+password+'&lexer=json',
@@ -45,29 +48,28 @@ var get_options = {
   'method': 'GET'
 };
 
+const mainHTML = cheerio.load(fs.readFileSync("./assets/main.html"));
+fs.readFile("./assets/template.html", function(error, data) {
+  if (!error) {
+    mainHTML("#content").html(marked(data.toString()));
+  }
+});
+const pasteHTML = cheerio.load(fs.readFileSync("./assets/paste.html"));
+
 http.createServer(function (req, res) {
   console.log(`${req.method} ${req.url}`);
   const parsedUrl = url.parse(req.url);
   let pathname = `${parsedUrl.pathname}`;
-  const ext = path.parse(pathname).ext;
   if (pathname == "/") {
-    fs.readFile('./assets/main.html', function(err, data) {
-      if (err) {
-        res.statusCode = 500;
-        res.end(`Error getting the file: ${err}.`);
-      } else {
-        res.setHeader('Content-type', 'text/html');
-        res.end(data);
-      }
-    });
+    res.setHeader('Content-type', 'text/html');
+    res.end(mainHTML.html());
   } else if (pathname.startsWith("/assets/images") || pathname.startsWith("/assets/js")) {
+    const ext = path.parse(pathname).ext;
     fs.readFile('.' + pathname, function(err, data) {
       if (err) {
-        fs.readFile("./assets/paste.html", function(err, data) {
-          res.statusCode = 500;
-          res.setHeader('Content-Type', 'text/html');
-          res.end(Buffer.from(data.toString().replace('#JSON-TEXT', JSON.stringify(page_500))));
-        });
+        res.statusCode = 500;
+        res.setHeader('Content-Type', 'text/html');
+        res.end(getPage(page_500));
       } else {
         res.setHeader('Content-type', map[ext] || 'text/html');
         res.end(data);
@@ -83,57 +85,62 @@ http.createServer(function (req, res) {
         post_options.body = body;
         request(post_options, function (error, response) {
           if (error || response.statusCode != 200) {
-            console.log(error); res.statusCode = 500; res.end("Internal Error - Try Again Later");
+            console.log(error);
+            res.statusCode = 500;
+            res.end("Internal Error - Try Again Later !");
           } else {
             res.end(url.parse(JSON.parse(response.body).url).pathname);
           }});
       } else {
         res.statusCode = 400;
-        res.end("Bad Request - Invalid JSON or JSON doesn't have any key named \"body\"");
+        res.end("Bad Request - Invalid JSON or JSON doesn't have any key named \"content\"");
       }
     });
   } else if (pathname.startsWith("/raw/")) {
     get_options.url = "https://dumpz.org/"+pathname.substr(5)+"/text/?password="+password;
     request(get_options, function(error, response) {
       if (response.statusCode != 200 || !IsJsonContentString(response.body) || !JSON.parse(response.body).raw) {
-        fs.readFile("./assets/paste.html", function(err, data) {
-          res.statusCode = 404;
-          res.end("404 - Page Not Found");
-        });
+        res.statusCode = 404;
+        res.end("404 - Page Not Found");
       } else {
         res.setHeader('Content-Type', 'text/plain');
-        res.end(JSON.parse(response.body).body);
+        res.end(JSON.parse(response.body).content);
       }
     });
   } else {
     get_options.url = "https://dumpz.org"+pathname+"/text/?password="+password;
     request(get_options, function (error, response) {
-      if (response.statusCode != 200 || !IsJsonContentString(response.body)) {
-        fs.readFile('./assets/paste.html', function(err, data) {
-          res.statusCode = 404;
-          res.setHeader('Content-Type', 'text/html');
-          res.end(Buffer.from(data.toString().replace('#JSON-TEXT', JSON.stringify(page_404))));
-        });
+      if (error || response.statusCode != 200 || !IsJsonContentString(response.body)) {
+        res.statusCode = 404;
+        res.setHeader('Content-Type', 'text/html');
+        res.end(getPage(page_404));
       } else {
-        fs.readFile('./assets/paste.html', function(err, data) {
-          if (err) {
-            res.statusCode = 500;
-            res.end(`Error getting the file: ${err}.`);
-          } else {
-            res.setHeader('Content-Type', 'text/html');
-            res.end(Buffer.from(data.toString().replace('#JSON-TEXT', response.body)));
-          }
-        });
+        res.setHeader('Content-Type', 'text/html');
+        res.end(getPage(JSON.parse(response.body), req.headers.host));
       }
     });
   }
 }).listen(parseInt(port), hostname);
 
 function IsJsonContentString(str) {
   try {
-    return JSON.parse(str).body ? true: false;
-  }catch(e) {
+    return JSON.parse(str).content ? true: false;
+  } catch(e) {
     return false;
   }}
 
+function getPage(json, name="pasting.codes") {
+  if (json.heading) {
+    pasteHTML("#heading").text(json.heading);
+    pasteHTML("title").text(json.heading);
+  } else {
+    pasteHTML("#heading").text(name);
+    pasteHTML("title").text(name);
+  }
+  json.raw ? pasteHTML("#raw-button").removeClass("d-none"): pasteHTML("#raw-button").addClass("d-none");
+  json.footer ? pasteHTML("#is-footer").removeClass("d-none"): pasteHTML("#is-footer").addClass("d-none");
+  json.code ? pasteHTML("#content").html("<pre>"+hljs.highlightAuto(json.content).value+"</pre>"): pasteHTML("#content").html(marked(json.content));
+  return pasteHTML.html();
+}
+
 console.log(`Server listening on ${hostname}:${port}`);