prototype of comments

index.js

@@ -14,4 +14,4 @@ app.listen(port, () => {
 
 doInit(app);
 
-// TODO: rate limit stuff
+// TODO: rate limit stuff and fix long urls

public/index.css

@@ -1,5 +1,5 @@
 :root {
-    font-family: sans-serif;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 1em;
 
     --main-1: rgb(13, 12, 17);
@@ -124,7 +124,7 @@ body {
     color: inherit;
     font-weight: bold;
     margin: 5px;
-    display: flex;
+    display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

routes/comment.js

@@ -0,0 +1,43 @@
+import { Router } from "express";
+import { initDb } from "../db.js";
+const router = Router();
+let db = await initDb();
+
+//todo: fix jank
+
+router.get('/:id', async (req, res, next) => {
+
+    let replies = [{parentType: 'comment', parentId: req.params.id}];
+    let feeder = req.params.id;
+
+    while (true) {
+        let tmpReplies = await db.all('SELECT * FROM feeder WHERE childType = ? AND childId = ?', [
+            'comment',
+            feeder,
+        ]);
+        if (tmpReplies.length == 0) break;
+        feeder = tmpReplies[0].parentId
+        replies.splice(0,0,tmpReplies[0])
+    }
+
+    for (let reply of replies) {
+        let dat = await db.all('SELECT * FROM comment WHERE id = ?', [
+            reply.parentId
+        ]);
+        if (reply.parentType != 'comment' || dat.length < 1) {
+            reply.comment = {username: 'fail', date: 'fail', content: 'fail'};
+            continue;
+        }
+        reply.comment = dat[0];
+    }
+
+
+    res.ctx.mainPage = 'commenter'
+    res.ctx.mainCtx = {
+        replies,
+        opLink: `/comments/${req.params.id}`
+    }
+    next();
+})
+
+export default router;

routes/hub.js

@@ -0,0 +1,72 @@
+import { Router } from "express";
+const router = Router();
+
+//todo: fix jank
+
+router.get('/login', (req, res, next) => {
+    res.ctx.mainPage = 'hub'
+    res.ctx.mainCtx = {
+        title: "Log in",
+        message: 'Log into an existing account.',
+        action: "/api/form/you/login",
+        inputs: [
+            {
+                "key": "Username",
+                "type": "text",
+                "name": "user",
+                "default": ""
+            },
+            {
+                "key": "Password",
+                "type": "password",
+                "name": "pass",
+                "default": ""
+            }
+        ]
+    }
+    next();
+})
+
+router.get('/logout', (req, res, next) => {
+    res.ctx.mainPage = 'form'
+    res.ctx.mainCtx = {
+        title: "Log out",
+        message: 'Are you sure?',
+        action: "/api/form/you/logout",
+        inputs: []
+    }
+    next();
+})
+
+
+router.get('/new', (req, res, next) => {
+    res.ctx.mainPage = 'form'
+    res.ctx.mainCtx = {
+        title: "Register",
+        message: 'Create an account and join the community!',
+        action: "/api/form/you/new",
+        inputs: [
+            {
+                "key": "Username",
+                "type": "text",
+                "name": "user",
+                "default": ""
+            },
+            {
+                "key": "Password",
+                "type": "password",
+                "name": "pass",
+                "default": ""
+            },
+            {
+                "key": "Password (again)",
+                "type": "password",
+                "name": "pass2",
+                "default": ""
+            }
+        ]
+    }
+    next();
+})
+
+export default router;

routes/init.js

@@ -8,12 +8,14 @@ let db = await initDb();
 const upload = multer({ dest: 'uploads/' });
 
 const aliases = {
-    '/': '/walls/get/home'
+    '/': '/walls/get/hub/main/0'
 };
 
 const routers = {
     '/you': './routes/you.js',
-    '/api/form/you': './routes/youApi.js'
+    '/api/form/you': './routes/youApi.js',
+    '/walls': './routes/walls.js',
+    '/comments': './routes/comment.js'
 }
 
 function doAliases(app) {

routes/walls.js

@@ -0,0 +1,57 @@
+import { Router } from "express";
+import { initDb } from "../db.js";
+const router = Router();
+let db = await initDb();
+
+//todo: fix jank
+
+router.get('/list', (req, res, next) => {
+    res.ctx.mainPage = 'walls'
+    res.ctx.mainCtx = {
+        walls: [
+            {
+                'alias': 'hub/main',
+                'name': 'Home',
+                'desc': 'Discuss anything you desire.'
+            },
+            {
+                'alias': `users/${res.auth.username}`,
+                'name': 'You',
+                'desc': 'Connect with your fanbase.'
+            }
+        ]
+    }
+    next();
+})
+
+router.get('/get/:type/:id/:num', async (req, res, next) => {
+    if (isNaN(req.params.num * 1)) {
+        next();
+        return;
+    }
+
+    let replies = await db.all('SELECT * FROM feeder WHERE parentType = ? AND parentId = ? ORDER BY sortId DESC LIMIT ? OFFSET ?', [
+        req.params.type,
+        req.params.id,
+        10,
+        req.params.num * 10
+    ]);
+
+    for (let reply of replies) {
+        if (reply.childType != 'comment') continue;
+        let dat = await db.all('SELECT * FROM comment WHERE id = ?', [
+            reply.childId
+        ]);
+        reply.comment = dat[0];
+    }
+
+    res.ctx.mainPage = 'replies'
+    res.ctx.mainCtx = {
+        page: req.params.num,
+        replies,
+        opLink: `/${req.params.type}/${req.params.id}`
+    }
+    next();
+})
+
+export default router;

views/comment.ejs

@@ -0,0 +1,8 @@
+<div class='main'>
+    <div class="header-big">
+        <div><%= username %> </div>
+        <div><%= new Date(date) + '' %> </div>
+    </div>
+    <div><%= content %></div>
+    <%- include ('vblock.ejs', {link: `/walls/get${opLink}/0`, icon: '/icon.svg', name: 'Replies'}) %>
+</div>

views/commenter.ejs

@@ -0,0 +1,3 @@
+<% for (let reply of replies) { %>
+<%- include ('comment.ejs', reply.comment || {}) %>
+<% } %>

views/replies.ejs

@@ -0,0 +1,9 @@
+<div class='main'>
+    <h1 class="header-big">Replies</h1>
+    <%- include ('vblock.ejs', {link: opLink, icon: '/icon.svg', name: 'Original'}) %>
+    <%- include ('vblock.ejs', {link: `${page - 1}`, icon: '/icon.svg', name: 'Previous'}) %>
+    <%- include ('vblock.ejs', {link: `${page * 1 + 1}`, icon: '/icon.svg', name: 'Next'}) %>
+</div>
+<% for (let reply of replies) { %>
+<%- include ('comment.ejs', reply.comment || {}) %>
+<% } %>

views/wall.ejs

@@ -0,0 +1,9 @@
+<div class="item">
+    <img class="item-img" src="/icon.svg">
+    <div class="item-desc">
+        <a class="item-a" href="/walls/get/<%= alias %>/0"> <%= name %></a>
+        <p>
+            <%= desc %>
+        </p>
+    </div>
+</div>

views/walls.ejs

@@ -0,0 +1,8 @@
+<div class="main">
+    <h1 class="header-big">My Walls</h1>
+    <div class='scroller'>
+        <% for (let wall of walls) { %>
+        <%- include ('wall.ejs', wall) %>
+        <% } %>
+    </div>
+</div>