diff --git a/changelog/2024.0406/index.html b/changelog/2024.0406/index.html
index 8dd1e95..fafd61d 100644
--- a/changelog/2024.0406/index.html
+++ b/changelog/2024.0406/index.html
@@ -6,6 +6,6 @@
 <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.0406</h2><h3 class=single__subtitle></h3><div class=single__meta><div class=single__infos><time class=single__info title="Written At">📅&nbsp;Apr 6, 2024</time>
 &nbsp;&#183;&nbsp; <span class=single__info title="Reading Time">☕&nbsp;2&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>Already bought lots of anime blu-ray online and seems hard to stop buying ;_;</li><li>Have little bit more time on this project for refactoring.</li><li>It&rsquo;s able to generate the badge for disaplay the githug repo star number in the <a href=https://shields.io/badges/git-hub-repo-stars>shields.io</a></li></ul><h2 id=code-quality>Code quality</h2><ul><li><p>Refactor the menu item for dealing with some binding event. <a href=#2173@andy840119>karaoke</a><br><img src=res/2024-04-06-23-02-20.png alt></p></li><li><p>Rename this menu item and should not be abstract. <a href=#2174@andy840119>karaoke</a></p></li><li><p>Refactor the object for display the lyric text. <a href=#2175@andy840119>karaoke</a></p></li><li><p>Sync the project dotnet setting from lazer. <a href=#2179@andy840119>karaoke</a></p></li><li><p>Refactor the code in the bindable namespace. <a href=#2181@andy840119>karaoke</a></p></li><li><p>Finally rename all <code>Romaji</code> to <code>Romanisation</code> in the whole project. <a href=#2145@andy840119>karaoke</a></p><blockquote><p>Because &ldquo;romaji&rdquo; is only used in Japan.
-Also, romanised syllable will inside the time-tag to make sure that display romanisation will be OK.</p></blockquote><ul><li><code>Romanization</code> to <code>Romanisation</code> for following lazer use <code>UK</code> english. <a href=#2180@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the lyric editor. <a href=#2182#2183@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the issue template. <a href=#2184@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the generator. <a href=#2187@andy840119>karaoke</a></li><li>Rename the remaining <code>romaji</code> wording. <a href=#2188@andy840119>karaoke</a></li><li>Remove <code>romaji</code> wording in import lyric screen. <a href=#2189@andy840119>karaoke</a></li><li>Add missing binding for <code>romanization</code> in the time-tag. <a href=#2192@andy840119>karaoke</a></li><li>Remove the `romaji tag property from the lyric. <a href=#2193@andy840119>karaoke</a></li><li>Rename remaining romaji to romanisation. <a href=#2196@andy840119>karaoke</a></li></ul></li><li><p>Remove the <code>text-tag</code> interface.</p><blockquote><p>Because <code>ruby-tag</code> and <code>romaji-tag</code> inherit it before, but <code>romaji-tag</code> say goodbye to us.</p></blockquote><ul><li>Rename all the <code>text-tag</code> relate utility/method into <code>ruby-tag</code>. <a href=#2194@andy840119>karaoke</a></li><li>Remove the text-tag interface. <a href=#2195@andy840119>karaoke</a></li></ul></li><li><p>Move some adjustment from system config to mod.<br><img src=res/2024-04-07-11-16-06.png alt><br><img src=res/2024-04-07-11-16-41.png alt></p><blockquote><p>There&rsquo;s some reason for it:</p><ol><li>Because lazer has mod preset. And mod preset can record the config.</li><li>User might change the config frequently if they want to try different language of karaoke beatmap. Use mod seems much suitable.</li><li>Anything that change the difficulty(e.g. use romanisation or adjust the tone) should be made as mod, or the adjustment need to be recorded into replay.</li><li>Most of the time user did not change display lyric type or show/hide the translation while singing. Make it as mod can reduce the effort of dealing with binding events or re-calculation.</li></ol></blockquote><ul><li>Move the display type/property from config into mode. <a href=#2199@andy840119>karaoke</a></li><li>Move the display translation/prefer language from config into mode. <a href=#2201@andy840119>karaoke</a></li></ul></li></ul><h2 id=editor>Editor</h2><ul><li>Make the focused textbox always visible at the right side if press tab to switch the focused textbox. <a href=#2205@andy840119>karaoke</a><br><img src=res/2024-04-07-11-30-40.png alt></li><li>Improve romanisation edit mode. <a href=#2206@andy840119>karaoke</a></li></ul><h2 id=utility>Utility</h2><ul><li><p>(WIP) Implement the processor for able to config the lyric display type or property. <a href=#2176@andy840119>karaoke</a></p><blockquote><p>Means it&rsquo;s possible to display the romaised lyric at the center of the text, or show/hide the ruby/romanisation at the top or bottom.</p></blockquote><p><img src=res/2024-04-06-23-04-56.png alt><br><img src=res/2024-04-06-23-18-47.png alt></p></li><li><p>Fix the logic in the processor. <a href=#2204@andy840119>karaoke</a></p></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.0228/ 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.0228</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>
+Also, romanised syllable will inside the time-tag to make sure that display romanisation will be OK.</p></blockquote><ul><li><code>Romanization</code> to <code>Romanisation</code> for following lazer use <code>UK</code> english. <a href=#2180@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the lyric editor. <a href=#2182#2183@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the issue template. <a href=#2184@andy840119>karaoke</a></li><li><code>Romani</code> to <code>romanization</code> in the generator. <a href=#2187@andy840119>karaoke</a></li><li>Rename the remaining <code>romaji</code> wording. <a href=#2188@andy840119>karaoke</a></li><li>Remove <code>romaji</code> wording in import lyric screen. <a href=#2189@andy840119>karaoke</a></li><li>Add missing binding for <code>romanization</code> in the time-tag. <a href=#2192@andy840119>karaoke</a></li><li>Remove the `romaji tag property from the lyric. <a href=#2193@andy840119>karaoke</a></li><li>Rename remaining romaji to romanisation. <a href=#2196@andy840119>karaoke</a></li></ul></li><li><p>Remove the <code>text-tag</code> interface.</p><blockquote><p>Because <code>ruby-tag</code> and <code>romaji-tag</code> inherit it before, but <code>romaji-tag</code> say goodbye to us.</p></blockquote><ul><li>Rename all the <code>text-tag</code> relate utility/method into <code>ruby-tag</code>. <a href=#2194@andy840119>karaoke</a></li><li>Remove the text-tag interface. <a href=#2195@andy840119>karaoke</a></li></ul></li><li><p>Move some adjustment from system config to mod.<br><img src=res/2024-04-07-11-16-06.png alt><br><img src=res/2024-04-07-11-16-41.png alt></p><blockquote><p>There&rsquo;s some reason for it:</p><ol><li>Because lazer has mod preset. And mod preset can record the config.</li><li>User might change the config frequently if they want to try different language of karaoke beatmap. Use mod seems much suitable.</li><li>Anything that change the difficulty(e.g. use romanisation or adjust the tone) should be made as mod, or the adjustment need to be recorded into replay.</li><li>Most of the time user did not change display lyric type or show/hide the translation while singing. Make it as mod can reduce the effort of dealing with binding events or re-calculation.</li></ol></blockquote><ul><li>Move the display type/property from config into mode. <a href=#2199@andy840119>karaoke</a></li><li>Move the display translation/prefer language from config into mode. <a href=#2201@andy840119>karaoke</a></li></ul></li></ul><h2 id=editor>Editor</h2><ul><li>Make the focused textbox always visible at the right side if press tab to switch the focused textbox. <a href=#2205@andy840119>karaoke</a><br><img src=res/2024-04-07-11-30-40.png alt></li><li>Improve romanisation edit mode. <a href=#2206@andy840119>karaoke</a></li></ul><h2 id=utility>Utility</h2><ul><li><p>(WIP) Implement the processor for able to config the lyric display type or property. <a href=#2176@andy840119>karaoke</a></p><blockquote><p>Means it&rsquo;s possible to display the romaised lyric at the center of the text, or show/hide the ruby/romanisation at the top or bottom.</p></blockquote><p><img src=res/2024-04-06-23-04-56.png alt><br><img src=res/2024-04-06-23-18-47.png alt></p></li><li><p>Fix the logic in the processor. <a href=#2204@andy840119>karaoke</a></p></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.0228/ 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.0228</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.0615/ class=pagination-single__right><div class=pagination-single__right-title>2024.0615</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=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#utility>Utility</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><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.0615/index.html b/changelog/2024.0615/index.html
new file mode 100644
index 0000000..33a8bb4
--- /dev/null
+++ b/changelog/2024.0615/index.html
@@ -0,0 +1,13 @@
+<!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.0615 – 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.0615/"'),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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="2024.0615"><meta property="og:url" content="https://blog.karaoke.dev/changelog/2024.0615/"><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.0615/><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.0615","datePublished":"2024-06-15T00:00:00Z","dateModified":"2024-06-15T00:00:00Z","url":"https://blog.karaoke.dev/changelog/2024.0615/","description":"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 …","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.0615</h2><h3 class=single__subtitle></h3><div class=single__meta><div class=single__infos><time class=single__info title="Written At">📅&nbsp;Jun 15, 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>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></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><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.0615/res/2024-06-15-11-18-04.png b/changelog/2024.0615/res/2024-06-15-11-18-04.png
new file mode 100644
index 0000000..d1b7233
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-18-04.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-20-35.png b/changelog/2024.0615/res/2024-06-15-11-20-35.png
new file mode 100644
index 0000000..5724d34
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-20-35.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-21-48.png b/changelog/2024.0615/res/2024-06-15-11-21-48.png
new file mode 100644
index 0000000..ddfaa69
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-21-48.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-22-57.png b/changelog/2024.0615/res/2024-06-15-11-22-57.png
new file mode 100644
index 0000000..132a072
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-22-57.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-33-55.png b/changelog/2024.0615/res/2024-06-15-11-33-55.png
new file mode 100644
index 0000000..ca2bca7
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-33-55.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-45-52.png b/changelog/2024.0615/res/2024-06-15-11-45-52.png
new file mode 100644
index 0000000..37de246
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-45-52.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-58-37.png b/changelog/2024.0615/res/2024-06-15-11-58-37.png
new file mode 100644
index 0000000..b9cef7b
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-58-37.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-11-59-12.png b/changelog/2024.0615/res/2024-06-15-11-59-12.png
new file mode 100644
index 0000000..24405a9
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-11-59-12.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-12-04-35.png b/changelog/2024.0615/res/2024-06-15-12-04-35.png
new file mode 100644
index 0000000..08d7323
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-12-04-35.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-12-05-24.png b/changelog/2024.0615/res/2024-06-15-12-05-24.png
new file mode 100644
index 0000000..bdfcd5a
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-12-05-24.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-12-07-51.png b/changelog/2024.0615/res/2024-06-15-12-07-51.png
new file mode 100644
index 0000000..ff9cc2a
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-12-07-51.png differ
diff --git a/changelog/2024.0615/res/2024-06-15-12-08-32.png b/changelog/2024.0615/res/2024-06-15-12-08-32.png
new file mode 100644
index 0000000..a8154b3
Binary files /dev/null and b/changelog/2024.0615/res/2024-06-15-12-08-32.png differ
diff --git a/changelog/index.html b/changelog/index.html
index 07da725..12c085f 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -1,9 +1,12 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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.0406/>2024.0406</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 6, 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.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>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Already bought lots of anime blu-ray online and seems hard to stop buying ;_; Have little bit more time on this project for refactoring. It&rsquo;s able to generate the badge for disaplay the githug repo star number in the shields.io Code quality Refactor the menu item for dealing with some binding event. karaoke
 Rename this menu item and should not be abstract. 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/2024.0228/>2024.0228</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 28, 2024</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to japan for two weeks. Go to aviation museum near the airport. It&rsquo;s a good deal using the cheap price to play the flight simulator with expensive device. Eat some special meats that hard to get in my country, such as rabbit and raccoon. The next time might be crow i guess(?) Go to comiket. WFJ for few days. Have a new year in japan. Visit 3 ski</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.1212/>2023.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 2023</time>
