front/build: split HTML into templates
This commit is contained in:
rr-
parent
1846a1fa2c
commit
5774e5e9ef
5 changed files with 80 additions and 68 deletions
|
|
@ -1,7 +1,9 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const glob = require('glob');
|
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
const glob = require('glob');
|
||||||
|
const path = require('path');
|
||||||
|
const util = require('util');
|
||||||
|
|
||||||
function getConfig() {
|
function getConfig() {
|
||||||
const ini = require('ini');
|
const ini = require('ini');
|
||||||
|
|
@ -36,18 +38,35 @@ function getConfig() {
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
|
|
||||||
function bundleHtml() {
|
function bundleHtml(config) {
|
||||||
const minify = require('html-minifier').minify;
|
const minify = require('html-minifier').minify;
|
||||||
const html = fs.readFileSync('./static/html/index.htm', 'utf-8');
|
const baseHtml = fs.readFileSync('./static/html/index.htm', 'utf-8');
|
||||||
fs.writeFileSync(
|
glob('static/html/**/*.tpl', {}, (er, files) => {
|
||||||
'./public/index.htm',
|
let templatesHtml = '';
|
||||||
minify(html, {removeComments: true, collapseWhitespace: true}));
|
for (const file of files) {
|
||||||
console.info('Bundled HTML');
|
templatesHtml += util.format(
|
||||||
|
'<template id=\'%s-template\'>%s</template>',
|
||||||
|
path.basename(file, '.tpl').replace('_', '-'),
|
||||||
|
fs.readFileSync(file));
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalHtml = baseHtml
|
||||||
|
.replace(/(<\/head>)/, templatesHtml + '$1')
|
||||||
|
.replace(
|
||||||
|
/(<title>)(.*)(<\/title>)/,
|
||||||
|
util.format('$1%s$3', config.basic.name));
|
||||||
|
|
||||||
|
fs.writeFileSync(
|
||||||
|
'./public/index.htm',
|
||||||
|
minify(
|
||||||
|
finalHtml, {removeComments: true, collapseWhitespace: true}));
|
||||||
|
console.info('Bundled HTML');
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function bundleCss() {
|
function bundleCss() {
|
||||||
const minify = require('cssmin');
|
const minify = require('cssmin');
|
||||||
glob('static/**/*.css', {}, (er, files) => {
|
glob('static/css/**/*.css', {}, (er, files) => {
|
||||||
let css = '';
|
let css = '';
|
||||||
for (const file of files) {
|
for (const file of files) {
|
||||||
css += fs.readFileSync(file);
|
css += fs.readFileSync(file);
|
||||||
|
|
@ -78,6 +97,6 @@ function bundleConfig(config) {
|
||||||
|
|
||||||
const config = getConfig();
|
const config = getConfig();
|
||||||
bundleConfig(config);
|
bundleConfig(config);
|
||||||
bundleHtml();
|
bundleHtml(config);
|
||||||
bundleCss();
|
bundleCss();
|
||||||
bundleJs();
|
bundleJs();
|
||||||
|
|
|
||||||
|
|
@ -1,71 +1,15 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>szurubooru</title>
|
|
||||||
<meta charset='utf-8'/>
|
<meta charset='utf-8'/>
|
||||||
|
<title><!-- change via config.ini --></title>
|
||||||
<link href='/bundle.min.css' rel='stylesheet' type='text/css'>
|
<link href='/bundle.min.css' rel='stylesheet' type='text/css'>
|
||||||
<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
|
<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
|
||||||
<link href='//fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
<link href='//fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||||
<!-- TODO: configurable favicon -->
|
|
||||||
<template id='top-nav-template'>
|
|
||||||
<nav id='top-nav' class='text-nav'>
|
|
||||||
<ul><!--
|
|
||||||
-->{{#each items}}<!--
|
|
||||||
-->{{#if this.available}}<!--
|
|
||||||
--><li data-name='{{@key}}'><!--
|
|
||||||
--><a href='{{this.url}}'>{{this.name}}</a><!--
|
|
||||||
--></li><!--
|
|
||||||
-->{{/if}}<!--
|
|
||||||
-->{{/each}}<!--
|
|
||||||
--></ul>
|
|
||||||
</nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template id='user-registration-template'>
|
|
||||||
<div class='center' id='user-registration'>
|
|
||||||
<h1>Registration</h1>
|
|
||||||
<br/>
|
|
||||||
<form autocomplete='off'>
|
|
||||||
<fieldset class='input'>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label for='user-name'>User name:</label>
|
|
||||||
<input id='user-name' name='user-name' type='text' autocomplete='off' placeholder='e.g. darth_vader' required/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for='user-password'>Password:</label>
|
|
||||||
<input id='user-password' name='user-password' type='password' autocomplete='off' placeholder='e.g. cupcake' required/>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label for='user-email'>Email (optional):</label>
|
|
||||||
<input id='user-email' name='user-email' type='email' autocomplete='off' placeholder='e.g. vader@empire.gov'/>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</fieldset>
|
|
||||||
<hr/>
|
|
||||||
<p>By clicking "Create an account" button below, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
|
|
||||||
<hr/>
|
|
||||||
<fieldset class='buttons'>
|
|
||||||
<input type='submit' value='Create an account'/>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
<div class='info'>
|
|
||||||
<p>Registered users can:</p>
|
|
||||||
<ul>
|
|
||||||
<li>upload new posts</li>
|
|
||||||
<li>mark them as favorite</li>
|
|
||||||
<li>add comments</li>
|
|
||||||
<li>vote up/down on posts and comments</li>
|
|
||||||
</ul>
|
|
||||||
<p>Your e-mail will be used to show your <a href='http://gravatar.com/'>Gravatar</a> and for password reminders only. Leave blank for random Gravatar.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id='top-nav-holder'></div>
|
<div id='top-nav-holder'></div>
|
||||||
<div id='content-holder'></div>
|
<div id='content-holder'></div>
|
||||||
<script type='text/javascript' src='/bundle.min.js'></script>
|
<script type='text/javascript' src='/bundle.min.js'></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
11
static/html/top_navigation.tpl
Normal file
11
static/html/top_navigation.tpl
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<nav id='top-nav' class='text-nav'>
|
||||||
|
<ul><!--
|
||||||
|
-->{{#each items}}<!--
|
||||||
|
-->{{#if this.available}}<!--
|
||||||
|
--><li data-name='{{@key}}'><!--
|
||||||
|
--><a href='{{this.url}}'>{{this.name}}</a><!--
|
||||||
|
--></li><!--
|
||||||
|
-->{{/if}}<!--
|
||||||
|
-->{{/each}}<!--
|
||||||
|
--></ul>
|
||||||
|
</nav>
|
||||||
38
static/html/user_registration.tpl
Normal file
38
static/html/user_registration.tpl
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<div class='center' id='user-registration'>
|
||||||
|
<h1>Registration</h1>
|
||||||
|
<br/>
|
||||||
|
<form autocomplete='off'>
|
||||||
|
<fieldset class='input'>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<label for='user-name'>User name:</label>
|
||||||
|
<input id='user-name' name='user-name' type='text' autocomplete='off' placeholder='e.g. darth_vader' required/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label for='user-password'>Password:</label>
|
||||||
|
<input id='user-password' name='user-password' type='password' autocomplete='off' placeholder='e.g. cupcake' required/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label for='user-email'>Email (optional):</label>
|
||||||
|
<input id='user-email' name='user-email' type='email' autocomplete='off' placeholder='e.g. vader@empire.gov'/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</fieldset>
|
||||||
|
<hr/>
|
||||||
|
<p>By clicking "Create an account" button below, you are agreeing to the <a href='/help/tos'>Terms of Service</a>.</p>
|
||||||
|
<hr/>
|
||||||
|
<fieldset class='buttons'>
|
||||||
|
<input type='submit' value='Create an account'/>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<div class='info'>
|
||||||
|
<p>Registered users can:</p>
|
||||||
|
<ul>
|
||||||
|
<li>upload new posts</li>
|
||||||
|
<li>mark them as favorite</li>
|
||||||
|
<li>add comments</li>
|
||||||
|
<li>vote up/down on posts and comments</li>
|
||||||
|
</ul>
|
||||||
|
<p>Your e-mail will be used to show your <a href='http://gravatar.com/'>Gravatar</a> and for password reminders only. Leave blank for random Gravatar.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -5,7 +5,7 @@ const BaseView = require('./base_view.js');
|
||||||
class TopNavigationView extends BaseView {
|
class TopNavigationView extends BaseView {
|
||||||
constructor(handlebars) {
|
constructor(handlebars) {
|
||||||
super(handlebars);
|
super(handlebars);
|
||||||
this.template = this.getTemplate('top-nav-template');
|
this.template = this.getTemplate('top-navigation-template');
|
||||||
this.navHolder = document.getElementById('top-nav-holder');
|
this.navHolder = document.getElementById('top-nav-holder');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue