Handle glitching <img> directly & Write usage guide & Update README & Add code syntax highlighting in doc website & Add size-limit to npm test & Add eslint to npm test

2026-06-16 12:34:00 +02:00 · 2022-07-31 19:35:11 +02:00
parent 8d343cd39e
commit 94feeb04b9
14 changed files with 1529 additions and 1124 deletions
@@ -1,6 +1,6 @@
 <img src="./assets/intro.gif">

-PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.5kb minified and gzipped and 4kb minified.<br>
+PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.8kb minified and gzipped and 4kb minified.<br>

 Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/playground) 😊

@@ -21,15 +21,9 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla
    <script src="./path/to/your/powerglitch.min.js"></script>
    ```

-2. Add a container for the image with fixed width and height
+2. Find an image to glitch
    ```html
-    <div id="glitched-image"></div>
-    ```
-    ```css
-    #glitched-image {
-        width: 80px;
-        height: 80px;
-    }
+    <img src='https://.../image.png' class='glitch' />
    ```

 3. Import PowerGlitch using ES6 import
@@ -44,47 +38,14 @@ Want to try it out? Check out the [demo](https://7ph.github.io/powerglitch/#/pla

 4. Glitch the image
    ```javascript
-    PowerGlitch.glitch(
-        '#glitched-image',
-        {
-            imageUrl: 'https://raw.githubusercontent.com/7PH/powerglitch/master/assets/logo-128.png'
-        },
-    )
+    PowerGlitch.glitch('img.glitch')
    ```

-5. Customize the glitch effect
-    ```javascript
-    PowerGlitch.glitch(
-        '#glitched-image',
-        {
-            imageUrl: 'https://raw.githubusercontent.com/7PH/powerglitch/master/assets/logo-128.png',
-            backgroundColor: 'transparent',
-            timing: {
-                duration: 2 * 1000,
-                iterations: Infinity,
-            },
-            glitchTimeSpan: {
-                start: 0.5,
-                end: 0.7,
-            },
-            shake: {
-                velocity: 15,
-                amplitudeX: 0.4,
-                amplitudeY: 0.4,
-            },
-            slice: {
-                count: 6,
-                velocity: 15,
-                minHeight: 0.02,
-                maxHeight: 0.15,
-                hueRotate: true,
-            },
-        }
-    )
-    ```
+5. That's it, your image is glitched!
+6. For customization and optimization tips, check-out the [usage guide](https://7ph.github.io/powerglitch/#/usage).

 ## Useful links

 - Visually try out effects using the [demo](https://7ph.github.io/powerglitch/#/playground).
 - Lookup PowerGlitch [home page](https://7ph.github.io/powerglitch/).
- For detailed usage, check the [API Reference](https://7ph.github.io/powerglitch/#/api).
+- For customization and optimization tips, check the [usage guide](https://7ph.github.io/powerglitch/#/usage).
@@ -1 +1 @@
-(function(d){"use strict";var y=Object.defineProperty,p=Object.defineProperties,w=Object.getOwnPropertyDescriptors,g=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,f=(t,e,r)=>e in t?y(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,l=(t,e)=>{for(var r in e||(e={}))_.call(e,r)&&f(t,r,e[r]);if(g)for(var r of g(e))$.call(e,r)&&f(t,r,e[r]);return t},b=(t,e)=>p(t,w(e));const h=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.5,end:.7},shake:{velocity:15,amplitudeX:.4,amplitudeY:.4},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}}),c=(t,e)=>{let r=0;if(t.glitchTimeSpan){const s=t.glitchTimeSpan.start,a=t.glitchTimeSpan.end;if(e<s||e>a)return 0;const o=s+(a-s)/2;e<o?r=(e-s)/(o-s):r=(a-e)/(a-o)}else r=1;return(Math.random()-.5)*2*r},v=({minHeight:t,maxHeight:e,minWidth:r,maxWidth:n})=>{const s=Math.floor(Math.random()*((e-t)*100+1))+t*100,a=Math.floor(Math.random()*((n-r)*100+1))+r*100,o=Math.floor(Math.random()*(100-s)),i=Math.floor(Math.random()*(100-a));return{top:o,left:i,height:s,width:a}},P=({top:t,left:e,height:r,width:n})=>{const s=`${e+n}% ${t}%`,a=`${e+n}% ${t+r}%`,o=`${e}% ${t+r}%`,i=`${e}% ${t}%`;return`polygon(${s}, ${a}, ${o}, ${i})`},u=t=>b(l({},h().timing),{easing:`steps(${t}, jump-start)`}),M=t=>{if(!t.slice)throw new Error("Slice are not enabled");const e=Math.floor(t.slice.velocity*t.timing.duration/1e3)+1,r=[];for(let n=0;n<e;++n){const s=v({minHeight:t.slice.minHeight,maxHeight:t.slice.maxHeight,minWidth:1,maxWidth:1}),a=c(t,n/e)*30,o={};o.transform=`translate3d(${a}%, 0, 0)`,o.clipPath=P(s),t.slice.hueRotate&&(o.filter=`hue-rotate(${Math.floor(c(t,n/e)*360)}deg)`),r.push(o)}return{steps:r,timing:l(l({},u(e)),t.timing)}},O=t=>{if(!t.shake)return{steps:[],timing:u(1)};const e=Math.floor(t.shake.velocity*t.timing.duration/1e3)+1,r=[];for(let n=0;n<e;++n){const s=c(t,n/e)*t.shake.amplitudeX*100,a=c(t,n/e)*t.shake.amplitudeY*100,o={};o.transform=`translate3d(${s}%, ${a}%, 0)`,r.push(o)}return{steps:r,timing:l(l({},u(e)),t.timing)}},C=t=>{const e=[];if(e.push(O(t)),t.slice)for(let r=0;r<t.slice.count;++r)e.push(M(t));return e};function m(...t){const e=r=>r&&typeof r=="object";return t.reduce((r,n)=>(Object.keys(n).forEach(s=>{const a=r[s],o=n[s];if(Array.isArray(a)&&Array.isArray(o)){r[s]=a.concat(...o);return}if(e(a)&&e(o)){r[s]=m(a,o);return}o!==void 0&&(r[s]=o)}),r),{})}const R={glitch:(t,e)=>{e=m(h(),e);let r=[];if(typeof t=="string"){const a=document.querySelectorAll(t);if(!a.length)throw new Error(`Could not find any element with selector ${t}`);r=Array.from(a)}else r=[t];for(const a of r)for(a.style.position="relative",a.style.overflow="hidden";a.firstChild;)a.removeChild(a.firstChild);const n=document.createElement("div");n.classList.add("layer"),n.style.backgroundColor=e.backgroundColor,n.style.backgroundImage=`url(${e.imageUrl})`,n.style.backgroundRepeat="no-repeat",n.style.backgroundPosition="center",n.style.backgroundSize="contain",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.position="absolute";const s=C(e);for(const a of r)for(const o of s){const i=n.cloneNode(!1);i.animate(o.steps,o.timing),a.appendChild(i)}},getDefaultOptions:h};d.PowerGlitch=R,Object.defineProperty(d,"__esModule",{value:!0})})(this.window=this.window||{});
+(function(d){"use strict";var w=Object.defineProperty,b=Object.defineProperties,_=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,E=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,u=(t,r,e)=>r in t?w(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,l=(t,r)=>{for(var e in r||(r={}))E.call(r,e)&&u(t,e,r[e]);if(f)for(var e of f(r))$.call(r,e)&&u(t,e,r[e]);return t},v=(t,r)=>b(t,_(r));const m=()=>({backgroundColor:"transparent",timing:{duration:2*1e3,iterations:1/0},glitchTimeSpan:{start:.5,end:.7},shake:{velocity:15,amplitudeX:.4,amplitudeY:.4},slice:{count:6,velocity:15,minHeight:.02,maxHeight:.15,hueRotate:!0}}),c=(t,r)=>{let e=0;if(t.glitchTimeSpan){const n=t.glitchTimeSpan.start,i=t.glitchTimeSpan.end;if(r<n||r>i)return 0;const a=n+(i-n)/2;r<a?e=(r-n)/(a-n):e=(i-r)/(i-a)}else e=1;return(Math.random()-.5)*2*e},M=({minHeight:t,maxHeight:r,minWidth:e,maxWidth:o})=>{const n=Math.floor(Math.random()*((r-t)*100+1))+t*100,i=Math.floor(Math.random()*((o-e)*100+1))+e*100,a=Math.floor(Math.random()*(100-n)),s=Math.floor(Math.random()*(100-i));return{top:a,left:s,height:n,width:i}},P=({top:t,left:r,height:e,width:o})=>{const n=`${r+o}% ${t}%`,i=`${r+o}% ${t+e}%`,a=`${r}% ${t+e}%`,s=`${r}% ${t}%`;return`polygon(${n}, ${i}, ${a}, ${s})`},g=t=>v(l({},m().timing),{easing:`steps(${t}, jump-start)`}),C=t=>{if(!t.slice)throw new Error("Slice are not enabled");const r=Math.floor(t.slice.velocity*t.timing.duration/1e3)+1,e=[];for(let o=0;o<r;++o){const n=M({minHeight:t.slice.minHeight,maxHeight:t.slice.maxHeight,minWidth:1,maxWidth:1}),i=c(t,o/r)*30,a={};a.transform=`translate3d(${i}%, 0, 0)`,a.clipPath=P(n),t.slice.hueRotate&&(a.filter=`hue-rotate(${Math.floor(c(t,o/r)*360)}deg)`),e.push(a)}return{steps:e,timing:l(l({},g(r)),t.timing)}},O=t=>{if(!t.shake)return{steps:[],timing:g(1)};const r=Math.floor(t.shake.velocity*t.timing.duration/1e3)+1,e=[];for(let o=0;o<r;++o){const n=c(t,o/r)*t.shake.amplitudeX*100,i=c(t,o/r)*t.shake.amplitudeY*100,a={};a.transform=`translate3d(${n}%, ${i}%, 0)`,e.push(a)}return{steps:e,timing:l(l({},g(r)),t.timing)}},k=t=>{const r=[];if(r.push(O(t)),t.slice)for(let e=0;e<t.slice.count;++e)r.push(C(t));return r},y=(t,r,e,o)=>{const n=document.createElement("div");for(n.classList.add("layer"),n.style.backgroundColor=e,n.style.backgroundRepeat="no-repeat",n.style.backgroundPosition="center",n.style.backgroundSize="contain",n.style.width="100%",n.style.height="100%",n.style.top="0",n.style.left="0",n.style.position="absolute",t.style.position="relative",t.style.overflow="hidden";t.firstChild;)t.removeChild(t.firstChild);for(const i of r){const a=n.cloneNode(!1);a.style.backgroundImage=`url(${o})`,a.animate(i.steps,i.timing),t.appendChild(a)}};function p(...t){const r=e=>e&&typeof e=="object";return t.reduce((e,o)=>(Object.keys(o).forEach(n=>{const i=e[n],a=o[n];if(Array.isArray(i)&&Array.isArray(a)){e[n]=i.concat(...a);return}if(r(i)&&r(a)){e[n]=p(i,a);return}a!==void 0&&(e[n]=a)}),e),{})}const L={glitch:(t=".powerglitch",r={})=>{const e=p(m(),r);let o=[];if(typeof t=="string"){const s=document.querySelectorAll(t);if(!s.length)throw new Error(`Could not find any element with selector ${t}`);o=Array.from(s)}else o=[t];const n=o.filter(s=>s instanceof HTMLImageElement),i=o.filter(s=>s instanceof HTMLDivElement),a=k(e);for(const s of n){const h=document.createElement("div");if(h.style.width=s.clientWidth+"px",h.style.height=s.clientHeight+"px",!s.parentElement)throw new Error("Unable to glitch image, it is not attached to a parent element");s.parentElement.insertBefore(h,s),s.style.display="none",y(h,a,e.backgroundColor,e.imageUrl||s.src)}for(const s of i){if(!e.imageUrl)throw new Error("Options.imageUrl must be set if there are div elements to glitch");y(s,a,e.backgroundColor,e.imageUrl)}},getDefaultOptions:m};d.PowerGlitch=L,Object.defineProperty(d,"__esModule",{value:!0})})(this.window=this.window||{});
@@ -2,13 +2,23 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { createRouter, createWebHashHistory } from 'vue-router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import 'highlight.js/styles/tokyo-night-dark.css';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import css from 'highlight.js/lib/languages/css';
+import shell from 'highlight.js/lib/languages/shell';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
 import '@/style.css';
 import { loadIcons } from '@/icons';
 import App from '@/App.vue';
 import HomeView from '@/views/HomeView.vue';
-import APIReferenceView from '@/views/APIReferenceView.vue';
+import UsageView from '@/views/UsageView.vue';
 import PlaygroundView from '@/views/PlaygroundView.vue';

+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('shell', shell);
+
 loadIcons();
 const pinia = createPinia();

@@ -17,13 +27,14 @@ const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { name: 'home', path: '/', component: HomeView },
-        { name: 'api', path: '/api', component: APIReferenceView },
+        { name: 'usage', path: '/usage', component: UsageView },
        { name: 'playground', path: '/playground', component: PlaygroundView },
    ],
 });

 createApp(App)
-    .use(pinia)
    .use(router)
+    .use(pinia)
    .component('fa', FontAwesomeIcon)
+    .use(hljsVuePlugin)
    .mount('#app');
@@ -1,60 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import logo from '@/assets/default.png';
-import { PowerGlitch } from '../../../src/index.ts';
-
-// Glitch logo
-const logoGlitch = ref(null);
-onMounted(() => {
-    PowerGlitch.glitch(logoGlitch.value, { imageUrl: logo });
-});
-</script>
-
-<template>
-    <div class="app w-full mx-auto mb-8 mt-16 md:mt-8 px-4">
-
-        <!-- GitHub -->
-        <p class="fixed right-0 top-0 mx-6 my-4 text-4xl">
-            <a href="https://github.com/7ph/powerglitch" target="_blank">
-                <fa icon="fa-brands fa-github" />
-            </a>
-        </p>
-
-        <!-- Title -->
-        <div class="mt-8 font-bold text-5xl flex gap-4 justify-center">
-            <div ref="logoGlitch" style="width: 60px; height: 60px;"></div>
-            <div class="mt-1">PowerGlitch</div>
-        </div>
-        <p class="text-center mt-4 text-lg">
-            A tiny library to glitch images on the web.
-        </p>
-        <div class="mt-2 flex justify-center gap-4">
-            <RouterLink to="/" class="underline">home</RouterLink>
-            <RouterLink to="/api" class="">api</RouterLink>
-            <RouterLink to="/playground" class="underline">playground</RouterLink>
-            <a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
-        </div>
-
-        <!-- API Reference -->
-        <h1 class="font-bold mt-8">⭕ API Reference</h1>
-        <p class="mt-4">
-            For now, <a
-                class="underline"
-                target="_blank"
-                href="https://github.com/7PH/powerglitch/blob/master/src/index.ts#L1"
-            >
-                please refer to the TypeScript type definitions for the API.
-            </a>
-        </p>
-    </div>
-</template>
-
-<style scoped>
-.app {
-    max-width: 600px;
-}
-.example {
-    width: 120px;
-    height: 120px;
-}
-</style>
@@ -5,10 +5,7 @@ import exampleFrog from '@/assets/example-frog.gif';
 import { PowerGlitch } from '../../../src/index.ts';

 // Glitch logo
-const logoGlitch = ref(null);
-onMounted(() => {
-    PowerGlitch.glitch(logoGlitch.value, { imageUrl: logo });
-});
+onMounted(() => PowerGlitch.glitch());

 // Glitch example frog
 const frog1Glitch = ref(null);
@@ -44,21 +41,6 @@ onMounted(() => {
        },
    });
 });
-
-// Usage example
-const usageExample = `
-import { PowerGlitch } from 'powerglitch';
-PowerGlitch.glitch('#my-image', {
-    imageUrl: 'https://.../image.png'
-});
-`.trim();
-
-// Install
-const installExample = `
-# npm i --save powerglitch
-or
-# yarn add powerglitch
-`.trim();
 </script>

 <template>
@@ -73,7 +55,7 @@ or

        <!-- Title -->
        <div class="mt-8 font-bold text-5xl flex gap-4 justify-center">
-            <div ref="logoGlitch" style="width: 60px; height: 60px;"></div>
+            <img :src="logo" class="powerglitch" style="width: 60px; height: 60px;" />
            <div class="mt-1">PowerGlitch</div>
        </div>
        <p class="text-center mt-4 text-lg">
@@ -81,7 +63,7 @@ or
        </p>
        <div class="mt-2 flex justify-center gap-4">
            <RouterLink to="/" class="">home</RouterLink>
-            <RouterLink to="/api" class="underline">api</RouterLink>
+            <RouterLink to="/usage" class="underline">usage</RouterLink>
            <RouterLink to="/playground" class="underline">playground</RouterLink>
            <a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
        </div>
@@ -89,7 +71,7 @@ or
        <!-- Introduction -->
        <h1 class="font-bold mt-8">❓ Introduction</h1>
        <p class="mt-4">
-            PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around <b>1.5kb</b> minified and gzipped and <b>4kb</b> minified.<br>
+            PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around <b>1.8kb</b> minified and gzipped and <b>4kb</b> minified.<br>
            <br>
            What are you waiting for? <RouterLink to="playground" class="underline">Try glitching stuff now ⚡!</RouterLink>
        </p>
@@ -105,12 +87,30 @@ or

        <!-- Install -->
        <h1 class="font-bold mt-8">🔽 Install</h1>
-        <pre class="border border-gray-400 rounded-xl p-4 mt-4 bg-gray-300" v-html="installExample"></pre>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-4"
+            language="shell"
+            :code="`
+$ npm i --save powerglitch
+or
+$ yarn add powerglitch
+`.trim()"
+        />
        <p class="mt-4">Alternatively, you can <a class="underline" target="_blank" href="https://raw.githubusercontent.com/7PH/powerglitch/master/dist/powerglitch.min.js">download minified web bundle</a> and use it directly in your project.</p>

-        <!-- Usage -->
+        <!-- Basic usage -->
        <h1 class="font-bold mt-8">🔨 Usage</h1>
-        <pre class="border border-gray-400 overflow-x-auto rounded-xl p-4 mt-4 bg-gray-300" v-html="usageExample"></pre>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+import { PowerGlitch } from 'powerglitch'
+
+// Glitch images with class 'some-image'
+PowerGlitch.glitch('.some-image')
+`.trim()"
+        />
+        <p class="mt-4">To optimize and customize glitched images, check the <router-link to="/usage" class="underline">usage guide</router-link>.</p>

        <!-- Contribute -->
        <h1 class="font-bold mt-8">🤝 Support and bugs</h1>
