adding mini msg board

Squashed commit of the following:

commit 5e685faff0
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 20:39:19 2025 -0500

    feat: mobile styling

commit 30a4ac6326
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 16:51:53 2025 -0500

    another test

commit b847c0f231
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 16:48:29 2025 -0500

    fix: cf header

commit acc580fb79
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 16:46:22 2025 -0500

    feat: add client ip tracking

commit 289b95d957
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 16:40:49 2025 -0500

    feat: add footer and styling

commit eda40eb113
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Jan 1 14:59:35 2025 -0500

    feat: added a comment section

commit 27840f3537
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Tue Dec 31 14:45:21 2024 -0500

    css: black color

commit 3c3deda986
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Tue Dec 31 14:29:00 2024 -0500

    ui: better design and stuff

commit cd43c949aa
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Sat Dec 28 17:47:39 2024 -0500

    fix: styling

commit 8c0a4a773e
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Sat Dec 28 14:32:07 2024 -0500

    styling added + better templates

commit 0a21838c91
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Fri Dec 27 22:33:44 2024 -0500

    fix: create tables

commit 77832d73de
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Fri Dec 27 22:21:48 2024 -0500

    dockerfile_update

commit 90769c9bf1
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Fri Dec 27 22:17:36 2024 -0500

    more code

commit e07590d6e5
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Thu Dec 26 08:15:00 2024 -0500

    updates

commit 1d28883841
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Thu Dec 26 07:38:38 2024 -0500

    updated docker file

commit eb3068af96
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Thu Dec 26 07:27:38 2024 -0500

    added dockerfile

commit 15a77883f4
Author: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date:   Wed Dec 25 22:45:54 2024 -0500

    basic msg board

.gitignore

@@ -1,3 +1,4 @@
+*.db
 # Logs
 logs
 *.log

nodejs-mini-message-board/.dockerignore

@@ -0,0 +1,2 @@
+node_modules/
+Dockerfile

nodejs-mini-message-board/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:23-alpine
+
+COPY package.json package-lock.json /app
+
+WORKDIR /app
+
+RUN npm install . && chown nobody:nobody /app
+
+COPY --chown=nobody:nobody ./src /app/src
+
+USER nobody
+
+ENTRYPOINT ["node"]
+
+CMD ["src/app.js"]
+
+

nodejs-mini-message-board/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "Odin - Message Board",
+  "version": "0.1.0",
+  "dependencies": {
+    "ejs": "^3.1.10",
+    "express": "^4.21.2",
+    "express-validator": "^7.2.0",
+    "sqlite3": "^5.1.7"
+  },
+  "scripts": {
+    "seed_db": "node $PWD/src/db/seedDb.js",
+    "start": "node --watch src/app.js"
+  }
+}

nodejs-mini-message-board/src/app.js

@@ -0,0 +1,42 @@
+const express = require("express");
+const app = express();
+
+const path = require("node:path");
+const port = 3000;
+
+const { indexRouter } = require("./routes/indexRouter");
+
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "ejs");
+
+const assetsPath = path.join(__dirname, "public");
+app.use(express.static(assetsPath));
+
+app.use(express.urlencoded({ extended: true }));
+
+//Logging
+app.use((req, res, next) => {
+  req.time = new Date(Date.now()).toISOString();
+  const clientIp = req.header("cf-connecting-ip") || req.socket.remoteAddress;
+  console.log(req.time, req.method, req.hostname, req.path, clientIp);
+  next();
+});
+
+app.use("/", indexRouter);
+
+const server = app.listen(port, () => {
+  console.log(`Webserver running on ${port}.`);
+});
+
+// Shutdown Logic
+const gracefulShutdownHandler = (signal) => {
+  console.log(`Caught ${signal}, gracefully shutting down`);
+
+  server.close(() => {
+    console.log(`Shutting down server`);
+    process.exit();
+  });
+};
+
+process.on("SIGINT", gracefulShutdownHandler);
+process.on("SIGTERM", gracefulShutdownHandler);

nodejs-mini-message-board/src/controllers/indexController.js

