From 04631b1f651fd677baf837be318084b91cb9acf4 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Tue, 31 May 2022 02:57:14 -0700 Subject: Oxipng, SCSS, Webmanifest --- README.md | 4 ++-- sass/abridge-blue.scss | 3 +-- sass/abridge-bluelight.scss | 3 +-- sass/abridge-bluenight.scss | 3 +-- sass/abridge-dark.scss | 3 +-- sass/abridge-light.scss | 3 +-- sass/abridge.scss | 3 +-- screenshot.png | Bin 142147 -> 124037 bytes static/android-chrome-192x192.png | Bin 2772 -> 2569 bytes static/android-chrome-192x192m.png | Bin 2464 -> 2284 bytes static/android-chrome-512x512.png | Bin 6790 -> 5618 bytes static/apple-touch-icon.png | Bin 2817 -> 2636 bytes static/banner.png | Bin 14818 -> 13379 bytes static/favicon-32x32.png | Bin 982 -> 969 bytes static/lite-vimeo.min.js | 1 + static/mstile-150x150.png | Bin 2505 -> 2289 bytes static/site.webmanifest | 8 ++++---- 17 files changed, 13 insertions(+), 18 deletions(-) create mode 100644 static/lite-vimeo.min.js diff --git a/README.md b/README.md index 9574e44..dd9bb84 100644 --- a/README.md +++ b/README.md @@ -271,11 +271,11 @@ All pages extend to `base.html`, and you can customize them as need. ### Optimize PNG files: -All png files under the static directory can be optimized using optipng, this usually results in files 1/2 the size: +All png files can be optimized using [oxipng](https://github.com/shssoichiro/oxipng), this usually results in files 1/2 the size: ```bash cd static -optipng -o7 -zm1-9 -strip all *.png +oxipng -o max --strip all -a -Z *.png ``` ### Consolidate two search js files into one: diff --git a/sass/abridge-blue.scss b/sass/abridge-blue.scss index 3c2dd78..8a5890c 100644 --- a/sass/abridge-blue.scss +++ b/sass/abridge-blue.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/sass/abridge-bluelight.scss b/sass/abridge-bluelight.scss index f076cec..8b7bc73 100644 --- a/sass/abridge-bluelight.scss +++ b/sass/abridge-bluelight.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/sass/abridge-bluenight.scss b/sass/abridge-bluenight.scss index 626a8bf..b61c23b 100644 --- a/sass/abridge-bluenight.scss +++ b/sass/abridge-bluenight.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss index f7f7b67..3435382 100644 --- a/sass/abridge-dark.scss +++ b/sass/abridge-dark.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss index f06d246..61c93fd 100644 --- a/sass/abridge-light.scss +++ b/sass/abridge-light.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/sass/abridge.scss b/sass/abridge.scss index 322c16a..bb2c1fb 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -1,5 +1,4 @@ -@import "variables"; // config -@import "imports"; // html +@import "imports"; //@import "fonts/Arimo"; //@import "fonts/Lato"; diff --git a/screenshot.png b/screenshot.png index 3b0e13f..3c49a32 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png index f35179c..7419c21 100644 Binary files a/static/android-chrome-192x192.png and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-192x192m.png b/static/android-chrome-192x192m.png index 9630646..a49b019 100644 Binary files a/static/android-chrome-192x192m.png and b/static/android-chrome-192x192m.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png index adb1e65..37faf45 100644 Binary files a/static/android-chrome-512x512.png and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png index 67bfc4f..fb183f5 100644 Binary files a/static/apple-touch-icon.png and b/static/apple-touch-icon.png differ diff --git a/static/banner.png b/static/banner.png index 9865019..61b2179 100644 Binary files a/static/banner.png and b/static/banner.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png index 3f885f5..248aba2 100644 Binary files a/static/favicon-32x32.png and b/static/favicon-32x32.png differ diff --git a/static/lite-vimeo.min.js b/static/lite-vimeo.min.js new file mode 100644 index 0000000..692eea0 --- /dev/null +++ b/static/lite-vimeo.min.js @@ -0,0 +1 @@ +let LiteVimeoEmbed=(()=>{class i extends HTMLElement{constructor(){super(),this.iframeLoaded=!1,this.setupDom()}static get observedAttributes(){return["videoid"]}connectedCallback(){this.addEventListener("pointerover",i.warmConnections,{once:!0}),this.addEventListener("click",()=>this.addIframe())}get videoId(){return encodeURIComponent(this.getAttribute("videoid")||"")}set videoId(e){this.setAttribute("videoid",e)}get videoTitle(){return this.getAttribute("videotitle")||"Video"}set videoTitle(e){this.setAttribute("videotitle",e)}get videoPlay(){return this.getAttribute("videoPlay")||"Play"}set videoPlay(e){this.setAttribute("videoPlay",e)}get videoStartAt(){return this.getAttribute("videoPlay")||"0s"}set videoStartAt(e){this.setAttribute("videoPlay",e)}get autoLoad(){return this.hasAttribute("autoload")}set autoLoad(e){e?this.setAttribute("autoload",""):this.removeAttribute("autoload")}get autoPlay(){return this.hasAttribute("autoplay")}set autoPlay(e){e?this.setAttribute("autoplay","autoplay"):this.removeAttribute("autoplay")}setupDom(){const e=this.attachShadow({mode:"open"});e.innerHTML=`
`,this.domRefFrame=this.shadowRoot.querySelector("#frame"),this.domRefImg={fallback:this.shadowRoot.querySelector("#fallbackPlaceholder"),webp:this.shadowRoot.querySelector("#webpPlaceholder"),jpeg:this.shadowRoot.querySelector("#jpegPlaceholder")},this.domRefPlayButton=this.shadowRoot.querySelector(".lvo-playbtn")}setupComponent(){this.initImagePlaceholder(),this.domRefPlayButton.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.setAttribute("title",this.videoPlay+": "+this.videoTitle),this.autoLoad&&this.initIntersectionObserver()}attributeChangedCallback(e,t,o){"videoid"===e&&t!==o&&(this.setupComponent(),this.domRefFrame.classList.contains("lvo-activated")&&(this.domRefFrame.classList.remove("lvo-activated"),this.shadowRoot.querySelector("iframe").remove()))}addIframe(){var e;this.iframeLoaded||(e=this.autoLoad&&this.autoPlay||!this.autoLoad?"autoplay=1":"",e=new URL(`/video/${this.videoId}?${e}&#t=`+this.videoStartAt,"https://player.vimeo.com/"),this.domRefFrame.insertAdjacentHTML("beforeend",``),this.domRefFrame.classList.add("lvo-activated"),this.iframeLoaded=!0)}async initImagePlaceholder(){i.addPrefetch("preconnect","https://i.vimeocdn.com/");var e=`https://vimeo.com/api/v2/video/${this.videoId}.json`;let t=(await(await fetch(e)).json())[0].thumbnail_large;var e=t.substr(t.lastIndexOf("/")+1).split("_")[0],o=`https://i.vimeocdn.com/video/${e}.jpg?mw=1100&mh=619&q=70`;this.domRefImg.webp.srcset=`https://i.vimeocdn.com/video/${e}.webp?mw=1100&mh=619&q=70`,this.domRefImg.jpeg.srcset=o,this.domRefImg.fallback.src=o,this.domRefImg.fallback.setAttribute("aria-label",this.videoPlay+": "+this.videoTitle),this.domRefImg.fallback.setAttribute("alt",this.videoPlay+": "+this.videoTitle)}initIntersectionObserver(){if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window){const e=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&!this.iframeLoaded&&(i.warmConnections(),this.addIframe(),t.unobserve(this))})},{root:null,rootMargin:"0px",threshold:0});e.observe(this)}}static addPrefetch(e,t,o){const i=document.createElement("link");i.rel=e,i.href=t,o&&(i.as=o),i.crossOrigin="true",document.head.append(i)}static warmConnections(){i.preconnected||(i.addPrefetch("preconnect","https://f.vimeocdn.com"),i.addPrefetch("preconnect","https://player.vimeo.com"),i.addPrefetch("preconnect","https://i.vimeocdn.com"),i.preconnected=!0)}}return i.preconnected=!1,i})();customElements.define("lite-vimeo",LiteVimeoEmbed);export{LiteVimeoEmbed}; diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png index f26a5e5..f955741 100644 Binary files a/static/mstile-150x150.png and b/static/mstile-150x150.png differ diff --git a/static/site.webmanifest b/static/site.webmanifest index b51ff91..f4e72ae 100644 --- a/static/site.webmanifest +++ b/static/site.webmanifest @@ -1,12 +1,12 @@ { "name": "Abridge Zola Theme", "short_name": "Abridge", - "start_url": "https://abridge.netlify.app/", "description": "Fast & Lightweight Zola Theme", - "scope": "/", - "display": "standalone", - "theme_color": "#222222", + "start_url": "https://abridge.netlify.app/", + "scope": "https://abridge.netlify.app/", "background_color": "#111111", + "theme_color": "#222222", + "display": "standalone", "icons": [ { "src": "/android-chrome-192x192.png", -- cgit v1.3.1