Automatically generate responsive images

astronomersiva · Aug 7, 2018 · b8b0d2c · b8b0d2c
1 parent 5d7defb
commit b8b0d2c
Show file tree

Hide file tree

Showing 10 changed files with 508 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -16,10 +16,11 @@ This was a great learning experience to be honest.
 * Supports Liquid templates.
 * Supports minification and uglification of JS and CSS file(with `.browserlist.rc`).
 * Does asset revision of CSS and JS files.
+* Generates images for various resolutions and automatically inserts `picture` elements with the corresponding `source` elements.
 * Minifies output HTML.
+* Supports including html in md by implementing a custom md syntax. `::: include table.html :::`.
 * Live-reload during development.
 * Copies CNAME to `build` directory, so will work with GH Pages.
-* Supports including html in md by implementing a custom md syntax. `::: include table.html :::`.
 
 ### Directory structure
 

diff --git a/docs/index.html b/docs/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Lego</title><meta name="description" content="Lego, an opinionated static site generator built on NodeJS"><meta content="IE=edge" http-equiv="X-UA-Compatible"><link rel="apple-touch-icon" sizes="180x180" href="static/images/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png"><link rel="manifest" href="static/images/site.webmanifest"><link rel="mask-icon" href="static/images/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="static/images/favicon.ico"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="static/images/browserconfig.xml"><meta name="theme-color" content="#ffffff"><meta name="keywords" content="lego,static site generator,nodejs"><meta name="author" content="Sivasubramanyam A"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="static/css/styles-307c66ee5d.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"></head><body><div class="navbar">LEGO</div><main role="main"><div class="container"><h2 class="text-center">Lego is an opinionated static site generator built with NodeJS.</h2><div class="section"><div>Having written several build tools at work over the last few years, I wanted to try my hands at rolling out a full featured static site generator. This is turning out to be a great learning experience and I hope to blog about this soon.</div></div><div class="section"><h3>Features</h3><ul><li>Uses Liquid as the templating engine.</li><li>Supports Markdown files with YAML front-matter.</li><li>Minifies and uglifies JS and CSS files with a specified <span><pre>.browserlist.rc</pre></span>.</li><li>Does asset revision of CSS and JS files.</li><li>Minifies output HTML.</li><li>Live-reload during development.</li><li>Supports including html in md by implementing a custom md syntax. For example, to include a table, <span><pre>::: include table.html :::</pre></span></li><li>Copies CNAME to build directory, so will work with GH Pages with a custom domain.</li><li>🚧 LESS and Sass support.</li><li>🚧 Extracting and inlining critical CSS.</li><li>🚧 Responsive images and lazy-loading.</li><li>🚧 Generating sitemaps.</li></ul></div><div class="section"><h3>Installation</h3><div>Run <span><pre>npm i -g @astronomersiva/lego</pre></span>.</div></div><div class="section"><h3>Usage</h3><ul><li>To create a new project, run <span><pre>lego g siteName</pre></span>.</li><li>To start the development server, run <span><pre>lego s</pre></span>.</li><li>To create an optimised build for deployment, run <span><pre>lego</pre></span>.</li></ul></div><div class="section"><h3>Contributing</h3><div><p>You are welcome to contribute!</p><p>Feel free to fork the repo or file an issue. The repository is available on <a href="https://github.com/astronomersiva/lego/">Github</a>.</p></div></div><div class="section"><h3>Directory Structure</h3><pre>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Lego</title><meta name="description" content="Lego, an opinionated static site generator built on NodeJS"><meta content="IE=edge" http-equiv="X-UA-Compatible"><link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png"><link rel="manifest" href="/static/images/site.webmanifest"><link rel="mask-icon" href="/static/images/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="/static/images/favicon.ico"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/static/images/browserconfig.xml"><meta name="theme-color" content="#ffffff"><meta name="keywords" content="lego,static site generator,nodejs"><meta name="author" content="Sivasubramanyam A"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="/static/css/styles-e2fbcc6720.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"></head><body><div class="navbar">LEGO</div><main role="main"><div class="container"><h2 class="text-center">Lego is an opinionated static site generator built with NodeJS.</h2><div class="section"><div>Having written several build tools at work over the last few years, I wanted to try my hands at rolling out a full featured static site generator. This is turning out to be a great learning experience and I hope to blog about this soon.</div></div><div class="section"><h3>Features</h3><ul><li>Uses Liquid as the templating engine.</li><li>Supports Markdown files with YAML front-matter.</li><li>Minifies and uglifies JS and CSS files with a specified <span><pre>.browserlist.rc</pre></span>.</li><li>Does asset revision of CSS and JS files.</li><li>Minifies output HTML.</li><li>Live-reload during development.</li><li>Supports including html in md by implementing a custom md syntax. For example, to include a table, <span><pre>::: include table.html :::</pre></span></li><li>Generates images for various resolutions and automatically inserts <span><pre>picture</pre></span>elements with the corresponding <span><pre>source</pre></span>elements.</li><li>Copies CNAME to build directory, so will work with GH Pages with a custom domain.</li><li>🚧 LESS and Sass support.</li><li>🚧 Extracting and inlining critical CSS.</li><li>🚧 Generating sitemaps.</li></ul></div><div class="section"><h3>Installation</h3><div>Run <span><pre>npm i -g @astronomersiva/lego</pre></span>.</div></div><div class="section"><h3>Usage</h3><ul><li>To create a new project, run <span><pre>lego g siteName</pre></span>.</li><li>To start the development server, run <span><pre>lego s</pre></span>.</li><li>To create an optimised build for deployment, run <span><pre>lego</pre></span>.</li><li>To include an HTML in a markdown file, use <span><pre>::: include table.html :::</pre></span>.</li><li>To automatically generate images for various resolutions,<br><code>::: lego-image src="/static/images/${IMAGE}" res="1080,500,320" alt="alternate text" class="img-responsive center-block" :::</code>.</li></ul></div><div class="section"><h3>Directory Structure</h3><pre>
         .
         ├── CNAME
         ├── build                     // contains the built site
