add image lazy loading support

weru

22.37.2020 b362916daa43f3c3611fb0a00bc29dc22c9f88ad

add image lazy loading support

 README.md

@@ -4,6 +4,12 @@

![Hugo Compose Theme](https://github.com/onweru/compose/blob/master/images/screenshot.png)

## Features

1. Docs
2. Gallery Support (via shortcode)
3. Native lazy loading of images

## Installation 

Install a recent release of the Hugo "extended" version; ideally versions `>= 0.61.0`. If you install from [hugo releases page](https://github.com/gohugoio/hugo/releases),  download the `_extended` version, which supports sass.

 assets/js/index.js

@@ -368,6 +368,15 @@
      });
    }
  })();

  (function lazyLoadImages() {
    const images = elems('img');
    images.forEach(function(image){
      // supported natively by most modern browsers. 
      image.loading = "lazy";
    });
 })();

}

window.addEventListener('load', loadActions());

 exampleSite/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.content

@@ -1,3 +1,3 @@
html{--light: #fff;--dark: rgb(28,28,30);--haze: #f2f5f2;--bubble: rgb(32,32,34);--accent: var(--gray);--bg: var(--light);--overlay: var(--light);--text: var(--dark);--theme: #20c997;--font: 'Metropolis', sans-serif;--border-color: #eee}html::after{content:"";height:15vh;position:fixed;bottom:0;width:100vw;z-index:9999;background:linear-gradient(to top, var(--bg), transparent)}@media (prefers-color-scheme: dark){html{--bg: var(--dark);--text: var(--light);--accent: var(--bubble);--overlay: var(--bubble);--border-color: transparent}html *{box-shadow:none !important}html::after{background:linear-gradient(to top, var(--bg), transparent)}}*{box-sizing:border-box;-webkit-appearance:none;margin:0;padding:0}body,html{scroll-behavior:smooth;font-kerning:normal;-webkit-text-size-adjust:100%}body{font-family:var(--font);background-color:var(--bg);color:var(--text);font-size:16px;line-height:1.5;max-width:1440px;margin:0 auto;position:relative;font-kerning:normal;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit}p{padding:1rem 0}li{padding:0.25rem 0}li p{padding:0.5rem 0}blockquote{opacity:0.8;padding:1rem;position:relative;quotes:"“" "”" "‘" "’";margin:0.75rem 0;display:flex;flex-flow:row wrap;background-repeat:no-repeat;background-size:5rem;background-position:50% 50%;position:relative}blockquote::before{content:"";padding:1px;position:absolute;top:0;bottom:0;left:0;background:var(--theme)}blockquote p{padding-left:0.5rem 0 !important;font-size:1.1rem !important;width:100%;font-weight:300;font-style:italic}h1,h2,h3,h4,h5{font-family:inherit;font-weight:500;padding:0.33rem 0;color:inherit;line-height:1.35}h1{font-size:200%}h2{font-size:175%}h3{font-size:150%}h4{font-size:125%}h5{font-size:120%}h6{font-size:100%}img,svg,figure{max-width:100%;vertical-align:middle}img{height:auto;margin:1rem auto;padding:0}main{padding-bottom:45px;flex:1}ol,ul{list-style:none}b,strong{font-weight:500}hr{border:none;padding:0.5px;background:var(--text);opacity:0.5;margin:1rem 0}aside{position:sticky;top:5rem;max-height:84vh;overflow-y:auto;padding-bottom:2rem}aside h3{position:relative}aside ul{padding:0;list-style:none}th,td{padding:0.5rem;font-weight:400 !important}th:not(:first-child),td:not(:first-child){padding-left:1.5rem}thead{background:var(--theme);color:var(--light);font-weight:400;text-align:left}tbody tr:nth-child(even){background-color:var(--gray);box-shadow:0 1rem 0.75rem -0.75rem rgba(0,0,0,0.07)}table{margin:1.5rem 0;width:100%}.main{flex:1}.page-home h1{font-weight:300}.pager{display:flex;justify-content:space-between;margin:2.5rem 0}.content ul,.content ol{padding-left:1.1rem}.content ul{list-style:initial}.content ol{list-style:decimal}::placeholder{font-size:1rem}.nav{display:grid;grid-template-columns:10rem 1fr 1fr;grid-gap:1rem;padding:0 1.5rem !important;align-items:center;background-color:var(--bg)}.nav_header{position:fixed;top:0;left:0;width:100%;background-color:var(--bg);z-index:999999;border-bottom:1px solid var(--border-color)}.nav_body{display:flex}.nav-link{display:inline-flex;padding:0.5rem 1rem}.section_title{font-size:1.1rem}.section_link{font-size:1rem;font-weight:400}.sidebar-link{display:grid;padding:0.2rem 0}.toc{border-left:2px solid var(--theme);padding:0 1rem;height:0;overflow:hidden}.toc_active{height:initial}.search{flex:1;display:flex;justify-content:flex-end;position:relative}.search_field{padding:0.5rem 1.5rem 0.5rem 2.5rem;border-radius:1.5rem;width:13.5rem;outline:none;border:none;box-shadow:0 1rem 4rem rgba(0,0,0,0.17);font-size:1rem}.search_label{background-image:url(/images/search.svg);width:1.25rem;height:1.25rem;position:absolute;right:11.5rem;top:0.5rem;opacity:0.33}.search_result{padding:0.5rem 1rem}.search_result:hover{background-color:var(--theme)}.search_results{width:13.5rem;background-color:var(--overlay);border-radius:0 0 0.25rem 0.25rem;box-shadow:0 1rem 4rem rgba(0,0,0,0.17);position:absolute;top:100%;display:grid;overflow:hidden}.search_results:empty{display:none}.button{background-color:var(--theme);color:var(--light);border-radius:0.25rem;display:inline-grid;padding:0.75rem 1.5rem;text-align:center}.button:hover{opacity:0.84}.button+.button{background-color:var(--haze);color:var(--dark)}@media screen and (min-width: 20rem){.button+.button{margin-left:0.5rem}}.video{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;margin:1.5rem 0;border-radius:0.6rem;background-color:var(--bg);box-shadow:0 1rem 2rem rgba(0,0,0,0.17)}.video iframe{left:0;top:0;height:100%;width:100%;border:none;position:absolute;transform:scale(1.02)}.icon{width:1.1rem;height:1.1rem;display:inline-flex;justify-content:center;align-items:center;margin:0 0.5rem}.link{opacity:0;position:relative}.link_owner:hover .link{opacity:1}.link_yank{opacity:1}.link_yanked{position:absolute;right:-1rem;top:-2rem;background-color:var(--theme);color:var(--light);width:7rem;padding:0.25rem 0.5rem;font-size:0.9rem;border-radius:1rem;text-align:center}.link_yanked::after{position:absolute;top:1rem;content:"";border-color:var(--theme) transparent;border-style:solid;border-width:1rem 1rem 0 1rem;height:0;width:0;transform-origin:50% 50%;transform:rotate(145deg);right:0.45rem}.wrap{max-width:1240px}.wrap,.wrap{width:100%;padding:0 25px;margin:0 auto}.pt-1{padding-top:1.5rem}.pb-1{padding-bottom:1.5rem}.mt-1{margin-top:1.5rem}.mb-1{margin-bottom:1.5rem}.pt-2{padding-top:3rem}.pb-2{padding-bottom:3rem}.mt-2{margin-top:3rem}.mb-2{margin-bottom:3rem}.pt-3{padding-top:4.5rem}.pb-3{padding-bottom:4.5rem}.mt-3{margin-top:4.5rem}.mb-3{margin-bottom:4.5rem}.pt-4{padding-top:6rem}.pb-4{padding-bottom:6rem}.mt-4{margin-top:6rem}.mb-4{margin-bottom:6rem}.grid-2,.grid-3,.grid-4,.grid-auto,.grid-reverse{display:grid;grid-template-columns:1fr}[class*='grid-']{grid-gap:2rem}@media screen and (min-width: 42rem){.grid-auto{grid-template-columns:2fr 5fr}.grid-reverse{grid-template-columns:3fr 1fr}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr))}.grid-4{grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr))}}.active{color:var(--theme)}code{min-width:100%;max-width:100%}code.noClass{color:orange}pre{display:grid;padding:1rem;overflow-x:auto}.highlight{display:grid;margin:1.25rem 0;box-shadow:0 0 2.5rem rgba(0,0,0,0.12);border-radius:4px;overflow:hidden}.highlight table{margin:0;border-collapse:collapse;background-color:var(--overlay)}.highlight .highlight{margin:0}.lntd:first-child{width:2.75rem;background-color:var(--theme);color:var(--light)}.lntd:first-child pre{padding:0}.lntd:first-child code{display:flex;flex-flow:column;align-items:center}.lntd:last-child{padding-left:0}.err{color:#a61717;background-color:#e3d2d2}.hl{display:block;width:100%;background-color:#ffffcc}.ln{margin-right:0.4rem;padding:0 0.4em 0 0.4rem;color:#666}.k,.kc,.kd,.kn,.kp,.kr,.kt,.nt{color:#6ab825;font-weight:500}.kn,.kp{font-weight:400}.nb,.no,.nv{color:#24909d}.nc,.nf,.nn{color:#447fcf}.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.s{color:#ed9d13}.m,.mb,.mf,.mh,.mi,.il,.mo{color:#3677a9}.ow{color:#6ab825;font-weight:500}.c,.ch,.cm,.c1{color:#999;font-style:italic}.cs{color:#e50808;background-color:#520000;font-weight:500}.cp,.cpf{color:#cd2828;font-weight:500}.gd,.gr{color:#d22323}.ge{font-style:italic}.gh,.gu,.nd,.na,.ne{color:#ffa500;font-weight:500}.gi{color:#589819}.go{color:#ccc}.gp{color:#aaa}.gs{font-weight:500}.gt{color:#d22323}.w{color:#666}@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;src:local("Metropolis Regular"),local("Metropolis-Regular"),url("../fonts/Metropolis-Regular.woff2") format("woff2"),url("../fonts/Metropolis-Regular.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:normal;font-weight:300;src:local("Metropolis Light"),local("Metropolis-Light"),url("../fonts/Metropolis-Light.woff2") format("woff2"),url("../fonts/Metropolis-Light.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:italic;font-weight:300;src:local("Metropolis Light Italic"),local("Metropolis-LightItalic"),url("../fonts/Metropolis-LightItalic.woff2") format("woff2"),url("../fonts/Metropolis-LightItalic.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:normal;font-weight:500;src:local("Metropolis Medium"),local("Metropolis-Medium"),url("../fonts/Metropolis-Medium.woff2") format("woff2"),url("../fonts/Metropolis-Medium.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:italic;font-weight:500;src:local("Metropolis Medium Italic"),local("Metropolis-MediumItalic"),url("../fonts/Metropolis-MediumItalic.woff2") format("woff2"),url("../fonts/Metropolis-MediumItalic.woff") format("woff")}@font-face{font-family:'Cookie';font-style:normal;font-weight:400;src:local("Cookie-Regular"),url("../fonts/cookie-v10-latin-regular.woff2") format("woff2"),url("../fonts/cookie-v10-latin-regular.woff") format("woff")}footer{min-height:150px}
html{--light: #fff;--dark: rgb(28,28,30);--haze: #f2f5f2;--bubble: rgb(32,32,34);--accent: var(--gray);--bg: var(--light);--overlay: var(--light);--text: var(--dark);--theme: #20c997;--font: 'Metropolis', sans-serif;--border-color: #eee}html::after{content:"";height:15vh;position:fixed;bottom:0;width:100vw;z-index:9999;background:linear-gradient(to top, var(--bg), transparent)}@media (prefers-color-scheme: dark){html{--bg: var(--dark);--text: var(--light);--accent: var(--bubble);--overlay: var(--bubble);--border-color: transparent}html *{box-shadow:none !important}html::after{background:linear-gradient(to top, var(--bg), transparent)}}*{box-sizing:border-box;-webkit-appearance:none;margin:0;padding:0}body,html{scroll-behavior:smooth;font-kerning:normal;-webkit-text-size-adjust:100%}body{font-family:var(--font);background-color:var(--bg);color:var(--text);font-size:16px;line-height:1.5;max-width:1440px;margin:0 auto;position:relative;font-kerning:normal;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{text-decoration:none;color:inherit}p{padding:1rem 0}li{padding:0.25rem 0}li p{padding:0.5rem 0}blockquote{opacity:0.8;padding:1rem;position:relative;quotes:"“" "”" "‘" "’";margin:0.75rem 0;display:flex;flex-flow:row wrap;background-repeat:no-repeat;background-size:5rem;background-position:50% 50%;position:relative}blockquote::before{content:"";padding:1px;position:absolute;top:0;bottom:0;left:0;background:var(--theme)}blockquote p{padding-left:0.5rem 0 !important;font-size:1.1rem !important;width:100%;font-weight:300;font-style:italic}h1,h2,h3,h4,h5{font-family:inherit;font-weight:500;padding:0.33rem 0;color:inherit;line-height:1.35}h1{font-size:200%}h2{font-size:175%}h3{font-size:150%}h4{font-size:125%}h5{font-size:120%}h6{font-size:100%}img,svg,figure{max-width:100%;vertical-align:middle}img{height:auto;margin:1rem auto;padding:0}main{padding-bottom:45px;flex:1}ol,ul{list-style:none}b,strong{font-weight:500}hr{border:none;padding:0.5px;background:var(--text);opacity:0.5;margin:1rem 0}aside{position:sticky;top:5rem;max-height:84vh;overflow-y:auto;padding-bottom:2rem}aside h3{position:relative}aside ul{padding:0;list-style:none}th,td{padding:0.5rem;font-weight:400 !important}th:not(:first-child),td:not(:first-child){padding-left:1.5rem}thead{background:var(--theme);color:var(--light);font-weight:400;text-align:left}tbody tr:nth-child(even){background-color:var(--gray);box-shadow:0 1rem 0.75rem -0.75rem rgba(0,0,0,0.07)}table{margin:1.5rem 0;width:100%}.main{flex:1}.page-home h1{font-weight:300}.pager{display:flex;justify-content:space-between;margin:2.5rem 0}.content ul,.content ol{padding-left:1.1rem}.content ul{list-style:initial}.content ol{list-style:decimal}::placeholder{font-size:1rem}.nav{display:grid;grid-template-columns:10rem 1fr 1fr;grid-gap:1rem;padding:0 1.5rem !important;align-items:center;background-color:var(--bg)}.nav_header{position:fixed;top:0;left:0;width:100%;background-color:var(--bg);z-index:999999;border-bottom:1px solid var(--border-color)}.nav_body{display:flex}.nav-link{display:inline-flex;padding:0.5rem 1rem}.section_title{font-size:1.1rem}.section_link{font-size:1rem;font-weight:400}.sidebar-link{display:grid;padding:0.2rem 0}.toc{border-left:2px solid var(--theme);padding:0 1rem;height:0;overflow:hidden}.toc_active{height:initial}.search{flex:1;display:flex;justify-content:flex-end;position:relative}.search_field{padding:0.5rem 1.5rem 0.5rem 2.5rem;border-radius:1.5rem;width:13.5rem;outline:none;border:none;box-shadow:0 1rem 4rem rgba(0,0,0,0.17);font-size:1rem}.search_label{background-image:url(/images/search.svg);width:1.25rem;height:1.25rem;position:absolute;right:11.5rem;top:0.5rem;opacity:0.33}.search_result{padding:0.5rem 1rem}.search_result:hover{background-color:var(--theme)}.search_results{width:13.5rem;background-color:var(--overlay);border-radius:0 0 0.25rem 0.25rem;box-shadow:0 1rem 4rem rgba(0,0,0,0.17);position:absolute;top:100%;display:grid;overflow:hidden}.search_results:empty{display:none}.button{background-color:var(--theme);color:var(--light);border-radius:0.25rem;display:inline-grid;padding:0.75rem 1.5rem;text-align:center}.button:hover{opacity:0.84}.button+.button{background-color:var(--haze);color:var(--dark)}@media screen and (min-width: 20rem){.button+.button{margin-left:0.5rem}}.video{overflow:hidden;padding-bottom:56.25%;position:relative;height:0;margin:1.5rem 0;border-radius:0.6rem;background-color:var(--bg);box-shadow:0 1rem 2rem rgba(0,0,0,0.17)}.video iframe{left:0;top:0;height:100%;width:100%;border:none;position:absolute;transform:scale(1.02)}.icon{width:1.1rem;height:1.1rem;display:inline-flex;justify-content:center;align-items:center;margin:0 0.5rem}.link{opacity:0;position:relative}.link_owner:hover .link{opacity:1}.link_yank{opacity:1}.link_yanked{position:absolute;right:-1rem;top:-2rem;background-color:var(--theme);color:var(--light);width:7rem;padding:0.25rem 0.5rem;font-size:0.9rem;border-radius:1rem;text-align:center}.link_yanked::after{position:absolute;top:1rem;content:"";border-color:var(--theme) transparent;border-style:solid;border-width:1rem 1rem 0 1rem;height:0;width:0;transform-origin:50% 50%;transform:rotate(145deg);right:0.45rem}.gallery{width:100%;column-count:3;column-gap:1rem}@media screen and (max-width: 667px){.gallery{column-count:2}}.gallery_item{background-color:transparent;margin:0 0 1rem}.gallery_image{margin:0 auto}.wrap{max-width:1240px}.wrap,.wrap{width:100%;padding:0 25px;margin:0 auto}.pt-1{padding-top:1.5rem}.pb-1{padding-bottom:1.5rem}.mt-1{margin-top:1.5rem}.mb-1{margin-bottom:1.5rem}.pt-2{padding-top:3rem}.pb-2{padding-bottom:3rem}.mt-2{margin-top:3rem}.mb-2{margin-bottom:3rem}.pt-3{padding-top:4.5rem}.pb-3{padding-bottom:4.5rem}.mt-3{margin-top:4.5rem}.mb-3{margin-bottom:4.5rem}.pt-4{padding-top:6rem}.pb-4{padding-bottom:6rem}.mt-4{margin-top:6rem}.mb-4{margin-bottom:6rem}.grid-2,.grid-3,.grid-4,.grid-auto,.grid-reverse{display:grid;grid-template-columns:1fr}[class*='grid-']{grid-gap:2rem}@media screen and (min-width: 42rem){.grid-auto{grid-template-columns:2fr 5fr}.grid-reverse{grid-template-columns:3fr 1fr}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr))}.grid-4{grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr))}}.active{color:var(--theme)}code{min-width:100%;max-width:100%}code.noClass{color:orange}pre{display:grid;padding:1rem;overflow-x:auto}.highlight{display:grid;margin:1.25rem 0;box-shadow:0 0 2.5rem rgba(0,0,0,0.12);border-radius:4px;overflow:hidden}.highlight table{margin:0;border-collapse:collapse;background-color:var(--overlay)}.highlight .highlight{margin:0}.lntd:first-child{width:2.75rem;background-color:var(--theme);color:var(--light)}.lntd:first-child pre{padding:0}.lntd:first-child code{display:flex;flex-flow:column;align-items:center}.lntd:last-child{padding-left:0}.err{color:#a61717;background-color:#e3d2d2}.hl{display:block;width:100%;background-color:#ffffcc}.ln{margin-right:0.4rem;padding:0 0.4em 0 0.4rem;color:#666}.k,.kc,.kd,.kn,.kp,.kr,.kt,.nt{color:#6ab825;font-weight:500}.kn,.kp{font-weight:400}.nb,.no,.nv{color:#24909d}.nc,.nf,.nn{color:#447fcf}.s,.sa,.sb,.sc,.dl,.sd,.s2,.se,.sh,.si,.sx,.sr,.s1,.s{color:#ed9d13}.m,.mb,.mf,.mh,.mi,.il,.mo{color:#3677a9}.ow{color:#6ab825;font-weight:500}.c,.ch,.cm,.c1{color:#999;font-style:italic}.cs{color:#e50808;background-color:#520000;font-weight:500}.cp,.cpf{color:#cd2828;font-weight:500}.gd,.gr{color:#d22323}.ge{font-style:italic}.gh,.gu,.nd,.na,.ne{color:#ffa500;font-weight:500}.gi{color:#589819}.go{color:#ccc}.gp{color:#aaa}.gs{font-weight:500}.gt{color:#d22323}.w{color:#666}@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;src:local("Metropolis Regular"),local("Metropolis-Regular"),url("../fonts/Metropolis-Regular.woff2") format("woff2"),url("../fonts/Metropolis-Regular.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:normal;font-weight:300;src:local("Metropolis Light"),local("Metropolis-Light"),url("../fonts/Metropolis-Light.woff2") format("woff2"),url("../fonts/Metropolis-Light.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:italic;font-weight:300;src:local("Metropolis Light Italic"),local("Metropolis-LightItalic"),url("../fonts/Metropolis-LightItalic.woff2") format("woff2"),url("../fonts/Metropolis-LightItalic.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:normal;font-weight:500;src:local("Metropolis Medium"),local("Metropolis-Medium"),url("../fonts/Metropolis-Medium.woff2") format("woff2"),url("../fonts/Metropolis-Medium.woff") format("woff")}@font-face{font-family:'Metropolis';font-style:italic;font-weight:500;src:local("Metropolis Medium Italic"),local("Metropolis-MediumItalic"),url("../fonts/Metropolis-MediumItalic.woff2") format("woff2"),url("../fonts/Metropolis-MediumItalic.woff") format("woff")}@font-face{font-family:'Cookie';font-style:normal;font-weight:400;src:local("Cookie-Regular"),url("../fonts/cookie-v10-latin-regular.woff2") format("woff2"),url("../fonts/cookie-v10-latin-regular.woff") format("woff")}footer{min-height:150px}

/*# sourceMappingURL=styles.css.map */

 exampleSite/resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json

@@ -1 +1 @@
{"Target":"css/styles.49c6be18eeac6986affa1beb9b1f72c9d118d4bed96bd9b17145cfe8fbd796b6689fefe373f9fbd068c06e566cc443b0efae6677b838cc61298536e20d58ff01.css","MediaType":"text/css","Data":{"Integrity":"sha512-Sca+GO6saYav+hvrmx9yydEY1L7Za9mxcUXP6PvXlrZon+/jc/n70GjAblZsxEOw765md7g4zGEphTbiDVj/AQ=="}}
{"Target":"css/styles.db24024f9e492d62ae80a80738faa357439ec68392ab6d297200374fcdb42e5e0c16a57ecce9f1a0a7463f7159b7da1ec407bd15e653268538141a0f1ab581b6.css","MediaType":"text/css","Data":{"Integrity":"sha512-2yQCT55JLWKugKgHOPqjV0OexoOSq20pcgA3T820Ll4MFqV+zOnxoKdGP3FZt9oexAe9FeZTJoU4FBoPGrWBtg=="}}