375 lines
10 KiB
JavaScript
375 lines
10 KiB
JavaScript
|
/*
|
||
|
|
npm run gulp watch
|
||
|
|
|
||
|
|
//generate sections
|
||
|
|
npm run gulp sections
|
||
|
|
|
||
|
|
//generate blocks
|
||
|
|
npm run gulp blocks
|
||
|
|
|
||
|
|
//take screenshots for all sections
|
||
|
|
npm run gulp screenshots
|
||
|
|
|
||
|
|
//take screenshots for all blocks
|
||
|
|
npm run gulp screenshots-blocks
|
||
|
|
|
||
|
|
//take screenshots for specified section groups
|
||
|
|
npm run gulp screenshots -hero -features
|
||
|
|
*/
|
||
|
|
|
||
|
|
const gulp = require('gulp');
|
||
|
|
const fileinclude = require('gulp-file-include');
|
||
|
|
//const sass = require('gulp-sass')(require('sass'));
|
||
|
|
const sass = require('gulp-sass')(require('node-sass'));
|
||
|
|
const sassGlob = require('gulp-sass-glob');
|
||
|
|
const { formatHTML } = require('gulp-format-html');
|
||
|
|
//const gutil = require('gulp-util');
|
||
|
|
const rename = require("gulp-rename");
|
||
|
|
const imageResize = require('gulp-image-resize');
|
||
|
|
const through2 = require( 'through2' );
|
||
|
|
const connect = require('gulp-connect');
|
||
|
|
const puppeteer = require('puppeteer');
|
||
|
|
const fs = require('fs')
|
||
|
|
const path = require('path');
|
||
|
|
let baseHref = '';
|
||
|
|
let blockPrefix = "landing";
|
||
|
|
let themeName = "landing";
|
||
|
|
|
||
|
|
//get command line parameters after some specified parameter
|
||
|
|
function parameters() {
|
||
|
|
return process.argv.slice(3);
|
||
|
|
}
|
||
|
|
|
||
|
|
const touch = () => through2.obj( function( file, enc, cb ) {
|
||
|
|
if ( file.stat ) {
|
||
|
|
file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
|
||
|
|
}
|
||
|
|
cb( null, file );
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
console.log( process.env.npm_config_path);
|
||
|
|
let dir = process.env.npm_config_path;
|
||
|
|
if (dir) {
|
||
|
|
console.log('Starting directory: ' + process.cwd());
|
||
|
|
try {
|
||
|
|
process.chdir(dir);
|
||
|
|
console.log('New directory: ' + process.cwd());
|
||
|
|
}
|
||
|
|
catch (err) {
|
||
|
|
console.log('chdir: ' + err);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
themeName = path.basename(process.cwd());
|
||
|
|
|
||
|
|
gulp.task('fileinclude', function() {
|
||
|
|
return gulp.src(['./src/*.html', './src/**/*.html', '!**/-*/**', '!**/_*/**'])
|
||
|
|
.pipe(fileinclude({
|
||
|
|
prefix: '@@',
|
||
|
|
basepath: '@file'
|
||
|
|
}))
|
||
|
|
.pipe(formatHTML())
|
||
|
|
.pipe( touch() )
|
||
|
|
.pipe(gulp.dest('./'));
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('sass', function() {
|
||
|
|
return gulp.src(['./scss/*.scss', './scss/**/*.scss', '!**/_*/**'])
|
||
|
|
.pipe(sassGlob())
|
||
|
|
.pipe(sass())
|
||
|
|
.pipe(gulp.dest('./css'));
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
gulp.task('watch', function () {
|
||
|
|
gulp.watch(['./src/*.html', './src/**/*.html'], gulp.series('fileinclude'));
|
||
|
|
gulp.watch(['./scss/*.scss', './scss/**/*.scss', './scss/**/**/*.scss'], gulp.series('sass'));
|
||
|
|
});
|
||
|
|
|
||
|
|
var current_section = "posts";
|
||
|
|
async function screenshots(type = "sections", dirs = []) {
|
||
|
|
let sectionsDir = path.resolve("./" + type);
|
||
|
|
let screenshotDir = path.resolve("./screenshots/" + type + "/");
|
||
|
|
let styleCss = path.resolve("./css/style.bundle.css");
|
||
|
|
let selector = "body > section";
|
||
|
|
let sections = [];
|
||
|
|
let baseDir = path.resolve(".");
|
||
|
|
|
||
|
|
if (!dirs.length) {
|
||
|
|
dirs = fs.readdirSync(sectionsDir).map(fileName => {
|
||
|
|
let filePath = `${sectionsDir}/${fileName}`;
|
||
|
|
let stat = fs.statSync(filePath)
|
||
|
|
|
||
|
|
if (stat.isDirectory()) {
|
||
|
|
let files = fs.readdirSync(filePath).map(sectionFile => {
|
||
|
|
//if (filePath.indexOf(current_section) > 0)
|
||
|
|
{
|
||
|
|
sections.push(`${filePath}/${sectionFile}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const browser = await puppeteer.launch({
|
||
|
|
args: [
|
||
|
|
'--start-maximized'
|
||
|
|
],
|
||
|
|
headless: true,
|
||
|
|
//slowMo: 250,
|
||
|
|
//devtools: true,
|
||
|
|
});
|
||
|
|
const page = await browser.newPage();
|
||
|
|
//await page.setRequestInterception(true);
|
||
|
|
await page.setViewport({
|
||
|
|
width: 1500,
|
||
|
|
height: 800,
|
||
|
|
//deviceScaleFactor: 2
|
||
|
|
});
|
||
|
|
|
||
|
|
page.on('console', (msg) => console.log('PAGE LOG:', msg.text));
|
||
|
|
|
||
|
|
await page.evaluate(() => console.log(`url is ${location.href}`));
|
||
|
|
/*
|
||
|
|
page.on('request', (request) => {
|
||
|
|
if (request.resourceType() === 'image') request.abort();
|
||
|
|
else request.continue();
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
|
||
|
|
let tempFiles = [];
|
||
|
|
|
||
|
|
for (i in sections) {
|
||
|
|
section = sections[i];
|
||
|
|
screenshot = section.replace(sectionsDir, screenshotDir).replace('.html', '.webp');
|
||
|
|
tempFiles.push(screenshot);
|
||
|
|
sectionScreenshot = section.replace('.html', '-screenshot.html');;
|
||
|
|
tempFiles.push(sectionScreenshot);
|
||
|
|
|
||
|
|
//gutil.log(`Start screenshot for '${gutil.colors.cyan(section)}' to '${gutil.colors.magenta(screenshot)}'`);
|
||
|
|
console.log(`Start screenshot for '${section}' to '${screenshot}'`);
|
||
|
|
|
||
|
|
folderName = path.dirname(screenshot);
|
||
|
|
if (!fs.existsSync(folderName)) {
|
||
|
|
fs.mkdirSync(folderName)
|
||
|
|
}
|
||
|
|
|
||
|
|
let content = fs.readFileSync(section,'utf8');
|
||
|
|
let html = `<html data-vvvebjs-editor><head><base href="../../"><link href="/css/style.bundle.css" rel="stylesheet"><link href="/css/screenshots.css" rel="stylesheet"><style>[data-reveal], [data-section] > * {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translate(0);
|
||
|
|
}</style></head><body>${content}</body></html>`;
|
||
|
|
fs.writeFileSync(sectionScreenshot, html);
|
||
|
|
|
||
|
|
//await page.setContent(html, {"waitUntil":"networkidle0"});
|
||
|
|
|
||
|
|
url = "http://127.0.0.1:8008" + sectionScreenshot.replace(baseDir, '');
|
||
|
|
/*
|
||
|
|
await Promise.all([ page.goto(url, { waitUntil: "load", timeout: 10000 }).catch(e => {
|
||
|
|
if (e.message.includes('net::ERR_ABORTED')) { console.log('PAGE LOG:', e.message) }
|
||
|
|
}), page.waitForNavigation() ]);
|
||
|
|
*/
|
||
|
|
|
||
|
|
await page.goto(url, { waitUntil: "load", timeout: 10000 }).catch(e => {
|
||
|
|
console.log('PAGE LOG:', e.message);
|
||
|
|
//if (e.message.includes('net::ERR_ABORTED')) { console.log('PAGE LOG:', e.message) }
|
||
|
|
});
|
||
|
|
//await page.goto("file://" + section);
|
||
|
|
/*
|
||
|
|
await page.addStyleTag({url: `file://${styleCss}`})
|
||
|
|
const result = await page.evaluate((baseHref) => {
|
||
|
|
let head = document.querySelector('head');
|
||
|
|
let base = document.createElement("base");
|
||
|
|
base.href= `file://${baseHref}/`;
|
||
|
|
head.append(base);
|
||
|
|
}, baseHref);
|
||
|
|
*/
|
||
|
|
//await page.waitForNavigation();
|
||
|
|
|
||
|
|
const element = await page.$$("body > div, body > section, body > header, body > footer, body > *");
|
||
|
|
//await page.screenshot({ path: screenshot, fullPage: false, type: 'png' });
|
||
|
|
//console.log(element[0]);
|
||
|
|
await element[0].screenshot({ path: screenshot, type: 'webp' });
|
||
|
|
|
||
|
|
gulp.src(screenshot)
|
||
|
|
.pipe(imageResize({
|
||
|
|
width : 480,
|
||
|
|
format: "webp",
|
||
|
|
quality:0,
|
||
|
|
}))
|
||
|
|
.pipe(rename(function (path) { path.basename += "-thumb"; }))
|
||
|
|
.pipe(gulp.dest(folderName)).on('end', () => {
|
||
|
|
//remove original screenshot and keep only thumb
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
|
||
|
|
tempFiles.map(screenshot => {
|
||
|
|
|
||
|
|
fs.stat(screenshot, function (err, stats) {
|
||
|
|
|
||
|
|
if (err) {
|
||
|
|
return console.error(err);
|
||
|
|
}
|
||
|
|
|
||
|
|
fs.unlink(screenshot,function(err){
|
||
|
|
if(err) {
|
||
|
|
return console.log(err);
|
||
|
|
}
|
||
|
|
//console.log('file deleted successfully');
|
||
|
|
});
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
let templates = {
|
||
|
|
'section':{
|
||
|
|
'group':`
|
||
|
|
Vvveb.SectionsGroup["{{group}}"] = [{{groupList}}];
|
||
|
|
`,
|
||
|
|
'section':
|
||
|
|
`Vvveb.Sections.add("{{id}}", {
|
||
|
|
name: "{{name}}",
|
||
|
|
image: Vvveb.themeBaseUrl + "/{{image}}",
|
||
|
|
html: \`{{html}}\`
|
||
|
|
});`
|
||
|
|
},
|
||
|
|
'block': {
|
||
|
|
'group':`
|
||
|
|
Vvveb.BlocksGroup['{{group}}'] = [{{groupList}}];
|
||
|
|
`,
|
||
|
|
'section':
|
||
|
|
`Vvveb.Blocks.add("{{id}}", {
|
||
|
|
name: "{{name}}",
|
||
|
|
image: Vvveb.themeBaseUrl + "/{{image}}",
|
||
|
|
html: \`{{html}}\`
|
||
|
|
});`
|
||
|
|
}};
|
||
|
|
|
||
|
|
function template(template, data) {
|
||
|
|
return template.replace(/{{(.+?)}}/gm, function(match, p1) {
|
||
|
|
return data[p1];
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function prettify(str) {
|
||
|
|
return str.charAt(0).toUpperCase() + str.slice(1).replace(/[-_]/g,' ');
|
||
|
|
}
|
||
|
|
|
||
|
|
let sectionsSortOrder = [ "hero", "features", "banner", "services"];
|
||
|
|
|
||
|
|
//generate sections for VvvebJs
|
||
|
|
function sections(type = "section", dirs = []) {
|
||
|
|
let sectionsDir = path.resolve(`./${type}s/`);
|
||
|
|
let styleCss = path.resolve("./css/style.bundle.css");
|
||
|
|
let baseDir = path.resolve(".");
|
||
|
|
let dir = [];
|
||
|
|
let sectionsJs = '';
|
||
|
|
|
||
|
|
if (!dirs.length) {
|
||
|
|
dirs = fs.readdirSync(sectionsDir).map(fileName => {
|
||
|
|
let stat = fs.statSync(`${sectionsDir}/${fileName}`);
|
||
|
|
|
||
|
|
if (stat.isDirectory()) {
|
||
|
|
dir.push(fileName);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//console.dir(dir);
|
||
|
|
sectionsSortOrder.reverse();
|
||
|
|
//sort sections
|
||
|
|
dir.sort((a, b) => sectionsSortOrder.indexOf(b) - sectionsSortOrder.indexOf(a));
|
||
|
|
|
||
|
|
//set theme sections first if available
|
||
|
|
const index = dir.indexOf(themeName);
|
||
|
|
if (index > -1) {
|
||
|
|
dir.splice(index, 1);
|
||
|
|
dir.unshift(themeName);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
for (i in dir) {
|
||
|
|
let fileName = dir[i];
|
||
|
|
let filePath = `${sectionsDir}/${fileName}`;
|
||
|
|
|
||
|
|
|
||
|
|
let group = fileName;
|
||
|
|
let name;
|
||
|
|
let id;
|
||
|
|
let html;
|
||
|
|
let sectionsHtml = `<html data-vvvebjs-editor><head><base src="../"><link href="../css/style.bundle.css" rel="stylesheet"><link href="../css/screenshots.css" rel="stylesheet"><style>[data-reveal], [data-section] > * {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translate(0);
|
||
|
|
}</style><link href="../css/screenshots.css" rel="stylesheet"></head><body>`;
|
||
|
|
let image = '';
|
||
|
|
|
||
|
|
let sections = [];
|
||
|
|
let files = fs.readdirSync(filePath).
|
||
|
|
sort((a, b) => parseInt(a.replace( /^\D+/g, '')) - parseInt(b.replace( /^\D+/g, ''))).
|
||
|
|
map(sectionFile => {
|
||
|
|
|
||
|
|
name = sectionFile.replace(".html","");
|
||
|
|
id = `${group}/${name}`;
|
||
|
|
name = prettify(name);
|
||
|
|
image = `screenshots/${type}s/${group}/` + sectionFile.replace(".html", "-thumb.webp");
|
||
|
|
html = fs.readFileSync(`${filePath}/${sectionFile}`,'utf8');
|
||
|
|
sections.push(id);
|
||
|
|
|
||
|
|
sectionsJs += template(templates[type]['section'], {id, name, image, html});
|
||
|
|
sectionsHtml += html.replace('<section', '<section title="' + name + '"');
|
||
|
|
});
|
||
|
|
|
||
|
|
fs.writeFileSync(filePath + ".html", sectionsHtml + "</body></html>");
|
||
|
|
|
||
|
|
let groupList = '"' + sections.join('","') + '"';
|
||
|
|
group = prettify(group);
|
||
|
|
sectionsJs += template(templates[type]['group'], {group, groupList});
|
||
|
|
}
|
||
|
|
|
||
|
|
return fs.writeFileSync(/*path.resolve(".") + *//*`${sectionsDir}/${type}s.js`*/path.resolve(".") + `/${type}s/${type}s.js`, sectionsJs);
|
||
|
|
}
|
||
|
|
|
||
|
|
gulp.task('connect', async function (done) {
|
||
|
|
await connect.server({
|
||
|
|
port: 8008,
|
||
|
|
root: './',
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('disconnect', async function (done) {
|
||
|
|
await connect.serverClose();
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('take-screenshots', async function (done) {
|
||
|
|
return await screenshots('sections');
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('take-screenshots-blocks', async function (done) {
|
||
|
|
return await screenshots("blocks");
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('sections', async function () {
|
||
|
|
return sections("section", parameters());
|
||
|
|
});
|
||
|
|
|
||
|
|
gulp.task('blocks', async function () {
|
||
|
|
return sections("block", parameters());
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// Default Task
|
||
|
|
gulp.task('default', gulp.series('fileinclude', 'sass'));
|
||
|
|
gulp.task('screenshots', gulp.series('connect', 'take-screenshots', 'disconnect'));
|
||
|
|
gulp.task('screenshots-blocks', gulp.series('connect', 'take-screenshots-blocks', 'disconnect'));
|
||
|
|
gulp.task('sections', gulp.series('sections'));
|
||
|
|
gulp.task('blocks', gulp.series('blocks'));
|