@@ -19,4 +19,4 @@
             ├── images
             └── js
                 └── custom-scripts.js
-        </pre></div><div class="section"><h3>License</h3><div>MIT © <a href="https://sivasubramanyam.me/">Sivasubramanyam A</a></div></div></div></main></body></html>
+        </pre></div><div class="section"><h3>Contributing</h3><div><p>You are welcome to contribute!</p><p>Feel free to fork the repo or file an issue. The repository is available on <a href="https://github.com/astronomersiva/lego/">Github</a>.</p></div></div><div class="section"><h3>License</h3><div>MIT © <a href="https://sivasubramanyam.me/">Sivasubramanyam A</a></div></div></div></main></body></html>
diff --git a/docs/index/index.html b/docs/index/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Lego</title><meta name="description" content="Lego, an opinionated static site generator built on NodeJS"><meta content="IE=edge" http-equiv="X-UA-Compatible"><link rel="apple-touch-icon" sizes="180x180" href="static/images/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png"><link rel="manifest" href="static/images/site.webmanifest"><link rel="mask-icon" href="static/images/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="static/images/favicon.ico"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="static/images/browserconfig.xml"><meta name="theme-color" content="#ffffff"><meta name="keywords" content="lego,static site generator,nodejs"><meta name="author" content="Sivasubramanyam A"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="static/css/styles-307c66ee5d.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"></head><body><div class="navbar">LEGO</div><main role="main"><div class="container"><h2 class="text-center">Lego is an opinionated static site generator built with NodeJS.</h2><div class="section"><div>Having written several build tools at work over the last few years, I wanted to try my hands at rolling out a full featured static site generator. This is turning out to be a great learning experience and I hope to blog about this soon.</div></div><div class="section"><h3>Features</h3><ul><li>Uses Liquid as the templating engine.</li><li>Supports Markdown files with YAML front-matter.</li><li>Minifies and uglifies JS and CSS files with a specified <span><pre>.browserlist.rc</pre></span>.</li><li>Does asset revision of CSS and JS files.</li><li>Minifies output HTML.</li><li>Live-reload during development.</li><li>Supports including html in md by implementing a custom md syntax. For example, to include a table, <span><pre>::: include table.html :::</pre></span></li><li>Copies CNAME to build directory, so will work with GH Pages with a custom domain.</li><li>🚧 LESS and Sass support.</li><li>🚧 Extracting and inlining critical CSS.</li><li>🚧 Responsive images and lazy-loading.</li><li>🚧 Generating sitemaps.</li></ul></div><div class="section"><h3>Installation</h3><div>Run <span><pre>npm i -g @astronomersiva/lego</pre></span>.</div></div><div class="section"><h3>Usage</h3><ul><li>To create a new project, run <span><pre>lego g siteName</pre></span>.</li><li>To start the development server, run <span><pre>lego s</pre></span>.</li><li>To create an optimised build for deployment, run <span><pre>lego</pre></span>.</li></ul></div><div class="section"><h3>Contributing</h3><div><p>You are welcome to contribute!</p><p>Feel free to fork the repo or file an issue. The repository is available on <a href="https://github.com/astronomersiva/lego/">Github</a>.</p></div></div><div class="section"><h3>Directory Structure</h3><pre>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Lego</title><meta name="description" content="Lego, an opinionated static site generator built on NodeJS"><meta content="IE=edge" http-equiv="X-UA-Compatible"><link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png"><link rel="manifest" href="/static/images/site.webmanifest"><link rel="mask-icon" href="/static/images/safari-pinned-tab.svg" color="#5bbad5"><link rel="shortcut icon" href="/static/images/favicon.ico"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/static/images/browserconfig.xml"><meta name="theme-color" content="#ffffff"><meta name="keywords" content="lego,static site generator,nodejs"><meta name="author" content="Sivasubramanyam A"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="/static/css/styles-e2fbcc6720.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet"></head><body><div class="navbar">LEGO</div><main role="main"><div class="container"><h2 class="text-center">Lego is an opinionated static site generator built with NodeJS.</h2><div class="section"><div>Having written several build tools at work over the last few years, I wanted to try my hands at rolling out a full featured static site generator. This is turning out to be a great learning experience and I hope to blog about this soon.</div></div><div class="section"><h3>Features</h3><ul><li>Uses Liquid as the templating engine.</li><li>Supports Markdown files with YAML front-matter.</li><li>Minifies and uglifies JS and CSS files with a specified <span><pre>.browserlist.rc</pre></span>.</li><li>Does asset revision of CSS and JS files.</li><li>Minifies output HTML.</li><li>Live-reload during development.</li><li>Supports including html in md by implementing a custom md syntax. For example, to include a table, <span><pre>::: include table.html :::</pre></span></li><li>Generates images for various resolutions and automatically inserts <span><pre>picture</pre></span>elements with the corresponding <span><pre>source</pre></span>elements.</li><li>Copies CNAME to build directory, so will work with GH Pages with a custom domain.</li><li>🚧 LESS and Sass support.</li><li>🚧 Extracting and inlining critical CSS.</li><li>🚧 Generating sitemaps.</li></ul></div><div class="section"><h3>Installation</h3><div>Run <span><pre>npm i -g @astronomersiva/lego</pre></span>.</div></div><div class="section"><h3>Usage</h3><ul><li>To create a new project, run <span><pre>lego g siteName</pre></span>.</li><li>To start the development server, run <span><pre>lego s</pre></span>.</li><li>To create an optimised build for deployment, run <span><pre>lego</pre></span>.</li><li>To include an HTML in a markdown file, use <span><pre>::: include table.html :::</pre></span>.</li><li>To automatically generate images for various resolutions,<br><code>::: lego-image src="/static/images/${IMAGE}" res="1080,500,320" alt="alternate text" class="img-responsive center-block" :::</code>.</li></ul></div><div class="section"><h3>Directory Structure</h3><pre>
         .
         ├── CNAME
         ├── build                     // contains the built site
