.

2020-04-08 02:19:20 +02:00 · 2020-04-08 02:19:20 +02:00 · 46082780e1
commit 46082780e1
parent c97b08a7c4
11 changed files with 97 additions and 130 deletions
--- a/public/s/js/scroller.js
+++ b/public/s/js/scroller.js
@ -1,21 +1,23 @@
 let load = false;
 (() => {
  const posts = document.querySelector("#posts");
-  document.addEventListener("wheel", e => {
-    if((((document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop + window.innerHeight) + 310
-      >= ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)) && !load) {
-      load = true;
-      fetch(`./api/p/${posts.dataset.last}`)
-        .then(res => res.json())
-        .then((msg, html = "") => {
-          for(let i = 0; i < msg.items.length; i++)
-            if(msg.items[i].id)
-              html += `<li class="post"><a href="./${msg.items[i].id}" title="${msg.items[i].mime}"><img class="thumb" src="./t/${msg.items[i].id}.png" /></a></li>\n`;
-          posts.insertAdjacentHTML("beforeend", html);
-          posts.dataset.last = msg.last;
-          load = false;
-        })
-        .catch(err => console.log(err));
-    }
-  });
+  if(posts) {
+    document.addEventListener("wheel", e => {
+      if((((document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop + window.innerHeight) + 310
+        >= ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)) && !load) {
+        load = true;
+        fetch(`./api/p/${posts.dataset.last}`)
+          .then(res => res.json())
+          .then((msg, html = "") => {
+            for(let i = 0; i < msg.items.length; i++)
+              if(msg.items[i].id)
+                html += `<li class="post"><a href="./${msg.items[i].id}" title="${msg.items[i].mime}"><img class="thumb" src="./t/${msg.items[i].id}.png" /></a></li>\n`;
+            posts.insertAdjacentHTML("beforeend", html);
+            posts.dataset.last = msg.last;
+            load = false;
+          })
+          .catch(err => console.log(err));
+      }
+    });
+  }
 })();
--- a/src/inc/routes/index.mjs
+++ b/src/inc/routes/index.mjs
@ -43,7 +43,8 @@ router.get(/^\/([0-9]+)$/, async (req, res) => {
      timestamp: new Date(query.stamp * 1000).toISOString()
    },
    next: query.next ? query.next : null,
-    prev: query.prev ? query.prev : null
+    prev: query.prev ? query.prev : null,
+    title: `${query.id} - f0ck.me`
  };
  res.reply({ body: tpl.render("views/item", data) });
 });
--- a/src/inc/routes/stats.mjs
+++ b/src/inc/routes/stats.mjs
@ -2,10 +2,6 @@ import router from "../router.mjs";
 import url from "url";
 import util from "util";
 import sql from "../sql.mjs";
-import lib from "../lib.mjs";
-import tpl from "../tpl.mjs";
-
-tpl.readdir("views");

 router.get("/stats", async (req, res) => {
  const query = await sql.query("select src from items");
@ -15,10 +11,7 @@ router.get("/stats", async (req, res) => {
    hosts[host] ? hosts[host]++ : hosts[host] = 1;
  });
  
-  const sorted = Object.keys(hosts).sort((a, b) => hosts[b] - hosts[a]).map(k => ({ [k]: hosts[k] })).reduce((a, b) => ({ ...a, ...b }));
-  
  res.reply({
-    body: "<pre>" + util.inspect(sorted) + "</pre>"
+    body: "<pre>" + util.inspect(Object.keys(hosts).sort((a, b) => hosts[b] - hosts[a]).map(k => ({ [k]: hosts[k] })).reduce((a, b) => ({ ...a, ...b }))) + "</pre>"
  });
-  //res.reply({ body: tpl.render("views/index", data) });
 });