@@ -0,0 +1,185 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import logo from '@/assets/default.png';
+import { PowerGlitch } from '../../../src/index.ts';
+
+// Glitch logo
+const logoGlitch = ref(null);
+onMounted(() => {
+    PowerGlitch.glitch(logoGlitch.value, { imageUrl: logo });
+});
+</script>
+
+<template>
+    <div class="app w-full mx-auto mb-8 mt-16 md:mt-8 px-4">
+
+        <!-- GitHub -->
+        <p class="fixed right-0 top-0 mx-6 my-4 text-4xl">
+            <a href="https://github.com/7ph/powerglitch" target="_blank">
+                <fa icon="fa-brands fa-github" />
+            </a>
+        </p>
+
+        <!-- Title -->
+        <div class="mt-8 font-bold text-5xl flex gap-4 justify-center">
+            <div ref="logoGlitch" style="width: 60px; height: 60px;"></div>
+            <div class="mt-1">PowerGlitch</div>
+        </div>
+        <p class="text-center mt-4 text-lg">
+            A tiny library to glitch images on the web.
+        </p>
+        <div class="mt-2 flex justify-center gap-4">
+            <RouterLink to="/" class="underline">home</RouterLink>
+            <RouterLink to="/usage" class="">usage</RouterLink>
+            <RouterLink to="/playground" class="underline">playground</RouterLink>
+            <a target="_blank" href="https://github.com/7PH/powerglitch" class="underline">github</a>
+        </div>
+        
+        <h1 class="font-bold mt-8">⚪ Intro</h1>
+        <p class="mt-2">
+            This simple guide will walk you through the basic usage of the library.
+        </p>
+
+        <!-- Glitching <div> -->
+        <h1 class="font-bold mt-8">🟣 Glitching {{ '<div>' }}</h1>
+        <p class="mt-2">The most optimized way to use PowerGlitch is to first create a placeholder div</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="html"
+            :code="`<div class='glitch'></div>`"
+        />
+        <p class="mt-2">ensure the div has a non-zero width/height</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="css"
+            :code="`
+.glitch {
+    width: 80px;
+    height: 80px;
+}
+`.trim()"
+        />
+        <p class="mt-2">then use PowerGlitch.glitch() to populate the div with the glitched image</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+PowerGlitch.glitch('div.glitch', {
+    imageUrl: 'https://.../image.png'
+})
+`.trim()"
+        />
+        <p class="mt-2">this takes care of animating the placeholder with the glitch effect.</p>
+
+        <!-- Glitching <img> -->
+        <h1 class="font-bold mt-8">🔵 Glitching {{ '<img>' }}</h1>
+        <p class="mt-2">It is also possible to glitch images directly</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="html"
+            :code="`<img src='https://.../image.png' class='glitch' />`"
+        />
+        <p class="mt-2">for images, call PowerGlitch.glitch() without specifying the imageUrl</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+PowerGlitch.glitch('img.glitch')
+`.trim()"
+        />
+        <p class="mt-2">this replaces the image with its glitched version.</p>
+
+        <!-- By reference -->
+        <h1 class="font-bold mt-8">⚫ Passing reference</h1>
+        <p class="mt-2">If you already have a reference to the element to glitch, you can directly pass it as the first argument</p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+const image = document.querySelector('img.glitch')
+PowerGlitch.glitch(image)
+`.trim()"
+        />
+
+        <!-- Customize glitch -->
+        <h1 class="font-bold mt-8">🟢 Customize glitch</h1>
+        <p class="mt-2">
+            By default, PowerGlitch will glitch images using a set of hardcoded default values that look good for most images.
+            However, you can customize the applied glitch by passing a custom options object as the second argument to PowerGlitch.glitch().
+        </p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+PowerGlitch.glitch(
+    'div.glitch',
+    {
+        backgroundColor: 'transparent',
+        timing: {
+            duration: 1000,
+            iterations: 15,
+        },
+        glitchTimeSpan: {
+            start: 0.4,
+            end: 0.7,
+        },
+        shake: {
+            velocity: 10,
+            amplitudeX: 0.4,
+            amplitudeY: 0.4,
+        },
+        slice: {
+            count: 4,
+            velocity: 10,
+            minHeight: 0.02,
+            maxHeight: 0.40,
+            hueRotate: true,
+        },
+    }
+)
+`.trim()"
+        />
+        <p class="mt-2">
+            options are merged with the defaults, so you can override only values you want
+        </p>
+        <highlightjs
+            class="rounded-xl overflow-hidden mt-2"
+            language="js"
+            :code="`
+PowerGlitch.glitch(
+    'div.glitch',
+    {
+        glitchTimeSpan: false,
+        shake: false,
+    }
+)
+`.trim()"
+        />
+        <p class="mt-2">
+            to find the perfect set of options for your image, <router-link to="/playground" class="underline">
+                use the playground
+            </router-link>
+        </p>
+        
+        <h1 class="font-bold mt-8">🟡 API reference</h1>
+        <p class="mt-2 pb-8">
+            To know what options are accepted and what they mean, <a
+                class="underline"
+                target="_blank"
+                href="https://github.com/7PH/powerglitch/blob/master/src/index.ts#L1"
+            >
+                refer to the TypeScript type definitions
+            </a>.
+        </p>
+    </div>
+</template>
+
+<style scoped>
+.app {
+    max-width: 600px;
+}
+.example {
+    width: 120px;
+    height: 120px;
+}
+</style>
@@ -5,8 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/powerglitch/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PowerGlitch - Glitch anything on the web</title>
-  <script type="module" crossorigin src="/powerglitch/assets/index.880546d7.js"></script>
-  <link rel="stylesheet" href="/powerglitch/assets/index.618eb7d4.css">
+  <script type="module" crossorigin src="/powerglitch/assets/index.ebbe7fb9.js"></script>
+  <link rel="stylesheet" href="/powerglitch/assets/index.bd0a6de9.css">
 </head>
 <body>
    <div id="app"></div>
@@ -13,16 +13,20 @@
                "@fortawesome/free-regular-svg-icons": "^6.1.1",
                "@fortawesome/free-solid-svg-icons": "^6.1.1",
                "@fortawesome/vue-fontawesome": "^3.0.1",
+                "@highlightjs/vue-plugin": "^2.1.0",
+                "@size-limit/preset-small-lib": "^8.0.0",
                "@typescript-eslint/eslint-plugin": "^5.31.0",
                "@typescript-eslint/parser": "^5.31.0",
                "@vitejs/plugin-vue": "^3.0.0",
                "autoprefixer": "^10.4.7",
                "eslint": "^8.20.0",
                "eslint-plugin-vue": "^9.3.0",
+                "highlight.js": "^11.6.0",
                "pinia": "^2.0.16",
                "postcss": "^8.4.14",
                "rollup": "^2.77.0",
                "rollup-plugin-esbuild": "^4.9.1",
+                "size-limit": "^8.0.0",
                "tailwindcss": "^3.1.6",
                "vite": "^3.0.0",
                "vue": "^3.2.37",
@@ -133,6 +137,16 @@
                "vue": ">= 3.0.0 < 4"
            }
        },
+        "node_modules/@highlightjs/vue-plugin": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+            "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+            "dev": true,
+            "peerDependencies": {
+                "highlight.js": "^11.0.1",
+                "vue": "^3"
+            }
+        },
        "node_modules/@humanwhocodes/config-array": {
            "version": "0.9.5",
            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -201,6 +215,50 @@
                "node": ">= 8.0.0"
            }
        },
+        "node_modules/@size-limit/esbuild": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/esbuild/-/esbuild-8.0.0.tgz",
+            "integrity": "sha512-du3gGKAzeh8fKEbqG0PcHKyyilpHTC+z/e6r0a82G+9KMCQd2PBHfOrTyN+of8u6EZXkrp0zdwgr84nKLp1nPg==",
+            "dev": true,
+            "dependencies": {
+                "esbuild": "^0.14.51",
+                "nanoid": "^3.3.4"
+            },
+            "engines": {
+                "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "size-limit": "8.0.0"
+            }
+        },
+        "node_modules/@size-limit/file": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/file/-/file-8.0.0.tgz",
+            "integrity": "sha512-xd4bBk/YyezsMQfpi2V3/blodCuPNVF5UwMd4L9LxBvon0PK4C1+3zBXxZpvN7AcMvPbJ8RUMS+iHpD4KcwaOg==",
+            "dev": true,
+            "dependencies": {
+                "semver": "7.3.7"
+            },
+            "engines": {
+                "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "size-limit": "8.0.0"
+            }
+        },
+        "node_modules/@size-limit/preset-small-lib": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/preset-small-lib/-/preset-small-lib-8.0.0.tgz",
+            "integrity": "sha512-6Q2fJFuPalvANQIoxYAmQLGk1Rxerw/qtqpEi1dhF9czfWxtYxKwlVQgsE/d0j5eum/N7iJxioDeKZQJjzKPrQ==",
+            "dev": true,
+            "dependencies": {
+                "@size-limit/esbuild": "8.0.0",
+                "@size-limit/file": "8.0.0"
+            },
+            "peerDependencies": {
+                "size-limit": "8.0.0"
+            }
+        },
        "node_modules/@types/json-schema": {
            "version": "7.0.11",
            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -748,6 +806,15 @@
                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
            }
        },
+        "node_modules/bytes-iec": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/bytes-iec/-/bytes-iec-3.1.1.tgz",
+            "integrity": "sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
        "node_modules/callsites": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -821,6 +888,12 @@
                "node": ">= 6"
            }
        },
+        "node_modules/ci-job-number": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/ci-job-number/-/ci-job-number-1.2.2.tgz",
+            "integrity": "sha512-CLOGsVDrVamzv8sXJGaILUVI6dsuAkouJP/n6t+OxLPeeA4DDby7zn9SB6EUpa1H7oIKoE+rMmkW80zYsFfUjA==",
+            "dev": true
+        },
        "node_modules/color-name": {
            "version": "1.1.4",
            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -960,9 +1033,9 @@
            "dev": true
        },
        "node_modules/esbuild": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.49.tgz",
-            "integrity": "sha512-/TlVHhOaq7Yz8N1OJrjqM3Auzo5wjvHFLk+T8pIue+fhnhIMpfAzsG6PLVMbFveVxqD2WOp3QHei+52IMUNmCw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.51.tgz",
+            "integrity": "sha512-+CvnDitD7Q5sT7F+FM65sWkF8wJRf+j9fPcprxYV4j+ohmzVj2W7caUqH2s5kCaCJAfcAICjSlKhDCcvDpU7nw==",
            "dev": true,
            "hasInstallScript": true,
            "bin": {
@@ -972,32 +1045,32 @@
                "node": ">=12"
            },
            "optionalDependencies": {
-                "esbuild-android-64": "0.14.49",
-                "esbuild-android-arm64": "0.14.49",
-                "esbuild-darwin-64": "0.14.49",
-                "esbuild-darwin-arm64": "0.14.49",
-                "esbuild-freebsd-64": "0.14.49",
-                "esbuild-freebsd-arm64": "0.14.49",
-                "esbuild-linux-32": "0.14.49",
-                "esbuild-linux-64": "0.14.49",
-                "esbuild-linux-arm": "0.14.49",
-                "esbuild-linux-arm64": "0.14.49",
-                "esbuild-linux-mips64le": "0.14.49",
-                "esbuild-linux-ppc64le": "0.14.49",
-                "esbuild-linux-riscv64": "0.14.49",
-                "esbuild-linux-s390x": "0.14.49",
-                "esbuild-netbsd-64": "0.14.49",
-                "esbuild-openbsd-64": "0.14.49",
-                "esbuild-sunos-64": "0.14.49",
-                "esbuild-windows-32": "0.14.49",
-                "esbuild-windows-64": "0.14.49",
-                "esbuild-windows-arm64": "0.14.49"
+                "esbuild-android-64": "0.14.51",
+                "esbuild-android-arm64": "0.14.51",
+                "esbuild-darwin-64": "0.14.51",
+                "esbuild-darwin-arm64": "0.14.51",
+                "esbuild-freebsd-64": "0.14.51",
+                "esbuild-freebsd-arm64": "0.14.51",
+                "esbuild-linux-32": "0.14.51",
+                "esbuild-linux-64": "0.14.51",
+                "esbuild-linux-arm": "0.14.51",
+                "esbuild-linux-arm64": "0.14.51",
+                "esbuild-linux-mips64le": "0.14.51",
+                "esbuild-linux-ppc64le": "0.14.51",
+                "esbuild-linux-riscv64": "0.14.51",
+                "esbuild-linux-s390x": "0.14.51",
+                "esbuild-netbsd-64": "0.14.51",
+                "esbuild-openbsd-64": "0.14.51",
+                "esbuild-sunos-64": "0.14.51",
+                "esbuild-windows-32": "0.14.51",
+                "esbuild-windows-64": "0.14.51",
+                "esbuild-windows-arm64": "0.14.51"
            }
        },
        "node_modules/esbuild-android-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz",
-            "integrity": "sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.51.tgz",
+            "integrity": "sha512-6FOuKTHnC86dtrKDmdSj2CkcKF8PnqkaIXqvgydqfJmqBazCPdw+relrMlhGjkvVdiiGV70rpdnyFmA65ekBCQ==",
            "cpu": [
                "x64"
            ],
@@ -1011,9 +1084,9 @@
            }
        },
        "node_modules/esbuild-android-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz",
-            "integrity": "sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.51.tgz",
+            "integrity": "sha512-vBtp//5VVkZWmYYvHsqBRCMMi1MzKuMIn5XDScmnykMTu9+TD9v0NMEDqQxvtFToeYmojdo5UCV2vzMQWJcJ4A==",
            "cpu": [
                "arm64"
            ],
@@ -1027,9 +1100,9 @@
            }
        },
        "node_modules/esbuild-darwin-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz",
-            "integrity": "sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.51.tgz",
+            "integrity": "sha512-YFmXPIOvuagDcwCejMRtCDjgPfnDu+bNeh5FU2Ryi68ADDVlWEpbtpAbrtf/lvFTWPexbgyKgzppNgsmLPr8PA==",
            "cpu": [
                "x64"
            ],
@@ -1043,9 +1116,9 @@
            }
        },
        "node_modules/esbuild-darwin-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz",
-            "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.51.tgz",
+            "integrity": "sha512-juYD0QnSKwAMfzwKdIF6YbueXzS6N7y4GXPDeDkApz/1RzlT42mvX9jgNmyOlWKN7YzQAYbcUEJmZJYQGdf2ow==",
            "cpu": [
                "arm64"
            ],
@@ -1059,9 +1132,9 @@
            }
        },
        "node_modules/esbuild-freebsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz",
-            "integrity": "sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.51.tgz",
+            "integrity": "sha512-cLEI/aXjb6vo5O2Y8rvVSQ7smgLldwYY5xMxqh/dQGfWO+R1NJOFsiax3IS4Ng300SVp7Gz3czxT6d6qf2cw0g==",
            "cpu": [
                "x64"
            ],
@@ -1075,9 +1148,9 @@
            }
        },
        "node_modules/esbuild-freebsd-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz",
-            "integrity": "sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.51.tgz",
+            "integrity": "sha512-TcWVw/rCL2F+jUgRkgLa3qltd5gzKjIMGhkVybkjk6PJadYInPtgtUBp1/hG+mxyigaT7ib+od1Xb84b+L+1Mg==",
            "cpu": [
                "arm64"
            ],
@@ -1091,9 +1164,9 @@
            }
        },
        "node_modules/esbuild-linux-32": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz",
-            "integrity": "sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.51.tgz",
+            "integrity": "sha512-RFqpyC5ChyWrjx8Xj2K0EC1aN0A37H6OJfmUXIASEqJoHcntuV3j2Efr9RNmUhMfNE6yEj2VpYuDteZLGDMr0w==",
            "cpu": [
                "ia32"
            ],
@@ -1107,9 +1180,9 @@
            }
        },
        "node_modules/esbuild-linux-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz",
-            "integrity": "sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.51.tgz",
+            "integrity": "sha512-dxjhrqo5i7Rq6DXwz5v+MEHVs9VNFItJmHBe1CxROWNf4miOGoQhqSG8StStbDkQ1Mtobg6ng+4fwByOhoQoeA==",
            "cpu": [
                "x64"
            ],
@@ -1123,9 +1196,9 @@
            }
        },
        "node_modules/esbuild-linux-arm": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz",
-            "integrity": "sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.51.tgz",
+            "integrity": "sha512-LsJynDxYF6Neg7ZC7748yweCDD+N8ByCv22/7IAZglIEniEkqdF4HCaa49JNDLw1UQGlYuhOB8ZT/MmcSWzcWg==",
            "cpu": [
                "arm"
            ],
@@ -1139,9 +1212,9 @@
            }
        },
        "node_modules/esbuild-linux-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz",
-            "integrity": "sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.51.tgz",
+            "integrity": "sha512-D9rFxGutoqQX3xJPxqd6o+kvYKeIbM0ifW2y0bgKk5HPgQQOo2k9/2Vpto3ybGYaFPCE5qTGtqQta9PoP6ZEzw==",
            "cpu": [
                "arm64"
            ],
@@ -1155,9 +1228,9 @@
            }
        },
        "node_modules/esbuild-linux-mips64le": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz",
-            "integrity": "sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.51.tgz",
+            "integrity": "sha512-vS54wQjy4IinLSlb5EIlLoln8buh1yDgliP4CuEHumrPk4PvvP4kTRIG4SzMXm6t19N0rIfT4bNdAxzJLg2k6A==",
            "cpu": [
                "mips64el"
            ],
@@ -1171,9 +1244,9 @@
            }
        },
        "node_modules/esbuild-linux-ppc64le": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz",
-            "integrity": "sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.51.tgz",
+            "integrity": "sha512-xcdd62Y3VfGoyphNP/aIV9LP+RzFw5M5Z7ja+zdpQHHvokJM7d0rlDRMN+iSSwvUymQkqZO+G/xjb4/75du8BQ==",
            "cpu": [
                "ppc64"
            ],
@@ -1187,9 +1260,9 @@
            }
        },
        "node_modules/esbuild-linux-riscv64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz",
-            "integrity": "sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.51.tgz",
+            "integrity": "sha512-syXHGak9wkAnFz0gMmRBoy44JV0rp4kVCEA36P5MCeZcxFq8+fllBC2t6sKI23w3qd8Vwo9pTADCgjTSf3L3rA==",
            "cpu": [
                "riscv64"
            ],
@@ -1203,9 +1276,9 @@
            }
        },
        "node_modules/esbuild-linux-s390x": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz",
-            "integrity": "sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.51.tgz",
+            "integrity": "sha512-kFAJY3dv+Wq8o28K/C7xkZk/X34rgTwhknSsElIqoEo8armCOjMJ6NsMxm48KaWY2h2RUYGtQmr+RGuUPKBhyw==",
            "cpu": [
                "s390x"
            ],
@@ -1219,9 +1292,9 @@
            }
        },
        "node_modules/esbuild-netbsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz",
-            "integrity": "sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.51.tgz",
+            "integrity": "sha512-ZZBI7qrR1FevdPBVHz/1GSk1x5GDL/iy42Zy8+neEm/HA7ma+hH/bwPEjeHXKWUDvM36CZpSL/fn1/y9/Hb+1A==",
            "cpu": [
                "x64"
            ],
@@ -1235,9 +1308,9 @@
            }
        },
        "node_modules/esbuild-openbsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz",
-            "integrity": "sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.51.tgz",
+            "integrity": "sha512-7R1/p39M+LSVQVgDVlcY1KKm6kFKjERSX1lipMG51NPcspJD1tmiZSmmBXoY5jhHIu6JL1QkFDTx94gMYK6vfA==",
            "cpu": [
                "x64"
            ],
@@ -1251,9 +1324,9 @@
            }
        },
        "node_modules/esbuild-sunos-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz",
-            "integrity": "sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.51.tgz",
+            "integrity": "sha512-HoHaCswHxLEYN8eBTtyO0bFEWvA3Kdb++hSQ/lLG7TyKF69TeSG0RNoBRAs45x/oCeWaTDntEZlYwAfQlhEtJA==",
            "cpu": [
                "x64"
            ],
@@ -1267,9 +1340,9 @@
            }
        },
        "node_modules/esbuild-windows-32": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz",
-            "integrity": "sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.51.tgz",
+            "integrity": "sha512-4rtwSAM35A07CBt1/X8RWieDj3ZUHQqUOaEo5ZBs69rt5WAFjP4aqCIobdqOy4FdhYw1yF8Z0xFBTyc9lgPtEg==",
            "cpu": [
                "ia32"
            ],
@@ -1283,9 +1356,9 @@
            }
        },
        "node_modules/esbuild-windows-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz",
-            "integrity": "sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.51.tgz",
+            "integrity": "sha512-HoN/5HGRXJpWODprGCgKbdMvrC3A2gqvzewu2eECRw2sYxOUoh2TV1tS+G7bHNapPGI79woQJGV6pFH7GH7qnA==",
            "cpu": [
                "x64"
            ],
@@ -1299,9 +1372,9 @@
            }
        },
        "node_modules/esbuild-windows-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz",
-            "integrity": "sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.51.tgz",
+            "integrity": "sha512-JQDqPjuOH7o+BsKMSddMfmVJXrnYZxXDHsoLHc0xgmAZkOOCflRmC43q31pk79F9xuyWY45jDBPolb5ZgGOf9g==",
            "cpu": [
                "arm64"
            ],
@@ -1817,6 +1890,15 @@
                "node": ">= 0.4.0"
            }
        },
+        "node_modules/highlight.js": {
+            "version": "11.6.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+            "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+            "dev": true,
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
        "node_modules/ignore": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -2061,6 +2143,18 @@
            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
            "dev": true
        },
+        "node_modules/mkdirp": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+            "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+            "dev": true,
+            "bin": {
+                "mkdirp": "bin/cmd.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
        "node_modules/ms": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2079,6 +2173,15 @@
                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
            }
        },
+        "node_modules/nanospinner": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/nanospinner/-/nanospinner-1.1.0.tgz",
+            "integrity": "sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==",
+            "dev": true,
+            "dependencies": {
+                "picocolors": "^1.0.0"
+            }
+        },
        "node_modules/natural-compare": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2635,6 +2738,28 @@
                "node": ">=8"
            }
        },
+        "node_modules/size-limit": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/size-limit/-/size-limit-8.0.0.tgz",
+            "integrity": "sha512-344dzCZZiTz+N0WS801SNG/qd8MCa6dzJhsj8gLQg4JlmddwUdi/Ol0HfliEVL7jgtOz8fNgDeB2+14xwalvVA==",
+            "dev": true,
+            "dependencies": {
+                "bytes-iec": "^3.1.1",
+                "chokidar": "^3.5.3",
+                "ci-job-number": "^1.2.2",
+                "globby": "^11.1.0",
+                "lilconfig": "^2.0.6",
+                "mkdirp": "^1.0.4",
+                "nanospinner": "^1.1.0",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "size-limit": "bin.js"
+            },
+            "engines": {
+                "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
+            }
+        },
        "node_modules/slash": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3098,6 +3223,13 @@
            "dev": true,
            "requires": {}
        },
+        "@highlightjs/vue-plugin": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+            "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+            "dev": true,
+            "requires": {}
+        },
        "@humanwhocodes/config-array": {
            "version": "0.9.5",
            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -3151,6 +3283,35 @@
                "picomatch": "^2.2.2"
            }
        },
+        "@size-limit/esbuild": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/esbuild/-/esbuild-8.0.0.tgz",
+            "integrity": "sha512-du3gGKAzeh8fKEbqG0PcHKyyilpHTC+z/e6r0a82G+9KMCQd2PBHfOrTyN+of8u6EZXkrp0zdwgr84nKLp1nPg==",
+            "dev": true,
+            "requires": {
+                "esbuild": "^0.14.51",
+                "nanoid": "^3.3.4"
+            }
+        },
+        "@size-limit/file": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/file/-/file-8.0.0.tgz",
+            "integrity": "sha512-xd4bBk/YyezsMQfpi2V3/blodCuPNVF5UwMd4L9LxBvon0PK4C1+3zBXxZpvN7AcMvPbJ8RUMS+iHpD4KcwaOg==",
+            "dev": true,
+            "requires": {
+                "semver": "7.3.7"
+            }
+        },
+        "@size-limit/preset-small-lib": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@size-limit/preset-small-lib/-/preset-small-lib-8.0.0.tgz",
+            "integrity": "sha512-6Q2fJFuPalvANQIoxYAmQLGk1Rxerw/qtqpEi1dhF9czfWxtYxKwlVQgsE/d0j5eum/N7iJxioDeKZQJjzKPrQ==",
+            "dev": true,
+            "requires": {
+                "@size-limit/esbuild": "8.0.0",
+                "@size-limit/file": "8.0.0"
+            }
+        },
        "@types/json-schema": {
            "version": "7.0.11",
            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3531,6 +3692,12 @@
                "update-browserslist-db": "^1.0.4"
            }
        },
+        "bytes-iec": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/bytes-iec/-/bytes-iec-3.1.1.tgz",
+            "integrity": "sha512-fey6+4jDK7TFtFg/klGSvNKJctyU7n2aQdnM+CO0ruLPbqqMOM8Tio0Pc+deqUeVKX1tL5DQep1zQ7+37aTAsA==",
+            "dev": true
+        },
        "callsites": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3576,6 +3743,12 @@
                }
            }
        },
+        "ci-job-number": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/ci-job-number/-/ci-job-number-1.2.2.tgz",
+            "integrity": "sha512-CLOGsVDrVamzv8sXJGaILUVI6dsuAkouJP/n6t+OxLPeeA4DDby7zn9SB6EUpa1H7oIKoE+rMmkW80zYsFfUjA==",
+            "dev": true
+        },
        "color-name": {
            "version": "1.1.4",
            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -3686,170 +3859,170 @@
            "dev": true
        },
        "esbuild": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.49.tgz",
-            "integrity": "sha512-/TlVHhOaq7Yz8N1OJrjqM3Auzo5wjvHFLk+T8pIue+fhnhIMpfAzsG6PLVMbFveVxqD2WOp3QHei+52IMUNmCw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.51.tgz",
+            "integrity": "sha512-+CvnDitD7Q5sT7F+FM65sWkF8wJRf+j9fPcprxYV4j+ohmzVj2W7caUqH2s5kCaCJAfcAICjSlKhDCcvDpU7nw==",
            "dev": true,
            "requires": {
-                "esbuild-android-64": "0.14.49",
-                "esbuild-android-arm64": "0.14.49",
-                "esbuild-darwin-64": "0.14.49",
-                "esbuild-darwin-arm64": "0.14.49",
-                "esbuild-freebsd-64": "0.14.49",
-                "esbuild-freebsd-arm64": "0.14.49",
-                "esbuild-linux-32": "0.14.49",
-                "esbuild-linux-64": "0.14.49",
-                "esbuild-linux-arm": "0.14.49",
-                "esbuild-linux-arm64": "0.14.49",
-                "esbuild-linux-mips64le": "0.14.49",
-                "esbuild-linux-ppc64le": "0.14.49",
-                "esbuild-linux-riscv64": "0.14.49",
-                "esbuild-linux-s390x": "0.14.49",
-                "esbuild-netbsd-64": "0.14.49",
-                "esbuild-openbsd-64": "0.14.49",
-                "esbuild-sunos-64": "0.14.49",
-                "esbuild-windows-32": "0.14.49",
-                "esbuild-windows-64": "0.14.49",
-                "esbuild-windows-arm64": "0.14.49"
+                "esbuild-android-64": "0.14.51",
+                "esbuild-android-arm64": "0.14.51",
+                "esbuild-darwin-64": "0.14.51",
+                "esbuild-darwin-arm64": "0.14.51",
+                "esbuild-freebsd-64": "0.14.51",
+                "esbuild-freebsd-arm64": "0.14.51",
+                "esbuild-linux-32": "0.14.51",
+                "esbuild-linux-64": "0.14.51",
+                "esbuild-linux-arm": "0.14.51",
+                "esbuild-linux-arm64": "0.14.51",
+                "esbuild-linux-mips64le": "0.14.51",
+                "esbuild-linux-ppc64le": "0.14.51",
+                "esbuild-linux-riscv64": "0.14.51",
+                "esbuild-linux-s390x": "0.14.51",
+                "esbuild-netbsd-64": "0.14.51",
+                "esbuild-openbsd-64": "0.14.51",
+                "esbuild-sunos-64": "0.14.51",
+                "esbuild-windows-32": "0.14.51",
+                "esbuild-windows-64": "0.14.51",
+                "esbuild-windows-arm64": "0.14.51"
            }
        },
        "esbuild-android-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz",
-            "integrity": "sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.51.tgz",
+            "integrity": "sha512-6FOuKTHnC86dtrKDmdSj2CkcKF8PnqkaIXqvgydqfJmqBazCPdw+relrMlhGjkvVdiiGV70rpdnyFmA65ekBCQ==",
            "dev": true,
            "optional": true
        },
        "esbuild-android-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz",
-            "integrity": "sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.51.tgz",
+            "integrity": "sha512-vBtp//5VVkZWmYYvHsqBRCMMi1MzKuMIn5XDScmnykMTu9+TD9v0NMEDqQxvtFToeYmojdo5UCV2vzMQWJcJ4A==",
            "dev": true,
            "optional": true
        },
        "esbuild-darwin-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz",
-            "integrity": "sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.51.tgz",
+            "integrity": "sha512-YFmXPIOvuagDcwCejMRtCDjgPfnDu+bNeh5FU2Ryi68ADDVlWEpbtpAbrtf/lvFTWPexbgyKgzppNgsmLPr8PA==",
            "dev": true,
            "optional": true
        },
        "esbuild-darwin-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz",
-            "integrity": "sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.51.tgz",
+            "integrity": "sha512-juYD0QnSKwAMfzwKdIF6YbueXzS6N7y4GXPDeDkApz/1RzlT42mvX9jgNmyOlWKN7YzQAYbcUEJmZJYQGdf2ow==",
            "dev": true,
            "optional": true
        },
        "esbuild-freebsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz",
-            "integrity": "sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.51.tgz",
+            "integrity": "sha512-cLEI/aXjb6vo5O2Y8rvVSQ7smgLldwYY5xMxqh/dQGfWO+R1NJOFsiax3IS4Ng300SVp7Gz3czxT6d6qf2cw0g==",
            "dev": true,
            "optional": true
        },
        "esbuild-freebsd-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz",
-            "integrity": "sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.51.tgz",
+            "integrity": "sha512-TcWVw/rCL2F+jUgRkgLa3qltd5gzKjIMGhkVybkjk6PJadYInPtgtUBp1/hG+mxyigaT7ib+od1Xb84b+L+1Mg==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-32": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz",
-            "integrity": "sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.51.tgz",
+            "integrity": "sha512-RFqpyC5ChyWrjx8Xj2K0EC1aN0A37H6OJfmUXIASEqJoHcntuV3j2Efr9RNmUhMfNE6yEj2VpYuDteZLGDMr0w==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz",
-            "integrity": "sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.51.tgz",
+            "integrity": "sha512-dxjhrqo5i7Rq6DXwz5v+MEHVs9VNFItJmHBe1CxROWNf4miOGoQhqSG8StStbDkQ1Mtobg6ng+4fwByOhoQoeA==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-arm": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz",
-            "integrity": "sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.51.tgz",
+            "integrity": "sha512-LsJynDxYF6Neg7ZC7748yweCDD+N8ByCv22/7IAZglIEniEkqdF4HCaa49JNDLw1UQGlYuhOB8ZT/MmcSWzcWg==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz",
-            "integrity": "sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.51.tgz",
+            "integrity": "sha512-D9rFxGutoqQX3xJPxqd6o+kvYKeIbM0ifW2y0bgKk5HPgQQOo2k9/2Vpto3ybGYaFPCE5qTGtqQta9PoP6ZEzw==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-mips64le": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz",
-            "integrity": "sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.51.tgz",
+            "integrity": "sha512-vS54wQjy4IinLSlb5EIlLoln8buh1yDgliP4CuEHumrPk4PvvP4kTRIG4SzMXm6t19N0rIfT4bNdAxzJLg2k6A==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-ppc64le": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz",
-            "integrity": "sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.51.tgz",
+            "integrity": "sha512-xcdd62Y3VfGoyphNP/aIV9LP+RzFw5M5Z7ja+zdpQHHvokJM7d0rlDRMN+iSSwvUymQkqZO+G/xjb4/75du8BQ==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-riscv64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz",
-            "integrity": "sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.51.tgz",
+            "integrity": "sha512-syXHGak9wkAnFz0gMmRBoy44JV0rp4kVCEA36P5MCeZcxFq8+fllBC2t6sKI23w3qd8Vwo9pTADCgjTSf3L3rA==",
            "dev": true,
            "optional": true
        },
        "esbuild-linux-s390x": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz",
-            "integrity": "sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.51.tgz",
+            "integrity": "sha512-kFAJY3dv+Wq8o28K/C7xkZk/X34rgTwhknSsElIqoEo8armCOjMJ6NsMxm48KaWY2h2RUYGtQmr+RGuUPKBhyw==",
            "dev": true,
            "optional": true
        },
        "esbuild-netbsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz",
-            "integrity": "sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.51.tgz",
+            "integrity": "sha512-ZZBI7qrR1FevdPBVHz/1GSk1x5GDL/iy42Zy8+neEm/HA7ma+hH/bwPEjeHXKWUDvM36CZpSL/fn1/y9/Hb+1A==",
            "dev": true,
            "optional": true
        },
        "esbuild-openbsd-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz",
-            "integrity": "sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.51.tgz",
+            "integrity": "sha512-7R1/p39M+LSVQVgDVlcY1KKm6kFKjERSX1lipMG51NPcspJD1tmiZSmmBXoY5jhHIu6JL1QkFDTx94gMYK6vfA==",
            "dev": true,
            "optional": true
        },
        "esbuild-sunos-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz",
-            "integrity": "sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.51.tgz",
+            "integrity": "sha512-HoHaCswHxLEYN8eBTtyO0bFEWvA3Kdb++hSQ/lLG7TyKF69TeSG0RNoBRAs45x/oCeWaTDntEZlYwAfQlhEtJA==",
            "dev": true,
            "optional": true
        },
        "esbuild-windows-32": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz",
-            "integrity": "sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.51.tgz",
+            "integrity": "sha512-4rtwSAM35A07CBt1/X8RWieDj3ZUHQqUOaEo5ZBs69rt5WAFjP4aqCIobdqOy4FdhYw1yF8Z0xFBTyc9lgPtEg==",
            "dev": true,
            "optional": true
        },
        "esbuild-windows-64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz",
-            "integrity": "sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.51.tgz",
+            "integrity": "sha512-HoN/5HGRXJpWODprGCgKbdMvrC3A2gqvzewu2eECRw2sYxOUoh2TV1tS+G7bHNapPGI79woQJGV6pFH7GH7qnA==",
            "dev": true,
            "optional": true
        },
        "esbuild-windows-arm64": {
-            "version": "0.14.49",
-            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz",
-            "integrity": "sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA==",
+            "version": "0.14.51",
+            "resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.51.tgz",
+            "integrity": "sha512-JQDqPjuOH7o+BsKMSddMfmVJXrnYZxXDHsoLHc0xgmAZkOOCflRmC43q31pk79F9xuyWY45jDBPolb5ZgGOf9g==",
            "dev": true,
            "optional": true
        },
@@ -4227,6 +4400,12 @@
                "function-bind": "^1.1.1"
            }
        },
+        "highlight.js": {
+            "version": "11.6.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+            "integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+            "dev": true
+        },
        "ignore": {
            "version": "5.2.0",
            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -4420,6 +4599,12 @@
            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
            "dev": true
        },
+        "mkdirp": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+            "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+            "dev": true
+        },
        "ms": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -4432,6 +4617,15 @@
            "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
            "dev": true
        },
+        "nanospinner": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/nanospinner/-/nanospinner-1.1.0.tgz",
+            "integrity": "sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==",
+            "dev": true,
+            "requires": {
+                "picocolors": "^1.0.0"
+            }
+        },
        "natural-compare": {
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -4765,6 +4959,22 @@
            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
            "dev": true
        },
+        "size-limit": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/size-limit/-/size-limit-8.0.0.tgz",
+            "integrity": "sha512-344dzCZZiTz+N0WS801SNG/qd8MCa6dzJhsj8gLQg4JlmddwUdi/Ol0HfliEVL7jgtOz8fNgDeB2+14xwalvVA==",
+            "dev": true,
+            "requires": {
+                "bytes-iec": "^3.1.1",
+                "chokidar": "^3.5.3",
+                "ci-job-number": "^1.2.2",
+                "globby": "^11.1.0",
+                "lilconfig": "^2.0.6",
+                "mkdirp": "^1.0.4",
+                "nanospinner": "^1.1.0",
+                "picocolors": "^1.0.0"
+            }
+        },
        "slash": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -10,7 +10,9 @@
        "build:dist": "rm -rf dist; rollup -c",
        "build": "npm run build:docs && npm run build:lib && npm run build:dist",
        "preview:docs": "vite preview",
+        "size": "size-limit",
        "lint": "eslint src/**/*.ts",
+        "test": "npm run lint && npm run size",
        "fix-lint": "eslint --fix src/**/*.ts"
    },
    "files": [
@@ -22,19 +24,29 @@
        "@fortawesome/free-regular-svg-icons": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^3.0.1",
+        "@highlightjs/vue-plugin": "^2.1.0",
+        "@size-limit/preset-small-lib": "^8.0.0",
        "@typescript-eslint/eslint-plugin": "^5.31.0",
        "@typescript-eslint/parser": "^5.31.0",
        "@vitejs/plugin-vue": "^3.0.0",
        "autoprefixer": "^10.4.7",
        "eslint": "^8.20.0",
        "eslint-plugin-vue": "^9.3.0",
+        "highlight.js": "^11.6.0",
        "pinia": "^2.0.16",
        "postcss": "^8.4.14",
        "rollup": "^2.77.0",
        "rollup-plugin-esbuild": "^4.9.1",
+        "size-limit": "^8.0.0",
        "tailwindcss": "^3.1.6",
        "vite": "^3.0.0",
        "vue": "^3.2.37",
        "vue-router": "^4.1.2"
-    }
+    },
+    "size-limit": [
+        {
+            "limit": "2 kB",
+            "path": "dist/powerglitch.min.js"
+        }
+    ]
 }
@@ -4,9 +4,9 @@
 type PowerGlitchOptions = {

    /**
-     * Image URL. Can be local, remote or a data URL.
+     * Image URL. Can be local, remote or a data URL. Needs to be set if glitching divs.
     */
-    imageUrl: string,
+    imageUrl?: string,

    /**
     * Background color. Use 'transparent' not to set a background color.
@@ -272,7 +272,6 @@ const generateBaseLayer = (options: PowerGlitchOptions): LayerDefinition => {
    return { steps, timing: { ...getDefaultTimingCss(stepCount), ...options.timing } };
 };

-
 /**
 * Generate all layers
 * @param options
@@ -291,6 +290,39 @@ const generateLayers = (options: PowerGlitchOptions): LayerDefinition[] => {
    return layers;
 };

+/**
+ * Animate a given div with a given set of layers, showing the specified image.
+ * @param div 
+ * @param layers 
+ * @param imageUrl 
+ */
+const animateDiv = (div: HTMLDivElement, layers: LayerDefinition[], backgroundColor: string, imageUrl: string) => {
+    const templateLayer = document.createElement('div');
+    templateLayer.classList.add('layer');
+    templateLayer.style.backgroundColor = backgroundColor;
+    templateLayer.style.backgroundRepeat = 'no-repeat';
+    templateLayer.style.backgroundPosition = 'center';
+    templateLayer.style.backgroundSize = 'contain';
+    templateLayer.style.width = '100%';
+    templateLayer.style.height = '100%';
+    templateLayer.style.top = '0';
+    templateLayer.style.left = '0';
+    templateLayer.style.position = 'absolute';
+    // Empty & init. div style
+    div.style.position = 'relative';
+    div.style.overflow = 'hidden';
+    while (div.firstChild) {
+        div.removeChild(div.firstChild);
+    }
+    // For each animation layer, clone template layer, tweak styles, and append to element
+    for (const layer of layers) {
+        const layerDiv = templateLayer.cloneNode(false) as HTMLDivElement;
+        layerDiv.style.backgroundImage = `url(${imageUrl})`;
+        layerDiv.animate(layer.steps, layer.timing);
+        div.appendChild(layerDiv);
+    }
+};
+
 /**
 * Performs a deep merge of objects and returns new object. Does not modify
 * objects (immutable) and merges arrays via concatenation.
@@ -323,21 +355,20 @@ function mergeDeep(...objects: readonly any[]): any {
        return prev;
    }, {});
 }
-  

 /**
 * Make a single element glitch.
 * @param elOrSelector Element or selector to glitch.
- * @param options Options for the glitch.
+ * @param userOptions Options for the glitch.
 */
-const glitch = (elOrSelector: string | HTMLDivElement, options: PowerGlitchOptions) => {
+const glitch = (elOrSelector: string | HTMLDivElement = '.powerglitch', userOptions: Partial<PowerGlitchOptions> = {}) => {
    // Fix options with defaults
-    options = mergeDeep(getDefaultOptions(), options);
+    const options: PowerGlitchOptions = mergeDeep(getDefaultOptions(), userOptions);

-    // Find elements
-    let elements: HTMLDivElement[] = [];
+    // Find elements to glitch
+    let elements: (HTMLDivElement | HTMLImageElement)[] = [];
    if (typeof elOrSelector === 'string') {
-        const foundElements = document.querySelectorAll<HTMLDivElement>(elOrSelector);
+        const foundElements = document.querySelectorAll<HTMLDivElement | HTMLImageElement>(elOrSelector);
        if (! foundElements.length) {
            throw new Error(`Could not find any element with selector ${elOrSelector}`);
        }
@@ -346,37 +377,35 @@ const glitch = (elOrSelector: string | HTMLDivElement, options: PowerGlitchOptio
        elements = [elOrSelector];
    }

-    // Prepare containers
-    for (const element of elements) {
-        element.style.position = 'relative';
-        element.style.overflow = 'hidden';
-        while (element.firstChild) {
-            element.removeChild(element.firstChild);
+    // Discriminate between img and div for code simplicity
+    const imgElements = elements.filter(el => el instanceof HTMLImageElement) as HTMLImageElement[];
+    const divElements = elements.filter(el => el instanceof HTMLDivElement) as HTMLDivElement[];
+
+    // Generate all animation layers
+    const layers = generateLayers(options);
+
+    // Animate each image element
+    for (const imgElement of imgElements) {
+        const newContainer = document.createElement('div');
+        newContainer.style.width = imgElement.clientWidth + 'px';
+        newContainer.style.height = imgElement.clientHeight + 'px';
+        if (! imgElement.parentElement) {
+            throw new Error('Unable to glitch image, it is not attached to a parent element');
        }
+        imgElement.parentElement.insertBefore(newContainer, imgElement);
+        // Keep but hide the image, to avoid breaking the original application
+        imgElement.style.display = 'none';
+        // Animate the new container
+        animateDiv(newContainer, layers, options.backgroundColor, options.imageUrl || imgElement.src);
    }

-    // Create template layer
-    const templateLayer = document.createElement('div');
-    templateLayer.classList.add('layer');
-    templateLayer.style.backgroundColor = options.backgroundColor;
-    templateLayer.style.backgroundImage = `url(${options.imageUrl})`;
-    templateLayer.style.backgroundRepeat = 'no-repeat';
-    templateLayer.style.backgroundPosition = 'center';
-    templateLayer.style.backgroundSize = 'contain';
-    templateLayer.style.width = '100%';
-    templateLayer.style.height = '100%';
-    templateLayer.style.top = '0';
-    templateLayer.style.left = '0';
-    templateLayer.style.position = 'absolute';
-
-    // Create and animate layers
-    const layers = generateLayers(options);
-    for (const element of elements) {
-        for (const layer of layers) {
-            const layerDiv = templateLayer.cloneNode(false) as HTMLDivElement;
-            layerDiv.animate(layer.steps, layer.timing);
-            element.appendChild(layerDiv);
+    // Animate each div element
+    for (const divElement of divElements) {
+        // If options.imageUrl was not set, we do not know what src to use to glitch this div
+        if (! options.imageUrl) {
+            throw new Error('Options.imageUrl must be set if there are div elements to glitch');
        }
+        animateDiv(divElement, layers, options.backgroundColor, options.imageUrl);
    }
 };