Add setup for generating zines.

trueskawka · trueskawka · commit ce3fdeb40970 · 2019-08-29T22:55:18.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/bin/build.js b/bin/build.js
@@ -0,0 +1,64 @@
+const fs   = require('fs');
+const path = require('path');
+
+const buildHTML = (partialsPath, css) => {
+    const inputPath = path.join(partialsPath, 'index.html');
+    let html = fs.readFileSync(inputPath, 'utf-8');
+
+    // 1. get all the HTML partial files (if any exist)
+    //    put them in placeholder spots
+    const partRegExp = new RegExp(/{{ (.*) }}/g);
+    const partials = html.match(partRegExp);
+    if (partials) {
+        partials.forEach((partial) => {
+            const fileName = partial.replace(/[{|}| ]/g, '');
+            const filePath = path.join(partialsPath, `${fileName}.html`);
+            let file = '';
+            if (!fs.existsSync(filePath)) {
+                console.error(`Partial ${fileName} missing, skipping`);
+            } else {
+                file = fs.readFileSync(filePath, 'utf-8');
+            }
+            html = html.replace(partial, file);
+        });
+    }
+
+    // 2. put css in the <style> tag
+    // TO-IMPROVE
+    html = html.replace('<style></style>', `<style>${css}</style>`);
+
+    return html;
+}
+
+const buildCSS = (cssPath) => {
+    const inputPath = path.join(cssPath, 'main.css');
+    let css = fs.readFileSync(inputPath, 'utf-8');
+
+    // 0. add variables for colors
+    // TO-DO
+
+    // 1. get all the CSS partials (if any exist)
+    //    put them in placeholder spots
+    // TO-DO
+
+    // 2. remove comments
+    css = css.replace(/(\/\*.*\*\/)/g, '');
+
+    // 3. remove whitespace
+    // css = css.replace(/\s/g,'');
+
+    return css;
+}
+
+// build output HTML and overwrite existing output
+module.exports = {
+    build: function(zinePath, partialsPath, cssPath) {
+        const css = buildCSS(cssPath);
+        const html = buildHTML(partialsPath, css);
+
+        console.log('Building zine files...');
+        const indexFile = path.join(zinePath, 'index.html');
+        fs.writeFileSync(indexFile, html);
+        console.log('Zine built!');
+    }
+}
diff --git a/bin/index.html b/bin/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Zine Title</title>
+        <style></style>
+    </head>
+    <body>
+        <div class="zine"></div>
+    </body>
+</html>
diff --git a/bin/index.js b/bin/index.js
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+const fs   = require('fs');
+const path = require('path');
+
+const setup = require('./setup.js');
+const build = require('./build.js');
+
+// get script arguments
+const args = process.argv.slice(2);
+
+// get zine path from arguments
+const zinePath = args.shift();
+if (!zinePath) {
+    console.error('Missing zine name!');
+}
+
+const cmd = args.shift();
+if (!cmd) {
+    console.error('Missing command for the script!');
+}
+
+const cssPath = path.join(zinePath, 'css');
+const partialsPath = path.join(zinePath, 'partials');
+
+// watch partials and CSS files for changes, rebuild
+const watch = () => {
+    console.log('\nWatching build files');
+    fs.watch(partialsPath, (event, file) => {
+        console.log(`Changes in: ${file}`);
+        build.build(zinePath, partialsPath, cssPath);
+    });
+    fs.watch(cssPath, (event, file) => {
+        console.log(`Changes in: ${file}`);
+        build.build(zinePath, partialsPath, cssPath);
+    })
+}
+
+switch(cmd) {
+    // set up the directory for the zine
+    case 'setup':
+        setup.setup(zinePath, partialsPath, cssPath);
+        break;
+    // build zine files
+    case 'build':
+        build.build(zinePath, partialsPath, cssPath);
+        break;
+    // watch and build on changes
+    case 'dev':
+        build.build(zinePath, partialsPath, cssPath);
+        watch();
+        break;
+    default:
+        console.error(`Error: Command ${cmd} not implemented!`)
+        break;
+}
+
+
+
+// console.log(process.argv.slice(2));
+// text.split(/\r?\n/).forEach(function (line) {
+//     console.log(line);
+// });
+// const text = fs.readFileSync('kitten', "utf8");
+// fs.appendFileSync('kitten', '456', 'utf8');
+// remove previous output file before generating (not necessary, overwritten)
+// fs.unlinkSync(indexFile);
+
+// const zineDir = path.parse(zinePath);
+// const outputFile = zinePath.name();
diff --git a/bin/main.css b/bin/main.css
@@ -0,0 +1,49 @@
+@font-face {
+    font-family: 'threemedium';
+    src: url('https://alicja.dev/assets/fonts/three.eot');
+    src: url('https://alicja.dev/assets/fonts/three.eot?#iefix') format('embedded-opentype'),
+        url('https://alicja.dev/assets/fonts/three.woff2') format('woff2'),
+        url('https://alicja.dev/assets/fonts/three.woff') format('woff'),
+        url('https://alicja.dev/assets/fonts/three.ttf') format('truetype'),
+        url('https://alicja.dev/assets/fonts/three.svg#threemedium') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+    font: 18px Verdana, sans-serif;
+    font: 36px "threemedium";
+}
+
+.zine {
+    width: 840px;
+    margin: 0 auto;
+}
+
+/*  COLOURS
+    purple-0: #8f4898
+    purple-1: #a846a0
+    purple-2: #c45ab3
+    pink-0:   #ee4266
+    orange:   #ff6700
+    pink-1:   #ffa69e
+    yellow:   #fed766
+    green:    #23ce6b
+    teal:     #3bceac
+    blue:     #009fb7
+    grey-0:   #45454e
+    grey-1:   #b2b3b8
+    grey-2:   #c7c5c6
+    white:    #e8e6e7
+    h-purple: #ce97fb
+    h-pink:   #f6a5eb
+    h-orange: #faa99d
+    h-yellow: #fddf7e
+    h-teal:   #9bfbe1
+    h-blue:   #67ebfa
+*/
+
+@media print {
+    @page { size: auto portrait; margin: 0cm; }
+    .zine { margin: 1cm }
+}
diff --git a/bin/setup.js b/bin/setup.js
@@ -0,0 +1,23 @@
+const fs   = require('fs');
+const path = require('path');
+
+const initialHTML = fs.readFileSync(path.join(__dirname, '/index.html'));
+const initialCSS = fs.readFileSync(path.join(__dirname, './main.css'));
+
+module.exports = {
+    setup: function(zinePath, partialsPath, cssPath) {
+        if (!fs.existsSync(zinePath)) {
+            fs.mkdirSync(zinePath);
+        }
+
+        if (!fs.existsSync(partialsPath)) {
+            fs.mkdirSync(partialsPath);
+        }
+        fs.writeFileSync(path.join(partialsPath, 'index.html'), initialHTML);
+
+        if (!fs.existsSync(cssPath)) {
+            fs.mkdirSync(cssPath);
+        }
+        fs.writeFileSync(path.join(cssPath, 'main.css'), initialCSS);
+    }
+}
