diff --git a/changelog/2024.0615/index.html b/changelog/2024.0615/index.html
index 6475153..2bc58eb 100644
--- a/changelog/2024.0615/index.html
+++ b/changelog/2024.0615/index.html
@@ -8,6 +8,6 @@
 <span class=single__info></span></div><ul class="single__tags caption"></ul></div><article class=single__contents data-dir=ltr data-ani=true><h2 id=achievement>Achievement</h2><ul><li>Able to save the beatmap for debug purpose.<br><img src=res/2024-06-15-12-07-51.png alt></li><li>Improve <code>recording time-tag</code> experiance in the lyric editor</li><li>Improve <code>create/remove time-tag</code> experiance in the lyric editor.</li><li>Add the <code>architecture test</code> for this project.</li><li>Start feeding this pet again.<br><img src=res/2024-06-15-11-59-12.png alt></li></ul><h2 id=arc>ARC</h2><ul><li>Add the <code>architecture test</code> for this project. <a href=#2232@andy840119>karaoke</a></li><li>Add more strict check about test assert usage and naming. <a href=#2234@andy840119>karaoke</a></li></ul><h2 id=beatmap>Beatmap</h2><ul><li>Lyric start/end time should be <code>nullable</code> if there&rsquo;s no time-tag with time in the lyric. <a href=#2221@andy840119>karaoke</a></li></ul><h2 id=code-quality>Code quality</h2><ul><li>Prevent using <code>*component = *namespace</code> as possible. <a href=#2240@andy840119>karaoke</a></li></ul><h2 id=editor>Editor</h2><ul><li><p>Fix note popover cannot pop-up in the main editor. <a href=#2011#2210@andy840119>karaoke</a></p></li><li><p>Should be able to save beatmap into json format in the editor. <a href=#2211#2212@andy840119>karaoke</a></p><blockquote><p>For debug purpose, still need to wait lazer provider official save/load method and official format.</p></blockquote></li><li><p>Refactor the import screen stack. <a href=#2215@andy840119>karaoke</a></p></li><li><p>Migrate the import lyric header to the new style. <a href=#2214#2216#2218@andy840119>karaoke</a><br><img src=res/2024-06-15-12-08-32.png alt></p></li><li><p>Implement the drawable for the time-tag object. <a href=#2226@andy840119>karaoke</a></p><blockquote><p>We need an drawable to show the time-tag staus like it&rsquo;s start or end time-tag, has time or not.
 And it has tooltip to display those infos as default.</p></blockquote></li><li><p>Improvement of time-tag recording mode in the lyric editor. <a href=#2207@andy840119>karaoke</a></p><blockquote><p>The main improvement is to let user easy to know which time-tag they are recording, and what&rsquo;s the next one.</p></blockquote><ul><li>Implement <code>drawable caret</code> to show how many time-tags in the character. <a href=#2219@andy840119>karaoke</a><br><img src=res/2024-06-15-11-18-04.png alt></li><li>Implement this cool tap area for the recording mode. <a href=#2222@andy840119>karaoke</a><br><img src=res/2024-06-15-11-20-35.png alt></li><li>Let the tap area able to show the time-tag amount in the focused lyric. <a href=#2223@andy840119>karaoke</a><br><img src=res/2024-06-15-11-21-48.png alt></li><li>Improve <code>recording timeline area</code>. For now, it&rsquo;s able to see the focused time-tag and which time-tag has no time. <a href=#2224@andy840119>karaoke</a><br><img src=res/2024-06-15-11-22-57.png alt></li></ul></li><li><p>Improve experiance for create/remove the time-tag in the lyric editor. <a href=#2225@andy840119>karaoke</a></p><blockquote><p>The main issue is that user might know how to create the time-tag if there&rsquo;s no UI, and there&rsquo;s no easy to konw how may time-tag is attached to the character.
 So we create the UI for time-tag visualization, and user is able to create/remove the time-tag by click the create button in the UI.
-Also, we adjust the flow to indicate user to create/remove the time-tag by keyborad because it&rsquo;s much more faster.</p></blockquote><ul><li><p>Able to create/remove the caret by UI. <a href=#2227@andy840119>karaoke</a></p><blockquote><p>I know it&rsquo;s ugly, but I&rsquo;m not good at UX ;_;</p></blockquote><p><img src=res/2024-06-15-11-33-55.png alt></p></li><li><p>Remove modify time tag mode because it&rsquo;s not that useful. <a href=#2239@andy840119>karaoke</a></p></li></ul></li><li><p>Use tab control for the edit step section in the lyric editor.</p><blockquote><p>So the header will be fixed at the top.</p></blockquote><ul><li>Re-write the header for the edit section. <a href=#2230#2236@andy840119>karaoke</a><br><img src=res/2024-06-15-11-45-52.png alt></li><li>Because tab control provide the bindable, so just use the bindable to get/set the current edit mode. <a href=#2237@andy840119>karaoke</a></li><li>Implement switch create type section. <a href=#2242@andy840119>karaoke</a><br><img src=res/2024-06-15-12-04-35.png alt></li><li>Remove the create/remove time-tag button in the toolbar because it&rsquo;s not useful. <a href=#2243@andy840119>karaoke</a><br><img src=res/2024-06-15-12-05-24.png alt></li></ul></li><li><p>Let the selection in the lyric editor use the tab control.</p><blockquote><p>All the single selection area in the lyric editor should use tab control.</p></blockquote><p><img src=res/2024-06-15-11-58-37.png alt></p><ul><li>Make switch sub-section component. <a href=#2241@andy840119>karaoke</a></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix lyric text might not display well at some cases. <a href=#2209@andy840119>karaoke</a></li><li>Small bug-fix. <a href=#2238@andy840119>karaoke</a></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0406/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0406</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.1201/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+Also, we adjust the flow to indicate user to create/remove the time-tag by keyborad because it&rsquo;s much more faster.</p></blockquote><ul><li><p>Able to create/remove the caret by UI. <a href=#2227@andy840119>karaoke</a></p><blockquote><p>I know it&rsquo;s ugly, but I&rsquo;m not good at UX ;_;</p></blockquote><p><img src=res/2024-06-15-11-33-55.png alt></p></li><li><p>Remove modify time tag mode because it&rsquo;s not that useful. <a href=#2239@andy840119>karaoke</a></p></li></ul></li><li><p>Use tab control for the edit step section in the lyric editor.</p><blockquote><p>So the header will be fixed at the top.</p></blockquote><ul><li>Re-write the header for the edit section. <a href=#2230#2236@andy840119>karaoke</a><br><img src=res/2024-06-15-11-45-52.png alt></li><li>Because tab control provide the bindable, so just use the bindable to get/set the current edit mode. <a href=#2237@andy840119>karaoke</a></li><li>Implement switch create type section. <a href=#2242@andy840119>karaoke</a><br><img src=res/2024-06-15-12-04-35.png alt></li><li>Remove the create/remove time-tag button in the toolbar because it&rsquo;s not useful. <a href=#2243@andy840119>karaoke</a><br><img src=res/2024-06-15-12-05-24.png alt></li></ul></li><li><p>Let the selection in the lyric editor use the tab control.</p><blockquote><p>All the single selection area in the lyric editor should use tab control.</p></blockquote><p><img src=res/2024-06-15-11-58-37.png alt></p><ul><li>Make switch sub-section component. <a href=#2241@andy840119>karaoke</a></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix lyric text might not display well at some cases. <a href=#2209@andy840119>karaoke</a></li><li>Small bug-fix. <a href=#2238@andy840119>karaoke</a></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0406/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0406</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.0831/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
 <span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#arc>ARC</a></li><li><a href=#beatmap>Beatmap</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#fix>Fix</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
 <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/2024.0831/index.html b/changelog/2024.0831/index.html