@@ -0,0 +1,113 @@
+const db = require("../db/query");
+const { body, validationResult } = require("express-validator");
+const { dateParser } = require("../utils");
+
+const links = [
+  { href: "/", text: "Home" },
+  { href: "/new", text: "New" },
+];
+
+const validateContent = [
+  body("username")
+    .trim()
+    .isLength({ min: 2, max: 25 })
+    .withMessage("Name must be between 2 and 25 characters."),
+  body("message").isLength({ min: 2 }).withMessage("Please enter a message."),
+];
+
+const validateComment = [body("comment").trim().isLength({ min: 2, max: 140 })];
+
+async function getCommentPerMessage(rows) {
+  const commentsTotal = rows.map(async (row) =>
+    db.getAllCommentsForMessage(row.id),
+  );
+
+  return Promise.all(commentsTotal)
+    .then((c) =>
+      c.filter((msg) => {
+        if (msg.length > 0) return msg;
+      }),
+    )
+    .then((c) =>
+      c.map((m) => {
+        return { [m[0].message_id]: m.length };
+      }),
+    )
+    .then((result) => Object.assign({}, ...result));
+}
+
+async function indexGet(req, res, next) {
+  try {
+    const rows = await db.getAllMessages();
+    if (rows === undefined) rows = [];
+
+    const messageComments = await getCommentPerMessage(rows);
+
+    res.render("index", {
+      links: links,
+      msgs: rows,
+      dateParser: dateParser,
+      comments: messageComments,
+    });
+  } catch {
+    res.render("index", { links: links, msgs: [] });
+  }
+}
+
+function newGet(req, res) {
+  res.render("msgs", { links: links });
+}
+
+async function newPost(req, res) {
+  const errors = validationResult(req);
+  if (!errors.isEmpty()) {
+    return res.status(400).render("msgs", {
+      links: links,
+      errors: errors.array(),
+    });
+  }
+  const { message, username } = req.body;
+  db.insertMessage({
+    message: message,
+    username: username,
+    date: new Date(),
+  });
+  res.redirect("/");
+}
+
+async function commentsGet(req, res) {
+  const { id } = req.query;
+  const messageId = Number(id);
+  try {
+    if (!isNaN(messageId)) {
+      const message = await db.getMessageById(messageId);
+      const comments = await db.getAllCommentsForMessage(messageId);
+
+      res.render("comments", {
+        message: message,
+        comments: comments,
+        links: links,
+        dateParser: dateParser,
+      });
+    } else {
+      res.status(404).send("error");
+    }
+  } catch {
+    res.send("something went wrong");
+  }
+}
+
+async function commentsPost(req, res, next) {
+  const { comment, messageId } = req.body;
+  db.insertComment(messageId, comment);
+  res.redirect(`/comment?id=${messageId}`);
+}
+
+module.exports = {
+  indexGet,
+  newGet,
+  newPost,
+  commentsGet,
+  validateContent,
+  commentsPost,
+};

nodejs-mini-message-board/src/db.js

@@ -0,0 +1,42 @@
+const sqlite3 = require("sqlite3").verbose();
+const path = require("node:path");
+const { stat } = require("node:fs");
+const { mkdir } = require("node:fs/promises");
+
+const dbDirPath = path.join(path.dirname(__dirname), "/db");
+const dbPath = path.join(dbDirPath, "/message-board.db");
+console.log(dbPath);
+
+async function makeDirectory(path) {
+  const dirCreation = await mkdir(path);
+  return dirCreation;
+}
+
+// Make sure DB exists
+stat(dbDirPath, (err, stats) => {
+  if (err !== null) {
+    makeDirectory(dbDirPath);
+  }
+});
+
+const db = new sqlite3.Database(dbPath);
+db.serialize(() => {
+  const SQL = `
+CREATE TABLE IF NOT EXISTS messages ( 
+  id INTEGER PRIMARY KEY ASC,
+  message TEXT,
+  username VARCHAR(25),
+  date NUMBER
+);
+
+CREATE TABLE IF NOT EXISTS comments (
+  id INTEGER PRIMARY KEY ASC,
+  comment TEXT,
+  message_id INTEGER,
+  FOREIGN KEY (message_id) REFERENCES messages(id)
+)
+`;
+  db.exec(SQL);
+});
+
+module.exports = db;

nodejs-mini-message-board/src/db/query.js

