stuff lol

.gitattributes

@@ -1 +1,2 @@
 *.mjs gitlab-language=javascript
+*.tpl gitlab-language=html

package-lock.json

@@ -4,6 +4,12 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "commander": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
+      "optional": true
+    },
     "cuffeo": {
       "version": "git+https://gitfap.de/keinBot/cuffeo.git#d55586ce5520d4119fa0900ef15ce8736fc62364",
       "from": "git+https://gitfap.de/keinBot/cuffeo.git"
@@ -13,6 +19,17 @@
       "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
       "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
     },
+    "handlebars": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
+      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "requires": {
+        "neo-async": "^2.6.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -36,10 +53,49 @@
         "long": "^4.0.0"
       }
     },
+    "minimist": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+    },
+    "neo-async": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
+      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
+    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+    },
+    "uglify-js": {
+      "version": "3.5.8",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.8.tgz",
+      "integrity": "sha512-GFSjB1nZIzoIq70qvDRtWRORHX3vFkAnyK/rDExc0BN7r9+/S+Voz3t/fwJuVfjppAMz+ceR2poE7tkhvnVwQQ==",
+      "optional": true,
+      "requires": {
+        "commander": "~2.20.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "wordwrap": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "cuffeo": "git+https://gitfap.de/keinBot/cuffeo.git",
+    "handlebars": "^4.1.2",
     "mariadb": "^2.0.3"
   }
 }

public/css/f0ck.css

@@ -0,0 +1,132 @@
+/* f0ck.me Stylesheet v2 */
+/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
+/* This style makes use of the Milligram CSS framework and might not work as expected without! */
+/* Contact: sirx @ f0ck . it */
+/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */
+
+/*Theming*/
+:root {
+  --primary-color: #302AE6;
+  --secondary-color: #536390;
+  --font-color: #424242;
+  --bg-color: #090f13;
+  --heading-color: #292922;
+}
+
+[data-theme="light"] {
+  --primary-color: #9A97F3;
+  --secondary-color: #818cab;
+  --font-color: #e1e1ff;
+  --bg-color: black;
+  --heading-color: #818cab;
+}
+/*End of Theming*/
+
+/* Body */
+body {
+ background-color: var(--bg-color);
+  color: var(--font-color);
+}
+/* End of Body */
+
+/* Fieldset & Legend
+legend {
+  border-radius: 2px;
+  background: black;
+  font-family: monospace;
+  border: 1px white solid;
+  color: white;
+}
+
+fieldset {
+  border: 1px solid white;
+  padding: 20px;
+  background: black;
+}
+End of Fieldset & Legend */
+
+/* NAV */
+button {
+  background: #000101;
+  border: 1px solid white;
+  border-radius: 0px;
+  vertical-align: bottom !important;
+}
+
+img.logo {
+  height: 48px;
+}
+/* END OF NAV */
+
+/* f0ck Grid! */
+.f0ckgrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  grid-gap: 20px;
+  align-items: stretch;
+}
+
+.f0ckgrid img {
+  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
+  max-width: 100%;
+}
+/* End of f0ck Grid! */
+
+/* Image Thumbs */
+a img.thumb {
+  border: 2px solid black;
+  transition: .1s ease-out;
+}
+
+img.thumb:hover {
+     box-shadow: 0px 0px 0px 2px #dac8d2;
+  border-radius: 5px;
+  transition: .1s ease-in;
+}
+/* End of Image Thumbs */
+
+/* List Styling
+ul.f0ck-links {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+li.post {
+  width: 128px;
+  height: 128px;
+  margin-top: 5px;
+  line-height: 128px;
+  float: left;
+  margin: 5px;
+  transition: .1s ease-out;
+}
+
+li.post:hover {
+  box-shadow: 0px 0px 0px 2px #dac8d2;
+  border-radius: 5px;
+  transition: .1s ease-in;
+}
+
+li.post:hover img {
+border-radius: 5px;
+opacity: 0.8;
+}
+End of List Styling */
+
+/* MISC */
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
+}

src/inc/routes/api.mjs

@@ -38,7 +38,7 @@ router.get(/^\/api\/p(\/[0-9]+|\/)?(\/[0-9]+)?\/?$/, async (req, res) => {
         "items": [],
         "last": id
       };
-      rows.forEach((e,i,a) => {
+      rows.forEach(e => {
         items.items.push({
           "id": e.id,
           "mime": e.mime

src/inc/routes/inc/index.mjs

@@ -0,0 +1,3 @@
+export const queries = {
+  items: "select id, mime from f0ck.items order by id desc limit 72"
+};

src/inc/routes/index.mjs

@@ -1,5 +1,22 @@
 import router from "../router";
+import fs from "fs";
+import sql from "../sql";
+import handlebars from "handlebars";
 
-router.get(/^\/$/, (req, res) => {
+import { queries } from "./inc/index";
-  res.end("index lol");
+
+const template = fs.readFileSync("./views/index.html.tpl", "utf-8");
+
+router.get(/^\/$/, async (req, res) => {
+  const db = await sql;
+  res.writeHead(200, { 'Content-Type': 'text/html' });
+
+  db.query(queries.items)
+    .then(items => {
+      const tpl = handlebars.compile(template);
+      res.end(tpl({ items: items }));
+    }).catch(err => res.end(JSON.stringify( err ), 'utf-8'));
+
+  /*const tpl = handlebars.compile(template);
+  res.end(tpl());*/
 });

views/index.html.tpl

@@ -0,0 +1,29 @@
+<!doctype inf0ckted>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="f0ck you">
+    <meta name="author" content="Abu Ottermann, Flummi Mc Doggerstein">
+    <title>f0ck!</title>
+    <link rel="stylesheet" type="text/css" href="/css/milligram.min.css">
+    <link rel="stylesheet" type="text/css" href="/css/f0ck.css">
+  </head>
+  <body>
+    <div class="nav">
+      <img class="logo" src="/img/f0ck_logo.png"></img>
+      <button class="help">Help</button>
+      <button class="random">Random</button>
+      <button class="contact">Contact</button>
+    </div>
+    <main class="f0ckgrid" id="posts">
+      {{#each items}}
+      <a href="/{{id}}" title="{{mime}}"><img class="thumb" src="//f0ck.me/t/{{id}}.png" /></a>
+      {{/each}}
+    </main>
+  <footer>
+    <section class="credits">Made with 666 souls in mind and 2 liters of fresh virgin blood</section>
+  </footer>
+  <!--<script src="f0ck.js"></script>-->
+  </body>
+</html>