index 3c53ea8..65c908f 100644
--- a/changelog/2024.0831/index.html
+++ b/changelog/2024.0831/index.html
@@ -9,6 +9,6 @@
 <img src=res/2024-08-28-21-04-06.png alt></li><li>[outdated] Let user able to adjust time-tag time precisely. <a href=#604@andy840119>karaoke</a></li><li>[outdated] Implement tap area in the recording mode. <a href=#1143@andy840119>karaoke</a></li><li>[outdated] Fix cannot import the lyric due to missing depenedency <a href=#1510@andy840119>karaoke</a><blockquote><p>Not very sure but i guess it should be fixed.</p></blockquote></li><li>[rejected] Let user able to drag to change the time-tag index. <a href=#1168#1447@andy840119>karaoke</a><blockquote><p>It might let user feel confused. Just delete the time-tag and re-create one.</p></blockquote></li><li>[outdated] Add test case for the change handler that will modify the property in the karaoke metadata(e.g. translation or singer info) <a href=#1122@andy840119>karaoke</a></li><li>[outdated] Create the toolbar that able to show the move caret action in the compse mode in the lyric editor. <a href=#1974@andy840119>karaoke</a></li><li>[outdated] Implement page (or maybe called breath) edit mode in the lyric editor. <a href=#1766@andy840119>karaoke</a><blockquote><p>Implemented, but might not be open that soom. Can just ignore this editor.</p></blockquote></li><li>[outdated] Fix some issues in the lyric import screen. <a href=#1257@andy840119>karaoke</a><blockquote><p>This should be fixed i think.</p></blockquote></li><li>[outdated] Move LyricCheckerManager for lyric editor only? <a href=#1030@andy840119>karaoke</a><blockquote><p>It&rsquo;s named <code>LyricEditorVerifier</code> or <code>PageEditorVerifier</code> (by different screen)
 And it&rsquo;s belongs to it&rsquo;s own editor.</p></blockquote></li><li>[outdated] Implement new area to batch adjust the lyric start/end time. <a href=#1252@andy840119>karaoke</a><blockquote><p>This issue can be closed because lyric&rsquo;s start/end time is affected by stage.
 If the classic stage is created, it should be possible to adjust the time.</p></blockquote></li><li>[outdated] Use <code>SettingSource</code> in some editor or generator config. <a href=#1211@andy840119>karaoke</a><blockquote><p>Implemented in the <a href=https://github.com/karaoke-dev/karaoke/pull/1871>#1871</a> and <a href=https://github.com/karaoke-dev/karaoke/pull/1873>#1873</a></p></blockquote></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix ruby blueprint has select issue in the lyric editor. <a href=#2259#2260@andy840119>karaoke</a></li><li>Replace all the <code>.lrc</code> file support to <code>.kar</code> by following the <code>LrcParser</code> changes <a href=#2231#2268@andy840119>karaoke</a></li></ul><h2 id=gameplay>Gameplay</h2><ul><li>Time to close old issues<ul><li>[outdated] Hide <code>ruby</code>/<code>romaji</code>/<code>translate</code> config if the user hides them? <a href=#853@andy840119>karaoke</a><blockquote><p>It&rsquo;s possible to hide them via mod.</p></blockquote></li></ul></li></ul><h2 id=uiux>UI/UX</h2><ul><li>Time to close old issues<ul><li>[outdated] Font selection improvement. <a href=#804@andy840119>karaoke</a>
-<img src=res/2024-08-28-21-03-02.png alt></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.1201/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0831</div></a><div class=grow></div></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+<img src=res/2024-08-28-21-03-02.png alt></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0615/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0615</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.1201/ class=pagination-single__right><div class=pagination-single__right-title>2024.1201</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
 <span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#beatmap>Beatmap</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#fix>Fix</a></li><li><a href=#gameplay>Gameplay</a></li><li><a href=#uiux>UI/UX</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
 <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/2024.1201/index.html b/changelog/2024.1201/index.html