--- a/src/inc/tpl.mjs
+++ b/src/inc/tpl.mjs
@ -4,13 +4,13 @@ import path from "path";
 export default new class {
  #templates = {};
  #syntax = [
-    [ "each", (t, args = t.slice(4).trim().split(" ")) => `util.forEach(${args[0]},(${(args[1] === "as" && args[2]) ? args[2] : "value"},key)=>{` ],
+    [ "each", (t, _, args = t.slice(4).trim().split(" ")) => `util.forEach(${args[0]},(${(args[1] === "as" && args[2]) ? args[2] : "value"},key)=>{` ],
    [ "/each", () => "});" ],
    [ "if", t => `if(${t.slice(2).trim()}){` ],
    [ "elseif", t => `}else if(${t.slice(6).trim()}){` ],
    [ "else", () => "}else{" ],
    [ "/if", () => "}" ],
-    [ "include", t => `html+=util.tpl["${t.slice(7).trim()}"];`],
+    [ "include", (t, data) => `html+='${this.render(t.slice(7).trim(), data)}';` ], //`html+=util.include("${t.slice(7).trim()}", data);`], // parse them aswell
    [ "=", t => `html+=${t.slice(1).trim()};` ]
  ];
  readdir(dir, root = dir, rel = dir.replace(`${root}/`, "")) {
@ -33,8 +33,8 @@ export default new class {
      .replace(/[\n\r]/g, "")
      .split(/{{\s*([^}]+)\s*}}/)
      .filter(Boolean)
-      .map(t => !(f = this.#syntax.filter(s => t.startsWith(s[0]))[0]) ? `html+='${t}';` : f[1](t))
+      .map(t => !(f = this.#syntax.filter(s => t.startsWith(s[0]))[0]) ? `html+='${t}';` : f[1](t, data))
      .join("") + "}return html.trim().replace(/>[\\n\\r\\s]*?</g, '><')"
-    ).bind(null, { forEach: this.forEach, tpl: this.#templates })(data);
+    ).bind(null, { forEach: this.forEach })(data);
  }
 };
--- a/src/websrv.mjs
+++ b/src/websrv.mjs
@ -1,43 +1,44 @@
 import http from "http";
 import url from "url";
+import { promises as fs } from "fs";
 import querystring from "querystring";
 import cfg from "../config.json";
 import router from "./inc/router.mjs";

-// routes
-import "./inc/routes/index.mjs";
-import "./inc/routes/api.mjs";
-import "./inc/routes/static.mjs";
-import "./inc/routes/stats.mjs";
+(async () => {
+  await Promise.all((await fs.readdir("./src/inc/routes"))
+    .filter(r => r.endsWith(".mjs"))
+    .map(r => import(`./inc/routes/${r}`)));

-http.createServer(async (req, res, r) => {
-  const t_start = process.hrtime();
-
-  req.url = url.parse(req.url.replace(/(?!^.)(\/+)?$/, ''));
-  req.url.split = req.url.pathname.split("/").slice(1);
-  req.url.qs = querystring.parse(req.url.query);
-
-  req.post = new Promise((resolve, _, data = "") => req
-    .on("data", d => void (data += d))
-    .on("end", () => void resolve(Object.fromEntries(Object.entries(querystring.parse(data)).map(([k, v]) => [k, decodeURIComponent(v)])))));
-
-  res.reply = ({
-    code = 200,
-    type = "text/html",
-    body
-  }) => res.writeHead(code, { "Content-Type": `${type}; charset=utf-8` }).end(body);
+  http.createServer(async (req, res, r) => {
+    const t_start = process.hrtime();
  
-  res.redirect = target => res.writeHead(301, {
-    "Cache-Control": "no-cache, public",
-    "Location": target
-  }).end();
-
-  !(r = router.routes.getRoute(req.url.pathname, req.method)) ? res.writeHead(404).end(`404 - ${req.url.pathname}`) : await r(req, res);
-  console.log([
-    `[${(new Date()).toLocaleTimeString()}]`,
-    `${(process.hrtime(t_start)[1] / 1e6).toFixed(2)}ms`,
-    `${req.method} ${res.statusCode}`,
-    req.url.pathname].map(e=>e.toString().padEnd(15)).join(""));
-}).listen(cfg.websrv.port, () => setTimeout(() => {
-  console.log(`f0ck is listening on port ${cfg.websrv.port}.`);
-}, 500));
+    req.url = url.parse(req.url.replace(/(?!^.)(\/+)?$/, ''));
+    req.url.split = req.url.pathname.split("/").slice(1);
+    req.url.qs = querystring.parse(req.url.query);
+  
+    req.post = new Promise((resolve, _, data = "") => req
+      .on("data", d => void (data += d))
+      .on("end", () => void resolve(Object.fromEntries(Object.entries(querystring.parse(data)).map(([k, v]) => [k, decodeURIComponent(v)])))));
+  
+    res.reply = ({
+      code = 200,
+      type = "text/html",
+      body
+    }) => res.writeHead(code, { "Content-Type": `${type}; charset=utf-8` }).end(body);
+    
+    res.redirect = target => res.writeHead(301, {
+      "Cache-Control": "no-cache, public",
+      "Location": target
+    }).end();
+  
+    !(r = router.routes.getRoute(req.url.pathname, req.method)) ? res.writeHead(404).end(`404 - ${req.url.pathname}`) : await r(req, res);
+    console.log([
+      `[${(new Date()).toLocaleTimeString()}]`,
+      `${(process.hrtime(t_start)[1] / 1e6).toFixed(2)}ms`,
+      `${req.method} ${res.statusCode}`,
+      req.url.pathname].map(e=>e.toString().padEnd(15)).join(""));
+  }).listen(cfg.websrv.port, () => setTimeout(() => {
+    console.log(`f0ck is listening on port ${cfg.websrv.port}.`);
+  }, 500));
+})();
--- a/views/contact.html
+++ b/views/contact.html
@ -1,19 +1,8 @@
-<!doctype f0ck>
-<html>
-<head>
-  <title>f0ck! I need contact!</title>
-  <link rel="icon" type="image/png" href="./s/img/favicon.png" />
-  <link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css">
-  <link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css">
-</head>
-<body>
-  {{include snippets/navbar}}
+{{include main/header}}
  <div class="container">
    <div class="contact">
      <p>Got a problem? We have the answer: <a href="mailto:admin@f0ck.space">admin@f0ck.space</a></p>
      <a href="/">return to main</a> <span id="themes"></span>
    </div>
  </div>
-  <script src="./s/js/theme.js"></script>
-</body>
-</html>
+{{include main/footer}}
--- a/views/how.html
+++ b/views/how.html
@ -1,13 +1,4 @@
-<html>
-<head>
-  <title>f0ck me! but how?</title>
-  <link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css">
-  <link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css">
-  <link rel="icon" type="image/png" href="./s/img/favicon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-  {{include snippets/navbar}}
+{{include main/header}}
  <div class="container">
    <div class="irc">
      <h4>irc.n0xy.net +6697 (ssl only) #f0ck</h4>
@ -41,6 +32,4 @@
          reupload somewhere until this is fixed</p>
    </div>
  </div>
-  <script src="./s/js/theme.js"></script>
-</body>
-</html>
+{{include main/footer}}
--- a/views/index.html
+++ b/views/index.html
@ -1,14 +1,4 @@
-<!doctype f0ck>
-<html>
-<head>
-  <title>f0ck!</title>
-  <link rel="icon" type="image/png" href="./s/img/favicon.png" />
-  <link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css">
-  <link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-  {{include snippets/navbar}}
+{{include main/header}}
  <div class="container-fluid">
    <ul id="posts" data-last="{{=last}}">
      {{each items as item}}
@ -21,7 +11,4 @@
      {{/each}}
    </ul>
  </div>
-  <script src="./s/js/scroller.js"></script>
-  <script src="./s/js/theme.js"></script>
-</body>
-</html>
+{{include main/footer}}
--- a/views/item.html
+++ b/views/item.html
@ -1,21 +1,4 @@
-<!doctype f0ck>
-<html>
-<head>
-  <title>{{=item.id}} - f0ck.me</title>
-  <link rel="stylesheet" type="text/css" href="./s/css/video-js.min.css" />
-  <link rel="stylesheet" type="text/css" href="./s/css/vsg-skin.css" />
-  <link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css">
-  <link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/png" href="./s/img/favicon.png" />
-  <meta property="og:site_name" content="f0ck.me" />
-  <meta property="og:description" content="f0cked by {{=user.name}}" />
-  <meta name="Description" content="f0cked by {{=user.name}}" />
-  <meta property="og:image" content="{{=item.thumbnail}}" />
-  <meta charset="utf-8" />
-</head>
-<body>
-  {{include snippets/navbar}}
+{{include main/header}}
  <div class="container">
    <div class="controls">
      <a id="rndbtn" href="/random">Random</a>
@ -65,9 +48,4 @@
      <span class="badge badge-dark" id="themes"></span>
    </div>
  </div>
-  <script src="./s/js/theme.js"></script>
-  <script src="./s/js/video.min.js"></script>
-  <script src="./s/js/videojs.persistvolume.js"></script>
-  <script src="./s/js/item.js"></script>
-</body>
-</html>
+{{include main/footer}}
--- a/views/main/footer.html
+++ b/views/main/footer.html
@ -0,0 +1,7 @@
+  <script src="./s/js/video.min.js"></script>
+  <script src="./s/js/videojs.persistvolume.js"></script>
+  <script src="./s/js/item.js"></script>
+  <script src="./s/js/scroller.js"></script>
+  <script src="./s/js/theme.js"></script>
+</body>
+</html>
--- a/views/main/header.html
+++ b/views/main/header.html
@ -0,0 +1,20 @@
+<!doctype f0ck>
+<html>
+<head>
+  <title>{{if data.title}}{{=data.title}}{{else}}f0ck!{{/if}}</title>
+  <link rel="icon" type="image/png" href="./s/img/favicon.png" />
+  <link rel="stylesheet" type="text/css" href="./s/css/video-js.min.css" />
+  <link rel="stylesheet" type="text/css" href="./s/css/vsg-skin.css" />
+  <link rel="stylesheet" type="text/css" href="./s/css/bootstrap.css" />
+  <link rel="stylesheet" type="text/css" href="./s/css/f0ck-custom.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  {{if data.item}}
+  <meta property="og:site_name" content="f0ck.me" />
+  <meta property="og:description" content="f0cked by {{=user.name}}" />
+  <meta name="Description" content="f0cked by {{=user.name}}" />
+  <meta property="og:image" content="{{=item.thumbnail}}" />
+  <meta charset="utf-8" />
+  {{/if}}
+</head>
+<body>
+  {{include snippets/navbar}}