diff --git a/src/components/quotes/pull-quote.html b/src/components/quotes/pull-quote.html
index 070859d9c..c33ac91cd 100644
--- a/src/components/quotes/pull-quote.html
+++ b/src/components/quotes/pull-quote.html
@@ -1,15 +1,19 @@
{{{
- "bodyClass" : "bg-white"
+ "bodyClass" : "bg-white",
+ "screenshot" : {
+ "background-size" : "contain",
+ "autocrop": false
+ }
}}}
The form of our letters, the older handwriting and inscriptions as much as
the cuttings in use today, reflects a convention that has slowly solidified,
an agreement hardened in many battles. Even after the Renaissance several
- European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material; yet even today, I hope, the last word about Fraktur has not been spoken.
+ European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material; yet even today, I hope, the last word about Fraktur has not been spoken.
- The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty.
+
The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty.
diff --git a/src/components/text/large-paragraph.html b/src/components/text/large-paragraph.html
index b2d15258e..c8598e2c7 100644
--- a/src/components/text/large-paragraph.html
+++ b/src/components/text/large-paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/components/text/narrow-paragraph.html b/src/components/text/narrow-paragraph.html
index 40b187c2f..b94e76623 100644
--- a/src/components/text/narrow-paragraph.html
+++ b/src/components/text/narrow-paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/components/text/paragraph.html b/src/components/text/paragraph.html
index a08388a6e..b68692a46 100644
--- a/src/components/text/paragraph.html
+++ b/src/components/text/paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/components/text/small-narrow-paragraph.html b/src/components/text/small-narrow-paragraph.html
index 8dae513b8..4b8597a8f 100644
--- a/src/components/text/small-narrow-paragraph.html
+++ b/src/components/text/small-narrow-paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/components/text/small-paragraph.html b/src/components/text/small-paragraph.html
index de43e6928..7616b2fcc 100644
--- a/src/components/text/small-paragraph.html
+++ b/src/components/text/small-paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/components/text/title-subtitle-centered.html b/src/components/text/title-subtitle-centered.html
index b4b538de5..f537f72bf 100644
--- a/src/components/text/title-subtitle-centered.html
+++ b/src/components/text/title-subtitle-centered.html
@@ -1,7 +1,7 @@
{{{
"bodyClass" : "bg-white" ,
"screenshot" : {
- "background-size" : "auto"
+ "background-size" : "contain"
}
}}}
diff --git a/src/components/text/wide-paragraph.html b/src/components/text/wide-paragraph.html
index 250b04c70..2ac94f11e 100644
--- a/src/components/text/wide-paragraph.html
+++ b/src/components/text/wide-paragraph.html
@@ -1,7 +1,8 @@
{{{
"bodyClass" : "bg-white",
"screenshot" : {
- "background-size" : "contain"
+ "background-size" : "contain",
+ "autocrop": false
}
}}}
diff --git a/src/templates/components-index.html b/src/templates/components-index.html
index 8ba741fe3..496935c53 100644
--- a/src/templates/components-index.html
+++ b/src/templates/components-index.html
@@ -28,15 +28,17 @@ <%= category %>
<% componentsForNav[category].map(function(componentForNav) { %>
-
+
+
<% }) %>
From f9b16782e2365e07696d85a1084041bfba821081 Mon Sep 17 00:00:00 2001
From: Sebastien Barre
Date: Sun, 11 Dec 2016 13:35:21 -0500
Subject: [PATCH 6/7] add screenshot optimization w/ imageming. 20.9MB => 4.6MB
=> 1.72MB
---
build.js | 2 +-
package.json | 2 +
src/components-build-defaults.js | 8 ++--
src/components-build-screenshots.js | 60 ++++++++++++++++-------------
4 files changed, 41 insertions(+), 31 deletions(-)
diff --git a/build.js b/build.js
index 94d7f5a29..38350f9ef 100644
--- a/build.js
+++ b/build.js
@@ -21,7 +21,7 @@ const componentsBuildScreenshots = require('./src/components-build-screenshots')
// See src/components-build-defaults for list of options that can be overriden
const options = {
- // componentsGlobPattern: 'src/components/text/*.html',
+ // componentsGlobPattern: 'src/components/buttons/*.html',
};
// Note that componentsBuildIndex() generates the index *and* the JSON
diff --git a/package.json b/package.json
index f5cfbfcff..999091571 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,8 @@
"co": "^4.6.0",
"express": "^4.14.0",
"filesize": "^3.3.0",
+ "imagemin": "^5.2.2",
+ "imagemin-mozjpeg": "^6.0.0",
"jimp": "^0.2.27",
"nightmare": "^2.8.1",
"pretty-hrtime": "^1.0.3",
diff --git a/src/components-build-defaults.js b/src/components-build-defaults.js
index 597c94011..f831d369a 100644
--- a/src/components-build-defaults.js
+++ b/src/components-build-defaults.js
@@ -6,14 +6,14 @@ module.exports = {
componentsBuildPages: true, // false to skip building pages
componentsBuildScreenshots: true, // false to skip building screenshots
// Screenshots
- screenshotName: 'screenshot.jpg', // name screenshot file in each component dir
+ screenshotName: 'screenshot.jpg', // name JPEG screenshot in each component dir
screenshotAspectRatio: '4x3', // Tachyon aspect ratio of screenshot in index
screenshotViewportWidth: 1024, // viewport width used for capture
screenshotViewportHeight: 768, // viewport height used for capture
- screenshotTargetMinWidth: 360, // min width of target, resized screenshot
- screenshotTargetMinHeight: 128, // min height of target, resized screenshot
+ screenshotTargetMinWidth: 400, // min width of target, resized screenshot
+ screenshotTargetMinHeight: 160, // min height of target, resized screenshot
+ mozjpegQuality: 90, // mozjpeg optimizer quality (default 75)
screenshotSelector: '[data-name="component-container"]', // DOM element to capture
- screenshotCompressionQuality: 98, // JPEG compression quality before optimization
// Misc
tachyonsCssPath: 'src/css/tachyons.css',
serverPort: 3333,
diff --git a/src/components-build-screenshots.js b/src/components-build-screenshots.js
index ed3d70140..556519f81 100644
--- a/src/components-build-screenshots.js
+++ b/src/components-build-screenshots.js
@@ -4,6 +4,8 @@ const co = require('co');
const express = require('express');
const filesize = require('filesize');
const fs = require('fs');
+const imagemin = require('imagemin');
+const imageminMozjpeg = require('imagemin-mozjpeg');
const Jimp = require('jimp');
const Nightmare = require('nightmare');
const path = require('path');
@@ -102,7 +104,9 @@ module.exports = _options => new Promise((resolve, reject) => {
console.log(chalk.red(' * FAILED to create screenshot:'), component.screenshot.name);
continue; // eslint-disable-line
}
- const tmpObj = tmp.fileSync({ dir: path.dirname(component.screenshot.path) });
+
+ const screenshotDir = path.dirname(component.screenshot.path);
+ const tmpPngObj = tmp.fileSync({ dir: screenshotDir });
componentRect.height = Math.min(componentRect.height, options.screenshotViewportHeight);
yield nightmare
// we can not use .screenshot() with componentRect, so constrain the viewport instead
@@ -111,13 +115,12 @@ module.exports = _options => new Promise((resolve, reject) => {
componentRect.height || options.screenshotViewportHeight
).scrollTo(componentRect.y, componentRect.x)
// .wait(1000)
- // do *not* use componentRect in .screenshot() below or risk distortions
- .screenshot(tmpObj.name);
- const tmpFileSize = fs.statSync(tmpObj.name).size;
- tmpTotalFileSize += tmpFileSize;
+ .screenshot(tmpPngObj.name); // do *not* use componentRect here or risk distortions
- // Resize and convert
- const screenshot = yield Jimp.read(tmpObj.name);
+ // Resize and convert to JPEG, and optimize
+ const tmpJpegDirObj = tmp.dirSync({ dir: screenshotDir, unsafeCleanup: true });
+ const tmpJpegPath = path.join(tmpJpegDirObj.name, path.basename(component.screenshot.path));
+ const screenshot = yield Jimp.read(tmpPngObj.name);
yield new Promise((write_resolve, write_reject) => {
if (component.frontMatter.screenshot === undefined ||
component.frontMatter.screenshot.autocrop !== false) {
@@ -131,18 +134,36 @@ module.exports = _options => new Promise((resolve, reject) => {
const scale = Math.max(scaleHeight, scaleWidth);
screenshot
.scale(scale > 0 ? scale : 1.0)
- .quality(options.screenshotCompressionQuality)
- .write(component.screenshot.path, (err) => {
- if (err) {
- write_reject(err);
+ // Do not use .quality() here, default max quality helps optimizers below
+ .write(tmpJpegPath, (jimp_err) => {
+ if (jimp_err) {
+ write_reject(jimp_err);
}
- write_resolve();
+ // Optimize
+ imagemin([tmpJpegPath], screenshotDir, {
+ plugins: [
+ imageminMozjpeg({ quality: options.mozjpegQuality }),
+ // imageminJpegRecompress(), // this guy is useless
+ // imageminJpegtran(), // this guy is useless
+ ],
+ }).then(() => {
+ write_resolve();
+ }).catch((imagemin_err) => {
+ write_reject(imagemin_err);
+ });
});
});
- tmpObj.removeCallback();
+ const tmpFileSize = fs.statSync(tmpPngObj.name).size;
+ tmpTotalFileSize += tmpFileSize;
const screenshotFileSize = fs.statSync(component.screenshot.path).size;
screenshotTotalFileSize += screenshotFileSize;
+
+ // Cleanup
+ tmpPngObj.removeCallback();
+ fs.unlinkSync(tmpJpegPath);
+ tmpJpegDirObj.removeCallback();
+
console.log(
' * Created screenshot:',
component.screenshot.path,
@@ -163,17 +184,4 @@ module.exports = _options => new Promise((resolve, reject) => {
});
resolve(renderPromise);
-
- // TODO: optimize all PNG files, eventually resize to smaller width
- // const imagemin = require('imagemin');
- // const imageminPngquant = require('imagemin-pngquant');
- // imagemin(['components/*.{jpg,png}'], ??, {
- // plugins: [
- // imageminPngquant({quality: '65-80'})
- // ]
- // }).then(files => {
- // console.log(files);
- // //=> [{data: , path: 'build/images/foo.jpg'}, …]
- // });
- //
}); // return promise
From a322740695cce4f3ba5d0ea2a19cc54f4150df46 Mon Sep 17 00:00:00 2001
From: Sebastien Barre
Date: Sun, 11 Dec 2016 14:18:08 -0500
Subject: [PATCH 7/7] Add lazy loading
---
js/lazysizes.min.js | 2 ++
js/ls.unveilhooks.min.js | 2 ++
package.json | 6 +++++-
src/components-build-defaults.js | 1 +
src/components-build-index.js | 6 ++++--
src/templates/components-index.html | 8 ++++++--
src/templates/lazysizes.html | 12 ++++++++++++
7 files changed, 32 insertions(+), 5 deletions(-)
create mode 100644 js/lazysizes.min.js
create mode 100644 js/ls.unveilhooks.min.js
create mode 100644 src/templates/lazysizes.html
diff --git a/js/lazysizes.min.js b/js/lazysizes.min.js
new file mode 100644
index 000000000..d24b1bbe1
--- /dev/null
+++ b/js/lazysizes.min.js
@@ -0,0 +1,2 @@
+/*! lazysizes - v3.0.0-rc2 */
+!function(a,b){var c=b(a,a.document);a.lazySizes=c,"object"==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){"use strict";if(b.getElementsByClassName){var c,d=b.documentElement,e=a.Date,f=a.HTMLPictureElement,g="addEventListener",h="getAttribute",i=a[g],j=a.setTimeout,k=a.requestAnimationFrame||j,l=a.requestIdleCallback,m=/^picture$/i,n=["load","error","lazyincluded","_lazyloaded"],o={},p=Array.prototype.forEach,q=function(a,b){return o[b]||(o[b]=new RegExp("(\\s|^)"+b+"(\\s|$)")),o[b].test(a[h]("class")||"")&&o[b]},r=function(a,b){q(a,b)||a.setAttribute("class",(a[h]("class")||"").trim()+" "+b)},s=function(a,b){var c;(c=q(a,b))&&a.setAttribute("class",(a[h]("class")||"").replace(c," "))},t=function(a,b,c){var d=c?g:"removeEventListener";c&&t(a,b),n.forEach(function(c){a[d](c,b)})},u=function(a,c,d,e,f){var g=b.createEvent("CustomEvent");return g.initCustomEvent(c,!e,!f,d||{}),a.dispatchEvent(g),g},v=function(b,d){var e;!f&&(e=a.picturefill||c.pf)?e({reevaluate:!0,elements:[b]}):d&&d.src&&(b.src=d.src)},w=function(a,b){return(getComputedStyle(a,null)||{})[b]},x=function(a,b,d){for(d=d||a.offsetWidth;df&&(f=0),a||9>f&&l?i():j(i,f))}},B=function(a){var b,c,d=99,f=function(){b=null,a()},g=function(){var a=e.now()-c;d>a?j(g,d-a):(l||f)(f)};return function(){c=e.now(),b||(b=j(g,d))}},C=function(){var f,k,l,n,o,x,C,E,F,G,H,I,J,K,L,M=/^img$/i,N=/^iframe$/i,O="onscroll"in a&&!/glebot/.test(navigator.userAgent),P=0,Q=0,R=0,S=-1,T=function(a){R--,a&&a.target&&t(a.target,T),(!a||0>R||!a.target)&&(R=0)},U=function(a,c){var e,f=a,g="hidden"==w(b.body,"visibility")||"hidden"!=w(a,"visibility");for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=d;)g=(w(f,"opacity")||1)>0,g&&"visible"!=w(f,"overflow")&&(e=f.getBoundingClientRect(),g=H>e.left&&Ge.top-1&&FR&&(a=f.length)){e=0,S++,null==K&&("expand"in c||(c.expand=d.clientHeight>500&&d.clientWidth>500?500:370),J=c.expand,K=J*c.expFactor),K>Q&&1>R&&S>2&&o>2&&!b.hidden?(Q=K,S=0):Q=o>1&&S>1&&6>R?J:P;for(;a>e;e++)if(f[e]&&!f[e]._lazyRace)if(O)if((p=f[e][h]("data-expand"))&&(m=1*p)||(m=Q),q!==m&&(C=innerWidth+m*L,E=innerHeight+m,n=-1*m,q=m),g=f[e].getBoundingClientRect(),(I=g.bottom)>=n&&(F=g.top)<=E&&(H=g.right)>=n*L&&(G=g.left)<=C&&(I||H||G||F)&&(l&&3>R&&!p&&(3>o||4>S)||U(f[e],m))){if(ba(f[e]),j=!0,R>9)break}else!j&&l&&!i&&4>R&&4>S&&o>2&&(k[0]||c.preloadAfterLoad)&&(k[0]||!p&&(I||H||G||F||"auto"!=f[e][h](c.sizesAttr)))&&(i=k[0]||f[e]);else ba(f[e]);i&&!j&&ba(i)}},W=A(V),X=function(a){r(a.target,c.loadedClass),s(a.target,c.loadingClass),t(a.target,Z)},Y=z(X),Z=function(a){Y({target:a.target})},$=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},_=function(a){var b,d,e=a[h](c.srcsetAttr);(b=c.customMedia[a[h]("data-media")||a[h]("media")])&&a.setAttribute("media",b),e&&a.setAttribute("srcset",e),b&&(d=a.parentNode,d.insertBefore(a.cloneNode(),a),d.removeChild(a))},aa=z(function(a,b,d,e,f){var g,i,k,l,o,q;(o=u(a,"lazybeforeunveil",b)).defaultPrevented||(e&&(d?r(a,c.autosizesClass):a.setAttribute("sizes",e)),i=a[h](c.srcsetAttr),g=a[h](c.srcAttr),f&&(k=a.parentNode,l=k&&m.test(k.nodeName||"")),q=b.firesLoad||"src"in a&&(i||g||l),o={target:a},q&&(t(a,T,!0),clearTimeout(n),n=j(T,2500),r(a,c.loadingClass),t(a,Z,!0)),l&&p.call(k.getElementsByTagName("source"),_),i?a.setAttribute("srcset",i):g&&!l&&(N.test(a.nodeName)?$(a,g):a.src=g),(i||l)&&v(a,{src:g})),a._lazyRace&&delete a._lazyRace,s(a,c.lazyClass),y(function(){(!q||a.complete)&&(q?T(o):R--,X(o))},!0)}),ba=function(a){var b,d=M.test(a.nodeName),e=d&&(a[h](c.sizesAttr)||a[h]("sizes")),f="auto"==e;(!f&&l||!d||!a.src&&!a.srcset||a.complete||q(a,c.errorClass))&&(b=u(a,"lazyunveilread").detail,f&&D.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,R++,aa(a,b,f,e,d))},ca=function(){if(!l){if(e.now()-x<999)return void j(ca,999);var a=B(function(){c.loadMode=3,W()});l=!0,c.loadMode=3,W(),i("scroll",function(){3==c.loadMode&&(c.loadMode=2),a()},!0)}};return{_:function(){x=e.now(),f=b.getElementsByClassName(c.lazyClass),k=b.getElementsByClassName(c.lazyClass+" "+c.preloadClass),L=c.hFac,i("scroll",W,!0),i("resize",W,!0),a.MutationObserver?new MutationObserver(W).observe(d,{childList:!0,subtree:!0,attributes:!0}):(d[g]("DOMNodeInserted",W,!0),d[g]("DOMAttrModified",W,!0),setInterval(W,999)),i("hashchange",W,!0),["focus","mouseover","click","load","transitionend","animationend","webkitAnimationEnd"].forEach(function(a){b[g](a,W,!0)}),/d$|^c/.test(b.readyState)?ca():(i("load",ca),b[g]("DOMContentLoaded",W),j(ca,2e4)),f.length?(V(),y._lsFlush()):W()},checkElems:W,unveil:ba}}(),D=function(){var a,d=z(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+="px",a.setAttribute("sizes",d),m.test(b.nodeName||""))for(e=b.getElementsByTagName("source"),f=0,g=e.length;g>f;f++)e[f].setAttribute("sizes",d);c.detail.dataAttr||v(a,c.detail)}),e=function(a,b,c){var e,f=a.parentNode;f&&(c=x(a,f,c),e=u(a,"lazybeforesizes",{width:c,dataAttr:!!b}),e.defaultPrevented||(c=e.detail.width,c&&c!==a._lazysizesWidth&&d(a,f,e,c)))},f=function(){var b,c=a.length;if(c)for(b=0;c>b;b++)e(a[b])},g=B(f);return{_:function(){a=b.getElementsByClassName(c.autosizesClass),i("resize",g)},checkElems:g,updateElem:e}}(),E=function(){E.i||(E.i=!0,D._(),C._())};return function(){var b,d={lazyClass:"lazyload",loadedClass:"lazyloaded",loadingClass:"lazyloading",preloadClass:"lazypreload",errorClass:"lazyerror",autosizesClass:"lazyautosizes",srcAttr:"data-src",srcsetAttr:"data-srcset",sizesAttr:"data-sizes",minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2};c=a.lazySizesConfig||a.lazysizesConfig||{};for(b in d)b in c||(c[b]=d[b]);a.lazySizesConfig=c,j(function(){c.init&&E()})}(),{cfg:c,autoSizer:D,loader:C,init:E,uP:v,aC:r,rC:s,hC:q,fire:u,gW:x,rAF:y}}});
\ No newline at end of file
diff --git a/js/ls.unveilhooks.min.js b/js/ls.unveilhooks.min.js
new file mode 100644
index 000000000..4e5d88fcb
--- /dev/null
+++ b/js/ls.unveilhooks.min.js
@@ -0,0 +1,2 @@
+/*! lazysizes - v3.0.0-rc2 */
+!function(a,b){"use strict";function c(a,c){if(!f[a]){var d=b.createElement(c?"link":"script"),e=b.getElementsByTagName("script")[0];c?(d.rel="stylesheet",d.href=a):d.src=a,f[a]=!0,f[d.src||d.href]=!0,e.parentNode.insertBefore(d,e)}}var d,e,f={};b.addEventListener&&(e=/\(|\)|'/,d=function(a,c){var d=b.createElement("img");d.onload=function(){d.onload=null,d.onerror=null,d=null,c()},d.onerror=d.onload,d.src=a,d&&d.complete&&d.onload&&d.onload()},addEventListener("lazybeforeunveil",function(a){var b,f,g,h;a.defaultPrevented||("none"==a.target.preload&&(a.target.preload="auto"),b=a.target.getAttribute("data-link"),b&&c(b,!0),b=a.target.getAttribute("data-script"),b&&c(b),b=a.target.getAttribute("data-require"),b&&(lazySizes.cfg.requireJs?lazySizes.cfg.requireJs([b]):c(b)),g=a.target.getAttribute("data-bg"),g&&(a.detail.firesLoad=!0,f=function(){a.target.style.backgroundImage="url("+(e.test(g)?JSON.stringify(g):g)+")",a.detail.firesLoad=!1,lazySizes.fire(a.target,"_lazyloaded",{},!0,!0)},d(g,f)),h=a.target.getAttribute("data-poster"),h&&(a.detail.firesLoad=!0,f=function(){a.target.poster=h,a.detail.firesLoad=!1,lazySizes.fire(a.target,"_lazyloaded",{},!0,!0)},d(h,f)))},!1))}(window,document);
\ No newline at end of file
diff --git a/package.json b/package.json
index 999091571..3cfc7d54e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,10 @@
"doc:images": "watch 'node src/modules/images.js' src/templates/docs/images",
"doc:bgsize": "watch 'node src/modules/background-size.js' src/templates/docs/background-size",
"build:all": "node build.js && bash script.sh",
- "cson": "node src/components-cson-build.js"
+ "cson": "node src/components-cson-build.js",
+ "copy:lazysizes": "cp node_modules/lazysizes/lazysizes.min.js js/",
+ "copy:lazysizes:plugins": "cp node_modules/lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js js/",
+ "postinstall": "npm run copy:lazysizes && npm run copy:lazysizes:plugins"
},
"repository": "tachyons-css/tachyons-css.github.io",
"author": "mrmrs",
@@ -40,6 +43,7 @@
"imagemin": "^5.2.2",
"imagemin-mozjpeg": "^6.0.0",
"jimp": "^0.2.27",
+ "lazysizes": "^3.0.0-rc2",
"nightmare": "^2.8.1",
"pretty-hrtime": "^1.0.3",
"tachyons-background-size": "^5.0.3",
diff --git a/src/components-build-defaults.js b/src/components-build-defaults.js
index f831d369a..56c4d167a 100644
--- a/src/components-build-defaults.js
+++ b/src/components-build-defaults.js
@@ -25,4 +25,5 @@ module.exports = {
headerTemplatePath: 'src/templates/header.html',
headTemplatePath: 'src/templates/head.html',
highlightTemplatePath: 'src/templates/highlight.html',
+ lazysizesTemplate: 'src/templates/lazysizes.html',
};
diff --git a/src/components-build-index.js b/src/components-build-index.js
index d748695bd..92215ddf6 100644
--- a/src/components-build-index.js
+++ b/src/components-build-index.js
@@ -78,15 +78,17 @@ module.exports = _options => new Promise((resolve, reject) => {
const footer = fs.readFileSync(options.footerTemplatePath, 'utf8');
const head = fs.readFileSync(options.headTemplatePath, 'utf8');
const header = fs.readFileSync(options.headerTemplatePath, 'utf8');
- const indexTemplate = fs.readFileSync(options.componentsIndexTemplatePath, 'utf8');
+ const componentsIndexTemplate = fs.readFileSync(options.componentsIndexTemplatePath, 'utf8');
+ const lazysizesTemplate = fs.readFileSync(options.lazysizesTemplate, 'utf8');
- const compiledPage = _.template(indexTemplate)({
+ const compiledPage = _.template(componentsIndexTemplate)({
componentsForNav,
title: 'Components',
analytics,
footer,
head,
header,
+ lazysizesTemplate,
options,
});
mkdirp.sync(path.dirname(options.componentsIndexPath));
diff --git a/src/templates/components-index.html b/src/templates/components-index.html
index 496935c53..76844b1df 100644
--- a/src/templates/components-index.html
+++ b/src/templates/components-index.html
@@ -7,6 +7,9 @@
+ <%= lazysizesTemplate %>
+
+
<%= header %>
@@ -32,8 +35,9 @@ <%= category %>
href="<%= componentForNav.href %>"
title="<%= componentForNav.name %>">
<%= componentForNav.name %>
diff --git a/src/templates/lazysizes.html b/src/templates/lazysizes.html
new file mode 100644
index 000000000..1e1a21d50
--- /dev/null
+++ b/src/templates/lazysizes.html
@@ -0,0 +1,12 @@
+