@@ -13,5 +16,4 @@
 <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 [Close duplicated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [Close duplicated] Remove all AllowNull using. karaoke [Close duplicated] 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><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.0707/>2023.0707</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 7, 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 是時候該思考一下人生的未來了QQ Start new project for able to resolve leetcode question in the local environment. Let the caret position able to drag to select/create range of lyric text/ruby tags. Making ruleset&rsquo;s own primary key type to resolve duplicated create new key number logic. Closes issue \No.1000 Created/. karaoke Because no. 2000 issue/pr has been created.</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.0606/>2023.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Reduce the time on this project recently. Remove most nullable disable annotation in the main project. Back to the office ;_; 和主管討論留職停薪。如果通過的話，接下就能更有更多的時間先把這份專案弄到一個段落，還有年底的日本</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.0507/>2023.0507</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 7, 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 Implement the mod for able to use different stage(e.g. works like the japanese karaoke system or like lyric player) in the gameplay. Release new change log within two weeks. Happy work from home ended ;_; 看起來年底的日本邊玩邊工作的計劃泡當了 QQ 是時候思考究竟要專心工作，還</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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">Achievement Reduce the time on this project recently. Remove most nullable disable annotation in the main project. Back to the office ;_; 和主管討論留職停薪。如果通過的話，接下就能更有更多的時間先把這份專案弄到一個段落，還有年底的日本</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 ebf3dee..3be5507 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, 06 Apr 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>Sat, 15 Jun 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 d745cee..e615242 100644
--- a/changelog/page/2/index.html
+++ b/changelog/page/2/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2023.0422/>2023.0422</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 22, 2023</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/2023.0507/>2023.0507</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 7, 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 Implement the mod for able to use different stage(e.g. works like the japanese karaoke system or like lyric player) in the gameplay. Release new change log within two weeks. Happy work from home ended ;_; 看起來年底的日本邊玩邊工作的計劃泡當了 QQ 是時候思考究竟要專心工作，還</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.0422/>2023.0422</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 22, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-write some code to let the ruleset able to support different type of stage. Add three more stars in this proejct. Trying to reduce working hours but seems failed ;_; Not very sure, maybe andy and this project is full of mistake and there&rsquo;s no achievement actually. Add new stage section for the chagne log. Beatmap Move fill the working property method into the hit-object to make the beatmap processor simple.</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.0329/>2023.0329</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 29, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to CA and come back. Company has a fall-guys event and still alive. Project need to re-write the shader. Andy840119 and WebFreak001 make the new shader for it. Figured out some features can be dropped but still playable(andy is happy now). Code quality Regular clean-up code. karaoke Apply file scope to the test project. karaoke Editor Implement basic check for the note info. karaoke Implement component for able to switch the workspace.</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.0128/>2023.0128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 28, 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 Got a happy holiday. Still alive. Implement the stage structure for the karaoke beatmap. Will be easier to implement various of style. Beatmap Implement stage info for the karaoke beatmap. Implement the base stage info for the beatmap. karaoke Make stage info more useful. karaoke Implement stage element category. karaoke Implement classic stage timing info. karaoke Refactor some parts in the stage categlry. karaoke Adjust timing info structure.</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.1231/>2022.1231</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 31, 2022</time>
@@ -14,9 +15,4 @@
 <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><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.0917/>2022.0917</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 17, 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 Implement the sync logic in the lyric and the lyric editor. Better weather now. Beatmap Add the LyricPropertyWritableVersion property in the lyric for letting editor to check the latest writable version. karaoke Implement lyric can reference by other lyric. karaoke Code quality Improve the HitObjectWritableUtils. karaoke Refactor the lock utils and remove the utils in the lyric editor. karaoke Refactor the create text tag button in the 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/2022.0903/>2022.0903</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 3, 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 Back to the office. Upgrade the csharp language to the latest. Airpods missing again ;_; Start implement strategy to sync the lyric property from another lyric, will use for those repeating lyrics. Got that stupid RTX 3090 Beatmap Implement reference lyric strategy class. karaoke Implement strategy to sync the value from reference lyric. karaoke Code quality Implement base property seciotn for those hit-object proerty related edit area.</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.0807/>2022.0807</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 7, 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 Implement copy/paste feature in the lyric editor.
-Start implement reference lyric feature. The lyric property can be sync by other lyric if they are very similar.
-Following the refactor in the o!f to fix the api change.
-Pull-request #1450 has been created.
-Refactor the format ahd behavior in the scoring note. Beatmap Implement lyric translate json convertor. karaoke Implement IDeepCloneable&lt;T> for some hit object for better copy experience.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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 Back to the office. Upgrade the csharp language to the latest. Airpods missing again ;_; Start implement strategy to sync the lyric property from another lyric, will use for those repeating lyrics. Got that stupid RTX 3090 Beatmap Implement reference lyric strategy class. karaoke Implement strategy to sync the value from reference lyric. karaoke Code quality Implement base property seciotn for those hit-object proerty related edit area.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 cc91f01..677abd3 100644
--- a/changelog/page/3/index.html
+++ b/changelog/page/3/index.html
@@ -1,9 +1,14 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2022.0716/>2022.0716</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 16, 2022</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/2022.0807/>2022.0807</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 7, 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 Implement copy/paste feature in the lyric editor.
+Start implement reference lyric feature. The lyric property can be sync by other lyric if they are very similar.
+Following the refactor in the o!f to fix the api change.
+Pull-request #1450 has been created.
+Refactor the format ahd behavior in the scoring note. Beatmap Implement lyric translate json convertor. karaoke Implement IDeepCloneable&lt;T> for some hit object for better copy experience.</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.0716/>2022.0716</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 16, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Finall got that cool M1 macbook. Waiting for that stupid laptop for 3 months. Code quality Enable NRT in the skinning. karaoke Use IList&lt;T> instead of List&lt;T> in the karaoke beatmap. karaoke Remove null check in the caret algorithm. karaoke Fix null assign in the lyric text. karaoke Use string.Empty instead of "". karaoke Enable NRT in the extensions. karaoke Enable NRT in the change handler. karaoke Enable NRT in the json serializer.</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.0625/>2022.0625</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 25, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Sepatate resource into individual repo for better management. Adjust the CI for auto upload the new translation into crowdin. Waiting for new macbook for almost 3 monthes and got nothing. Make the upgrade to my cool keyboard. Code quality Use more generic way to change the value to the input area in the editor. karaoke Implement test case for beatmap change handler. karaoke Create test case for remain change</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.0604/>2022.0604</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 4, 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 777 Pull-request merged.
@@ -16,5 +21,4 @@
 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><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.0212/>2022.0212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No 1111 has been created/ karaoke Close lots of old issues. Create and close lots of new issues. Write this damn article. Migrate skin roles for more flexibility. Beatmap Add primary key into lyric object. karaoke Record HUE instead of Hex in the singer(for not let user to select the dirty color). karaoke Remove all layout index in the lyric. karaoke [Close duplicated] Change ruby/romaji from bindable to bindable list in the lyric object.</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.0122/>2022.0122</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 22, 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 \Hit 100 stars/ Beatmap Check is there any reason why not use bindable list for tags in lyric. karaoke Make TimeTag[] TimeTags into IEnumerable&lt;TimeTag> in the lyric class. karaoke Change some properties from Bindable&lt;tag[]> into BindableList&lt;tag> in lyric. karaoke Code quality int shifting should be renamed to int offset in some methods. karaoke Fix Fix screen broken after add new text 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/2022.0101/>2022.0101</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 2022</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No.1000 issue Created/ karaoke \No.996 issue Created/ karaoke Live along again so 尻尻放題 Issue not decrease at all in the last year ;_; Code quality Clean-up unused resolved properties. karaoke Regular clean-up code. karaoke Editor Adjust menu in karaoke editor. karaoke Fix some remain bugs in lyric editor. karaoke Caret state should be readonly for prevent accidently change in lyric editor. karaoke Able to switch all</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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 \Hit 100 stars/ Beatmap Check is there any reason why not use bindable list for tags in lyric. karaoke Make TimeTag[] TimeTags into IEnumerable&lt;TimeTag> in the lyric class. karaoke Change some properties from Bindable&lt;tag[]> into BindableList&lt;tag> in lyric. karaoke Code quality int shifting should be renamed to int offset in some methods. karaoke Fix Fix screen broken after add new text in lyric 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 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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 9d7ed59..6bfc039 100644
--- a/changelog/page/4/index.html
+++ b/changelog/page/4/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2021.1212/>2021.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 2021</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/2022.0101/>2022.0101</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 2022</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No.1000 issue Created/ karaoke \No.996 issue Created/ karaoke Live along again so 尻尻放題 Issue not decrease at all in the last year ;_; Code quality Clean-up unused resolved properties. karaoke Regular clean-up code. karaoke Editor Adjust menu in karaoke editor. karaoke Fix some remain bugs in lyric editor. karaoke Caret state should be readonly for prevent accidently change in lyric editor. karaoke Able to switch all</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.1212/>2021.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 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 Refactor some editor. Not karaoke editor has its own Implement change handler for lyric objects. Code quality Rename from &ldquo;ImportLyricScreen&rdquo; into &ldquo;LyricImporter&rdquo;. karaoke Clean up code. karaoke Remove postfix &ldquo;Screen&rdquo; in &ldquo;KaraokeConfigScreen&rdquo; class. karaoke Clean up code by hand. karaoke Update var usage inspections to disallow for built-in types. karaoke Fix &ldquo;Parameter type can be IEnumerable of T&rdquo; issue. karaoke Editor Make editor sub-screen inherit real screen.</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.1121/>2021.1121</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 21, 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 Got a bike. Refactor exist skin format. issue #888 has been created. Code quality Use enum dropdown instead. karaoke Use OsuMarkdownTextFlowContainer instead of OsuMarkdownContainer in editor section. karaoke Fix FontUsageConvertorTest run failed in osx. karaoke Should inherit SnakeCaseKeyContractResolver in ShaderConvertor. karaoke Should use add() instead of assign value in json serializer settings. karaoke Adjust namespace about skin. karaoke Adjust some interface about shader. karaoke Editor Click the note to open the pop-over in 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.1030/>2021.1030</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 30, 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 Fix some outline performance issue, big thanks to @Evast Buy an M32Q monitor. Editor Fix time-tag position is wrong in editor. karaoke Framework Fix frame-buffer performance issue. font-package Implement get shader instance directly by extension and adjust test case usage. font-package Fix outline shader performance issue. font-package Implement pixel shader. font-package Make internal shader has its own class. font-package Implement repeat moving background effect. font-package Clean-up code.</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.1010/>2021.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2021</time>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \69 Stars/
 more than 2000 commits, means need to make 27 commits to earn a star /_\
 Beatmap Check text tag should not empty. karaoke Improve CheckInvalidTranslateLyrics to check invalid translate. karaoke Code quality Use the real color picker to replace the fake one. karaoke Clean up code. karaoke Refactor lyric maker caret. karaoke Move state into individual class in the lyric editor, which means not place all value in the main class.</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.0619/>2021.0619</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 19, 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 Refactor exists lyric editor. karaoke Adjust namespace in singer editor. karaoke Random fix. karaoke Refactor saiten visualization. karaoke Use an easy way to create child dependency with texture resources. karaoke Adjust edit mode order. karaoke Editor Fix cannot fully delete lyrics in the lyric editor. karaoke Implement each edit mode will have its own color theme in the lyric editor. karaoke Random fixes lyric editor. karaoke Fix causes crash in time-tag edit mode if all time-tag with no-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/2021.0529/>2021.0529</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 29, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Add bindable start index and bindable end index into ruby/romaji tag object. karaoke Fix hover cause overlay hidden in the lyric editor. karaoke Code quality Clean-up code and remove unused class. karaoke Make StopClock into individual class. karaoke Editor Able to drag to select ruby or romaji text tag in lyric editor. karaoke Implement time tag blueprint. karaoke Able to sync selected time-tag / text-tag in lyric maker.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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">Code quality Refactor exists lyric editor. karaoke Adjust namespace in singer editor. karaoke Random fix. karaoke Refactor saiten visualization. karaoke Use an easy way to create child dependency with texture resources. karaoke Adjust edit mode order. karaoke Editor Fix cannot fully delete lyrics in the lyric editor. karaoke Implement each edit mode will have its own color theme in the lyric editor. karaoke Random fixes lyric editor. karaoke Fix causes crash in time-tag edit mode if all time-tag with no-time in the lyric.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 9172725..25b9869 100644
--- a/changelog/page/5/index.html
+++ b/changelog/page/5/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2021.0509/>2021.0509</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 9, 2021</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/2021.0529/>2021.0529</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 29, 2021</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Add bindable start index and bindable end index into ruby/romaji tag object. karaoke Fix hover cause overlay hidden in the lyric editor. karaoke Code quality Clean-up code and remove unused class. karaoke Make StopClock into individual class. karaoke Editor Able to drag to select ruby or romaji text tag in lyric editor. karaoke Implement time tag blueprint. karaoke Able to sync selected time-tag / text-tag in lyric maker.</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.0509/>2021.0509</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 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">Achievement \56 stars in repo/ Code quality Remove singer property in note object. This property can get from parent lyrics directly. karaoke Rename EditRuleset and EditPlayfield to use the full Editor keyword, follow how official do. karaoke Separate note playfield for letting code be more re-usable. karaoke Clean up code. karaoke Editor Implement check some property in lyric. karaoke Implement note checker. karaoke Implement overlay 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.0417/>2021.0417</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 17, 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 \50 stars in repo/ Editor Adjust translate editor. karaoke Add official AI mod support. karaoke Implement translate AI mod check. karaoke Gameplay Fix gameplay cannot go to the result screen. karaoke Setting Implement karaoke config screen. karaoke Should have color theme in each section. karaoke Fix layout looking in karaoke config screen. karaoke Create language setting control in config. karaoke Implement font selection in karaoke config.</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.0320/>2021.0320</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 20, 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 Add logo to readme. karaoke Code quality Add some test case for caret position calculation. karaoke Editor Implement ruby/romaji caret position calculation algorithm. 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/2021.0228/>2021.0228</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 28, 2021</time>
@@ -12,5 +13,4 @@
 <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><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.1226/>2020.1226</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 26, 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 quality Update config from how lazer have. karaoke Editor Implement cursor in the lyric editor. karaoke Implement click the time-tag to move the cursor. karaoke Press space to set the current time in time-tag. karaoke Able to split lyrics in the lyric editor. karaoke Create a state manager for managing cursor position or mode in the lyric editor. karaoke Enable to delete text by mouse position. karaoke Add edit lyric step in lyric import step.</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.1212/>2020.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 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">Auto-Generator Implement auto-detect language in the lyric importer. karaoke Create time-tags generator for Chinses lyrics. karaoke Improve time-tag generator for Japanese lyrics with ruby. karaoke Beatmap Implement Ruby and Romaji tag serializer, which allows to save them with better format. karaoke Implement tome tag serializer. karaoke Implement bindable dictionary for better control bindable with dictionary format. karaoke Use culture info instead of language id in translate. karaoke Change time tag from tuples to object.</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.1128/>2020.1128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 28, 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 Implement lyric importer to handle a list of steps need user to do in order. Code quality Clean-up code. karaoke Beatmap Create TimeTagsConverter to support to encode/decode time-tag with json format. karaoke Add language id in lyric object do define which laguage lyric is. karaoke Editor Implement lyric importer. Base implementation. karaoke Implement drag screen in lyric import. karaoke Add lyric editor&rsquo;s step two.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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 auto-detect language in the lyric importer. karaoke Create time-tags generator for Chinses lyrics. karaoke Improve time-tag generator for Japanese lyrics with ruby. karaoke Beatmap Implement Ruby and Romaji tag serializer, which allows to save them with better format. karaoke Implement tome tag serializer. karaoke Implement bindable dictionary for better control bindable with dictionary format. karaoke Use culture info instead of language id in translate. karaoke Change time tag from tuples to object.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 a9de724..2deba4a 100644
--- a/changelog/page/6/index.html
+++ b/changelog/page/6/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2020.1107/>2020.1107</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 7, 2020</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/2020.1128/>2020.1128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 28, 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 Implement lyric importer to handle a list of steps need user to do in order. Code quality Clean-up code. karaoke Beatmap Create TimeTagsConverter to support to encode/decode time-tag with json format. karaoke Add language id in lyric object do define which laguage lyric is. karaoke Editor Implement lyric importer. Base implementation. karaoke Implement drag screen in lyric import. karaoke Add lyric editor&rsquo;s step two.</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.1107/>2020.1107</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 7, 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 Implement singer editor. Code quality Rename from LyricLine to Lyric. karaoke Save lists of singer index instead of font index in the lyric. karaoke Editor Implement drag .lrc/.kar file to import. karaoke Create import manager. karaoke Implement style editor karaoke Style editor can switch to edit between Lyric and Note. karaoke Implement singer editor, here&rsquo;s the demo video. Base implementation. karaoke Implement display 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/2020.1024/>2020.1024</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 24, 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 Create some basic edit areas. Got a new star and pull request. karaoke Code quality Running clean-up code script. karaoke Editor Let lyric maker&rsquo;s lyric draggable. karaoke Re-write translate editor. karaoke Re-write ruby/romaji editor. karaoke Skin Editor Re-write layout editor. karaoke Re-write style editor. 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.1010/>2020.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 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 \雙十節/ Become the first one to update the latest package version. Beatmap Define sub-singer. karaoke Enable to add singer in the beatmap. karaoke Enable to remove singer in the beatmap. karaoke Result Implement beatmap infos display on the result page. karaoke Implement beatmap metadata statistics on the result page. Implement not scorable graph. karaoke Implement saiten result component in the result page(haven&rsquo;t been fully implemented).</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.0926/>2020.0926</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 26, 2020</time>
@@ -15,5 +16,4 @@
 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><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.0718/>2020.0718</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 18, 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 Change the ruleset icon. karaoke Writing changelog. Blog Use special tags instead of typing GitHub URL. karaoke Code quality Update package and clean up code. karaoke Framework Update package and fix microphone crash issue. karaoke Gameplay Fix lyric not display in the right place. karaoke Skinning Not create bindable every time in KaraokeLegacySkinTransformer. karaoke Let lyric editor has its own skin.</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.0704/>2020.0704</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 4, 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 \Change organization name/ Use special tags to mark GitHub issue/pr and contribute user. karaoke Blog Use special tags instead of typing GitHub URL. github.io Beatmap Add try-catch to display error line with illegal beatmap format. karaoke Code quality Little clean-up code. karaoke Edge Update to latest ppy.osu.Game and edge branch can reture now. karaoke Editor Add zoom-in and zoom-out in lyric maker.</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.0620/>2020.0620</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 20, 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 Might support convert UTAU/SynthV project into karaoke beatmap in future. karaoke Change organization and repo name. Blog Add branch introduce. Fix changelog crash by changing URL. edge Code quality Use JSON file instead of code to record conversion results. Edge Update edge branch into master. Mods Create karaoke singer mod to create replay by singer&rsquo;s voice(it&rsquo;s not stable now). karaoke Disable microphone in some mods.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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">Achievement \Change organization name/ Use special tags to mark GitHub issue/pr and contribute user. karaoke Blog Use special tags instead of typing GitHub URL. github.io Beatmap Add try-catch to display error line with illegal beatmap format. karaoke Code quality Little clean-up code. karaoke Edge Update to latest ppy.osu.Game and edge branch can reture now. karaoke Editor Add zoom-in and zoom-out in lyric maker.</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 493ef25..9e4ef43 100644
--- a/changelog/page/7/index.html
+++ b/changelog/page/7/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2020.0606/>2020.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 2020</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/2020.0620/>2020.0620</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 20, 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 Might support convert UTAU/SynthV project into karaoke beatmap in future. karaoke Change organization and repo name. Blog Add branch introduce. Fix changelog crash by changing URL. edge Code quality Use JSON file instead of code to record conversion results. Edge Update edge branch into master. Mods Create karaoke singer mod to create replay by singer&rsquo;s voice(it&rsquo;s not stable now). karaoke Disable microphone in some mods.</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.0606/>2020.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 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 \Saiten system is much more stable now./ Update homepage. Blog Update homepage. Make change log ordered. Add discord link. Code quality Add beatmap extension to deal with duplicated logic. karaoke Gameplay Fix changelog crash caused by blog update. Framework Use NWaves package to deal with complex pitch algorithm. microphone-package Gameplay Hide scoring hud if beatmap is not scorable. edge Performance Improve saiten system to useable.</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.0522/>2020.0522</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 22, 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 Web version&rsquo;s changelog has been released \收到怒怒貼了/ Beatmap Add extension file to deal with duplicated logic. karaoke Blog Change log website has been released. For now, you don&rsquo;t need to open the lazer to see what&rsquo;s change any more. See website in karaoke-dev.github.io Code quality Clean up bad codes in some test cases. Gameplay Create karaoke ruleset&rsquo;s own HUD overlay. karaoke Skinning</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.0508/>2020.0508</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 8, 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 Now user can select a microphone device in the ruleset. Wearing n-hentai t-shirt to my office and nobody figures out anything weird. Code quality Clean-up some test case&rsquo;s bad code. karaoke karaoke Testing Most test case has its own namespace, will be easier to manage or add test cases. 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.0501/>2020.0501</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 1, 2020</time>
@@ -16,4 +17,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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</a></li><li class=sidebar-recent><a href=/changelog/2023.0507/ class="sidebar-recent__title p1">2023.0507</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.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><li class=sidebar-recent><a href=/changelog/2023.0707/ class="sidebar-recent__title p1">2023.0707</a></li><li class=sidebar-recent><a href=/changelog/2023.0606/ class="sidebar-recent__title p1">2023.0606</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 c568aa4..3b77b11 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.0406/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-04-06T00: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.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.0615/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-06-15T00: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.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 2246e30..6ec5061 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,12 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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.0406/>2024.0406</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 6, 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.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>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Already bought lots of anime blu-ray online and seems hard to stop buying ;_; Have little bit more time on this project for refactoring. It&rsquo;s able to generate the badge for disaplay the githug repo star number in the shields.io Code quality Refactor the menu item for dealing with some binding event. karaoke
 Rename this menu item and should not be abstract. 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/2024.0228/>2024.0228</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 28, 2024</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to japan for two weeks. Go to aviation museum near the airport. It&rsquo;s a good deal using the cheap price to play the flight simulator with expensive device. Eat some special meats that hard to get in my country, such as rabbit and raccoon. The next time might be crow i guess(?) Go to comiket. WFJ for few days. Have a new year in japan. Visit 3 ski</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.1212/>2023.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 2023</time>
@@ -13,5 +16,4 @@
 <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 [Close duplicated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [Close duplicated] Remove all AllowNull using. karaoke [Close duplicated] 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><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.0707/>2023.0707</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 7, 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 是時候該思考一下人生的未來了QQ Start new project for able to resolve leetcode question in the local environment. Let the caret position able to drag to select/create range of lyric text/ruby tags. Making ruleset&rsquo;s own primary key type to resolve duplicated create new key number logic. Closes issue \No.1000 Created/. karaoke Because no. 2000 issue/pr has been created.</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.0606/>2023.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Reduce the time on this project recently. Remove most nullable disable annotation in the main project. Back to the office ;_; 和主管討論留職停薪。如果通過的話，接下就能更有更多的時間先把這份專案弄到一個段落，還有年底的日本</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.0507/>2023.0507</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 7, 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 Implement the mod for able to use different stage(e.g. works like the japanese karaoke system or like lyric player) in the gameplay. Release new change log within two weeks. Happy work from home ended ;_; 看起來年底的日本邊玩邊工作的計劃泡當了 QQ 是時候思考究竟要專心工作，還</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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">Achievement Reduce the time on this project recently. Remove most nullable disable annotation in the main project. Back to the office ;_; 和主管討論留職停薪。如果通過的話，接下就能更有更多的時間先把這份專案弄到一個段落，還有年底的日本</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 a8a90b2..cc4b1d8 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, 06 Apr 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>Sat, 15 Jun 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 7b7a099..e50c464 100644
--- a/page/2/index.html
+++ b/page/2/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2023.0422/>2023.0422</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 22, 2023</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/2023.0507/>2023.0507</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 7, 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 Implement the mod for able to use different stage(e.g. works like the japanese karaoke system or like lyric player) in the gameplay. Release new change log within two weeks. Happy work from home ended ;_; 看起來年底的日本邊玩邊工作的計劃泡當了 QQ 是時候思考究竟要專心工作，還</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.0422/>2023.0422</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 22, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-write some code to let the ruleset able to support different type of stage. Add three more stars in this proejct. Trying to reduce working hours but seems failed ;_; Not very sure, maybe andy and this project is full of mistake and there&rsquo;s no achievement actually. Add new stage section for the chagne log. Beatmap Move fill the working property method into the hit-object to make the beatmap processor simple.</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.0329/>2023.0329</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 29, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to CA and come back. Company has a fall-guys event and still alive. Project need to re-write the shader. Andy840119 and WebFreak001 make the new shader for it. Figured out some features can be dropped but still playable(andy is happy now). Code quality Regular clean-up code. karaoke Apply file scope to the test project. karaoke Editor Implement basic check for the note info. karaoke Implement component for able to switch the workspace.</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.0128/>2023.0128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 28, 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 Got a happy holiday. Still alive. Implement the stage structure for the karaoke beatmap. Will be easier to implement various of style. Beatmap Implement stage info for the karaoke beatmap. Implement the base stage info for the beatmap. karaoke Make stage info more useful. karaoke Implement stage element category. karaoke Implement classic stage timing info. karaoke Refactor some parts in the stage categlry. karaoke Adjust timing info structure.</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.1231/>2022.1231</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 31, 2022</time>
@@ -14,9 +15,4 @@
 <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><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.0917/>2022.0917</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 17, 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 Implement the sync logic in the lyric and the lyric editor. Better weather now. Beatmap Add the LyricPropertyWritableVersion property in the lyric for letting editor to check the latest writable version. karaoke Implement lyric can reference by other lyric. karaoke Code quality Improve the HitObjectWritableUtils. karaoke Refactor the lock utils and remove the utils in the lyric editor. karaoke Refactor the create text tag button in the 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/2022.0903/>2022.0903</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 3, 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 Back to the office. Upgrade the csharp language to the latest. Airpods missing again ;_; Start implement strategy to sync the lyric property from another lyric, will use for those repeating lyrics. Got that stupid RTX 3090 Beatmap Implement reference lyric strategy class. karaoke Implement strategy to sync the value from reference lyric. karaoke Code quality Implement base property seciotn for those hit-object proerty related edit area.</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.0807/>2022.0807</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 7, 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 Implement copy/paste feature in the lyric editor.
-Start implement reference lyric feature. The lyric property can be sync by other lyric if they are very similar.
-Following the refactor in the o!f to fix the api change.
-Pull-request #1450 has been created.
-Refactor the format ahd behavior in the scoring note. Beatmap Implement lyric translate json convertor. karaoke Implement IDeepCloneable&lt;T> for some hit object for better copy experience.</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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 Back to the office. Upgrade the csharp language to the latest. Airpods missing again ;_; Start implement strategy to sync the lyric property from another lyric, will use for those repeating lyrics. Got that stupid RTX 3090 Beatmap Implement reference lyric strategy class. karaoke Implement strategy to sync the value from reference lyric. karaoke Code quality Implement base property seciotn for those hit-object proerty related edit area.</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 6af7b8c..9eee41a 100644
--- a/page/3/index.html
+++ b/page/3/index.html
@@ -1,9 +1,14 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2022.0716/>2022.0716</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 16, 2022</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/2022.0807/>2022.0807</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 7, 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 Implement copy/paste feature in the lyric editor.
+Start implement reference lyric feature. The lyric property can be sync by other lyric if they are very similar.
+Following the refactor in the o!f to fix the api change.
+Pull-request #1450 has been created.
+Refactor the format ahd behavior in the scoring note. Beatmap Implement lyric translate json convertor. karaoke Implement IDeepCloneable&lt;T> for some hit object for better copy experience.</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.0716/>2022.0716</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 16, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Finall got that cool M1 macbook. Waiting for that stupid laptop for 3 months. Code quality Enable NRT in the skinning. karaoke Use IList&lt;T> instead of List&lt;T> in the karaoke beatmap. karaoke Remove null check in the caret algorithm. karaoke Fix null assign in the lyric text. karaoke Use string.Empty instead of "". karaoke Enable NRT in the extensions. karaoke Enable NRT in the change handler. karaoke Enable NRT in the json serializer.</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.0625/>2022.0625</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 25, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Sepatate resource into individual repo for better management. Adjust the CI for auto upload the new translation into crowdin. Waiting for new macbook for almost 3 monthes and got nothing. Make the upgrade to my cool keyboard. Code quality Use more generic way to change the value to the input area in the editor. karaoke Implement test case for beatmap change handler. karaoke Create test case for remain change</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.0604/>2022.0604</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 4, 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 777 Pull-request merged.
@@ -16,5 +21,4 @@
 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><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.0212/>2022.0212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No 1111 has been created/ karaoke Close lots of old issues. Create and close lots of new issues. Write this damn article. Migrate skin roles for more flexibility. Beatmap Add primary key into lyric object. karaoke Record HUE instead of Hex in the singer(for not let user to select the dirty color). karaoke Remove all layout index in the lyric. karaoke [Close duplicated] Change ruby/romaji from bindable to bindable list in the lyric object.</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.0122/>2022.0122</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 22, 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 \Hit 100 stars/ Beatmap Check is there any reason why not use bindable list for tags in lyric. karaoke Make TimeTag[] TimeTags into IEnumerable&lt;TimeTag> in the lyric class. karaoke Change some properties from Bindable&lt;tag[]> into BindableList&lt;tag> in lyric. karaoke Code quality int shifting should be renamed to int offset in some methods. karaoke Fix Fix screen broken after add new text 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/2022.0101/>2022.0101</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 2022</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No.1000 issue Created/ karaoke \No.996 issue Created/ karaoke Live along again so 尻尻放題 Issue not decrease at all in the last year ;_; Code quality Clean-up unused resolved properties. karaoke Regular clean-up code. karaoke Editor Adjust menu in karaoke editor. karaoke Fix some remain bugs in lyric editor. karaoke Caret state should be readonly for prevent accidently change in lyric editor. karaoke Able to switch all</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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 \Hit 100 stars/ Beatmap Check is there any reason why not use bindable list for tags in lyric. karaoke Make TimeTag[] TimeTags into IEnumerable&lt;TimeTag> in the lyric class. karaoke Change some properties from Bindable&lt;tag[]> into BindableList&lt;tag> in lyric. karaoke Code quality int shifting should be renamed to int offset in some methods. karaoke Fix Fix screen broken after add new text in lyric editor.</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 4e58a6a..ab71e2c 100644
--- a/page/4/index.html
+++ b/page/4/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2021.1212/>2021.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 2021</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/2022.0101/>2022.0101</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 2022</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \No.1000 issue Created/ karaoke \No.996 issue Created/ karaoke Live along again so 尻尻放題 Issue not decrease at all in the last year ;_; Code quality Clean-up unused resolved properties. karaoke Regular clean-up code. karaoke Editor Adjust menu in karaoke editor. karaoke Fix some remain bugs in lyric editor. karaoke Caret state should be readonly for prevent accidently change in lyric editor. karaoke Able to switch all</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.1212/>2021.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 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 Refactor some editor. Not karaoke editor has its own Implement change handler for lyric objects. Code quality Rename from &ldquo;ImportLyricScreen&rdquo; into &ldquo;LyricImporter&rdquo;. karaoke Clean up code. karaoke Remove postfix &ldquo;Screen&rdquo; in &ldquo;KaraokeConfigScreen&rdquo; class. karaoke Clean up code by hand. karaoke Update var usage inspections to disallow for built-in types. karaoke Fix &ldquo;Parameter type can be IEnumerable of T&rdquo; issue. karaoke Editor Make editor sub-screen inherit real screen.</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.1121/>2021.1121</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 21, 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 Got a bike. Refactor exist skin format. issue #888 has been created. Code quality Use enum dropdown instead. karaoke Use OsuMarkdownTextFlowContainer instead of OsuMarkdownContainer in editor section. karaoke Fix FontUsageConvertorTest run failed in osx. karaoke Should inherit SnakeCaseKeyContractResolver in ShaderConvertor. karaoke Should use add() instead of assign value in json serializer settings. karaoke Adjust namespace about skin. karaoke Adjust some interface about shader. karaoke Editor Click the note to open the pop-over in 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.1030/>2021.1030</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 30, 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 Fix some outline performance issue, big thanks to @Evast Buy an M32Q monitor. Editor Fix time-tag position is wrong in editor. karaoke Framework Fix frame-buffer performance issue. font-package Implement get shader instance directly by extension and adjust test case usage. font-package Fix outline shader performance issue. font-package Implement pixel shader. font-package Make internal shader has its own class. font-package Implement repeat moving background effect. font-package Clean-up code.</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.1010/>2021.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2021</time>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \69 Stars/
 more than 2000 commits, means need to make 27 commits to earn a star /_\
 Beatmap Check text tag should not empty. karaoke Improve CheckInvalidTranslateLyrics to check invalid translate. karaoke Code quality Use the real color picker to replace the fake one. karaoke Clean up code. karaoke Refactor lyric maker caret. karaoke Move state into individual class in the lyric editor, which means not place all value in the main class.</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.0619/>2021.0619</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 19, 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 Refactor exists lyric editor. karaoke Adjust namespace in singer editor. karaoke Random fix. karaoke Refactor saiten visualization. karaoke Use an easy way to create child dependency with texture resources. karaoke Adjust edit mode order. karaoke Editor Fix cannot fully delete lyrics in the lyric editor. karaoke Implement each edit mode will have its own color theme in the lyric editor. karaoke Random fixes lyric editor. karaoke Fix causes crash in time-tag edit mode if all time-tag with no-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/2021.0529/>2021.0529</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 29, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Add bindable start index and bindable end index into ruby/romaji tag object. karaoke Fix hover cause overlay hidden in the lyric editor. karaoke Code quality Clean-up code and remove unused class. karaoke Make StopClock into individual class. karaoke Editor Able to drag to select ruby or romaji text tag in lyric editor. karaoke Implement time tag blueprint. karaoke Able to sync selected time-tag / text-tag in lyric maker.</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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">Code quality Refactor exists lyric editor. karaoke Adjust namespace in singer editor. karaoke Random fix. karaoke Refactor saiten visualization. karaoke Use an easy way to create child dependency with texture resources. karaoke Adjust edit mode order. karaoke Editor Fix cannot fully delete lyrics in the lyric editor. karaoke Implement each edit mode will have its own color theme in the lyric editor. karaoke Random fixes lyric editor. karaoke Fix causes crash in time-tag edit mode if all time-tag with no-time in the lyric.</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><a href=/page/6/>6</a></li><li><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 177d9ca..58e299b 100644
--- a/page/5/index.html
+++ b/page/5/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2021.0509/>2021.0509</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 9, 2021</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/2021.0529/>2021.0529</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 29, 2021</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Add bindable start index and bindable end index into ruby/romaji tag object. karaoke Fix hover cause overlay hidden in the lyric editor. karaoke Code quality Clean-up code and remove unused class. karaoke Make StopClock into individual class. karaoke Editor Able to drag to select ruby or romaji text tag in lyric editor. karaoke Implement time tag blueprint. karaoke Able to sync selected time-tag / text-tag in lyric maker.</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.0509/>2021.0509</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 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">Achievement \56 stars in repo/ Code quality Remove singer property in note object. This property can get from parent lyrics directly. karaoke Rename EditRuleset and EditPlayfield to use the full Editor keyword, follow how official do. karaoke Separate note playfield for letting code be more re-usable. karaoke Clean up code. karaoke Editor Implement check some property in lyric. karaoke Implement note checker. karaoke Implement overlay 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.0417/>2021.0417</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 17, 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 \50 stars in repo/ Editor Adjust translate editor. karaoke Add official AI mod support. karaoke Implement translate AI mod check. karaoke Gameplay Fix gameplay cannot go to the result screen. karaoke Setting Implement karaoke config screen. karaoke Should have color theme in each section. karaoke Fix layout looking in karaoke config screen. karaoke Create language setting control in config. karaoke Implement font selection in karaoke config.</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.0320/>2021.0320</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 20, 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 Add logo to readme. karaoke Code quality Add some test case for caret position calculation. karaoke Editor Implement ruby/romaji caret position calculation algorithm. 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/2021.0228/>2021.0228</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 28, 2021</time>
@@ -12,5 +13,4 @@
 <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><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.1226/>2020.1226</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 26, 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 quality Update config from how lazer have. karaoke Editor Implement cursor in the lyric editor. karaoke Implement click the time-tag to move the cursor. karaoke Press space to set the current time in time-tag. karaoke Able to split lyrics in the lyric editor. karaoke Create a state manager for managing cursor position or mode in the lyric editor. karaoke Enable to delete text by mouse position. karaoke Add edit lyric step in lyric import step.</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.1212/>2020.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 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">Auto-Generator Implement auto-detect language in the lyric importer. karaoke Create time-tags generator for Chinses lyrics. karaoke Improve time-tag generator for Japanese lyrics with ruby. karaoke Beatmap Implement Ruby and Romaji tag serializer, which allows to save them with better format. karaoke Implement tome tag serializer. karaoke Implement bindable dictionary for better control bindable with dictionary format. karaoke Use culture info instead of language id in translate. karaoke Change time tag from tuples to object.</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.1128/>2020.1128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 28, 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 Implement lyric importer to handle a list of steps need user to do in order. Code quality Clean-up code. karaoke Beatmap Create TimeTagsConverter to support to encode/decode time-tag with json format. karaoke Add language id in lyric object do define which laguage lyric is. karaoke Editor Implement lyric importer. Base implementation. karaoke Implement drag screen in lyric import. karaoke Add lyric editor&rsquo;s step two.</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><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></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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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 auto-detect language in the lyric importer. karaoke Create time-tags generator for Chinses lyrics. karaoke Improve time-tag generator for Japanese lyrics with ruby. karaoke Beatmap Implement Ruby and Romaji tag serializer, which allows to save them with better format. karaoke Implement tome tag serializer. karaoke Implement bindable dictionary for better control bindable with dictionary format. karaoke Use culture info instead of language id in translate. karaoke Change time tag from tuples to object.</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><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></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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 ce49534..13bfc0e 100644
--- a/page/6/index.html
+++ b/page/6/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2020.1107/>2020.1107</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 7, 2020</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/2020.1128/>2020.1128</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 28, 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 Implement lyric importer to handle a list of steps need user to do in order. Code quality Clean-up code. karaoke Beatmap Create TimeTagsConverter to support to encode/decode time-tag with json format. karaoke Add language id in lyric object do define which laguage lyric is. karaoke Editor Implement lyric importer. Base implementation. karaoke Implement drag screen in lyric import. karaoke Add lyric editor&rsquo;s step two.</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.1107/>2020.1107</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Nov 7, 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 Implement singer editor. Code quality Rename from LyricLine to Lyric. karaoke Save lists of singer index instead of font index in the lyric. karaoke Editor Implement drag .lrc/.kar file to import. karaoke Create import manager. karaoke Implement style editor karaoke Style editor can switch to edit between Lyric and Note. karaoke Implement singer editor, here&rsquo;s the demo video. Base implementation. karaoke Implement display 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/2020.1024/>2020.1024</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 24, 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 Create some basic edit areas. Got a new star and pull request. karaoke Code quality Running clean-up code script. karaoke Editor Let lyric maker&rsquo;s lyric draggable. karaoke Re-write translate editor. karaoke Re-write ruby/romaji editor. karaoke Skin Editor Re-write layout editor. karaoke Re-write style editor. 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.1010/>2020.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 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 \雙十節/ Become the first one to update the latest package version. Beatmap Define sub-singer. karaoke Enable to add singer in the beatmap. karaoke Enable to remove singer in the beatmap. karaoke Result Implement beatmap infos display on the result page. karaoke Implement beatmap metadata statistics on the result page. Implement not scorable graph. karaoke Implement saiten result component in the result page(haven&rsquo;t been fully implemented).</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.0926/>2020.0926</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 26, 2020</time>
@@ -15,5 +16,4 @@
 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><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.0718/>2020.0718</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 18, 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 Change the ruleset icon. karaoke Writing changelog. Blog Use special tags instead of typing GitHub URL. karaoke Code quality Update package and clean up code. karaoke Framework Update package and fix microphone crash issue. karaoke Gameplay Fix lyric not display in the right place. karaoke Skinning Not create bindable every time in KaraokeLegacySkinTransformer. karaoke Let lyric editor has its own skin.</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.0704/>2020.0704</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 4, 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 \Change organization name/ Use special tags to mark GitHub issue/pr and contribute user. karaoke Blog Use special tags instead of typing GitHub URL. github.io Beatmap Add try-catch to display error line with illegal beatmap format. karaoke Code quality Little clean-up code. karaoke Edge Update to latest ppy.osu.Game and edge branch can reture now. karaoke Editor Add zoom-in and zoom-out in lyric maker.</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.0620/>2020.0620</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 20, 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 Might support convert UTAU/SynthV project into karaoke beatmap in future. karaoke Change organization and repo name. Blog Add branch introduce. Fix changelog crash by changing URL. edge Code quality Use JSON file instead of code to record conversion results. Edge Update edge branch into master. Mods Create karaoke singer mod to create replay by singer&rsquo;s voice(it&rsquo;s not stable now). karaoke Disable microphone in some mods.</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><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></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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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">Achievement \Change organization name/ Use special tags to mark GitHub issue/pr and contribute user. karaoke Blog Use special tags instead of typing GitHub URL. github.io Beatmap Add try-catch to display error line with illegal beatmap format. karaoke Code quality Little clean-up code. karaoke Edge Update to latest ppy.osu.Game and edge branch can reture now. karaoke Editor Add zoom-in and zoom-out in lyric maker.</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><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></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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 c179bcf..9a25cea 100644
--- a/page/7/index.html
+++ b/page/7/index.html
@@ -1,9 +1,10 @@
-<!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-04-06T00:00:00+0000"><meta name=modified content="2024-04-06T00:00:00+0000"><meta property="article:published_time" content="2024-04-06T00: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-06-15T00:00:00+0000"><meta name=modified content="2024-06-15T00:00:00+0000"><meta property="article:published_time" content="2024-06-15T00: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/2020.0606/>2020.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 2020</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/2020.0620/>2020.0620</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 20, 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 Might support convert UTAU/SynthV project into karaoke beatmap in future. karaoke Change organization and repo name. Blog Add branch introduce. Fix changelog crash by changing URL. edge Code quality Use JSON file instead of code to record conversion results. Edge Update edge branch into master. Mods Create karaoke singer mod to create replay by singer&rsquo;s voice(it&rsquo;s not stable now). karaoke Disable microphone in some mods.</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.0606/>2020.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 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 \Saiten system is much more stable now./ Update homepage. Blog Update homepage. Make change log ordered. Add discord link. Code quality Add beatmap extension to deal with duplicated logic. karaoke Gameplay Fix changelog crash caused by blog update. Framework Use NWaves package to deal with complex pitch algorithm. microphone-package Gameplay Hide scoring hud if beatmap is not scorable. edge Performance Improve saiten system to useable.</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.0522/>2020.0522</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 22, 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 Web version&rsquo;s changelog has been released \收到怒怒貼了/ Beatmap Add extension file to deal with duplicated logic. karaoke Blog Change log website has been released. For now, you don&rsquo;t need to open the lazer to see what&rsquo;s change any more. See website in karaoke-dev.github.io Code quality Clean up bad codes in some test cases. Gameplay Create karaoke ruleset&rsquo;s own HUD overlay. karaoke Skinning</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.0508/>2020.0508</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 8, 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 Now user can select a microphone device in the ruleset. Wearing n-hentai t-shirt to my office and nobody figures out anything weird. Code quality Clean-up some test case&rsquo;s bad code. karaoke karaoke Testing Most test case has its own namespace, will be easier to manage or add test cases. 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.0501/>2020.0501</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;May 1, 2020</time>
@@ -21,4 +22,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><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><a href=/page/6/>6</a></li><li class=active><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</a></li><li><a href=/changelog/2023.0507/ class="sidebar-recent__a p2">2023.0507</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><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><a href=/page/6/>6</a></li><li class=active><a href=/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><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.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><li><a href=/changelog/2023.0707/ class="sidebar-recent__a p2">2023.0707</a></li><li><a href=/changelog/2023.0606/ class="sidebar-recent__a p2">2023.0606</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 cf866b0..181e700 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-04-06T00: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-06-15T00: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