Skip to content

Commit

Permalink
Expose isDevelopment flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@astronomersiva
astronomersiva committed Sep 23, 2018
1 parent eb3b018 commit 71bac28
Show file tree
Hide file tree
Showing 10 changed files with 32 additions and 11 deletions.
12 changes: 12 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,18 @@ This was a great learning experience to be honest.
* Run `lego g` to create a new site.
* Run `lego s` to run a server.
* Run `lego` to create an optimised build.
* To include an HTML in a markdown file, use ::: include table.html :::.
* To automatically generate images for various resolutions,
```
::: lego-image src="static/images/${IMAGE}" res="1080,500,320" alt="alternate text" class="img-responsive center-block" :::
```
* lego also exposes a `isDevelopment` variable that you can use to disable certain analytics.
For example,
```
{% unless isDevelopment %}
<!-- analytics code -->
{% endunless %}
```

### License

Expand Down
4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -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-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>
<!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.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><li>lego also exposes a <span><pre>isDevelopment</pre></span>variable that you can use to disable certain analytics. For example,<br><code>&#123;% unless isDevelopment %} &lt;!-- analytics code --&gt; &#123;% endunless %}</code></li></ul></div><div class="section"><h3>Directory Structure</h3><pre>
.
├── CNAME
├── build // contains the built site
Expand All @@ -22,4 +22,4 @@
├── images
└── js
└── custom-scripts.js
</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>
</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>
4 changes: 2 additions & 2 deletions docs/index/index.html
View file
Original file line number Diff line number Diff line change
@@ -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-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>
<!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.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><li>lego also exposes a <span><pre>isDevelopment</pre></span>variable that you can use to disable certain analytics. For example,<br><code>&#123;% unless isDevelopment %} &lt;!-- analytics code --&gt; &#123;% endunless %}</code></li></ul></div><div class="section"><h3>Directory Structure</h3><pre>
.
├── CNAME
├── build // contains the built site
Expand All @@ -22,4 +22,4 @@
├── images
└── js
└── custom-scripts.js
</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>
</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>
2 changes: 1 addition & 1 deletion docs/static/images/browserconfig.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/static/images/mstile-150x150.png"/>
<square150x150logo src="static/images/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
Expand Down
2 changes: 1 addition & 1 deletion docs/static/images/site.webmanifest
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"short_name": "",
"icons": [
{
"src": "/static/images/android-chrome-192x192.png",
"src": "static/images/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
Expand Down
4 changes: 4 additions & 0 deletions lib/site.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ class Site {
return {...this._data};
}

isDevelopment() {
return this._development;
}

updateAsset(asset, revisedAsset) {
this._assets[asset] = revisedAsset;
}
Expand Down
6 changes: 4 additions & 2 deletions lib/tasks/generatePages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ module.exports = async function(site) {

let posts = site.getPosts();
let data = site.getData();
let isDevelopment = site.isDevelopment();

let pages = fs.readdirSync(PAGES);
let filteredPages = filterFileList(pages, 'html')
.filter(page => page !== '404.html');
Expand All @@ -21,7 +23,7 @@ module.exports = async function(site) {
let htmlPath = `${BUILD}/${path.parse(page).name}`;
fs.mkdirp(htmlPath);

let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data });
let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data, isDevelopment });
fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);
}

Expand All @@ -30,7 +32,7 @@ module.exports = async function(site) {

// generate 404 page
let pageContents = fs.readFileSync(`${PAGES}/404.html`).toString();
let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data });
let renderedHtml = await generateHtmlFromLiquid(pageContents, { posts, data, isDevelopment });
fs.writeFileSync(`${BUILD}/404.html`, renderedHtml);

site.logger.success(message);
Expand Down
3 changes: 2 additions & 1 deletion lib/tasks/generatePagesForTags.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ module.exports = async function(site) {
let tags = [...new Set(site.getTags())];
let posts = site.getPosts();
let data = site.getData();
let isDevelopment = site.isDevelopment();

for (const tag of tags) {
let htmlPath = `${BUILD}/tag/${tag.toLowerCase()}`;
fs.mkdirp(htmlPath);

let renderedHtml = await generateHtmlFromLiquid(baseTemplate, { posts, tag, data });
let renderedHtml = await generateHtmlFromLiquid(baseTemplate, { posts, tag, data, isDevelopment });
fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);

site.logger.success(message);
Expand Down
4 changes: 3 additions & 1 deletion lib/tasks/generatePostsFromMarkdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ module.exports = async function(site) {
let baseTemplate = fs.readFileSync(`${LAYOUTS}/post.html`).toString();
let posts = site.getPosts();
let data = site.getData();
let isDevelopment = site.isDevelopment();

for (const post of posts) {
let htmlPath = `${BUILD}/${post.path}`;
fs.mkdirp(htmlPath);
Expand All @@ -19,7 +21,7 @@ module.exports = async function(site) {
? fs.readFileSync(`${LAYOUTS}/${post.layout}`).toString()
: baseTemplate;

let renderedHtml = await generateHtmlFromLiquid(template, { post, data });
let renderedHtml = await generateHtmlFromLiquid(template, { post, data, isDevelopment });
fs.writeFileSync(`${htmlPath}/index.html`, renderedHtml);
}

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@astronomersiva/lego",
"version": "0.0.11",
"version": "0.0.12",
"description": "A custom built static site generator that will one day power [sivasubramanyam.me](https://sivasubramanyam.me) 🏋️‍",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit 71bac28

Please sign in to comment.