@@ -19,4 +19,4 @@
             ├── images
             └── js
                 └── custom-scripts.js
-        </pre></div><div class="section"><h3>License</h3><div>MIT © <a href="https://sivasubramanyam.me/">Sivasubramanyam A</a></div></div></div></main></body></html>
+        </pre></div><div class="section"><h3>Contributing</h3><div><p>You are welcome to contribute!</p><p>Feel free to fork the repo or file an issue. The repository is available on <a href="https://github.com/astronomersiva/lego/">Github</a>.</p></div></div><div class="section"><h3>License</h3><div>MIT © <a href="https://sivasubramanyam.me/">Sivasubramanyam A</a></div></div></div></main></body></html>
diff --git a/docs/static/css/styles-307c66ee5d.css → docs/static/css/styles-e2fbcc6720.css b/docs/static/css/styles-307c66ee5d.css → docs/static/css/styles-e2fbcc6720.css
diff --git a/lib/lego.js b/lib/lego.js
@@ -12,7 +12,6 @@ module.exports = async function(args) {
     const [task] = args;
 
     const build = [
-      'cleanBuild',
       [
         'copyCNAME',
         'generatePostsFromMarkdown',

diff --git a/lib/site.js b/lib/site.js
@@ -3,6 +3,7 @@ const fs = require('fs-extra');
 // const findUp = require('find-up');
 const {Signale} = require('signale');
 
+const cleanBuild = require('./utils/cleanBuild');
 const filterFileList = require('./utils/filterFileList');
 const generateHtmlFromMd = require('./utils/generateHtmlFromMd');
 const { BUILD, POSTS } = require('./utils/constants');
@@ -13,7 +14,16 @@ class Site {
     this._tags = [];
     this._assets = {};
     this.logger = new Signale({ interactive: true });
+    if (process.env.DEBUG) {
+      let consoleLog = console.log;
+      this.logger = {
+        success: consoleLog,
+        await: consoleLog,
+        watch: consoleLog
+      }
+    }
 
+    cleanBuild(this);
     this.logger.await('Preparing site');
 
     // let configFile = findUp.sync('lego.js');

diff --git a/lib/tasks/cleanBuild.js → lib/utils/cleanBuild.js b/lib/tasks/cleanBuild.js → lib/utils/cleanBuild.js