.

public/s/js/scroller.js

@@ -1,6 +1,7 @@
 let load = false;
 (() => {
   const posts = document.querySelector("#posts");
+  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) {
@@ -18,4 +19,5 @@ let load = false;
           .catch(err => console.log(err));
       }
     });
+  }
 })();

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) });
 });

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) });
 });

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);
   }
 };

src/websrv.mjs

@@ -1,16 +1,16 @@
 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
+(async () => {
-import "./inc/routes/index.mjs";
+  await Promise.all((await fs.readdir("./src/inc/routes"))
-import "./inc/routes/api.mjs";
+    .filter(r => r.endsWith(".mjs"))
-import "./inc/routes/static.mjs";
+    .map(r => import(`./inc/routes/${r}`)));
-import "./inc/routes/stats.mjs";
 
-http.createServer(async (req, res, r) => {
+  http.createServer(async (req, res, r) => {
     const t_start = process.hrtime();
   
     req.url = url.parse(req.url.replace(/(?!^.)(\/+)?$/, ''));
@@ -38,6 +38,7 @@ http.createServer(async (req, res, r) => {
       `${(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(() => {
+  }).listen(cfg.websrv.port, () => setTimeout(() => {
     console.log(`f0ck is listening on port ${cfg.websrv.port}.`);
-}, 500));
+  }, 500));
+})();

views/contact.html

@@ -1,19 +1,8 @@
-<!doctype f0ck>
+{{include main/header}}
-<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}}
   <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>
+{{include main/footer}}
-</body>
-</html>

views/how.html

@@ -1,13 +1,4 @@
-<html>
+{{include main/header}}
-<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}}
   <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>
+{{include main/footer}}
-</body>
-</html>

views/index.html

@@ -1,14 +1,4 @@
-<!doctype f0ck>
+{{include main/header}}
-<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}}
   <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>
+{{include main/footer}}
-  <script src="./s/js/theme.js"></script>
-</body>
-</html>

views/item.html

@@ -1,21 +1,4 @@
-<!doctype f0ck>
+{{include main/header}}
-<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}}
   <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>
+{{include main/footer}}
-  <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>

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>

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}}