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

This commit is contained in:
flash 2023-07-17 14:37:39 +00:00
parent f24f811acc
commit 074e078692
139 changed files with 1639 additions and 185 deletions

1
.browserslistrc Normal file
View file

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

2
.gitattributes vendored
View file

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

4
.gitignore vendored
View file

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

View file

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

100
assets/assproc.js Normal file
View file

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

View file

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

214
assets/misuzu.css/main.css Normal file
View file

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

Some files were not shown because too many files have changed in this diff Show more