index 34a5b52..176f671 100644
--- a/changelog/2024.1201/index.html
+++ b/changelog/2024.1201/index.html
@@ -1,9 +1,9 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>2024.0831 – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/2024.1201/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"page"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="2024.0831"><meta property="og:url" content="https://blog.karaoke.dev/changelog/2024.1201/"><meta property="og:type" content="article"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/2024.1201/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","headline":"2024.0831","datePublished":"2024-08-31T00:00:00Z","dateModified":"2024-08-31T00:00:00Z","url":"https://blog.karaoke.dev/changelog/2024.1201/","description":"Achievement  Re-implement the stage system.  Use command to adjust the lyric\u0026rsquo;s transformer like how storyboard did. Separate the stage from the beatmap.   Planning …","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=page><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>2024.1201 – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/2024.1201/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"page"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="2024.1201"><meta property="og:url" content="https://blog.karaoke.dev/changelog/2024.1201/"><meta property="og:type" content="article"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/2024.1201/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","headline":"2024.1201","datePublished":"2024-12-01T00:00:00Z","dateModified":"2024-12-01T00:00:00Z","url":"https://blog.karaoke.dev/changelog/2024.1201/","description":"Achievement  Re-implement the stage system.  Use command to adjust the lyric\u0026rsquo;s transformer like how storyboard did. Separate the stage from the beatmap.   Planning …","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=page><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
 <a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
-<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="single__main main-main"><div class=single><div class=single__nojs>This page looks best with JavaScript enabled</div><script>document.querySelector('.single').classList.remove('hide'),document.querySelector('.single__nojs').classList.add('hide')</script><h2 class=single__title data-ani=true>2024.0831</h2><h3 class=single__subtitle></h3><div class=single__meta><div class=single__infos><time class=single__info title="Written At">📅&nbsp;Aug 31, 2024</time>
+<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="single__main main-main"><div class=single><div class=single__nojs>This page looks best with JavaScript enabled</div><script>document.querySelector('.single').classList.remove('hide'),document.querySelector('.single__nojs').classList.add('hide')</script><h2 class=single__title data-ani=true>2024.1201</h2><h3 class=single__subtitle></h3><div class=single__meta><div class=single__infos><time class=single__info title="Written At">📅&nbsp;Dec 1, 2024</time>
 &nbsp;&#183;&nbsp; <span class=single__info title="Reading Time">☕&nbsp;3&nbsp;min read</span>
 <span class=single__info></span></div><ul class="single__tags caption"></ul></div><article class=single__contents data-dir=ltr data-ani=true><h2 id=achievement>Achievement</h2><ul><li>Re-implement the stage system.<ul><li>Use command to adjust the lyric&rsquo;s transformer like how storyboard did.</li><li>Separate the stage from the beatmap.</li></ul></li><li>Planning 2-weeks december vacation.<ul><li>Stay at Osaka and Kyoto for few days and trying to servival.</li><li>Work few days at Tokyo.</li><li>Go to Comiket.</li><li>Give some weird meat a try.</li><li>Skiing for 5 days.</li></ul></li><li>Remember update the changelog.</li></ul><h2 id=blog>Blog</h2><ul><li>Add special badge at the start of the changelog item. <a href=#2279#2281@andy840119>karaoke</a>
 <img src=res/2024-12-01-08-24-24.png alt></li></ul><h2 id=code-quality>Code quality</h2><ul><li>Rename from &ldquo;language&rdquo; to &ldquo;translation&rdquo; in some classes. <a href=#2282@andy840119>karaoke</a></li><li>Regular clean-up code. <a href=#2288@andy840119>karaoke</a></li></ul><h2 id=editor>Editor</h2><ul><li>Add translation edit section to the editor. <a href=#2284@andy840119>karaoke</a>
@@ -11,6 +11,6 @@
 It&rsquo;s a very classic Japanese lyric arrangement.<br>It has usually 2~4 lines of lyric at the screen.<br>Each lyric can be padding to left/center/right.
 If the lyric is end, the next lyric will take over it&rsquo;s position immediately.</p><p><a href=https://support.apple.com/zh-tw/guide/music-web/apdm5e4a7164/web><img src=res/2024-12-01-07-41-30.png alt></a>
 And here&rsquo;s the lyric arrangement that apple music use.<br>The current lyric at the center, if the lyric is end, next lyric will move to the center to replace the old one.</p><p>In order to add more type of stage arrangement in the future. e.g., let user able to edit the lyric&rsquo;s position and appear/disappear time.<br>The stage system should be flexible.</p><p>And stage system should have those features:</p><ul><li>It can assign the lyric&rsquo;s actual Start/End time in the playfield.</li><li>Change the property in the lyric to adjust the position. e.g. Position, margin and padding.</li><li>Change the property in the lyric like drawable. e.g. Scale and alpha.</li><li>Add custom element to the playfield. e.g. beatmap info preview.</li><li>(TBD) Change lyric&rsquo;s font.</li><li>(TBD) Change lyric&rsquo;s shader effect.</li></ul><p>And <a href=https://app.affine.pro/workspace/40306a8a-6c73-4c99-a961-4f928980ef42/uso65AOQC3Hhn3Fs7wh8n>here&rsquo;s the system desing</a><br>Thanks to the affine, it&rsquo;s a open-source platform that able to write the doc and graph.
