Enchanted theme support!

This commit is contained in:
Akif9748 2022-10-10 00:04:25 +03:00
parent 4e90431a3d
commit 388835b85f
29 changed files with 59 additions and 15 deletions

View File

@ -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 - Add a feature list to README.md
- delete admin??? - delete admin???
- change category name - 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 ### front-end
- better usermenu for user profile - better usermenu for user profile
- old contents / titles add to forum interface - old contents / titles add to forum interface
- categories page is need a update, thread count in category (?) - categories page is need a update, thread count in category (?)
- add ban button to user profile.? - add ban button to user profile.?
- who liked a message for web. - who liked a message for web.
- edit config from web admin panel. - give admin button
## Major Version History ## Major Version History
- V5: Enchanted theme support
- V4: Caching - V4: Caching
- V3: New Theme - V3: New Theme
- V2: Backend fix, mongoose is fixed. Really big fix. - V2: Backend fix, mongoose is fixed. Really big fix.

View File

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

View File

@ -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 }, { req.user = req.session.userID ? await UserModel.findOneAndUpdate({ id: req.session.userID }, {
lastSeen: Date.now(), $addToSet: { ips: req.clientIp } lastSeen: Date.now(), $addToSet: { ips: req.clientIp }
}) : null; }) : 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); res.error = (type, error) => res.reply("error", { type, error }, type);

1
lib.js
View File

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

View File

@ -11,7 +11,11 @@ const schema = new mongoose.Schema({
edited: { type: Boolean, default: false }, edited: { type: Boolean, default: false },
about: { type: String, default: "", maxlength: limits.desp }, about: { type: String, default: "", maxlength: limits.desp },
admin: { type: Boolean, default: false }, 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 }, lastSeen: { type: Date, default: Date.now, select: false },
hideLastSeen: { type: Boolean, default: false }, hideLastSeen: { type: Boolean, default: false },
ips: { type: [String], default: [], select: false }, ips: { type: [String], default: [], select: false },

View File

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

View File

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

View File

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

22
themes/default/index.js Normal file
View File

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

View File

@ -10,8 +10,7 @@
<h1 style="color: var(--main);">Setup</h1> <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> <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"> <form method="POST">
Default theme:
<input type="text" name="def_theme" value="default" required>
Forum name: Forum name:
<input type="text" name="forum_name" value="akf" required> <input type="text" name="forum_name" value="akf" required>
Forum description: Forum description:

6
themes/index.js Normal file
View File

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