Enchanted theme support!

README.md

@@ -54,16 +54,19 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
 - Add a feature list to README.md
 - delete admin???
 - change category name
-- theme support++, directly edit html!
+- theme support++, directly edit html! patch user support!
+- enchanted theme: not take all of the public! "/css
+
 ### front-end
 - better usermenu for user profile
 - old contents / titles add to forum interface
 - categories page is need a update, thread count in category (?) 
 - add ban button to user profile.?
 - who liked a message for web.
-- edit config from web admin panel.
+- give admin button
 
 ## Major Version History
+- V5: Enchanted theme support
 - V4: Caching
 - V3: New Theme
 - V2: Backend fix, mongoose is fixed. Really big fix.

config.json.example

@@ -1,5 +1,9 @@
 {
-    "def_theme": "default",
+    "def_theme": {
+        "name": "white",
+        "color": "black",
+        "language": "en"
+    },
     "forum_name": "akf",
     "description": "Akf-forum!",
     "limits": {

index.js

@@ -30,8 +30,15 @@ app.use(express.static("public", { maxAge: 86400 * 1000 }), express.json(), expr
         req.user = req.session.userID ? await UserModel.findOneAndUpdate({ id: req.session.userID }, {
             lastSeen: Date.now(), $addToSet: { ips: req.clientIp }
         }) : null;
-        res.reply = (page, options = {}, status = 200) => res.status(status)
-            .render(page, { user: req.user, theme: req.user?.theme || def_theme, forum_name, description, ...options });
+
+        const theme = require(`./themes/${req.user?.theme?.name || def_theme.name}`);
+        res.reply = (page, data = {}, status = 200) =>
+            theme.render(page, { user: req.user, ...data }, {
+                color: req.user?.theme?.color || def_theme.color,
+                lang: req.user?.theme?.language || def_theme.language,
+                forum_name,
+                description
+            }, res.status(status));
 
         res.error = (type, error) => res.reply("error", { type, error }, type);
 

lib.js

@@ -5,7 +5,6 @@ require("dotenv").config();
 module.exports = {
     threadEnum: ["OPEN", "APPROVAL", "DELETED"],
     userEnum: ["ACTIVE", "APPROVAL", "DELETED", "BANNED"],
-    themes: ["default", "black"],
     RL(windowMs = 60_000, max = 1) {
         return RL({
             windowMs, max, standardHeaders: true, legacyHeaders: false,

models/User.js

@@ -11,7 +11,11 @@ const schema = new mongoose.Schema({
     edited: { type: Boolean, default: false },
     about: { type: String, default: "", maxlength: limits.desp },
     admin: { type: Boolean, default: false },
-    theme: { type: String, default: def_theme },
+    theme: {
+        name: { type: String, default: def_theme.name },
+        color: { type: String, default: def_theme.color },
+        language: { type: String, default: def_theme.language }
+    },
     lastSeen: { type: Date, default: Date.now, select: false },
     hideLastSeen: { type: Boolean, default: false },
     ips: { type: [String], default: [], select: false },

routes/api/routes/users.js

@@ -1,7 +1,6 @@
 const { UserModel, BanModel } = require("../../../models");
 const { Router } = require("express");
 const multer = require("multer");
-const { themes } = require("../../../lib");
 
 const app = Router();
 
@@ -52,7 +51,7 @@ app.patch("/:id", async (req, res) => {
         if (about.length > desp) return res.error(400, `About must be under ${desp} characters`);
         member.about = about;
     }
-    if (theme || themes.includes(theme)) member.theme = theme;
+    // if (theme || themes.includes(theme)) member.theme = theme;
 
     if (typeof admin === "boolean" || ["false", "true"].includes(admin)) member.admin = admin;
     if (deleted === false) member.deleted = false;

themes/default/extra/footer.ejs

@@ -1,12 +1,13 @@
 <div class="footer">
   <% if (user){ %>
-  <a onclick="invert()" class="btn-primary" style="color:white;"><%=(user.theme === "default" ? "black" : "default" ) + " theme!" %></a>
+  <a onclick="invert()" class="btn-primary" style="color:white;"><%=(user.theme.color === "default" ? "black" : "default" ) + " theme!" %></a>
   <script>
     async function invert() {
+      return alert("disabled!")
       await fetch('/api/users/<%= user.id %>', {
         method: 'PATCH',
         body: JSON.stringify({
-          theme: "<%= user.theme === `default` ? `black` : `default` %>"
+          theme: {color:"<%= user.theme.color === `default` ? `black` : `default` %>"}
         }),
         headers: {
           "Content-Type": "application/json"

themes/default/extra/meta.ejs

@@ -4,9 +4,9 @@
   <title><%= title || forum_name +"-forum" %></title>
   <meta name="description" content="<%= description %>">
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
-  <link rel="stylesheet" href="/css/themes/<%= theme %>.css" />
+  <link rel="stylesheet" href="/css/themes/<%= color %>.css" />
   <link rel="stylesheet" href="/css/common.css" />
-  <% if (theme === "black") { %>
+  <% if (color === "black") { %>
   <meta name="theme-color" content="#000000" />
   <% } %>
 </head>

themes/default/index.js

@@ -0,0 +1,22 @@
+const path = require('path');
+module.exports = {
+    name: "default",
+    colors: ["black", "white"],
+    languages: ["en"],
+    getFilePath(page) {
+        return path.resolve(__dirname, page)  ;// path of the file for ejs rendering
+    },
+    /**
+     * Renderer function for theme
+     * @param {String} file a page of forum 
+     * @param {{ user: Object }} data informations about page 
+     * @param {{ color: String, forum_name:String, description:String }} options Extra options
+     * @param {Object} render request object
+     */
+    render(file, data, options, req) {
+       // const { color, language, forum_name, description } = options; // General informations, meta, forum name, user language and color
+       // const { user } = data; // specific informations about page, user (req.user || null), and more
+
+        return req.render(this.getFilePath(file), { ...options, ...data });
+    }
+}

themes/default/setup.ejs

@@ -10,8 +10,7 @@
   <h1 style="color: var(--main);">Setup</h1>
   <h2 style="color: var(--second);">There is default settings for akf-forum, you not need to edit them, but you can! And, the first registered user will be admin.</h2>
   <form method="POST">
-    Default theme:
-    <input type="text" name="def_theme" value="default" required>
+
     Forum name:
     <input type="text" name="forum_name" value="akf" required>
     Forum description:

themes/index.js

@@ -0,0 +1,6 @@
+const fs = require("fs");
+
+for (const theme of fs.readdirSync("./themes")) {
+    if (theme === "index.js") continue;
+    module.exports[theme] = require(`./${theme}`);
+}