@@ -0,0 +1,50 @@
+const db = require("../db");
+
+async function getAllMessages() {
+  return new Promise((resolve) => {
+    db.all("SELECT * FROM messages ORDER BY date DESC;", async (err, rows) =>
+      resolve(rows),
+    );
+  });
+}
+
+async function getMessageById(id) {
+  return new Promise((resolve) => {
+    db.get("SELECT * FROM messages WHERE id = (?)", [id], async (err, rows) => {
+      resolve(rows);
+    });
+  });
+}
+
+async function insertMessage(msg) {
+  db.run("INSERT INTO messages (message, username, date) VALUES ($1, $2, $3)", [
+    msg.message,
+    msg.username,
+    msg.date,
+  ]);
+}
+
+async function getAllCommentsForMessage(msgId) {
+  return new Promise((resolve) => {
+    db.all(
+      "SELECT * FROM COMMENTS WHERE message_id = (?)",
+      [msgId],
+      async (err, rows) => resolve(rows),
+    );
+  });
+}
+
+async function insertComment(msgId, comment) {
+  db.run("INSERT INTO comments (comment, message_id) VALUES ($1, $2)", [
+    comment,
+    msgId,
+  ]);
+}
+
+module.exports = {
+  getMessageById,
+  getAllMessages,
+  insertMessage,
+  getAllCommentsForMessage,
+  insertComment,
+};

nodejs-mini-message-board/src/db/seedDb.js

@@ -0,0 +1,26 @@
+const db = require("../db");
+
+const SQL = `
+CREATE TABLE IF NOT EXISTS messages ( 
+  id INTEGER PRIMARY KEY ASC,
+  message TEXT,
+  username VARCHAR(25),
+  date NUMBER
+
+);
+
+INSERT INTO messages (message, username, date) 
+  VALUES
+  ('this is cool', 'smig.tech', '1735391440168.0'),
+  ('I like this app', 'smigz', '1733577117'),
+  ('For real, it is nice', 'mikey', '1735391626')
+`;
+
+async function main(db) {
+  console.log("seeding db...");
+  db.serialize(() => {
+    db.exec(SQL);
+  });
+}
+
+main(db);

nodejs-mini-message-board/src/public/script.js

@@ -0,0 +1,6 @@
+function test(event) {
+  const messageId = event.target.dataset.messageId;
+  window.location.href = `comment?id=${messageId}`;
+}
+
+document.getElementById("year").textContent = `${new Date().getFullYear()}`;

nodejs-mini-message-board/src/public/styles.css