-<del>It has few bugs while undo/redo but still worth to give it a try.</del></p><p>And here&rsquo;s the milestone, the re-implement plan is tracked in <a href=https://github.com/karaoke-dev/karaoke/issues/2090>this issue</a></p><ul><li>M0 - Preparation<ul><li>Move the stage-related class from beatmap namespace into it&rsquo;s own namespace. <a href=#2089@andy840119>karaoke</a></li><li>Adjust the folder structure in the stage namespace. <a href=#2297@andy840119>karaoke</a></li><li>System desing for the new stage menegement system. <a href=#2244#2294@andy840119>karaoke</a></li></ul></li><li>M1 - Create the transformer command generator<blockquote><p>Before:<br>Implement the transformer action for different type of stage.<br>After:<br>Let stage generate transformer command, and provide the same command executer to execute all transformer command that generated from any type of stage.<br>Benefit:<br>Make the system more fiexible, and easier to maintain.</p></blockquote><ul><li>Create the command generator for the hit-object. <a href=#2296@andy840119>karaoke</a></li><li>Create the command generator for the playfield. <a href=#2303@andy840119>karaoke</a></li><li>Create the command generator for the create custom element in the gameplay. <a href=#2304@andy840119>karaoke</a></li></ul></li><li>M2 - Create the drawable stage environment<blockquote><p>It&rsquo;s a wrapper for able to provide the necessary resource for lyric/playfield.<br>e.g. DI that able to execute the transformer command.<br>Design is inspired from the <code>DrawableStoryboard</code> in lazer.</p></blockquote><ul><li>Create the drawable stage. <a href=#2301@andy840119>karaoke</a></li><li>Create the stage-related injections. <a href=#2296#2301@andy840119>karaoke</a></li></ul></li><li>M3 - Not provide state-related properties by the beatmap<blockquote><p>It&rsquo;s time to separate the stage system form the beatmap.</p></blockquote><ul><li>Able to control lyric&rsquo;s stage/end time by stage and drawable layer. <a href=#2298@andy840119>karaoke</a></li><li>Remove the old hit-object applier from the beatmap. <a href=#2301@andy840119>karaoke</a></li><li>emove the old playfield applier from the beatmap. <a href=#2303#2304@andy840119>karaoke</a></li></ul></li><li>M4 - Refactor<ul><li>Refactor the interface in the stage namespace. <a href=#2302@andy840119>karaoke</a></li><li>Remove the stage info list in the beatmap. <a href=#2305@andy840119>karaoke</a></li><li>Remove the current stage info in the beatmap. <a href=#2305@andy840119>karaoke</a></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0615/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0615</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.0831/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+<del>It has few bugs while undo/redo but still worth to give it a try.</del></p><p>And here&rsquo;s the milestone, the re-implement plan is tracked in <a href=https://github.com/karaoke-dev/karaoke/issues/2090>this issue</a></p><ul><li>M0 - Preparation<ul><li>Move the stage-related class from beatmap namespace into it&rsquo;s own namespace. <a href=#2089@andy840119>karaoke</a></li><li>Adjust the folder structure in the stage namespace. <a href=#2297@andy840119>karaoke</a></li><li>System desing for the new stage menegement system. <a href=#2244#2294@andy840119>karaoke</a></li></ul></li><li>M1 - Create the transformer command generator<blockquote><p>Before:<br>Implement the transformer action for different type of stage.<br>After:<br>Let stage generate transformer command, and provide the same command executer to execute all transformer command that generated from any type of stage.<br>Benefit:<br>Make the system more fiexible, and easier to maintain.</p></blockquote><ul><li>Create the command generator for the hit-object. <a href=#2296@andy840119>karaoke</a></li><li>Create the command generator for the playfield. <a href=#2303@andy840119>karaoke</a></li><li>Create the command generator for the create custom element in the gameplay. <a href=#2304@andy840119>karaoke</a></li></ul></li><li>M2 - Create the drawable stage environment<blockquote><p>It&rsquo;s a wrapper for able to provide the necessary resource for lyric/playfield.<br>e.g. DI that able to execute the transformer command.<br>Design is inspired from the <code>DrawableStoryboard</code> in lazer.</p></blockquote><ul><li>Create the drawable stage. <a href=#2301@andy840119>karaoke</a></li><li>Create the stage-related injections. <a href=#2296#2301@andy840119>karaoke</a></li></ul></li><li>M3 - Not provide state-related properties by the beatmap<blockquote><p>It&rsquo;s time to separate the stage system form the beatmap.</p></blockquote><ul><li>Able to control lyric&rsquo;s stage/end time by stage and drawable layer. <a href=#2298@andy840119>karaoke</a></li><li>Remove the old hit-object applier from the beatmap. <a href=#2301@andy840119>karaoke</a></li><li>emove the old playfield applier from the beatmap. <a href=#2303#2304@andy840119>karaoke</a></li></ul></li><li>M4 - Refactor<ul><li>Refactor the interface in the stage namespace. <a href=#2302@andy840119>karaoke</a></li><li>Remove the stage info list in the beatmap. <a href=#2305@andy840119>karaoke</a></li><li>Remove the current stage info in the beatmap. <a href=#2305@andy840119>karaoke</a></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0831/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0831</div></a><div class=grow></div></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
 <span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#blog>Blog</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#gameplay>Gameplay</a></li><li><a href=#stage>Stage</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
 <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/index.html b/changelog/index.html
index 399c7cd..9417722 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -1,11 +1,11 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
 <a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
-<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="main inner" data-sidebar-position=right><div class="list__main lm"><nav class="breadcrumb hide" aria-label=breadcrumbs><script>document.querySelector('.breadcrumb').classList.remove('hide')</script><ol><li><a href=https://blog.karaoke.dev/ class=capitalize>karaoke --dev</a></li><li class=is-active><span>Changelog</span></li></ol></nav><header class=list__header><h5 class="list__header--title capitalize h5">Changelog</h5></header><div class="list__header--desc single__contents p2"></div><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
+<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="main inner" data-sidebar-position=right><div class="list__main lm"><nav class="breadcrumb hide" aria-label=breadcrumbs><script>document.querySelector('.breadcrumb').classList.remove('hide')</script><ol><li><a href=https://blog.karaoke.dev/ class=capitalize>karaoke --dev</a></li><li class=is-active><span>Changelog</span></li></ol></nav><header class=list__header><h5 class="list__header--title capitalize h5">Changelog</h5></header><div class="list__header--desc single__contents p2"></div><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.1201</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 1, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Able to save the beatmap for debug purpose.
 Improve recording time-tag experiance in the lyric editor Improve create/remove time-tag experiance in the lyric editor. Add the architecture test for this project. Start feeding this pet again.
 ARC Add the architecture test for this project. karaoke Add more strict check about test assert usage and naming. karaoke Beatmap Lyric start/end time should be nullable if there&rsquo;s no time-tag with time in the lyric.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0406/>2024.0406</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 6, 2024</time>
