Use Node for asset building instead of building on the fly every time (feat. minification!)

.browserslistrc

@@ -0,0 +1 @@
+last 5 versions, not dead

.gitattributes

@@ -1,3 +1 @@
 * text=auto
-/msz text eol=lf
-*.sh text eol=lf

.gitignore

@@ -1,3 +1,7 @@
+# Assets
+/public/assets
+/assets/current.json
+
 # Libraries
 /vendor
 /node_modules

assets/README.md

@@ -1,6 +0,0 @@
-# Misuzu Assets
-
-Subdirectories of the `css` and `js` folder are accessible through the web as `example.com/assets/<subdirectory>.<directory>`.
-Meaning `/assets/js/misuzu` is accessible as `/assets/misuzu.js`.
-Files are concatenated recursively, files first then directories in alphabetical order.
-Use `_` prefixes to raise things up.

assets/assproc.js

@@ -0,0 +1,100 @@
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+const utils = require('./utils.js');
+
+exports.process = async function(root, options) {
+    const macroPrefix = options.prefix || '#';
+    const entryPoint = options.entry || '';
+
+    root = fs.realpathSync(root);
+
+    const included = [];
+
+    const processFile = async function(fileName) {
+        const fullPath = path.join(root, fileName);
+        if(included.includes(fullPath))
+            return '';
+        included.push(fullPath);
+
+        if(!fullPath.startsWith(root)) {
+            console.error('INVALID PATH: ' + fullPath);
+            return '/* *** INVALID PATH: ' + fullPath + ' */';
+        }
+
+        if(!fs.existsSync(fullPath)) {
+            console.error('FILE NOT FOUND: ' + fullPath);
+            return '/* *** FILE NOT FOUND: ' + fullPath + ' */';
+        }
+
+        const lines = readline.createInterface({
+            input: fs.createReadStream(fullPath),
+            crlfDelay: Infinity,
+        });
+
+        let output = '';
+        let lastWasEmpty = false;
+
+        if(options.showPath)
+            output += "/* *** PATH: " + fullPath + " */\n";
+
+        for await(const line of lines) {
+            const lineTrimmed = utils.trim(line);
+            if(lineTrimmed === '')
+                continue;
+
+            if(line.startsWith(macroPrefix)) {
+                const args = lineTrimmed.split(' ');
+                const macro = utils.trim(utils.trimStart(args.shift(), macroPrefix));
+
+                switch(macro) {
+                    case 'comment':
+                        break;
+
+                    case 'include': {
+                        const includePath = utils.trimEnd(args.join(' '), ';');
+                        output += utils.trim(await processFile(includePath));
+                        output += "\n";
+                        break;
+                    }
+
+                    default:
+                        output += line;
+                        output += "\n";
+                        break;
+                }
+            } else {
+                output += line;
+                output += "\n";
+            }
+        }
+
+        return output;
+    };
+
+    return await processFile(entryPoint);
+};
+
+exports.housekeep = function(assetsPath) {
+    const files = fs.readdirSync(assetsPath).map(fileName => {
+        const stats = fs.statSync(path.join(assetsPath, fileName));
+        return {
+            name: fileName,
+            lastMod: stats.mtimeMs,
+        };
+    }).sort((a, b) => b.lastMod - a.lastMod).map(info => info.name);
+
+    const regex = /^(.+)-([a-f0-9]+)\.(.+)$/i;
+    const counts = {};
+
+    for(const fileName of files) {
+        const match = fileName.match(regex);
+        if(match) {
+            const name = match[1] + '-' + match[3];
+            counts[name] = (counts[name] || 0) + 1;
+
+            if(counts[name] > 5)
+                fs.unlinkSync(path.join(assetsPath, fileName));
+        } else console.log(`Encountered file name in assets folder with unexpected format: ${fileName}`);
+    }
+};

assets/css/misuzu/_msz.css