@@ -0,0 +1,225 @@
+:root {
+  padding: 0;
+  margin: 0;
+  background-color: #eff3ea;
+}
+
+html,
+body {
+  min-height: 100vh;
+  margin: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  flex: 1;
+  align-self: center;
+  align-items: end;
+  display: flex;
+  margin-bottom: 5px;
+}
+
+a {
+  color: #86a788;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+  font-size: 1.5rem;
+}
+
+.nav-item {
+  margin: 10px 8px 0;
+  display: inline-block;
+  padding: 10px;
+  transition: background-color 1000ms ease-in-out;
+}
+
+.nav-item:hover {
+  background-color: hsl(123.64, 15.79%, 89.02%);
+}
+
+.nav-link {
+  text-decoration: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.headline {
+  text-align: center;
+  margin: 0 0 5px 0;
+}
+
+.msg-headline {
+  color: #86a788;
+  text-align: center;
+  margin: 60px 0 20px 0;
+}
+
+.msg-feed {
+  margin-top: 3rem;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+  align-items: center;
+  min-height: 150px;
+  background-color: #86a788;
+  width: 100%;
+  margin: 1rem;
+  border-radius: 15px;
+  box-shadow: 0px 1px 4px #525252;
+}
+
+.material-symbols-outlined:hover {
+  cursor: pointer;
+}
+
+.card-message {
+  width: 100%;
+  background-color: white;
+  margin: 0;
+  border-radius: 0 0 15px 15px;
+}
+
+.card-message p {
+  word-wrap: break-word;
+  font-family: "Leckerli One", serif;
+  font-size: 1.3rem;
+  padding: 1.3rem;
+  text-align: center;
+}
+
+.card-metadata {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  width: 100%;
+  margin: 0 1rem;
+}
+
+.card-metadata > h3,
+.card-metadata > span {
+  margin: 1rem 1rem;
+}
+
+.card-metadata > span {
+  font-weight: 400;
+}
+
+.metadata-right {
+  display: flex;
+  gap: 1rem;
+  padding: 0 10px;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  padding: 10px 0;
+  max-width: 600px;
+  width: 100%;
+}
+
+.form-item label {
+  font-size: 1.2rem;
+}
+
+.form-item input {
+  padding: 10px 20px;
+  margin: 8px 0;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 1.2rem;
+  border-radius: 10px;
+  border: 1px solid #525252;
+  background-color: #faf7f0;
+}
+
+.form-item textarea {
+  font-size: 1.2rem;
+  border-radius: 5px;
+  border: 1px solid #525252;
+  background-color: #faf7f0;
+  padding: 20px;
+}
+
+.form-item > .btn {
+  margin: 5px;
+}
+
+.btn {
+  padding: 1rem;
+  margin: 0 1rem;
+  font-size: 1.3rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-radius: 0.3rem;
+  border: 2px solid #677d6a;
+  background-color: transparent;
+  /*width: 100%;*/
+  flex: 1;
+  color: black;
+}
+
+.primary-btn {
+  background-color: #677d6a;
+  color: #eff3ea;
+  font-weight: 800;
+}
+
+.btn-row {
+  flex-direction: row;
+}
+
+.errors {
+  color: red;
+}
+.comment-section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  max-width: 600px;
+}
+
+.comment {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.comment span {
+  margin-right: 1rem;
+  display: inline-block;
+}
+
+.comment .material-symbols-outlined:hover {
+  cursor: initial;
+}
+
+@media only screen and (max-width: 660px) {
+  /*@media (max-width: 600px) {*/
+  .card,
+  .form-item,
+  .comment-section {
+    max-width: 90vw;
+  }
+}

nodejs-mini-message-board/src/routes/indexRouter.js

@@ -0,0 +1,16 @@
+const { Router } = require("express");
+const indexController = require("../controllers/indexController");
+
+const indexRouter = Router();
+
+indexRouter.get("/", indexController.indexGet);
+indexRouter.get("/new", indexController.newGet);
+indexRouter.post(
+  "/new",
+  indexController.validateContent,
+  indexController.newPost,
+);
+indexRouter.get("/comment", indexController.commentsGet);
+indexRouter.post("/comment", indexController.commentsPost);
+
+module.exports = { indexRouter };

nodejs-mini-message-board/src/utils.js

@@ -0,0 +1,25 @@
+function dateParser(date) {
+  /* Returns a time/date formatted string
+   * based on the age of the log entry.
+   * > 24 hrs return the date
+   * < 24 hrs > 1 hr return the number of hours
+   * otherwise return the minutes since the log was entered
+   */
+  const currentTime = new Date();
+
+  const difference = Math.floor((currentTime - date) / 1000);
+
+  if (difference >= 86400) {
+    // Return date since entry is older than a day
+    const newDate = new Date(date);
+    return newDate.toLocaleString();
+  } else if (difference >= 3600) {
+    // Return hours since log entry
+    return `${Math.floor(difference / 3600)}h`;
+  } else {
+    // Reteurn Minutes since log entry
+    return `${Math.floor(difference / 60)}m`;
+  }
+}
+
+module.exports = { dateParser };

nodejs-mini-message-board/src/views/comments.ejs

@@ -0,0 +1,49 @@
+<%- include('header') %>
+<%- include('partials/errors.ejs') %>
+
+  <div class="container">
+  <h1 class="msg-headline"> @<%= message.username %>'s message</h1>
+    <div class="card">
+    <div class="card-metadata">
+     <h3>@<%= message.username %></h3>
+     <div class="metadata-right"> 
+     <span><%= dateParser(message.date) %></span>
+     </div>
+     </div>
+     <div class="card-message">
+      <p><%= message.message %></p>
+     </div>
+    </div>
+    <h2> Comments</h2>
+    <div class="comment-section"> 
+    <% if (comments.length > 0) { %>
+	  <% comments.forEach((comment) => { %>
+    <div class="comment">
+    <span class="material-symbols-outlined">chat</span> 
+    <p> <%= comment.comment %></p>
+    </div>
+    
+    <% }); %>
+    <% } else { %>
+    <p> No comments yet, add one below </p>
+    <% } %>
+    </div>
+
+  </div>
+
+<form method="POST" action="/comment">
+  <div class="container">
+    <h1 class="msg-headline">Add a comment :)</h1>
+    <div class="form-item">
+      <label for="message">Comment</label>
+      <textarea id="comment" name="comment" rows="5" placeholder="Add your two cents..." required></textarea>
+      <input type="hidden" name="messageId" value=<%= message.id %> id="messageId">
+    </div>
+    <div class="form-item btn-row">
+    <button class="btn primary-btn" type="submit">Post</button>
+    <button class="btn" type="button" onCLick="window.location='/';">Return</button>
+    </div>
+  </div>
+</form>
+<%- include('footer') %>
+<!--  vim: sts=2 sw=2 et ts=2 # -->