@@ -16,4 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not any new progress. Busying on my job ;_; Buying damn air tickets at 11/11. Code quality Update package to the latest. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.1010/>2023.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not quit the job yet to make the manager happy. Rewrite some test cases to make the proejct happy. Buy a translation pen to make me happy. Code quality Regular clean up code. karaoke Editor Let lyric editor able to drag the range of the text to create the ruby. karaoke Adjust lyric caret state brhavior for more assertion. karaoke Add StartDragging() and EndDragging() for the LyricCaretState.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0909/>2023.0909</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 9, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Get a new PR from the new contributor. Add the contributor guideline and lable to let new contributor able to know which issue is friendly to resolve. Adjust the caret state interface for let it able to support select range of the index. Code quality Regular clean up code. karaoke Editor Should be able to compare the caret position. karaoke Need to know that which of the caret position(click-down caret position or drag caret position) is in the left or right side.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0806/>2023.0806</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/index.xml b/changelog/index.xml
index 8388363..5f97881 100644
--- a/changelog/index.xml
+++ b/changelog/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Changelog on karaoke --dev</title><link>https://blog.karaoke.dev/changelog/</link><description>Recent content in Changelog on karaoke --dev</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Sat, 31 Aug 2024 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.karaoke.dev/changelog/index.xml" rel="self" type="application/rss+xml"/></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Changelog on karaoke --dev</title><link>https://blog.karaoke.dev/changelog/</link><description>Recent content in Changelog on karaoke --dev</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Sun, 01 Dec 2024 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.karaoke.dev/changelog/index.xml" rel="self" type="application/rss+xml"/></channel></rss>
\ No newline at end of file
diff --git a/changelog/page/2/index.html b/changelog/page/2/index.html
index 35c1c9b..e5d4d3e 100644
--- a/changelog/page/2/index.html
+++ b/changelog/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -15,4 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \1000 pull-request/
 Make the toolbar button more complete in the lyric editor. Got that damn real COVID-19 Not really sure, IDK. Adjust the github release flow. Refactor the checks in the editor. Code quality Refactor the edit input manager. karaoke Refactor the caret position algorithm. karaoke Should not expose the algorithm in the caret state. karaoke Adjust the namespace in the toolbar namesapce. karaoke Refactor the drawable caret and drawable part layer.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.1008/>2022.1008</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 8, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Start implementing another layout for lyric editor(design is modified from flyet&rsquo;s work). karaoke
-Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li class=active><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li class=active><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/3/index.html b/changelog/page/3/index.html
index 0088790..45aabc4 100644
--- a/changelog/page/3/index.html
+++ b/changelog/page/3/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -21,4 +21,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Got the star more fester recently in the repo. Nice star earner. Not being fired. Random fix the UX error in the karaoke editor. No 1234 pull-reuqest has been created. karaoke Beatmap Make the properties in the Singer.cs into bindable. karaoke Code quality Move some enums into the better place. karaoke Refactor time tag and caret display area. karaoke Move some mode specific action into the section.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.0312/>2022.0312</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Find a new fucking IL packing tool to replace the broken one.
 Able to export karaoke Json beatmap for testing purposes. Start working on making the karaoke beatmap more useful(Beatmap is just for personal testing purposes).
-Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li class=active><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li class=active><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/4/index.html b/changelog/page/4/index.html
index c149d7d..f2ea41c 100644
--- a/changelog/page/4/index.html
+++ b/changelog/page/4/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -14,4 +14,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix lots of API changes I guess. Code quality Clean up code. karaoke Adjust project format like osu.Game project. karaoke Move karaokeIcon.cs file into sprite namespace. karaoke Upgrade syntax to C# 9. karaoke Clean up code again to meet the coding style of C# 9. karaoke Fix grammar errors and convert the dialog into osu! style. karaoke Editor Fix the case that some of the editor components are not visible in the test case.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0822/>2021.0822</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 22, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Now this ruleset can read .ttf fonts without any conversion. Code quality Refactor font manager and implement bitmap font generator. karaoke Regular clean-up code. karaoke Use new switch expression. karaoke Update nuget package and clean-up code. karaoke Editor Improve karaoke ruleset&rsquo;s own colour selector. karaoke Fix Fix the change log style broken issue. karaoke Fix TTF font cannot use in release build.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0726/>2021.0726</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 26, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \more than 69 stars/ No. 777 PR has been created. Code quality Regular clean-up code. karaoke Refactor IPositionCalculator, for better way to detect column size changed. karaoke Rewrite note selection blueprint to use only HitObject (no DrawableHitObject) for layout. karaoke Refactor skin font. karaoke Use RNG in utils to replace System.Random. karaoke Editor Implement base extra recording mode area in lyric editor. karaoke
-Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li class=active><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li class=active><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/5/index.html b/changelog/page/5/index.html
index 46de552..09f75eb 100644
--- a/changelog/page/5/index.html
+++ b/changelog/page/5/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -15,4 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Move some tooltips out of Graphics/Cursor namespace. karaoke Re-write TimeTagsUtilsTest test. karaoke Combine LyricEditor and LyricEditorStateManager. karaoke Refactor cursor position algorithm in lyric editor. karaoke Refactor lyric editor. karaoke Make calcuoation caret position abstract for better maintainance. karaoke Editor Adjust color in lyric editor. karaoke Show alert checker in lyric editor. karaoke Combine cursor and moving cursor position into single bindable in lyric editor. karaoke Auto move position while change selected lyric in lyric editor.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0208/>2021.0208</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 8, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Should use current = bindable in control. karaoke Combine time tag manager with lyric manager. now lyric manager is focused on any property change in the lyric object. karaoke Use better way to get the list of lyrics in the lyric editor. karaoke Replace Enum.GetValues with utils. karaoke Fix Fix language selector not register in the editor. karaoke Editor Implement edit singer info. karaoke Enable to skip the start or end tag in record mode.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0123/>2021.0123</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 23, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Create karaoke beatmap encoder/decoder for testing purpose. karaoke Implement conversion for color object. karaoke Remove singer metadata file in beatmap. karaoke Create IHasOrder to deal with order in OsuRearrangeableListContainer. karaoke Code quality Refactor overlay. karaoke Refactor input manager. karaoke Editor Implement UI part in generator config. karaoke Fix edit mode not apply bindable config. karaoke Add customize menu-bar in editor. karaoke Move display config into menu item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0109/>2021.0109</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 9, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li class=active><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li class=active><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/6/index.html b/changelog/page/6/index.html
index 2036359..a5665df 100644
--- a/changelog/page/6/index.html
+++ b/changelog/page/6/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -16,4 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix ruleset cannot run in the release version. Reinstall my MacBook Framework Trying to let osu.framework.microphone can run on iOS device.
 Trying to run rulese in the release lazer version.
 Trying to use GLSL to render text with outline(Still not working).
-Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li class=active><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li class=active><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/7/index.html b/changelog/page/7/index.html
index 8eff9b6..0f6b13b 100644
--- a/changelog/page/7/index.html
+++ b/changelog/page/7/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>Changelog – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"section"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/changelog/index.xml><meta name=description content="All changelogs"><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="Changelog"><meta property="og:url" content="https://blog.karaoke.dev/changelog/"><meta property="og:type" content="website"><meta property="og:description" content="All changelogs"><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/changelog/","name":"Changelog","description":"All changelogs","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=section><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
@@ -19,4 +19,4 @@
 In the future, users can select to import .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0412/>2020.0412</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 12, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code Add code factor into Github for code quality checking(but it does not work ;_;) Skin Implement note skin component. karaoke Implement judgement line component. karaoke Implement stage background component. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0401/>2020.0401</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 1, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Thanks for JetBrains giving me a free all-pack license for open source using.
-Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li class=active><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li class=active><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.1201</a></li><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/en/sitemap.xml b/en/sitemap.xml
index f1f7074..3304d81 100644
--- a/en/sitemap.xml
+++ b/en/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://blog.karaoke.dev/changelog/2024.0831/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.1201/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/"/></url><url><loc>https://blog.karaoke.dev/changelog/2024.0615/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0406/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0228/</loc><lastmod>2024-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1212/</loc><lastmod>2023-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1111/</loc><lastmod>2023-11-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1010/</loc><lastmod>2023-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0909/</loc><lastmod>2023-09-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0806/</loc><lastmod>2023-08-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0707/</loc><lastmod>2023-07-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0606/</loc><lastmod>2023-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0507/</loc><lastmod>2023-05-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0422/</loc><lastmod>2023-04-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0329/</loc><lastmod>2023-03-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0128/</loc><lastmod>2023-01-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1231/</loc><lastmod>2022-12-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1122/</loc><lastmod>2022-11-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1029/</loc><lastmod>2022-10-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1008/</loc><lastmod>2022-10-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0917/</loc><lastmod>2022-09-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0903/</loc><lastmod>2022-09-03T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0807/</loc><lastmod>2022-08-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0716/</loc><lastmod>2022-07-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0625/</loc><lastmod>2022-06-25T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0604/</loc><lastmod>2022-06-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0511/</loc><lastmod>2022-05-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0416/</loc><lastmod>2022-04-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0326/</loc><lastmod>2022-03-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0312/</loc><lastmod>2022-03-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0212/</loc><lastmod>2022-02-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0122/</loc><lastmod>2022-01-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0101/</loc><lastmod>2022-01-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1212/</loc><lastmod>2021-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1121/</loc><lastmod>2021-11-21T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1030/</loc><lastmod>2021-10-30T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1010/</loc><lastmod>2021-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0918/</loc><lastmod>2021-09-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0822/</loc><lastmod>2021-08-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0726/</loc><lastmod>2021-07-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0710/</loc><lastmod>2021-07-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0619/</loc><lastmod>2021-06-19T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0529/</loc><lastmod>2021-05-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0509/</loc><lastmod>2021-05-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0417/</loc><lastmod>2021-04-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0320/</loc><lastmod>2021-03-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0228/</loc><lastmod>2021-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0208/</loc><lastmod>2021-02-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0123/</loc><lastmod>2021-01-23T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0109/</loc><lastmod>2021-01-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1226/</loc><lastmod>2020-12-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1212/</loc><lastmod>2020-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1128/</loc><lastmod>2020-11-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1107/</loc><lastmod>2020-11-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1024/</loc><lastmod>2020-10-24T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1010/</loc><lastmod>2020-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0926/</loc><lastmod>2020-09-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0905/</loc><lastmod>2020-09-05T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0815/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0801/</loc><lastmod>2020-08-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0718/</loc><lastmod>2020-07-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0704/</loc><lastmod>2020-07-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0620/</loc><lastmod>2020-06-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0606/</loc><lastmod>2020-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0522/</loc><lastmod>2020-05-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0508/</loc><lastmod>2020-05-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0501/</loc><lastmod>2020-05-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0426/</loc><lastmod>2020-04-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0412/</loc><lastmod>2020-04-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0401/</loc><lastmod>2020-04-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/categories/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/categories/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/categories/"/></url><url><loc>https://blog.karaoke.dev/how-to-install/</loc></url><url><loc>https://blog.karaoke.dev/introduce/</loc></url><url><loc>https://blog.karaoke.dev/series/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/series/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/series/"/></url><url><loc>https://blog.karaoke.dev/tags/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/tags/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/tags/"/></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://blog.karaoke.dev/changelog/2024.1201/</loc><lastmod>2024-12-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-12-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-12-01T00:00:00+00:00</lastmod><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/"/></url><url><loc>https://blog.karaoke.dev/changelog/2024.0831/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0615/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0406/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0228/</loc><lastmod>2024-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1212/</loc><lastmod>2023-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1111/</loc><lastmod>2023-11-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1010/</loc><lastmod>2023-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0909/</loc><lastmod>2023-09-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0806/</loc><lastmod>2023-08-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0707/</loc><lastmod>2023-07-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0606/</loc><lastmod>2023-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0507/</loc><lastmod>2023-05-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0422/</loc><lastmod>2023-04-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0329/</loc><lastmod>2023-03-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0128/</loc><lastmod>2023-01-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1231/</loc><lastmod>2022-12-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1122/</loc><lastmod>2022-11-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1029/</loc><lastmod>2022-10-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1008/</loc><lastmod>2022-10-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0917/</loc><lastmod>2022-09-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0903/</loc><lastmod>2022-09-03T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0807/</loc><lastmod>2022-08-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0716/</loc><lastmod>2022-07-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0625/</loc><lastmod>2022-06-25T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0604/</loc><lastmod>2022-06-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0511/</loc><lastmod>2022-05-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0416/</loc><lastmod>2022-04-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0326/</loc><lastmod>2022-03-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0312/</loc><lastmod>2022-03-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0212/</loc><lastmod>2022-02-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0122/</loc><lastmod>2022-01-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0101/</loc><lastmod>2022-01-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1212/</loc><lastmod>2021-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1121/</loc><lastmod>2021-11-21T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1030/</loc><lastmod>2021-10-30T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1010/</loc><lastmod>2021-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0918/</loc><lastmod>2021-09-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0822/</loc><lastmod>2021-08-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0726/</loc><lastmod>2021-07-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0710/</loc><lastmod>2021-07-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0619/</loc><lastmod>2021-06-19T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0529/</loc><lastmod>2021-05-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0509/</loc><lastmod>2021-05-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0417/</loc><lastmod>2021-04-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0320/</loc><lastmod>2021-03-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0228/</loc><lastmod>2021-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0208/</loc><lastmod>2021-02-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0123/</loc><lastmod>2021-01-23T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0109/</loc><lastmod>2021-01-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1226/</loc><lastmod>2020-12-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1212/</loc><lastmod>2020-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1128/</loc><lastmod>2020-11-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1107/</loc><lastmod>2020-11-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1024/</loc><lastmod>2020-10-24T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1010/</loc><lastmod>2020-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0926/</loc><lastmod>2020-09-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0905/</loc><lastmod>2020-09-05T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0815/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0801/</loc><lastmod>2020-08-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0718/</loc><lastmod>2020-07-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0704/</loc><lastmod>2020-07-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0620/</loc><lastmod>2020-06-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0606/</loc><lastmod>2020-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0522/</loc><lastmod>2020-05-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0508/</loc><lastmod>2020-05-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0501/</loc><lastmod>2020-05-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0426/</loc><lastmod>2020-04-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0412/</loc><lastmod>2020-04-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0401/</loc><lastmod>2020-04-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/categories/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/categories/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/categories/"/></url><url><loc>https://blog.karaoke.dev/how-to-install/</loc></url><url><loc>https://blog.karaoke.dev/introduce/</loc></url><url><loc>https://blog.karaoke.dev/series/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/series/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/series/"/></url><url><loc>https://blog.karaoke.dev/tags/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/tags/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/tags/"/></url></urlset>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6469f0f..830dbe5 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
 <a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