@@ -1,96 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    position: relative;
-    outline-style: none;
-}
-
-html,
-body {
-    width: 100%;
-    height: 100%;
-}
-
-[hidden],
-.hidden {
-    display: none !important;
-    visibility: hidden !important;
-}
-
-:root {
-    --font-size: 12px;
-    --line-height: 20px;
-    --font-regular: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
-    --font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-
-    --site-max-width: 1200px;
-    --site-mobile-width: 800px;
-    --site-logo: url('/images/logos/imouto-default.png');
-
-    --header-height-desktop: 70px;
-    --header-height-mobile: 50px;
-
-    --background-image: initial;
-    --background-colour: #111;
-    --background-colour-translucent-1: rgba(17, 17, 17, 0.1);
-    --background-colour-translucent-2: rgba(17, 17, 17, 0.2);
-    --background-colour-translucent-3: rgba(17, 17, 17, 0.3);
-    --background-colour-translucent-4: rgba(17, 17, 17, 0.4);
-    --background-colour-translucent-5: rgba(17, 17, 17, 0.5);
-    --background-colour-translucent-6: rgba(17, 17, 17, 0.6);
-    --background-colour-translucent-7: rgba(17, 17, 17, 0.7);
-    --background-colour-translucent-8: rgba(17, 17, 17, 0.8);
-    --background-colour-translucent-9: rgba(17, 17, 17, 0.9);
-    --background-pattern: url('/images/clouds.png') fixed;
-
-    --container-colour: #161616;
-
-    --text-colour: #fff;
-    --text-colour-inverted: #000;
-
-    --user-colour: inherit;
-    --user-header: url('/images/pixel.png');
-    --accent-colour: #8559a5;
-    --header-accent-colour: var(--accent-colour);
-}
-
-html {
-    scrollbar-color: var(--accent-colour) var(--background-colour);
-}
-
-.main {
-    display: flex;
-    flex-direction: column;
-    background-image: var(--background-image);
-    background-color: var(--background-colour);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
-    font-family: var(--font-regular);
-    color: var(--text-colour);
-    background-attachment: fixed;
-    background-position: center center;
-}
-.main__wrapper {
-    max-width: var(--site-max-width);
-    width: 100%;
-    margin: 0 auto;
-    flex: 1 0 auto;
-}
-
-.main--bg-blend {
-    background-color: var(--accent-colour);
-    background-blend-mode: multiply;
-}
-.main--bg-slide   { animation: background-slide infinite linear 2s; }
-.main--bg-cover   { background-size: cover; }
-.main--bg-contain { background-size: contain; }
-.main--bg-stretch { background-size: 100% 100%; }
-.main--bg-tile    { background-size: auto; }
-
-.link {
-    color: var(--accent-colour);
-    text-decoration: none;
-}
-.link:hover, .link:focus { text-decoration: underline; }
-

assets/misuzu.css/main.css

