snuffster/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

front/build: split HTML into templates

Browse source
This commit is contained in:
rr- 2016-03-27 21:10:41 +02:00
parent 1846a1fa2c
commit 5774e5e9ef
5 changed files with 80 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
scripts/build-frontend.js
View file

@ -1,7 +1,9 @@
'use strict';
const glob = require('glob');
const fs = require('fs');
const glob = require('glob');
const path = require('path');
const util = require('util');
function getConfig() {
const ini = require('ini');
@ -36,18 +38,35 @@ function getConfig() {
return config;
}
function bundleHtml() {
function bundleHtml(config) {
const minify = require('html-minifier').minify;
const html = fs.readFileSync('./static/html/index.htm', 'utf-8');
fs.writeFileSync(
'./public/index.htm',
minify(html, {removeComments: true, collapseWhitespace: true}));
console.info('Bundled HTML');
const baseHtml = fs.readFileSync('./static/html/index.htm', 'utf-8');
glob('static/html/**/*.tpl', {}, (er, files) => {
let templatesHtml = '';
for (const file of files) {
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() {
const minify = require('cssmin');
glob('static/**/*.css', {}, (er, files) => {
glob('static/css/**/*.css', {}, (er, files) => {
let css = '';
for (const file of files) {
css += fs.readFileSync(file);
@ -78,6 +97,6 @@ function bundleConfig(config) {
const config = getConfig();
bundleConfig(config);
bundleHtml();
bundleHtml(config);
bundleCss();
bundleJs();

60
static/html/index.htm
View file

@ -1,71 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<title>szurubooru</title>
<meta charset='utf-8'/>
<title><!-- change via config.ini --></title>
<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=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>
<body>
<div id='top-nav-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>
</html>

11
static/html/top_navigation.tpl Normal file
View 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
View 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>

2
static/js/views/top_navigation_view.js
View file

@ -5,7 +5,7 @@ const BaseView = require('./base_view.js');
class TopNavigationView extends BaseView {
constructor(handlebars) {
super(handlebars);
this.template = this.getTemplate('top-nav-template');
this.template = this.getTemplate('top-navigation-template');
this.navHolder = document.getElementById('top-nav-holder');
}