-<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><header class=header></header><main class="main inner" data-sidebar-position=right><div class="list__main lm"><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
+<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><header class=header></header><main class="main inner" data-sidebar-position=right><div class="list__main lm"><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.1201</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 1, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Able to save the beatmap for debug purpose.
 Improve recording time-tag experiance in the lyric editor Improve create/remove time-tag experiance in the lyric editor. Add the architecture test for this project. Start feeding this pet again.
 ARC Add the architecture test for this project. karaoke Add more strict check about test assert usage and naming. karaoke Beatmap Lyric start/end time should be nullable if there&rsquo;s no time-tag with time in the lyric.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0406/>2024.0406</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 6, 2024</time>
@@ -16,4 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not any new progress. Busying on my job ;_; Buying damn air tickets at 11/11. Code quality Update package to the latest. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.1010/>2023.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not quit the job yet to make the manager happy. Rewrite some test cases to make the proejct happy. Buy a translation pen to make me happy. Code quality Regular clean up code. karaoke Editor Let lyric editor able to drag the range of the text to create the ruby. karaoke Adjust lyric caret state brhavior for more assertion. karaoke Add StartDragging() and EndDragging() for the LyricCaretState.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0909/>2023.0909</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 9, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Get a new PR from the new contributor. Add the contributor guideline and lable to let new contributor able to know which issue is friendly to resolve. Adjust the caret state interface for let it able to support select range of the index. Code quality Regular clean up code. karaoke Editor Should be able to compare the caret position. karaoke Need to know that which of the caret position(click-down caret position or drag caret position) is in the left or right side.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0806/>2023.0806</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/index.xml b/index.xml
index 4dcf637..bbf719a 100644
--- a/index.xml
+++ b/index.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>karaoke --dev</title><link>https://blog.karaoke.dev/</link><description>Recent content on karaoke --dev</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Sat, 31 Aug 2024 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.karaoke.dev/index.xml" rel="self" type="application/rss+xml"/></channel></rss>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>karaoke --dev</title><link>https://blog.karaoke.dev/</link><description>Recent content on karaoke --dev</description><generator>Hugo -- gohugo.io</generator><language>en</language><lastBuildDate>Sun, 01 Dec 2024 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.karaoke.dev/index.xml" rel="self" type="application/rss+xml"/></channel></rss>
\ No newline at end of file
diff --git a/page/2/index.html b/page/2/index.html
index d81d1e3..956c3d1 100644
--- a/page/2/index.html
+++ b/page/2/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -15,4 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \1000 pull-request/
 Make the toolbar button more complete in the lyric editor. Got that damn real COVID-19 Not really sure, IDK. Adjust the github release flow. Refactor the checks in the editor. Code quality Refactor the edit input manager. karaoke Refactor the caret position algorithm. karaoke Should not expose the algorithm in the caret state. karaoke Adjust the namespace in the toolbar namesapce. karaoke Refactor the drawable caret and drawable part layer.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.1008/>2022.1008</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 8, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Start implementing another layout for lyric editor(design is modified from flyet&rsquo;s work). karaoke
-Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=active><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=active><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/3/index.html b/page/3/index.html
index 9e77330..d9109a0 100644
--- a/page/3/index.html
+++ b/page/3/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -21,4 +21,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Got the star more fester recently in the repo. Nice star earner. Not being fired. Random fix the UX error in the karaoke editor. No 1234 pull-reuqest has been created. karaoke Beatmap Make the properties in the Singer.cs into bindable. karaoke Code quality Move some enums into the better place. karaoke Refactor time tag and caret display area. karaoke Move some mode specific action into the section.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.0312/>2022.0312</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Find a new fucking IL packing tool to replace the broken one.
 Able to export karaoke Json beatmap for testing purposes. Start working on making the karaoke beatmap more useful(Beatmap is just for personal testing purposes).
-Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li class=active><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li class=active><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/4/index.html b/page/4/index.html
index efa5fef..f50a137 100644
--- a/page/4/index.html
+++ b/page/4/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -14,4 +14,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix lots of API changes I guess. Code quality Clean up code. karaoke Adjust project format like osu.Game project. karaoke Move karaokeIcon.cs file into sprite namespace. karaoke Upgrade syntax to C# 9. karaoke Clean up code again to meet the coding style of C# 9. karaoke Fix grammar errors and convert the dialog into osu! style. karaoke Editor Fix the case that some of the editor components are not visible in the test case.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0822/>2021.0822</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 22, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Now this ruleset can read .ttf fonts without any conversion. Code quality Refactor font manager and implement bitmap font generator. karaoke Regular clean-up code. karaoke Use new switch expression. karaoke Update nuget package and clean-up code. karaoke Editor Improve karaoke ruleset&rsquo;s own colour selector. karaoke Fix Fix the change log style broken issue. karaoke Fix TTF font cannot use in release build.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0726/>2021.0726</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 26, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \more than 69 stars/ No. 777 PR has been created. Code quality Regular clean-up code. karaoke Refactor IPositionCalculator, for better way to detect column size changed. karaoke Rewrite note selection blueprint to use only HitObject (no DrawableHitObject) for layout. karaoke Refactor skin font. karaoke Use RNG in utils to replace System.Random. karaoke Editor Implement base extra recording mode area in lyric editor. karaoke
-Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li class=active><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li class=active><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/5/index.html b/page/5/index.html
index ba373f2..53e7ccc 100644
--- a/page/5/index.html
+++ b/page/5/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -15,4 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Move some tooltips out of Graphics/Cursor namespace. karaoke Re-write TimeTagsUtilsTest test. karaoke Combine LyricEditor and LyricEditorStateManager. karaoke Refactor cursor position algorithm in lyric editor. karaoke Refactor lyric editor. karaoke Make calcuoation caret position abstract for better maintainance. karaoke Editor Adjust color in lyric editor. karaoke Show alert checker in lyric editor. karaoke Combine cursor and moving cursor position into single bindable in lyric editor. karaoke Auto move position while change selected lyric in lyric editor.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0208/>2021.0208</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 8, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Should use current = bindable in control. karaoke Combine time tag manager with lyric manager. now lyric manager is focused on any property change in the lyric object. karaoke Use better way to get the list of lyrics in the lyric editor. karaoke Replace Enum.GetValues with utils. karaoke Fix Fix language selector not register in the editor. karaoke Editor Implement edit singer info. karaoke Enable to skip the start or end tag in record mode.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0123/>2021.0123</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 23, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Create karaoke beatmap encoder/decoder for testing purpose. karaoke Implement conversion for color object. karaoke Remove singer metadata file in beatmap. karaoke Create IHasOrder to deal with order in OsuRearrangeableListContainer. karaoke Code quality Refactor overlay. karaoke Refactor input manager. karaoke Editor Implement UI part in generator config. karaoke Fix edit mode not apply bindable config. karaoke Add customize menu-bar in editor. karaoke Move display config into menu item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0109/>2021.0109</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 9, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li class=active><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li class=active><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/6/index.html b/page/6/index.html
index ffcd98b..1d8e668 100644
--- a/page/6/index.html
+++ b/page/6/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -16,4 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix ruleset cannot run in the release version. Reinstall my MacBook Framework Trying to let osu.framework.microphone can run on iOS device.
 Trying to run rulese in the release lazer version.
 Trying to use GLSL to render text with outline(Still not working).
-Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=active><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=active><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/7/index.html b/page/7/index.html
index dff1b37..5048545 100644
--- a/page/7/index.html
+++ b/page/7/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -19,4 +19,4 @@
 In the future, users can select to import .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0412/>2020.0412</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 12, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code Add code factor into Github for code quality checking(but it does not work ;_;) Skin Implement note skin component. karaoke Implement judgement line component. karaoke Implement stage background component. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0401/>2020.0401</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 1, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Thanks for JetBrains giving me a free all-pack license for open source using.
-Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li class=active><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li class=active><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/8/index.html b/page/8/index.html
index ff9ae13..436001c 100644
--- a/page/8/index.html
+++ b/page/8/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"page"'),ag=JSON.parse('"home"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><link rel=alternate type=application/rss+xml title=RSS href=https://blog.karaoke.dev/index.xml><meta name=description content><meta name=created content="2024-12-01T00:00:00+0000"><meta name=modified content="2024-12-01T00:00:00+0000"><meta property="article:published_time" content="2024-12-01T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="karaoke --dev"><meta property="og:url" content="https://blog.karaoke.dev/"><meta property="og:type" content="website"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","url":"https://blog.karaoke.dev/","name":"karaoke --dev","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=page data-kind=home><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
 <a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class=navbarm__menu--item><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
@@ -8,4 +8,4 @@
 But if you are Windows user, I recommend you use Osu-ModeManager to get/update ruleset.
  Osu-ModeManager If you are trying to use Osu-ModeManager, download latest ruleset from release page.
 Download sample ruleset list from here, so you don&rsquo;t need to add it manually.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/introduce/>Introduce</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 0001</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Introduction! This is the karaoke!&rsquo;s offical site. The source code of the karaoke! ruleset, running on osu!lazer. It is still a work in progress, and new information will be posted here. What are this rulesets current features? Basic karaoke gameplay, with a simply animated lyric overlay. Custom songs made for the karaoke ruleset (no conversion of beatmaps yet). Saiten(scoring) system included. Japanese lyrical support. Cross platform, pc and mobile are</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li class=active><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Introduction! This is the karaoke!&rsquo;s offical site. The source code of the karaoke! ruleset, running on osu!lazer. It is still a work in progress, and new information will be posted here. What are this rulesets current features? Basic karaoke gameplay, with a simply animated lyric overlay. Custom songs made for the karaoke ruleset (no conversion of beatmaps yet). Saiten(scoring) system included. Japanese lyrical support. Cross platform, pc and mobile are</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li class=active><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.1201</a></li><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
index ec38b77..0fdebf5 100644
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://blog.karaoke.dev/en/sitemap.xml</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></sitemap><sitemap><loc>https://blog.karaoke.dev/zh-tw/sitemap.xml</loc></sitemap></sitemapindex>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><sitemap><loc>https://blog.karaoke.dev/en/sitemap.xml</loc><lastmod>2024-12-01T00:00:00+00:00</lastmod></sitemap><sitemap><loc>https://blog.karaoke.dev/zh-tw/sitemap.xml</loc></sitemap></sitemapindex>
\ No newline at end of file