nodejs-mini-message-board/src/views/footer.ejs

@@ -0,0 +1,9 @@
+  <footer>
+  <div class="footer">
+  <span>Designed by <a href="https://thecodedom.com/">TheCodeDom</a></span>
+   © <span id="year"></span>
+  </div>
+  </footer>
+  <script src="/script.js"></script>
+  </body>
+</html>

nodejs-mini-message-board/src/views/header.ejs

@@ -0,0 +1,14 @@
+
+<html>
+  <head>
+    <title>Message the people</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Leckerli+One&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=chat,comment,mode_comment" />
+    <link rel="stylesheet" href="/styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  <!-- this should be some stuff that loads --!>
+  <%- include('navbar', {links: links}) %>

nodejs-mini-message-board/src/views/index.ejs

@@ -0,0 +1,33 @@
+
+  <%- include('header') %>
+	<div class="container msg-feed"> 
+	<div class="headline">
+	  <h1><a href="new">Click here to chat!</a></h1>
+	</div>
+	  <% msgs.forEach((msg) => { %>
+	    <div class="card">
+	    <div class="card-metadata">
+	     <h3>@<%= msg.username %></h3>
+	     <div class="metadata-right"> 
+	     <span><%= dateParser(msg.date) %></span>
+	     <% if (comments[msg.id]) { %>
+	     <span class="material-symbols-outlined" onClick="test(event)" data-message-id="<%= msg.id %>">
+		comment
+		</span>
+	     <% } else { %>
+	     <span class="material-symbols-outlined" onClick="test(event)" data-message-id="<%= msg.id %>">
+		mode_comment
+		</span>
+	     <% } %>
+	     </div>
+	     </div>
+	     <div class="card-message">
+	     	<p><%= msg.message %></p>
+	     </div>
+	    </div>
+	      <% }); %>
+
+</div>
+
+  <%- include('footer') %>
+

nodejs-mini-message-board/src/views/msgs.ejs

@@ -0,0 +1,22 @@
+
+<%- include('header') %>
+<%- include('partials/errors.ejs') %>
+<form method="POST" action="/new">
+  <div class="container">
+    <h1 class="msg-headline">Add to the conversation :)</h1>
+    <div class="form-item">
+      <label for="uername">Name</label>
+      <input type="text" id="username" name="username" placeholder="Enter your name...">
+    </div>
+    <div class="form-item">
+      <label for="message">Message</label>
+      <textarea id="message" name="message" rows="5" placeholder="what's on your mind?"></textarea>
+    </div>
+    <div class="form-item btn-row">
+    <button class="btn primary-btn" type="submit">Post</button>
+    <button class="btn" type="button" onCLick="window.location='/';">Return</button>
+    </div>
+  </div>
+</form>
+<%- include('footer') %>
+<!--  vim: sts=2 sw=2 et ts=2 # -->

nodejs-mini-message-board/src/views/navbar.ejs

@@ -0,0 +1,10 @@
+<nav class="nav">
+  <% for (let i=0; i < links.length; i++) { %>
+  <li class="nav-item">
+    <a href="<%= links[i].href %>" class="nav-link">
+      <span> <%= links[i].text %> </span>
+    </a>
+  </li>
+
+  <% } %>
+</nav>

nodejs-mini-message-board/src/views/partials/errors.ejs

@@ -0,0 +1,9 @@
+<% if (locals.errors) {%>
+<div class="container errors">
+  <ul>
+    <% errors.forEach(function(error) { %>
+      <li><%= error.msg %></li>
+    <% }); %>
+  </ul>
+  </div>
+<% } %>