@@ -0,0 +1,214 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    position: relative;
+    outline-style: none;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+[hidden],
+.hidden {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+:root {
+    --font-size: 12px;
+    --line-height: 20px;
+    --font-regular: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
+    --font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+
+    --site-max-width: 1200px;
+    --site-mobile-width: 800px;
+    --site-logo: url('/images/logos/imouto-default.png');
+
+    --header-height-desktop: 70px;
+    --header-height-mobile: 50px;
+
+    --background-image: initial;
+    --background-colour: #111;
+    --background-colour-translucent-1: rgba(17, 17, 17, 0.1);
+    --background-colour-translucent-2: rgba(17, 17, 17, 0.2);
+    --background-colour-translucent-3: rgba(17, 17, 17, 0.3);
+    --background-colour-translucent-4: rgba(17, 17, 17, 0.4);
+    --background-colour-translucent-5: rgba(17, 17, 17, 0.5);
+    --background-colour-translucent-6: rgba(17, 17, 17, 0.6);
+    --background-colour-translucent-7: rgba(17, 17, 17, 0.7);
+    --background-colour-translucent-8: rgba(17, 17, 17, 0.8);
+    --background-colour-translucent-9: rgba(17, 17, 17, 0.9);
+    --background-pattern: url('/images/clouds.png') fixed;
+
+    --container-colour: #161616;
+
+    --text-colour: #fff;
+    --text-colour-inverted: #000;
+
+    --user-colour: inherit;
+    --user-header: url('/images/pixel.png');
+    --accent-colour: #8559a5;
+    --header-accent-colour: var(--accent-colour);
+}
+
+html {
+    scrollbar-color: var(--accent-colour) var(--background-colour);
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    background-image: var(--background-image);
+    background-color: var(--background-colour);
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    font-family: var(--font-regular);
+    color: var(--text-colour);
+    background-attachment: fixed;
+    background-position: center center;
+}
+.main__wrapper {
+    max-width: var(--site-max-width);
+    width: 100%;
+    margin: 0 auto;
+    flex: 1 0 auto;
+}
+
+.main--bg-blend {
+    background-color: var(--accent-colour);
+    background-blend-mode: multiply;
+}
+.main--bg-slide   { animation: background-slide infinite linear 2s; }
+.main--bg-cover   { background-size: cover; }
+.main--bg-contain { background-size: contain; }
+.main--bg-stretch { background-size: 100% 100%; }
+.main--bg-tile    { background-size: auto; }
+
+.link {
+    color: var(--accent-colour);
+    text-decoration: none;
+}
+.link:hover, .link:focus { text-decoration: underline; }
+
+@comment "convert all of the below into a proper inclusion structure";
+
+@include animations.css;
+@include avatar.css;
+@include bb.css;
+@include confirm.css;
+@include container.css;
+@include eeprom.css;
+@include embed.css;
+@include emoticon.css;
+@include flags.css;
+@include footer.css;
+@include header.css;
+@include impersonate.css;
+@include landing.css;
+@include main.css;
+@include markdown.css;
+@include messagebox.css;
+@include navigation.css;
+@include pagination.css;
+@include permissions.css;
+@include warning.css;
+
+@include _input/button.css;
+@include _input/checkbox.css;
+@include _input/colour.css;
+@include _input/select.css;
+@include _input/text.css;
+@include _input/textarea.css;
+@include _input/upload.css;
+
+@include auth/buttons.css;
+@include auth/container.css;
+@include auth/label.css;
+@include auth/login.css;
+@include auth/logout.css;
+@include auth/register.css;
+@include auth/warning.css;
+
+@include changelog/_changelog.css;
+@include changelog/change.css;
+@include changelog/container.css;
+@include changelog/entry.css;
+@include changelog/listing.css;
+@include changelog/log.css;
+@include changelog/pagination.css;
+
+@include comments/comment.css;
+@include comments/comments.css;
+
+@include forum/actions.css;
+@include forum/categories.css;
+@include forum/confirm.css;
+@include forum/header.css;
+@include forum/leaderboard.css;
+@include forum/poll.css;
+@include forum/post.css;
+@include forum/priority.css;
+@include forum/status.css;
+@include forum/topics.css;
+
+@include home/landingv2-footer.css;
+@include home/landingv2-header.css;
+@include home/landingv2.css;
+
+@include manage/_manage.css;
+@include manage/blacklist.css;
+@include manage/changelog-actions-tags.css;
+@include manage/emote.css;
+@include manage/emotes.css;
+@include manage/navigation.css;
+@include manage/role-item.css;
+@include manage/roles.css;
+@include manage/settings.css;
+@include manage/statistic.css;
+@include manage/statistics.css;
+@include manage/tag.css;
+@include manage/tags.css;
+@include manage/user-item.css;
+@include manage/user.css;
+@include manage/users.css;
+
+@include news/container.css;
+@include news/feeds.css;
+@include news/list.css;
+@include news/post.css;
+@include news/preview.css;
+@include news/sidebar.css;
+
+@include profile/about.css;
+@include profile/accounts.css;
+@include profile/birthdate.css;
+@include profile/forum-activity.css;
+@include profile/guidelines.css;
+@include profile/header.css;
+@include profile/profile.css;
+@include profile/relations.css;
+@include profile/signature.css;
+@include profile/warning.css;
+
+@include search/anchor.css;
+@include search/categories.css;
+@include search/container.css;
+@include search/header.css;
+@include search/input.css;
+@include search/none.css;
+
+@include settings/account-logs.css;
+@include settings/account.css;
+@include settings/data.css;
+@include settings/login-attempts.css;
+@include settings/role.css;
+@include settings/sessions.css;
+@include settings/settings.css;
+@include settings/two-factor.css;
+
+@include user/usercard.css;
+@include user/userlist.css;