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
- 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.

View File

@ -1,5 +1,9 @@
{
"def_theme": "default",
"def_theme": {
"name": "white",
"color": "black",
"language": "en"
},
"forum_name": "akf",
"description": "Akf-forum!",
"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 }, {
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);

1
lib.js
View File

@ -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,

View File

@ -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 },

View File

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

View File

@ -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"

View File

@ -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>

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>
<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:

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