diff --git a/changelog/2024.0615/index.html b/changelog/2024.0615/index.html
index 2bc58eb..6475153 100644
--- a/changelog/2024.0615/index.html
+++ b/changelog/2024.0615/index.html
@@ -8,6 +8,6 @@
 <span class=single__info></span></div><ul class="single__tags caption"></ul></div><article class=single__contents data-dir=ltr data-ani=true><h2 id=achievement>Achievement</h2><ul><li>Able to save the beatmap for debug purpose.<br><img src=res/2024-06-15-12-07-51.png alt></li><li>Improve <code>recording time-tag</code> experiance in the lyric editor</li><li>Improve <code>create/remove time-tag</code> experiance in the lyric editor.</li><li>Add the <code>architecture test</code> for this project.</li><li>Start feeding this pet again.<br><img src=res/2024-06-15-11-59-12.png alt></li></ul><h2 id=arc>ARC</h2><ul><li>Add the <code>architecture test</code> for this project. <a href=#2232@andy840119>karaoke</a></li><li>Add more strict check about test assert usage and naming. <a href=#2234@andy840119>karaoke</a></li></ul><h2 id=beatmap>Beatmap</h2><ul><li>Lyric start/end time should be <code>nullable</code> if there&rsquo;s no time-tag with time in the lyric. <a href=#2221@andy840119>karaoke</a></li></ul><h2 id=code-quality>Code quality</h2><ul><li>Prevent using <code>*component = *namespace</code> as possible. <a href=#2240@andy840119>karaoke</a></li></ul><h2 id=editor>Editor</h2><ul><li><p>Fix note popover cannot pop-up in the main editor. <a href=#2011#2210@andy840119>karaoke</a></p></li><li><p>Should be able to save beatmap into json format in the editor. <a href=#2211#2212@andy840119>karaoke</a></p><blockquote><p>For debug purpose, still need to wait lazer provider official save/load method and official format.</p></blockquote></li><li><p>Refactor the import screen stack. <a href=#2215@andy840119>karaoke</a></p></li><li><p>Migrate the import lyric header to the new style. <a href=#2214#2216#2218@andy840119>karaoke</a><br><img src=res/2024-06-15-12-08-32.png alt></p></li><li><p>Implement the drawable for the time-tag object. <a href=#2226@andy840119>karaoke</a></p><blockquote><p>We need an drawable to show the time-tag staus like it&rsquo;s start or end time-tag, has time or not.
 And it has tooltip to display those infos as default.</p></blockquote></li><li><p>Improvement of time-tag recording mode in the lyric editor. <a href=#2207@andy840119>karaoke</a></p><blockquote><p>The main improvement is to let user easy to know which time-tag they are recording, and what&rsquo;s the next one.</p></blockquote><ul><li>Implement <code>drawable caret</code> to show how many time-tags in the character. <a href=#2219@andy840119>karaoke</a><br><img src=res/2024-06-15-11-18-04.png alt></li><li>Implement this cool tap area for the recording mode. <a href=#2222@andy840119>karaoke</a><br><img src=res/2024-06-15-11-20-35.png alt></li><li>Let the tap area able to show the time-tag amount in the focused lyric. <a href=#2223@andy840119>karaoke</a><br><img src=res/2024-06-15-11-21-48.png alt></li><li>Improve <code>recording timeline area</code>. For now, it&rsquo;s able to see the focused time-tag and which time-tag has no time. <a href=#2224@andy840119>karaoke</a><br><img src=res/2024-06-15-11-22-57.png alt></li></ul></li><li><p>Improve experiance for create/remove the time-tag in the lyric editor. <a href=#2225@andy840119>karaoke</a></p><blockquote><p>The main issue is that user might know how to create the time-tag if there&rsquo;s no UI, and there&rsquo;s no easy to konw how may time-tag is attached to the character.
 So we create the UI for time-tag visualization, and user is able to create/remove the time-tag by click the create button in the UI.
-Also, we adjust the flow to indicate user to create/remove the time-tag by keyborad because it&rsquo;s much more faster.</p></blockquote><ul><li><p>Able to create/remove the caret by UI. <a href=#2227@andy840119>karaoke</a></p><blockquote><p>I know it&rsquo;s ugly, but I&rsquo;m not good at UX ;_;</p></blockquote><p><img src=res/2024-06-15-11-33-55.png alt></p></li><li><p>Remove modify time tag mode because it&rsquo;s not that useful. <a href=#2239@andy840119>karaoke</a></p></li></ul></li><li><p>Use tab control for the edit step section in the lyric editor.</p><blockquote><p>So the header will be fixed at the top.</p></blockquote><ul><li>Re-write the header for the edit section. <a href=#2230#2236@andy840119>karaoke</a><br><img src=res/2024-06-15-11-45-52.png alt></li><li>Because tab control provide the bindable, so just use the bindable to get/set the current edit mode. <a href=#2237@andy840119>karaoke</a></li><li>Implement switch create type section. <a href=#2242@andy840119>karaoke</a><br><img src=res/2024-06-15-12-04-35.png alt></li><li>Remove the create/remove time-tag button in the toolbar because it&rsquo;s not useful. <a href=#2243@andy840119>karaoke</a><br><img src=res/2024-06-15-12-05-24.png alt></li></ul></li><li><p>Let the selection in the lyric editor use the tab control.</p><blockquote><p>All the single selection area in the lyric editor should use tab control.</p></blockquote><p><img src=res/2024-06-15-11-58-37.png alt></p><ul><li>Make switch sub-section component. <a href=#2241@andy840119>karaoke</a></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix lyric text might not display well at some cases. <a href=#2209@andy840119>karaoke</a></li><li>Small bug-fix. <a href=#2238@andy840119>karaoke</a></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0406/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0406</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.0831/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+Also, we adjust the flow to indicate user to create/remove the time-tag by keyborad because it&rsquo;s much more faster.</p></blockquote><ul><li><p>Able to create/remove the caret by UI. <a href=#2227@andy840119>karaoke</a></p><blockquote><p>I know it&rsquo;s ugly, but I&rsquo;m not good at UX ;_;</p></blockquote><p><img src=res/2024-06-15-11-33-55.png alt></p></li><li><p>Remove modify time tag mode because it&rsquo;s not that useful. <a href=#2239@andy840119>karaoke</a></p></li></ul></li><li><p>Use tab control for the edit step section in the lyric editor.</p><blockquote><p>So the header will be fixed at the top.</p></blockquote><ul><li>Re-write the header for the edit section. <a href=#2230#2236@andy840119>karaoke</a><br><img src=res/2024-06-15-11-45-52.png alt></li><li>Because tab control provide the bindable, so just use the bindable to get/set the current edit mode. <a href=#2237@andy840119>karaoke</a></li><li>Implement switch create type section. <a href=#2242@andy840119>karaoke</a><br><img src=res/2024-06-15-12-04-35.png alt></li><li>Remove the create/remove time-tag button in the toolbar because it&rsquo;s not useful. <a href=#2243@andy840119>karaoke</a><br><img src=res/2024-06-15-12-05-24.png alt></li></ul></li><li><p>Let the selection in the lyric editor use the tab control.</p><blockquote><p>All the single selection area in the lyric editor should use tab control.</p></blockquote><p><img src=res/2024-06-15-11-58-37.png alt></p><ul><li>Make switch sub-section component. <a href=#2241@andy840119>karaoke</a></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix lyric text might not display well at some cases. <a href=#2209@andy840119>karaoke</a></li><li>Small bug-fix. <a href=#2238@andy840119>karaoke</a></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0406/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0406</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.1201/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
 <span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#arc>ARC</a></li><li><a href=#beatmap>Beatmap</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#fix>Fix</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
 <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/2024.0831/index.html b/changelog/2024.0831/index.html
index 0b62fc1..3c53ea8 100644
--- a/changelog/2024.0831/index.html
+++ b/changelog/2024.0831/index.html
@@ -9,6 +9,6 @@
 <img src=res/2024-08-28-21-04-06.png alt></li><li>[outdated] Let user able to adjust time-tag time precisely. <a href=#604@andy840119>karaoke</a></li><li>[outdated] Implement tap area in the recording mode. <a href=#1143@andy840119>karaoke</a></li><li>[outdated] Fix cannot import the lyric due to missing depenedency <a href=#1510@andy840119>karaoke</a><blockquote><p>Not very sure but i guess it should be fixed.</p></blockquote></li><li>[rejected] Let user able to drag to change the time-tag index. <a href=#1168#1447@andy840119>karaoke</a><blockquote><p>It might let user feel confused. Just delete the time-tag and re-create one.</p></blockquote></li><li>[outdated] Add test case for the change handler that will modify the property in the karaoke metadata(e.g. translation or singer info) <a href=#1122@andy840119>karaoke</a></li><li>[outdated] Create the toolbar that able to show the move caret action in the compse mode in the lyric editor. <a href=#1974@andy840119>karaoke</a></li><li>[outdated] Implement page (or maybe called breath) edit mode in the lyric editor. <a href=#1766@andy840119>karaoke</a><blockquote><p>Implemented, but might not be open that soom. Can just ignore this editor.</p></blockquote></li><li>[outdated] Fix some issues in the lyric import screen. <a href=#1257@andy840119>karaoke</a><blockquote><p>This should be fixed i think.</p></blockquote></li><li>[outdated] Move LyricCheckerManager for lyric editor only? <a href=#1030@andy840119>karaoke</a><blockquote><p>It&rsquo;s named <code>LyricEditorVerifier</code> or <code>PageEditorVerifier</code> (by different screen)
 And it&rsquo;s belongs to it&rsquo;s own editor.</p></blockquote></li><li>[outdated] Implement new area to batch adjust the lyric start/end time. <a href=#1252@andy840119>karaoke</a><blockquote><p>This issue can be closed because lyric&rsquo;s start/end time is affected by stage.
 If the classic stage is created, it should be possible to adjust the time.</p></blockquote></li><li>[outdated] Use <code>SettingSource</code> in some editor or generator config. <a href=#1211@andy840119>karaoke</a><blockquote><p>Implemented in the <a href=https://github.com/karaoke-dev/karaoke/pull/1871>#1871</a> and <a href=https://github.com/karaoke-dev/karaoke/pull/1873>#1873</a></p></blockquote></li></ul></li></ul><h2 id=fix>Fix</h2><ul><li>Fix ruby blueprint has select issue in the lyric editor. <a href=#2259#2260@andy840119>karaoke</a></li><li>Replace all the <code>.lrc</code> file support to <code>.kar</code> by following the <code>LrcParser</code> changes <a href=#2231#2268@andy840119>karaoke</a></li></ul><h2 id=gameplay>Gameplay</h2><ul><li>Time to close old issues<ul><li>[outdated] Hide <code>ruby</code>/<code>romaji</code>/<code>translate</code> config if the user hides them? <a href=#853@andy840119>karaoke</a><blockquote><p>It&rsquo;s possible to hide them via mod.</p></blockquote></li></ul></li></ul><h2 id=uiux>UI/UX</h2><ul><li>Time to close old issues<ul><li>[outdated] Font selection improvement. <a href=#804@andy840119>karaoke</a>
-<img src=res/2024-08-28-21-03-02.png alt></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0615/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0615</div></a><div class=grow></div></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+<img src=res/2024-08-28-21-03-02.png alt></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.1201/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0831</div></a><div class=grow></div></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
 <span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#beatmap>Beatmap</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#fix>Fix</a></li><li><a href=#gameplay>Gameplay</a></li><li><a href=#uiux>UI/UX</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
 <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/2024.1201/index.html b/changelog/2024.1201/index.html
new file mode 100644
index 0000000..34a5b52
--- /dev/null
+++ b/changelog/2024.1201/index.html
@@ -0,0 +1,16 @@
+<!doctype html><html lang=en dir=ltr><head prefix="og: http://ogp.me/ns#"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="IE=edge"><title>2024.0831 – karaoke --dev</title><script src=/js/enquire.min.dfb99dee1e029d51d6cfb672d847929890b1585402de17f5ed092edd72a688b4.js></script><script defer src=/js/lazysizes.min.fb649fcae62177dfe63e67081ddceb830b5ce1f05a4184e9bbb7d87ac4b8f4e5.js></script><script defer src=/js/helper/getParents.min.ccd45f158c1b17849307ba913a72beac239c410f2b6e648496a79842da84e55b.js></script><script defer src=/js/helper/fadeinout.min.1d13d3e810c3940e80cbba6216a1c76fbf42b5431fc83537ea6997863802362b.js></script><script defer src=/js/helper/closest.min.js></script><script>"use strict";window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),String.prototype.includes||(String.prototype.includes=function(b,a){'use strict';if(b instanceof RegExp)throw TypeError('first argument must not be a RegExp');return a===void 0&&(a=0),this.indexOf(b,a)!==-1}),Document.prototype.append=Element.prototype.append=function(){this.appendChild(_mutation(arguments))};function _mutation(a){if(!a.length)throw new Error('DOM Exception 8');if(a.length===1)return typeof a[0]=='string'?document.createTextNode(a[0]):a[0];for(var c=document.createDocumentFragment(),e=a.length,d=-1,b;++d<e;)b=a[d],c.appendChild(typeof b=='string'?document.createTextNode(b):b);return c}String.prototype.startsWith||(String.prototype.startsWith=function(b,a){return a=a||0,this.indexOf(b,a)===a}),document.addEventListener('DOMContentLoaded',function(){var z=document.querySelector('.navbar__burger'),J,F,G,N,U,f,d,V,r,ae,Z,Q,o,g,y,k,b,s,t,P,O,e,C,h,D,B,ai,A,aj,at,ar,ab,aq,E,ap,ao,ah,an,i,j,c,am,S,T,ak,w,W,X,ag,x,n,Y,q,av,au,a,aw,R,m,L,K,I,v,p,u;z?z.addEventListener('click',function(c){var a=document.querySelector('.navbarm__collapse'),b;a&&(b=a.getAttribute('data-open'),b==='true'?(a.setAttribute('data-open','false'),a.style.maxHeight=0,z.classList.remove('is-active')):(a.setAttribute('data-open','true'),a.style.maxHeight=a.scrollHeight+"px",z.classList.add('is-active')))}):null,J=document.querySelectorAll('.single__contents > table');for(let a=0;a<J.length;a++)F=J[a],G=document.createElement('div'),G.className='table-wrapper',F.parentElement.replaceChild(G,F),G.appendChild(F);N=document.querySelectorAll('.footnote-ref'),U=document.querySelectorAll('.footnote-backref'),N?N.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,U?U.forEach(function(a,c){a.onmouseenter=function(){b.classList.contains('scrolling')&&b.classList.remove('scrolling')},a.onmouseleave=function(){b.classList.contains('scrolling')||setTimeout(function(){b.classList.add('scrolling')},100)},a.onclick=function(){b.classList.contains('scrolling')||(b.classList.remove('navbar--show'),b.classList.remove('navbar--hide'),b.classList.add('navbar--hide'))}}):null,f=document.querySelector('.summary__container'),d=document.querySelector('.search-result'),V=document.querySelector('.search-result__close'),V?V.addEventListener('click',function(a){d.setAttribute('data-display','none'),f.setAttribute('data-display','block')}):null,document.querySelectorAll('.tab')?document.querySelectorAll('.tab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.tab__link'),c=a.querySelectorAll('.tab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,document.querySelectorAll('.codetab')?document.querySelectorAll('.codetab').forEach(function(a,d){var e=a.getAttribute('id'),f=a,b=a.querySelectorAll('.codetab__link'),c=a.querySelectorAll('.codetab__content'),g=[];b&&b.length>0?b.forEach(function(b,d,a){b.onclick=function(e){for(var b=0;b<a.length;b++)d===parseInt(b,10)?a[b].classList.contains('active')||(a[b].classList.add('active'),c[b].style.display='block'):(a[b].classList.remove('active'),c[b].style.display='none')}}):null}):null,r=document.getElementById("gtt"),r.style.display="none",r.addEventListener('click',function(){window.document.documentMode?document.documentElement.scrollTop=0:af(250)});function af(a){var b=-window.scrollY/(a/15),c=setInterval(function(){window.scrollY!=0?window.scrollBy(0,b):clearInterval(c)},15)}ae=function(){document.body.scrollTop>250||document.documentElement.scrollTop>250?r.style.display="block":r.style.display="none"},Z=document.querySelectorAll('.expand__button');for(let a=0;a<Z.length;a++)Z[a].addEventListener("click",function(){var a=this.nextElementSibling;a.style.maxHeight?(a.style.maxHeight=null,this.querySelector('svg').classList.add('expand-icon__right'),this.querySelector('svg').classList.remove('expand-icon__down')):(a.style.maxHeight=a.scrollHeight+"px",this.querySelector('svg').classList.remove('expand-icon__right'),this.querySelector('svg').classList.add('expand-icon__down'))});Q=window.pageYOffset||document.documentElement.scrollTop,o=document.querySelector('.toc'),g=o?o.querySelector('#TableOfContents'):null,y=document.getElementById('toggle-toc'),k=document.querySelector('.single__contents'),b=document.querySelector('.navbar'),s=document.querySelector('.toc__flexbox'),t=document.querySelector('.toc__flexbox--outer'),P=document.querySelectorAll('.expand__content'),O=document.querySelectorAll('.box'),e=null,C=JSON.parse("true"),h=JSON.parse('["h2","h3","h4"]'),h?h=h.toString():h="h1, h2, h3, h4, h5, h6",k&&k.querySelectorAll(".tab")?k.querySelectorAll(".tab").forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,P?P.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,O?O.forEach(function(a){a.querySelectorAll(h).forEach(function(a){e=Array.isArray(e)?e.concat(a.getAttribute('id')):[a.getAttribute('id')]})}):null,window.onscroll=function(){ae();var a=window.pageYOffset||document.documentElement.scrollTop;if(a>Q){if(a<250?r.style.display="none":r.style.display="block",a<45)return null;b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.contains('navbar--show')&&b.classList.remove('navbar--show'):b.classList.add('navbar--hide')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&(s.setAttribute('data-position',''),s.classList.contains('hide')||s.classList.add('hide')),t&&(t.setAttribute('data-position',''),t.classList.contains('hide')||t.classList.add('hide'))))}else a<250&&(r.style.display="none"),b.classList.contains('scrolling')&&(b.classList.contains('navbar--hide')?b.classList.remove('navbar--hide'):b.classList.contains('navbar--show')||b.classList.add('navbar--show')),k&&(k.querySelectorAll(h).length>0?k.querySelectorAll(h).forEach(function(c){var b,a;if(y&&!y.checked)return null;if(e&&e.includes(c.getAttribute('id')))return null;document.documentElement.scrollTop>=c.offsetTop&&g&&(b=c.getAttribute('id'),o.querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),o.querySelector('a[href="#'+b+'"]')?o.querySelector('a[href="#'+b+'"]').classList.add('active'):null,!1===C||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),a=g.querySelector("[href='#"+b+"']"),a&&a.nextElementSibling&&(a.nextElementSibling.style.display='block'),getParents(a,'ul')?getParents(a,'ul').forEach(function(a){a.style.display='block'}):null)}):(s&&!s.classList.contains('hide')&&s.classList.add('hide'),t&&!t.classList.contains('hide')&&t.classList.add('hide'))),g&&document.documentElement.scrollTop<250&&(!1===C||(g.querySelector('ul')?g.querySelector('ul').querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})}):null));Q=a<=0?0:a},D=localStorage.getItem('theme'),B=document.getElementById('root'),ai=document.querySelectorAll('.select-theme'),A=document.querySelectorAll('.select-theme__item'),aj=JSON.parse('"dark"'),at=JSON.parse('"light"'),ar=JSON.parse('"hacker"'),ab=JSON.parse('"solarized"'),aq=JSON.parse('"kimbie"'),E=function(a){var b=document.getElementsByName('msapplication-TileColor')[0],c=document.getElementsByName('theme-color')[0],d=document.getElementsByName('msapplication-navbutton-color')[0],e=document.getElementsByName('apple-mobile-web-app-status-bar-style')[0];a.includes('dark')?(b.setAttribute('content','#fcfcfa'),c.setAttribute('content','#403E41'),d.setAttribute('content','#403E41'),e.setAttribute('content','#403E41')):a.includes('light')?(b.setAttribute('content','#555'),c.setAttribute('content','#eee'),d.setAttribute('content','#eee'),e.setAttribute('content','#eee')):a.includes('hacker')?(b.setAttribute('content','#e3cd26'),c.setAttribute('content','#252526'),d.setAttribute('content','#252526'),e.setAttribute('content','#252526')):a.includes('solarized')?(b.setAttribute('content','#d3af86'),c.setAttribute('content','#51412c'),d.setAttribute('content','#51412c'),e.setAttribute('content','#51412c')):a.includes('kimbie')&&(b.setAttribute('content','#586e75'),c.setAttribute('content','#eee8d5'),d.setAttribute('content','#eee8d5'),e.setAttribute('content','#eee8d5'))},ap=function(a){if(a===aj)return'dark';if(a===at)return'light';if(a===ar)return'hacker';if(a===ab)return'solarized';if(a===aq)return'kimbie'},D?(A?A.forEach(function(a){a.text.trim()===D?a.classList.add('is-active'):a.classList.remove('is-active')}):null,E(D)):E(B.className),A?A.forEach(function(a,b){a.addEventListener('click',function(c){var a=ap(c.target.text.trim()),b,d;localStorage.setItem('theme',a),E(a),B.removeAttribute('class'),B.classList.add('theme__'+a),ai.forEach(function(b){b.querySelectorAll('a').forEach(function(b){b.classList&&(b.text.trim()===a?b.classList.contains('is-active')||b.classList.add('is-active'):b.classList.contains('is-active')&&b.classList.remove('is-active'))})}),window.mermaid&&(a==="dark"||a==="hacker"?(mermaid.initialize({theme:'dark'}),location.reload()):(mermaid.initialize({theme:'default'}),location.reload())),b=document.getElementById('utterances'),b&&b.querySelector('iframe').contentWindow.postMessage({type:'set-theme',theme:a==="dark"||a==="hacker"?'photon-dark':a==='kimbie'?'github-dark-orange':'github-light'},'https://utteranc.es'),d=document.querySelectorAll('.twitter-timeline'),d&&window.postMessage({type:'set-twitter-theme',theme:a==='light'||a==='solarized'?'light':'dark'})})}):null,ao=JSON.parse('"https://blog.karaoke.dev/"'),ah=JSON.parse('"https://blog.karaoke.dev/changelog/2024.1201/"'),an=JSON.parse('""'),i=null,j=null,c=null,am=JSON.parse("null"),S=JSON.parse("null"),T=JSON.parse("null"),ak=JSON.parse("null"),w=JSON.parse("null"),W=JSON.parse("null"),X=JSON.parse('"changelog"'),ag=JSON.parse('"page"'),x=null,am&&function(){var a=new XMLHttpRequest;X==="publication"&&ag!=="page"?a.open('GET',ah+"index.json"):a.open('GET',ao+an+"/index.json"),a.setRequestHeader('Content-Type','application/json; charset=utf-8'),a.onload=function(){a.status===200?(x=new Fuse(JSON.parse(a.response.toString('utf-8')),{keys:X.includes('publication')?['title','abstract']:ak?['title','description','content']:['title','description'],includeMatches:w,shouldSort:!0,threshold:T||.4,location:0,distance:S||100,maxPatternLength:32,minMatchCharLength:1,isCaseSensitive:!1,findAllMatches:!1,useExtendedSearch:!1}),window.fuse=x):console.error('['+a.status+']Error:',a.statusText)},a.send()}();function ac(e,a){var b=document.createElement('li'),c,d;b.className='search-result__item',c=document.createElement('a'),c.innerHTML=a.item.title,c.setAttribute('class','search-result__item--title'),c.setAttribute('href',a.item.uri),d=document.createElement('div'),d.setAttribute('class','search-result__item--desc'),a.item.description?d.innerHTML=a.item.description:a.item.content&&(d.innerHTML=a.item.content.substring(0,225)),b.appendChild(c),b.appendChild(d),e.appendChild(b)}function al(f,a){var e=document.createElement('li'),b,d,c;if(e.className='search-result__item',b=null,d=document.createElement('a'),d.innerHTML=a.item.title,d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri),a.matches&&a.matches.length){for(c=0;c<a.matches.length;c++)'title'===a.matches[c].key&&(d=document.createElement('a'),d.innerHTML=l(a.matches[c].value,a.matches[c].indices),d.setAttribute('class','search-result__item--title'),d.setAttribute('href',a.item.uri)),'description'===a.matches[c].key?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.description,a.matches[c].indices)):'content'===a.matches[c].key?b||(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=l(a.item.content.substring(0,150),a.matches[c].indices)):a.item.description?(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.description):(b=document.createElement('div'),b.setAttribute('class','search-result__item--desc'),b.innerHTML=a.item.content.substring(0,150));e.appendChild(d),b&&e.appendChild(b),e&&f.appendChild(e)}}function H(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var e=document.createElement('li'),c=document.createElement('a'),f,d;c.setAttribute('href',b.uri),c.setAttribute('class','dropdown-item'),c.appendChild(e),f=document.createElement('div'),f.innerHTML=b.title,f.setAttribute('class','menu-item__title'),d=document.createElement('div'),d.setAttribute('class','menu-item__desc'),b.description?d.innerHTML=b.description:b.content&&(d.innerHTML=b.content.substring(0,150)),e.appendChild(f),e.appendChild(d),a.appendChild(c)}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function $(d,c){var a,b;for(i=document.getElementById('search-results'),j=document.getElementById('search-menu'),i.setAttribute('class','dropdown is-active'),a=document.createElement('ul'),a.setAttribute('class','dropdown-content search-content'),c.length?c.forEach(function(b){var g=document.createElement('li'),e=document.createElement('a'),c=null,f,d;if(e.setAttribute('href',b.item.uri),e.setAttribute('class','dropdown-item'),e.appendChild(g),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','menu-item__title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','menu-item__desc'),c.innerHTML=b.item.content.substring(0,150));g.appendChild(f),c&&g.appendChild(c),a.appendChild(e)}}):(b=document.createElement('li'),b.setAttribute('class','dropdown-item'),b.innerText='No results found',a.appendChild(b));j.hasChildNodes();)j.removeChild(j.lastChild);j.appendChild(a)}function _(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length>0?c.forEach(function(b){var c=document.createElement('a');c.setAttribute('href',b.uri),c.innerHTML='<div class="mobile-search__item"><div class="mobile-search__item--title">📄 '+b.title+'</div><div class="mobile-search__item--desc">'+(b.description?b.description:b.content)+'</div></div>',a.appendChild(c)}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function ad(e,c){var a,d;i=document.getElementById('search-mobile-results'),a=document.createElement('div'),a.setAttribute('class','mobile-search__content'),c.length?c.forEach(function(b){var e=document.createElement('li'),g=document.createElement('a'),c=null,f,d;if(g.setAttribute('href',b.item.uri),g.appendChild(e),e.setAttribute('class','mobile-search__item'),f=document.createElement('div'),f.innerHTML=b.item.title,f.setAttribute('class','mobile-search__item--title'),b.matches&&b.matches.length){for(d=0;d<b.matches.length;d++)'title'===b.matches[d].key&&(f.innerHTML=l(b.matches[d].value,b.matches[d].indices)),'description'===b.matches[d].key?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.description,b.matches[d].indices)):'content'===b.matches[d].key?c||(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=l(b.item.content.substring(0,150),b.matches[d].indices)):b.item.description?(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.description):(c=document.createElement('div'),c.setAttribute('class','mobile-search__item--desc'),c.innerHTML=b.item.content.substring(0,150));e.appendChild(f),c&&e.appendChild(c),a.appendChild(g)}}):(d=document.createElement('span'),a.appendChild(d));let b=document.getElementById('search-mobile-results');while(b.firstChild)b.removeChild(b.firstChild);i.appendChild(a)}function l(a,d){if(!d)return a;var b='',c=0;return d.forEach(function(d){if(d[0]===d[1])return null;b+=''+a.substring(c,d[0])+'<span class="search__highlight">'+a.substring(d[0],d[1]+1)+'</span>'+'',c=d[1]+1}),b+=a.substring(c),b}n=document.getElementById('search'),Y=document.getElementById('search-mobile'),q=document.getElementById('search-results'),n?n.addEventListener('input',function(b){var a,e;if(!b.target.value|window.innerWidth<770)return q?q.setAttribute('class','dropdown'):null,d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),e=q.querySelectorAll('.dropdown-item'),e?e.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,n?n.addEventListener('blur',function(){if(window.innerWidth<770)return null;q?q.setAttribute('class','dropdown'):null}):null,n?n.addEventListener('click',function(b){var a,d;if(window.innerWidth<770)return null;if(!b.target.value)return q?q.setAttribute('class','dropdown'):null,null;c=b.target.value,a=x.search(b.target.value),W==="main"?w?aa(c,a):M(c,a):(w?$(c,a):H(c,a),d=q.querySelectorAll('.dropdown-item'),d?d.forEach(function(a){a.addEventListener('mousedown',function(a){a.target.click()})}):null)}):null,av=document.getElementById("search-menu"),au=document.querySelector('#search-menu .dropdown-item.is-active'),a=null,aw=null,R=350,n?n.addEventListener('keydown',function(c){var b,e;if(window.innerWidth<770)return null;if(c.key==='Escape'&&(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b=document.querySelectorAll('#search-menu .dropdown-item'),e=c.which||c.keyCode,!b||!b.length)return null;if(c.key==='ArrowDown'||e===40){a===null?(a=0,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===b.length-1?0:a+1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c>0?document.querySelector(".search-content").scrollTop+=b[a].getBoundingClientRect().height:a===0&&(document.querySelector(".search-content").scrollTop=0)}else if(c.key==='ArrowUp'||e===38){a===null?(a=b.length-1,b[a].classList.remove('is-active')):(b[a].classList.remove('is-active'),a=a===0?b.length-1:a-1),b[a].classList.add('is-active');let c=b[a].offsetTop+b[a].clientHeight-R;c<0?document.querySelector(".search-content").scrollTop-=b[a].getBoundingClientRect().height:document.querySelector(".search-content").scrollTop=c+b[a].getBoundingClientRect().height}else c.key==='Enter'||e===13?b[a]&&b[a].getAttribute('href')&&(location.href=b[a].getAttribute('href')):(c.key==='Escape'||e===27)&&(c.target.value=null,i&&i.classList.remove('is-active'))}):null,Y?Y.addEventListener('input',function(a){if(!a.target.value){let a=document.getElementById('search-mobile-results');while(a.firstChild)a.removeChild(a.firstChild);return null}c=a.target.value;var b=x.search(a.target.value);_(c,b),w?ad(c,b):_(c,b)}):null,m=document.querySelector('#search-mobile'),L=document.querySelector('.mobile-search'),K=document.querySelectorAll('.navbar-search'),I=document.querySelector('#search-mobile-close'),v=document.querySelector('#search-mobile-container'),p=document.querySelector('#search-mobile-results'),u=document.querySelector('html'),L&&(L.style.display='none'),K?K.forEach(function(a,b){a.addEventListener('click',function(){v&&(v.style.display='block'),m&&m.focus(),u&&(u.style.overflowY='hidden')})}):null,I?I.addEventListener('click',function(){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}):null,m?m.addEventListener('keydown',function(a){var b=a.which||a.keyCode;if(a.key==='Escape'||b===27){if(v&&(v.style.display='none'),m&&(m.value=''),p)while(p.firstChild)p.removeChild(p.firstChild);u&&(u.style.overflowY='visible')}}):null;function M(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){ac(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}function aa(e,a){var g=document.querySelector('.search-result__body'),b=g.querySelector('ul'),c=document.createElement('ul');e?a&&a&&a.length&&(a.forEach(function(a){al(c,a)}),d?d.setAttribute('data-display','block'):null,f?f.setAttribute('data-display','none'):null):(d?d.setAttribute('data-display','none'):null,f?f.setAttribute('data-display','block'):null),b.parentNode.replaceChild(c,b)}})</script><link rel=stylesheet href=/css/main.min.css><meta name=description content><meta name=created content="2024-08-31T00:00:00+0000"><meta name=modified content="2024-08-31T00:00:00+0000"><meta property="article:published_time" content="2024-08-31T00:00:00+0000"><meta property="og:site_name" content="karaoke --dev"><meta property="og:title" content="2024.0831"><meta property="og:url" content="https://blog.karaoke.dev/changelog/2024.1201/"><meta property="og:type" content="article"><meta property="og:description" content><meta name=generator content="Hugo 0.83.1"><meta name=msapplication-TileColor content="#fff"><meta name=theme-color content="#fff"><meta name=msapplication-navbutton-color content="#fff"><meta name=apple-mobile-web-app-status-bar-style content="#fff"><link rel=canonical href=https://blog.karaoke.dev/changelog/2024.1201/><link rel=manifest href=/manifest.json><link rel="shortcut icon" href=/favicon.ico type=image/x-icon><link rel=icon href=/favicon.png sizes=any type=image/png><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebPage","headline":"2024.0831","datePublished":"2024-08-31T00:00:00Z","dateModified":"2024-08-31T00:00:00Z","url":"https://blog.karaoke.dev/changelog/2024.1201/","description":"Achievement  Re-implement the stage system.  Use command to adjust the lyric\u0026rsquo;s transformer like how storyboard did. Separate the stage from the beatmap.   Planning …","mainEntityOfPage":{"@type":"WebPage","@id":"https://blog.karaoke.dev/"},"publisher":{"@type":"Organization","name":"karaoke --dev","url":"https://blog.karaoke.dev/"}}</script></head><body id=root class=theme__dark><script>var localTheme=localStorage.getItem('theme');localTheme&&(document.getElementById('root').className='theme__'+localTheme)</script><div id=container><div class=wrapper data-type=changelog data-kind=page><nav class="navbar scrolling" role=navigation aria-label="main navigation" data-dir=ltr><div class=navbar__brand><a href=/ title=Home rel=home class=navbar__logo-link><img src=/logo.png alt=Home class=navbar__logo></a>
+<a href=/ title=Home rel=home class=navbar__title-link><h6 class=navbar__title></h6></a></div><div class="theme theme-mobile" data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" style=position:absolute;top:0 data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
+<a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a role=button class=navbar__burger aria-label=menu aria-expanded=false data-ani=true><span aria-hidden=true></span><span aria-hidden=true></span><span aria-hidden=true></span></a><div class=navbarm__collapse data-open=false><ul dir=ltr><li class="navbarm__menu--item active"><a href=/changelog>Changelog</a></li><li class=navbarm__menu--item><a href=/how-to-install>How to install</a></li><li class=navbarm__menu--item><a href=/introduce>Introduce</a></li></ul></div><div class=navbar__menu><div class=theme data-ani=true><div class=dropdown><button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani=true><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M24 0H0v24h24V0z"/><path fill="currentcolor" d="M6.34 7.93c-3.12 3.12-3.12 8.19.0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19.0-11.31l-4.95-4.95c-.39-.39-1.02-.39-1.41.0L6.34 7.93zM12 19.59c-1.6.0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"/></svg></button><div class="dropdown-content select-theme"><a href=# class="dropdown-item select-theme__item is-active">dark</a>
+<a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
+<a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
+<a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="single__main main-main"><div class=single><div class=single__nojs>This page looks best with JavaScript enabled</div><script>document.querySelector('.single').classList.remove('hide'),document.querySelector('.single__nojs').classList.add('hide')</script><h2 class=single__title data-ani=true>2024.0831</h2><h3 class=single__subtitle></h3><div class=single__meta><div class=single__infos><time class=single__info title="Written At">📅&nbsp;Aug 31, 2024</time>
+&nbsp;&#183;&nbsp; <span class=single__info title="Reading Time">☕&nbsp;3&nbsp;min read</span>
+<span class=single__info></span></div><ul class="single__tags caption"></ul></div><article class=single__contents data-dir=ltr data-ani=true><h2 id=achievement>Achievement</h2><ul><li>Re-implement the stage system.<ul><li>Use command to adjust the lyric&rsquo;s transformer like how storyboard did.</li><li>Separate the stage from the beatmap.</li></ul></li><li>Planning 2-weeks december vacation.<ul><li>Stay at Osaka and Kyoto for few days and trying to servival.</li><li>Work few days at Tokyo.</li><li>Go to Comiket.</li><li>Give some weird meat a try.</li><li>Skiing for 5 days.</li></ul></li><li>Remember update the changelog.</li></ul><h2 id=blog>Blog</h2><ul><li>Add special badge at the start of the changelog item. <a href=#2279#2281@andy840119>karaoke</a>
+<img src=res/2024-12-01-08-24-24.png alt></li></ul><h2 id=code-quality>Code quality</h2><ul><li>Rename from &ldquo;language&rdquo; to &ldquo;translation&rdquo; in some classes. <a href=#2282@andy840119>karaoke</a></li><li>Regular clean-up code. <a href=#2288@andy840119>karaoke</a></li></ul><h2 id=editor>Editor</h2><ul><li>Add translation edit section to the editor. <a href=#2284@andy840119>karaoke</a>
+<img src=res/2024-12-01-08-26-09.png alt></li><li>Add karaoke-specific sections to setup screen. <a href=#836@andy840119>karaoke</a><ul><li>Separate singer and singer state into different list. <a href=#2289@andy840119>karaoke</a></li><li>Improve singer section. <a href=#2290@andy840119>karaoke</a></li></ul></li></ul><h2 id=gameplay>Gameplay</h2><ul><li>Fix note judgement cause exception. <a href=#2293#2295@andy840119>karaoke</a></li></ul><h2 id=stage>Stage</h2><p>Guess it&rsquo;s time to explain why changelog not update so long.<br>Before that, lets talking about what is <code>Stage</code> first.</p><p><code>Stage</code> is a system to give the effect to the lyric. For example:</p><p><a href=https://x.com/k_sukeo_/status/1412379617269219329><img src=res/2024-12-01-07-38-35.png alt></a>
+It&rsquo;s a very classic Japanese lyric arrangement.<br>It has usually 2~4 lines of lyric at the screen.<br>Each lyric can be padding to left/center/right.
+If the lyric is end, the next lyric will take over it&rsquo;s position immediately.</p><p><a href=https://support.apple.com/zh-tw/guide/music-web/apdm5e4a7164/web><img src=res/2024-12-01-07-41-30.png alt></a>
+And here&rsquo;s the lyric arrangement that apple music use.<br>The current lyric at the center, if the lyric is end, next lyric will move to the center to replace the old one.</p><p>In order to add more type of stage arrangement in the future. e.g., let user able to edit the lyric&rsquo;s position and appear/disappear time.<br>The stage system should be flexible.</p><p>And stage system should have those features:</p><ul><li>It can assign the lyric&rsquo;s actual Start/End time in the playfield.</li><li>Change the property in the lyric to adjust the position. e.g. Position, margin and padding.</li><li>Change the property in the lyric like drawable. e.g. Scale and alpha.</li><li>Add custom element to the playfield. e.g. beatmap info preview.</li><li>(TBD) Change lyric&rsquo;s font.</li><li>(TBD) Change lyric&rsquo;s shader effect.</li></ul><p>And <a href=https://app.affine.pro/workspace/40306a8a-6c73-4c99-a961-4f928980ef42/uso65AOQC3Hhn3Fs7wh8n>here&rsquo;s the system desing</a><br>Thanks to the affine, it&rsquo;s a open-source platform that able to write the doc and graph.
+<del>It has few bugs while undo/redo but still worth to give it a try.</del></p><p>And here&rsquo;s the milestone, the re-implement plan is tracked in <a href=https://github.com/karaoke-dev/karaoke/issues/2090>this issue</a></p><ul><li>M0 - Preparation<ul><li>Move the stage-related class from beatmap namespace into it&rsquo;s own namespace. <a href=#2089@andy840119>karaoke</a></li><li>Adjust the folder structure in the stage namespace. <a href=#2297@andy840119>karaoke</a></li><li>System desing for the new stage menegement system. <a href=#2244#2294@andy840119>karaoke</a></li></ul></li><li>M1 - Create the transformer command generator<blockquote><p>Before:<br>Implement the transformer action for different type of stage.<br>After:<br>Let stage generate transformer command, and provide the same command executer to execute all transformer command that generated from any type of stage.<br>Benefit:<br>Make the system more fiexible, and easier to maintain.</p></blockquote><ul><li>Create the command generator for the hit-object. <a href=#2296@andy840119>karaoke</a></li><li>Create the command generator for the playfield. <a href=#2303@andy840119>karaoke</a></li><li>Create the command generator for the create custom element in the gameplay. <a href=#2304@andy840119>karaoke</a></li></ul></li><li>M2 - Create the drawable stage environment<blockquote><p>It&rsquo;s a wrapper for able to provide the necessary resource for lyric/playfield.<br>e.g. DI that able to execute the transformer command.<br>Design is inspired from the <code>DrawableStoryboard</code> in lazer.</p></blockquote><ul><li>Create the drawable stage. <a href=#2301@andy840119>karaoke</a></li><li>Create the stage-related injections. <a href=#2296#2301@andy840119>karaoke</a></li></ul></li><li>M3 - Not provide state-related properties by the beatmap<blockquote><p>It&rsquo;s time to separate the stage system form the beatmap.</p></blockquote><ul><li>Able to control lyric&rsquo;s stage/end time by stage and drawable layer. <a href=#2298@andy840119>karaoke</a></li><li>Remove the old hit-object applier from the beatmap. <a href=#2301@andy840119>karaoke</a></li><li>emove the old playfield applier from the beatmap. <a href=#2303#2304@andy840119>karaoke</a></li></ul></li><li>M4 - Refactor<ul><li>Refactor the interface in the stage namespace. <a href=#2302@andy840119>karaoke</a></li><li>Remove the stage info list in the beatmap. <a href=#2305@andy840119>karaoke</a></li><li>Remove the current stage info in the beatmap. <a href=#2305@andy840119>karaoke</a></li></ul></li></ul></article><script defer src=/js/clipboard.min.1626706afc88d95ebe1173b553ec732c6dc82a576989315fdf5e7779af738a44.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script>'use strict';document.addEventListener('DOMContentLoaded',function(){var a=!1,b=document.querySelectorAll('pre.chroma'),c=document.querySelectorAll('.language-code'),d=document.querySelectorAll('div.language-\\$'),e=document.querySelectorAll('div.language-\\>'),f=function(c){var k=c,b=c.textContent,j,g,h,i,d,f,e;if(b.length>15){a||(j=new ClipboardJS('.copy-to-clipboard',{text:function(a){var c=prev(a).querySelectorAll('code');return c.length>1?b=prev(a).querySelector('code[class^="language-"]').textContent:b=prev(a).querySelector('code').textContent,b.replace(/^\$\s/gm,'')}}),j.on('success',function(a){a.clearSelection(),g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label','Copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),j.on('error',function(a){g=prop(a.trigger.parentNode,'tagName')=='PRE',a.trigger.setAttribute('aria-label',a.action.toString()),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-w')}),a=!0),h=['language-mermaid','language-viz','language-wave','language-chart','language-msc','language-flowchart'],i=!1,d=k.getAttribute('class');for(f=0;f<h.length;f++)if(d&&d.startsWith(h[f])){i=!0;break}i||d&&(e=document.createElement('span'),e.setAttribute('class','copy-to-clipboard'),e.setAttribute('title','Copy to clipboard'),c.parentNode.parentNode.insertBefore(e,c.parentNode.nextElementSibling))}},g=function(b){var a=document.createElement('span');a.setAttribute('class','copy-to-clipboard'),a.setAttribute('title','Copy to clipboard'),b.parentNode.parentNode.insertBefore(a,b.parentNode.nextElementSibling)};b?b.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,c?c.forEach(function(a){a.querySelectorAll('code').forEach(function(a){f(a)})}):null,d?d.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null,e?e.forEach(function(a){a.querySelectorAll('code').forEach(function(a){g(a)})}):null})</script><script>'use strict';var langCodeElem,dollarCodeElem,gtCodeElem;function wrap(a,b){a.parentNode.insertBefore(b,a),b.appendChild(a)}(function(){var a=document.querySelector('.single__contents');a?a.querySelectorAll('pre > code').forEach(function(b){var a=b.getAttribute('data-lang'),c=document.createElement('div'),e=null,d=null;a&&a.includes(':')?(e=a.split(':')[0],d=a.split(':')[1],c.className='language-'+e,c.setAttribute('data-lang',d),b.className='language-'+e,b.setAttribute('data-lang',d),b.setAttribute('id',d)):a||(c.setAttribute('data-lang','Code'),c.className='language-code'),(!a||d)&&wrap(b.parentNode,c)}):null})(),langCodeElem=document.querySelectorAll('.language-code'),langCodeElem?langCodeElem.forEach(function(b){var a=document.createElement('span');a.className='copy-to-clipboard',a.setAttribute('title','Copy to clipboard'),b.append(a)}):null,dollarCodeElem=document.querySelectorAll('div.language-\\$'),gtCodeElem=document.querySelectorAll('div.language-\\>'),dollarCodeElem?dollarCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='$<br/>'}):null}):null,gtCodeElem?gtCodeElem.forEach(function(a){var b=a.parentNode.parentNode?a.parentNode.parentNode.querySelectorAll('.lnt'):null;b?b.forEach(function(a){a.innerHTML='><br/>'}):null}):null</script><section class=related></section><div class=grow></div><nav class=pagination-single><a href=https://blog.karaoke.dev/changelog/2024.0615/ class=pagination-single__left><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03.0-1.42s-1.02-.39-1.41.0l-6.59 6.59c-.39.39-.39 1.02.0 1.41l6.59 6.59c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L7.83 13H19c.55.0 1-.45 1-1s-.45-1-1-1z"/></svg></div><div class=pagination-single__left-title>2024.0615</div></a><div class=grow></div><a href=https://blog.karaoke.dev/changelog/2024.0831/ class=pagination-single__right><div class=pagination-single__right-title>2024.0831</div><div class=pagination-single__icon><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03.0 1.42.39.39 1.02.39 1.41.0l6.59-6.59c.39-.39.39-1.02.0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41.0s-.39 1.02.0 1.41L16.17 11H5c-.55.0-1 .45-1 1s.45 1 1 1z"/></svg></div></a></nav><div class="modal micromodal-slide" id=modal aria-hidden=true><div class=modal__overlay tabindex=-1 data-micromodal-close><div class=modal__container role=dialog aria-modal=true aria-labelledby=modal-title><div class=modal__content id=modal-content><div id=mySwipe class=swipe><div class=swipe-wrap></div></div></div><span class=modal__items><span class=modal__header><div class=modal__paging title="Page Info" aria-label="Current Page"></div><div class="modal__icon modal__toolbar modal__toolbar--close" title=Close aria-label="Close Button" data-micromodal-close><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="25" height="25"><path fill="currentcolor" d="M21.734375 19.640625l-2.097656 2.09375C19.253906 22.121094 18.628906 22.121094 18.242188 21.734375L13 16.496094 7.761719 21.734375C7.375 22.121094 6.746094 22.121094 6.363281 21.734375l-2.097656-2.09375c-.386719-.386718999999999-.386719-1.011719.0-1.398437L9.503906 13 4.265625 7.761719c-.382812-.390625-.382812-1.019531.0-1.398438L6.363281 4.265625C6.746094 3.878906 7.375 3.878906 7.761719 4.265625L13 9.507813l5.242188-5.242188c.386718000000002-.386719 1.015625-.386719 1.394531.0l2.097656 2.09375C22.121094 6.746094 22.121094 7.375 21.738281 7.761719L16.496094 13l5.238281 5.242188C22.121094 18.628906 22.121094 19.253906 21.734375 19.640625z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="25"><path fill="currentcolor" d="M5 3C3.9069372 3 3 3.9069372 3 5V8A1.0001 1.0001.0 105 8V5H8A1.0001 1.0001.0 108 3H5zM16 3a1.0001 1.0001.0 100 2h3V8a1.0001 1.0001.0 102 0V5C21 3.9069372 20.093063 3 19 3H16zM3.984375 14.986328A1.0001 1.0001.0 003 16v3c0 1.093063.9069372 2 2 2H8a1.0001 1.0001.0 100-2H5V16A1.0001 1.0001.0 003.984375 14.986328zm16 0A1.0001 1.0001.0 0019 16v3H16a1.0001 1.0001.0 100 2h3C20.093063 21 21 20.093063 21 19V16a1.0001 1.0001.0 00-1.015625-1.013672z"/></svg></div><div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="25" height="25"><path fill="currentcolor" d="M16.96875 4.972656C15.867188 4.988281 14.984375 5.894531 15 7v8H7C6.277344 14.988281 5.609375 15.367188 5.246094 15.992188 4.878906 16.613281 4.878906 17.386719 5.246094 18.007813 5.609375 18.632813 6.277344 19.011719 7 19H19V7C19.007813 6.460938 18.796875 5.941406 18.414063 5.558594 18.03125 5.175781 17.511719 4.964844 16.96875 4.972656zm16 0c-1.046875.015625-1.90625.839844-1.964844 1.886719C31 6.90625 31 6.953125 31 7V19H43C43.066406 19 43.132813 19 43.199219 18.992188 44.269531 18.894531 45.070313 17.972656 45.015625 16.902344 44.964844 15.828125 44.074219 14.988281 43 15H35V7C35.007813 6.460938 34.796875 5.941406 34.414063 5.558594 34.03125 5.175781 33.511719 4.964844 32.96875 4.972656zM7 31C6.277344 30.988281 5.609375 31.367188 5.246094 31.992188 4.878906 32.613281 4.878906 33.386719 5.246094 34.007813 5.609375 34.632813 6.277344 35.011719 7 35h8v8C14.988281 43.722656 15.367188 44.390625 15.992188 44.753906 16.613281 45.121094 17.386719 45.121094 18.007813 44.753906 18.632813 44.390625 19.011719 43.722656 19 43V31zm24 0V43C30.988281 43.722656 31.367188 44.390625 31.992188 44.753906 32.613281 45.121094 33.386719 45.121094 34.007813 44.753906 34.632813 44.390625 35.011719 43.722656 35 43V35h8C43.722656 35.011719 44.390625 34.632813 44.753906 34.007813 45.121094 33.386719 45.121094 32.613281 44.753906 31.992188 44.390625 31.367188 43.722656 30.988281 43 31z"/></svg></div></span><div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M23.28125 11 10 10V6.851563C10 6.523438 9.839844 6.277344 9.519531 6.03125 9.199219 5.949219 8.878906 5.949219 8.640625 6.113281c-3.28125 2.296875-6.402344 6.144532-6.480469 6.308594-.078125.15625-.152343.390625-.15625.554688000000001C2.003906 12.980469 2 12.988281 2 12.992188 2 13.15625 2.078125 13.402344 2.160156 13.484375 2.238281 13.648438 5.28125 17.507813 8.640625 19.804688 8.960938 19.96875 9.28125 20.050781 9.519531 19.886719 9.839844 19.722656 10 19.476563 10 19.148438V16l13.28125-1C23.679688 14.679688 24 13.875 24 12.992188 24 12.195313 23.761719 11.320313 23.28125 11z"/></svg></div><div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" width="28" height="28"><path fill="currentcolor" d="M2.71875 11.023438l13.28125-1V6.875C16 6.546875 16.160156 6.300781 16.480469 6.054688 16.800781 5.972656 17.121094 5.972656 17.359375 6.136719c3.28125 2.296875 6.402344 6.144531 6.480469 6.308594.078125.15625.152343999999999.390625.15625.554687C23.996094 13.003906 24 13.011719 24 13.015625 24 13.179688 23.921875 13.425781 23.839844 13.507813 23.761719 13.671875 20.71875 17.53125 17.359375 19.828125 17.039063 19.992188 16.71875 20.074219 16.480469 19.910156 16.160156 19.746094 16 19.5 16 19.171875V16.023438L2.71875 15.023438C2.320313 14.703125 2 13.898438 2 13.015625c0-.796875.238281-1.671875.71875-1.992187z"/></svg></div><div class=modal__caption><div class=modal__caption--text></div></div></span></div></div></div><script defer src=/js/swipe.min.989e074dfb92ce7f57a92c1df7027f88b53c50a54fd9ad450a673a64aa91bfa4.js></script><script defer src=/js/micromodal.min.de01b44b2f383056bbcaf6ee921fd385d79108ec1129afd0eb2f3f5a07e11f45.js></script><script defer src=/js/helper/fadeinout.min.js></script><script>document.addEventListener('DOMContentLoaded',function(){var d=document.documentElement,g,f,s,r,m,o,l,b,c,i,n,e,h,j,a,p,q;function t(){d.requestFullscreen?d.requestFullscreen():d.mozRequestFullScreen?d.mozRequestFullScreen():d.webkitRequestFullscreen?d.webkitRequestFullscreen():d.msRequestFullscreen&&d.msRequestFullscreen()}function k(){(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement)&&(document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen())}g=document.getElementById('modal'),f=document.querySelector('.gallery__container'),s=document.querySelector('.swipe-wrap'),r=document.getElementById('mySwipe'),m=document.querySelector('.modal__arrow--left'),o=document.querySelector('.modal__arrow--right'),l=document.querySelector('.modal__toolbar--close'),b=document.querySelector('.modal__toolbar--full'),c=document.querySelector('.modal__toolbar--normal'),i=document.querySelector('.modal__caption'),n=document.querySelector('.modal__paging'),e=document.querySelector('.modal__items'),h=null,j=null,a=null,p=function(b){b.key==='ArrowRight'?g&&g.classList.contains('is-open')&&a.next():b.key==='ArrowLeft'&&g&&g.classList.contains('is-open')&&a.prev()},f?h=f.querySelectorAll('img').length:(f=document.querySelector('.single__contents'),h=f.querySelectorAll('img').length),MicroModal.init({onClose:function(){a&&(a.kill(),a=null,k()),window.removeEventListener('keydown',p)},disableScroll:!0,disableFocus:!0,awaitOpenAnimation:!1,awaitCloseAnimation:!1,debugMode:!1}),q=function(a){return new Promise(function(c,d){var b=new Image;b.onload=function(){c(b)},b.onerror=d,b.src=a})},f.querySelectorAll('img').forEach(function(g,k){var f,d;g.style.cursor='pointer',f=g.cloneNode(!0),f.style.maxHeight='100%',f.style.maxWidth='100%',f.onclick=function(a){a.stopPropagation()},d=document.createElement('div'),d.style.width='100%',d.style.height='100vh',d.setAttribute('data-micromodal-close',''),d.onclick=function(){a&&(a.kill(),a=null)},d.onmouseenter=function(){clearTimeout(j),fadeIn(e,200)},d.onmouseleave=function(){j=setTimeout(function(){fadeOut(e,200)},2500)},d.ontouchstart=function(){fadeIn(e,200)},d.append(f),s.append(d),g.addEventListener('click',async function(d){var m,l,g;MicroModal.show('modal'),a&&(a.kill(),a=null),m=d.target.getAttribute('data-src')||d.target.getAttribute('src'),l=await q(m),f.style.width=l.width+'px',f.style.height=l.height+'px',a=new Swipe(r,{startSlide:k,draggable:!0,autoRestart:!1,continuous:!1,disableScroll:!0,stopPropagation:!0,callback:async function(d,f){var a=f.querySelector('img'),g=a.getAttribute('data-src')||a.getAttribute('src'),c=await q(g),b;a.style.width=c.width+'px',a.style.height=c.height+'px',i&&a&&(b=null,a.getAttribute('data-caption')?b=a.getAttribute('data-caption'):a.getAttribute('title')?b=a.getAttribute('title'):a.getAttribute('alt')?b=a.getAttribute('alt'):b=a.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=b,n.innerText=d+1+' / '+h,clearTimeout(j),fadeIn(e,200))}}),fadeIn(e),i&&(g=null,d.target.getAttribute('data-caption')?g=d.target.getAttribute('data-caption'):d.target.getAttribute('title')?g=d.target.getAttribute('title'):d.target.getAttribute('alt')?g=d.target.getAttribute('alt'):g=d.target.getAttribute('src'),i.querySelector('.modal__caption--text').innerText=g,n.innerText=k+1+' / '+h),c&&b&&(c.style.zIndex=-1,c.style.opacity=0,b.style.zIndex=25,b.style.opacity=1)}),window.addEventListener('keydown',p)}),m?m.addEventListener('click',function(b){a&&a.prev()}):null,o?o.addEventListener('click',function(b){a&&a.next()}):null,l?l.addEventListener('click',function(){a&&(a.kill(),a=null),k(),MicroModal.close('modal')}):null,b?b.addEventListener('click',function(a){t(),c&&(c.style.zIndex=25,c.style.opacity=1,b.style.zIndex=-1,b.style.opacity=0)}):null,c?c.addEventListener('click',function(a){k(),b&&(b.style.zIndex=25,b.style.opacity=1,c.style.zIndex=-1,c.style.opacity=0)}):null})</script><div class=hide></div></div></main><aside class="single__side main-side"><section class="sidebar hide"><script>document.querySelector('.sidebar').classList.remove('hide')</script><div class=toc__flexbox data-position=fixed><h6 class=toc__title data-ani=true>What's on this Page</h6><label class=switch data-ani=true><input id=toggle-toc aria-label="Toggle TOC" type=checkbox checked>
+<span class="slider round"></span></label></div><div class=toc data-dir=ltr data-folding=true data-ani=true><nav id=TableOfContents><ul><li><a href=#achievement>Achievement</a></li><li><a href=#blog>Blog</a></li><li><a href=#code-quality>Code quality</a></li><li><a href=#editor>Editor</a></li><li><a href=#gameplay>Gameplay</a></li><li><a href=#stage>Stage</a></li></ul></nav></div></section></aside><script>var enableToc=JSON.parse("true"),toc=JSON.parse("null"),tocPosition=JSON.parse('"inner"'),singleMainElem=document.querySelector('.single__main'),singleSideElem=document.querySelector('.single__side');enquire.register("screen and (max-width: 769px)",{match:function(){(enableToc||toc)&&tocPosition!=="outer"?singleMainElem&&singleSideElem&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main'),singleSideElem.classList.remove('main-side'),singleSideElem.classList.add('hide')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide'))},unmatch:function(){var b,a;(enableToc||toc)&&tocPosition!=="outer"?(singleMainElem.classList.remove('main'),singleMainElem.classList.add('main-main'),singleSideElem.classList.remove('hide'),singleSideElem.classList.add('main-side')):tocPosition==="outer"&&(singleMainElem&&!singleMainElem.classList.contains('main-main')&&(singleMainElem.classList.remove('main-main'),singleMainElem.classList.add('main')),singleSideElem&&!singleSideElem.classList.contains('hide')&&singleSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script defer src=/js/helper/getParents.min.js></script><script defer src=/js/helper/closest.min.js></script><script defer src=/js/helper/prev.min.js></script><script defer src=/js/helper/prop.min.js></script><script defer src=/js/helper/fadeinout.min.js></script><script defer src=/js/helper/throttle.min.js></script><script>'use strict';window.onload=function(){var f=document.querySelector('.navbar'),D=document.querySelector('.single__contents'),E=JSON.parse("null"),J=JSON.parse("null"),s,H,F,L,k,j,A,g,u,x,d,e,l,i,I,C,K,v,N,y,r,z,b,w,t,M,h,c,G,a,m,n,o,p,B,q;E&&J&&(s=document.querySelector('#busuanzi_value_page_pv'),s.textContent=s.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,")),H=JSON.parse("true"),F=JSON.parse("null"),L=JSON.parse("false"),k=document.querySelector('.toc__flexbox'),j=document.querySelector('.toc__flexbox--outer'),A=JSON.parse("true"),(H||F)&&document.querySelector('.toc')&&(g=document.querySelector('.toc').querySelector('#TableOfContents'),g.onmouseenter=function(){f.classList.contains('scrolling')&&f.classList.remove('scrolling')},g.onmouseleave=function(){f.classList.contains('scrolling')||f.classList.add('scrolling')},!1===A||(g.querySelectorAll('ul')?g.querySelectorAll('ul').forEach(function(a){a.querySelectorAll('li').forEach(function(a){a.querySelectorAll('ul').forEach(function(a){a.style.display='none'})})}):null),g&&(g.querySelectorAll('a').length>0?g.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){var c=a.getAttribute('id'),b;f.classList.contains('scrolling')||(f.classList.remove('navbar--show'),f.classList.remove('navbar--hide'),f.classList.add('navbar--hide')),document.querySelector('.toc').querySelectorAll('a').forEach(function(a){a.classList.remove('active')}),a.classList.add('active'),b=g.querySelector('[href="#'+c+'"]'),b&&b.nextElementSibling&&(b.nextElementSibling.style.display='block'),b&&(getParents(b,'ul')?getParents(b,'ul').forEach(function(a){a.style.display='block'}):null)})}):(k&&(k.setAttribute('data-position',''),k.classList.contains('hide')||k.classList.add('hide')),j&&(j.setAttribute('data-position',''),j.classList.contains('hide')||j.classList.add('hide')))),u=document.getElementById("toggle-toc"),x=document.getElementById('visible-toc'),d=document.querySelector('.toc'),e=document.querySelector('main'),l=document.querySelector('side'),i=document.querySelector('.toc__flexbox'),u?u.addEventListener('change',function(a){a.target.checked?(d&&fadeIn(d,200),i&&i.setAttribute('data-position','fixed'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main-main')),l&&l.classList.remove('main-side')):(d&&fadeOut(d,200),i&&i.setAttribute('data-position','absolute'),e&&(e.classList.remove('main-main'),e.classList.remove('main'),e.classList.add('main')),l&&l.classList.remove('main-side'))}):null,x?x.addEventListener('change',function(a){a.target.checked?d&&fadeIn(d,200):d&&fadeOut(d,200)}):null),I=120,C=70,K=function(){d&&(d.style.maxHeight=window.innerHeight-I-C+'px')},v=throttle(K,300),v(),window.addEventListener('resize',v),y=new ClipboardJS('.anchor'),r=D.querySelectorAll("h1, h2, h3, h4"),z=JSON.parse('"ltr"'),r?r.forEach(function(c){var d=parseInt(c.tagName.substr(1),10)*2,e=encodeURI(document.location.origin+document.location.pathname),f=e+"#"+c.getAttribute('id'),b=document.createElement('span'),a;b.classList.add('anchor'),b.classList.add('hide'),b.setAttribute('data-clipboard-text',decodeURI(f)),b.style.position='relative',a=document.createElement('span'),a.style.position='absolute',a.style.top='50%',a.style.left='0.75rem',a.style.transform='translateY(-50%)',a.innerHTML=`
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32-d}px" height="${32-d}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`,z==="rtl"?a.style.left='-2rem':a.style.right='-2rem',b.append(a),c.append(b),c.addEventListener('mouseenter',function(){this.querySelector('.anchor').classList.remove('hide')}),c.addEventListener('mouseleave',function(){this.querySelector('.anchor').classList.add('hide')})}):null,document.querySelectorAll('.anchor').forEach(function(a){a.addEventListener('mouseleave',function(){a.setAttribute('aria-label',null),a.classList.remove('tooltipped'),a.classList.remove('tooltipped-s'),a.classList.remove('tooltipped-w')})}),y.on('success',function(a){a.clearSelection(),a.trigger.setAttribute('aria-label','Link copied to clipboard!'),a.trigger.classList.add('tooltipped'),a.trigger.classList.add('tooltipped-s')}),b=JSON.parse("null"),b&&b.includes('mermaid')&&(w=localStorage.getItem('theme')||JSON.parse('"dark"'),w==="dark"||w==="hacker"?mermaid.initialize({theme:'dark'}):mermaid.initialize({theme:'default'}),t=[],[].push.apply(t,document.getElementsByClassName('language-mermaid')),t.forEach(function(b){var a=b.parentNode,c;a!==document.body&&(a.parentNode.insertBefore(b,a),a.parentNode.removeChild(a)),c=document.createElement('div'),c.classList.add('mermaid'),c.style.padding='34px 4px 6px',c.innerHTML=b.innerHTML,b.replaceWith(c)})),b&&b.includes('katex')&&(M=document.getElementsByClassName('math'),h={delimiters:[{left:"$$",right:"$$",display:!0},{left:"\\[",right:"\\]",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1}]},renderMathInElement(document.querySelector('.single__contents'),h)),b&&b.includes('flowchartjs')&&(h=JSON.parse('{"arrow-end":"block","element-color":"black","fill":"white","flowstate":{"approved":{"fill":"#58C4A3","font-size":12,"no-text":"n/a","yes-text":"APPROVED"},"current":{"fill":"yellow","font-color":"red","font-weight":"bold"},"future":{"fill":"#FFFF99"},"invalid":{"fill":"#444444"},"past":{"fill":"#CCCCCC","font-size":12},"rejected":{"fill":"#C45879","font-size":12,"no-text":"REJECTED","yes-text":"n/a"},"request":{"fill":"blue"}},"font-color":"black","font-size":14,"line-color":"black","line-length":50,"line-width":3,"no-text":"no","scale":1,"symbols":{"end":{"class":"end-element"},"start":{"element-color":"green","fill":"yellow","font-color":"red"}},"text-margin":10,"x":0,"y":0,"yes-text":"yes"}'),c=null,G="language-flowchart",a=0,Array.prototype.forEach.call(document.querySelectorAll("[class^="+G+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='flowchart'+a,b.parentNode.insertBefore(d,b),e=flowchart.parse(c),e.drawSVG("flowchart"+a,h),a+=1})),document.querySelectorAll("mjx-container").forEach(function(a){a.parentElement.classList+='has-jax'}),b&&b.includes('msc')&&(h=JSON.parse('{"theme":"hand"}'),c=null,a=0,m="language-msc",Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),d.id='msc'+a,b.parentNode.insertBefore(d,b),e=Diagram.parse(c),e.drawSVG("msc"+a,h),a+=1})),b&&b.includes('chart')&&(n="#666",o="#ddd",p=2,Chart.defaults.global.elements.rectangle.borderWidth=p,Chart.defaults.global.elements.rectangle.borderColor=n,Chart.defaults.global.elements.rectangle.backgroundColor=o,Chart.defaults.global.elements.line.borderWidth=p,Chart.defaults.global.elements.line.borderColor=n,Chart.defaults.global.elements.line.backgroundColor=o,Chart.defaults.global.elements.point.borderWidth=p,Chart.defaults.global.elements.point.borderColor=n,Chart.defaults.global.elements.point.backgroundColor=o,m="language-chart",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+m+"]"),function(b){var d,e,f,g;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('canvas'),e=null,d.height=200,d.style.height=200,d.id='myChart'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),f=document.getElementById('myChart'+a).getContext('2d'),g=new Chart(f,e),a+=1})),b&&b.includes('wavedrom')&&(B="language-wave",a=0,c=null,Array.prototype.forEach.call(document.querySelectorAll("[class^="+B+"]"),function(b){var d,e;b.style.display='none',b.parentNode.style.backgroundColor="transparent",c=b.innerText,d=document.createElement('div'),e=null,d.id='WaveDrom_Display_'+a,e=JSON.parse(c),b.parentNode.insertBefore(d,b),WaveDrom.RenderWaveForm(a,e,"WaveDrom_Display_"),a+=1})),b&&b.includes('viz')&&(q="language-viz-",Array.prototype.forEach.call(document.querySelectorAll("[class^="+q+"]"),function(a){var b,c;a.style.display='none',a.parentNode.style.backgroundColor="transparent",a.getAttribute("class").split(" ").forEach(function(a){a.startsWith(q)&&(b=a.substr(q.length))}),c=new Viz,c.renderSVGElement(a.innerText,{engine:b}).then(function(b){b.style.width="100%",a.parentNode.insertBefore(b,a)})}))}</script><script>var links,hrefs,i,authorLink;function insertAfter(a,b){a.parentNode.insertBefore(b,a.nextSibling)}links=document.getElementsByTagName('a'),hrefs=[];for(i=0;i<links.length;i++){const a=links[i],d=a.innerText,b=a.getAttribute('href');if(!b)continue;if(b.startsWith('http'))continue;const g={karaoke:'https://github.com/karaoke-dev/karaoke',edge:'https://github.com/karaoke-dev/karaoke','github.io':'https://github.com/karaoke-dev/karaoke-dev.github.io',launcher:'https://github.com/karaoke-dev/launcher',sample:'https://github.com/karaoke-dev/sample-beatmap','microphone-package':'https://github.com/karaoke-dev/osu-framework-microphone','font-package':'https://github.com/karaoke-dev/osu-framework-font'},e=g[d];if(!e)continue;const f=b.split('@')[0].split('#')[1];a.setAttribute('href',e+'/issues/'+f),a.innerText='('+d+' #'+f+')';const c=b.split('@')[1];if(!c)continue;authorLink=document.createElement("a"),authorLink.innerHTML='by: '+c,authorLink.setAttribute('href','https://github.com/'+c),authorLink.setAttribute("style","font-size: 15px; margin-left: 10px;"),insertAfter(a,authorLink)}</script><script>function replaceBadge(b,a){return b.replace(/\[(.*?)\]/,(c,b)=>{const d=a[b];if(!d)return c;const e=a[b].color,f='background-color: '+e+'; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;',g='<span style="'+f+'">'+b+'</span>';return g})}const liList=document.getElementsByTagName('li');for(var i=0;i<liList.length;i++){const a=liList[i];a.innerHTML=replaceBadge(a.innerHTML,{outdated:{color:'#808080'},rejected:{color:'#FF0000'}})}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/2024.1201/res/2024-12-01-07-38-35.png b/changelog/2024.1201/res/2024-12-01-07-38-35.png
new file mode 100644
index 0000000..c048276
Binary files /dev/null and b/changelog/2024.1201/res/2024-12-01-07-38-35.png differ
diff --git a/changelog/2024.1201/res/2024-12-01-07-41-30.png b/changelog/2024.1201/res/2024-12-01-07-41-30.png
new file mode 100644
index 0000000..c84c803
Binary files /dev/null and b/changelog/2024.1201/res/2024-12-01-07-41-30.png differ
diff --git a/changelog/2024.1201/res/2024-12-01-08-24-24.png b/changelog/2024.1201/res/2024-12-01-08-24-24.png
new file mode 100644
index 0000000..d8875c7
Binary files /dev/null and b/changelog/2024.1201/res/2024-12-01-08-24-24.png differ
diff --git a/changelog/2024.1201/res/2024-12-01-08-26-09.png b/changelog/2024.1201/res/2024-12-01-08-26-09.png
new file mode 100644
index 0000000..b265e6b
Binary files /dev/null and b/changelog/2024.1201/res/2024-12-01-08-26-09.png differ
diff --git a/changelog/index.html b/changelog/index.html
index 8f79e48..399c7cd 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -4,7 +4,8 @@
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down active" dir=ltr data-ani=true>Changelog</a>
 <a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
 <a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><main class="main inner" data-sidebar-position=right><div class="list__main lm"><nav class="breadcrumb hide" aria-label=breadcrumbs><script>document.querySelector('.breadcrumb').classList.remove('hide')</script><ol><li><a href=https://blog.karaoke.dev/ class=capitalize>karaoke --dev</a></li><li class=is-active><span>Changelog</span></li></ol></nav><header class=list__header><h5 class="list__header--title capitalize h5">Changelog</h5></header><div class="list__header--desc single__contents p2"></div><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.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;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
 <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>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not any new progress. Busying on my job ;_; Buying damn air tickets at 11/11. Code quality Update package to the latest. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.1010/>2023.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not quit the job yet to make the manager happy. Rewrite some test cases to make the proejct happy. Buy a translation pen to make me happy. Code quality Regular clean up code. karaoke Editor Let lyric editor able to drag the range of the text to create the ruby. karaoke Adjust lyric caret state brhavior for more assertion. karaoke Add StartDragging() and EndDragging() for the LyricCaretState.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0909/>2023.0909</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 9, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Get a new PR from the new contributor. Add the contributor guideline and lable to let new contributor able to know which issue is friendly to resolve. Adjust the caret state interface for let it able to support select range of the index. Code quality Regular clean up code. karaoke Editor Should be able to compare the caret position. karaoke Need to know that which of the caret position(click-down caret position or drag caret position) is in the left or right side.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0806/>2023.0806</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><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><ul class=pagination><li class=active><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/2/index.html b/changelog/page/2/index.html
index 567836d..35c1c9b 100644
--- a/changelog/page/2/index.html
+++ b/changelog/page/2/index.html
@@ -3,7 +3,8 @@
 <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.0606/>2023.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 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.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><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>
@@ -14,5 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \1000 pull-request/
 Make the toolbar button more complete in the lyric editor. Got that damn real COVID-19 Not really sure, IDK. Adjust the github release flow. Refactor the checks in the editor. Code quality Refactor the edit input manager. karaoke Refactor the caret position algorithm. karaoke Should not expose the algorithm in the caret state. karaoke Adjust the namespace in the toolbar namesapce. karaoke Refactor the drawable caret and drawable part layer.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.1008/>2022.1008</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 8, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Start implementing another layout for lyric editor(design is modified from flyet&rsquo;s work). karaoke
-Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/changelog/>1</a></li><li class=active><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li class=active><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/3/index.html b/changelog/page/3/index.html
index f774694..0088790 100644
--- a/changelog/page/3/index.html
+++ b/changelog/page/3/index.html
@@ -3,7 +3,8 @@
 <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.0903/>2022.0903</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 3, 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.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.
@@ -20,5 +21,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Got the star more fester recently in the repo. Nice star earner. Not being fired. Random fix the UX error in the karaoke editor. No 1234 pull-reuqest has been created. karaoke Beatmap Make the properties in the Singer.cs into bindable. karaoke Code quality Move some enums into the better place. karaoke Refactor time tag and caret display area. karaoke Move some mode specific action into the section.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.0312/>2022.0312</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Find a new fucking IL packing tool to replace the broken one.
 Able to export karaoke Json beatmap for testing purposes. Start working on making the karaoke beatmap more useful(Beatmap is just for personal testing purposes).
-Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><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 [outdated] Change ruby/romaji from bindable to bindable list in the lyric 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 class=active><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li class=active><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/4/index.html b/changelog/page/4/index.html
index 76d3442..c149d7d 100644
--- a/changelog/page/4/index.html
+++ b/changelog/page/4/index.html
@@ -3,7 +3,8 @@
 <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.0122/>2022.0122</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 22, 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.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 [outdated] 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><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>
@@ -13,7 +14,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix lots of API changes I guess. Code quality Clean up code. karaoke Adjust project format like osu.Game project. karaoke Move karaokeIcon.cs file into sprite namespace. karaoke Upgrade syntax to C# 9. karaoke Clean up code again to meet the coding style of C# 9. karaoke Fix grammar errors and convert the dialog into osu! style. karaoke Editor Fix the case that some of the editor components are not visible in the test case.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0822/>2021.0822</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 22, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Now this ruleset can read .ttf fonts without any conversion. Code quality Refactor font manager and implement bitmap font generator. karaoke Regular clean-up code. karaoke Use new switch expression. karaoke Update nuget package and clean-up code. karaoke Editor Improve karaoke ruleset&rsquo;s own colour selector. karaoke Fix Fix the change log style broken issue. karaoke Fix TTF font cannot use in release build.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0726/>2021.0726</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 26, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \more than 69 stars/ No. 777 PR has been created. Code quality Regular clean-up code. karaoke Refactor IPositionCalculator, for better way to detect column size changed. karaoke Rewrite note selection blueprint to use only HitObject (no DrawableHitObject) for layout. karaoke Refactor skin font. karaoke Use RNG in utils to replace System.Random. karaoke Editor Implement base extra recording mode area in lyric editor. karaoke
-Add config button next to the auto-generate button.</div></div></div></div><hr></article><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.0710/>2021.0710</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 10, 2021</time>
-<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><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li class=active><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li class=active><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/5/index.html b/changelog/page/5/index.html
index cb0e7c1..46de552 100644
--- a/changelog/page/5/index.html
+++ b/changelog/page/5/index.html
@@ -3,7 +3,10 @@
 <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.0619/>2021.0619</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 19, 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.0710/>2021.0710</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 10, 2021</time>
+<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><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>
@@ -12,5 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Move some tooltips out of Graphics/Cursor namespace. karaoke Re-write TimeTagsUtilsTest test. karaoke Combine LyricEditor and LyricEditorStateManager. karaoke Refactor cursor position algorithm in lyric editor. karaoke Refactor lyric editor. karaoke Make calcuoation caret position abstract for better maintainance. karaoke Editor Adjust color in lyric editor. karaoke Show alert checker in lyric editor. karaoke Combine cursor and moving cursor position into single bindable in lyric editor. karaoke Auto move position while change selected lyric in lyric editor.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0208/>2021.0208</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 8, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Should use current = bindable in control. karaoke Combine time tag manager with lyric manager. now lyric manager is focused on any property change in the lyric object. karaoke Use better way to get the list of lyrics in the lyric editor. karaoke Replace Enum.GetValues with utils. karaoke Fix Fix language selector not register in the editor. karaoke Editor Implement edit singer info. karaoke Enable to skip the start or end tag in record mode.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0123/>2021.0123</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 23, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Create karaoke beatmap encoder/decoder for testing purpose. karaoke Implement conversion for color object. karaoke Remove singer metadata file in beatmap. karaoke Create IHasOrder to deal with order in OsuRearrangeableListContainer. karaoke Code quality Refactor overlay. karaoke Refactor input manager. karaoke Editor Implement UI part in generator config. karaoke Fix edit mode not apply bindable config. karaoke Add customize menu-bar in editor. karaoke Move display config into menu item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0109/>2021.0109</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 9, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li class=active><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li class=active><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/6/index.html b/changelog/page/6/index.html
index 5d26bb6..2036359 100644
--- a/changelog/page/6/index.html
+++ b/changelog/page/6/index.html
@@ -3,7 +3,8 @@
 <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.1212/>2020.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 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.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><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>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix ruleset cannot run in the release version. Reinstall my MacBook Framework Trying to let osu.framework.microphone can run on iOS device.
 Trying to run rulese in the release lazer version.
 Trying to use GLSL to render text with outline(Still not working).
-Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li class=active><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li class=active><a href=/changelog/page/6/>6</a></li><li><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/changelog/page/7/index.html b/changelog/page/7/index.html
index 3d2e684..8eff9b6 100644
--- a/changelog/page/7/index.html
+++ b/changelog/page/7/index.html
@@ -3,7 +3,8 @@
 <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.0704/>2020.0704</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 4, 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.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><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>
@@ -18,4 +19,4 @@
 In the future, users can select to import .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0412/>2020.0412</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 12, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code Add code factor into Github for code quality checking(but it does not work ;_;) Skin Implement note skin component. karaoke Implement judgement line component. karaoke Implement stage background component. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0401/>2020.0401</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 1, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Thanks for JetBrains giving me a free all-pack license for open source using.
-Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/changelog/>1</a></li><li><a href=/changelog/page/2/>2</a></li><li><a href=/changelog/page/3/>3</a></li><li><a href=/changelog/page/4/>4</a></li><li><a href=/changelog/page/5/>5</a></li><li><a href=/changelog/page/6/>6</a></li><li class=active><a href=/changelog/page/7/>7</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><ul class=sidebar><li class=sidebar-recent><a href=/changelog/2024.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.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><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.0831/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.1201/ class="sidebar-recent__title p1">2024.0831</a></li><li class=sidebar-recent><a href=/changelog/2024.0615/ class="sidebar-recent__title p1">2024.0615</a></li><li class=sidebar-recent><a href=/changelog/2024.0406/ class="sidebar-recent__title p1">2024.0406</a></li><li class=sidebar-recent><a href=/changelog/2024.0228/ class="sidebar-recent__title p1">2024.0228</a></li><li class=sidebar-recent><a href=/changelog/2023.1212/ class="sidebar-recent__title p1">2023.1212</a></li><li class=sidebar-recent><a href=/changelog/2023.1111/ class="sidebar-recent__title p1">2023.1111</a></li><li class=sidebar-recent><a href=/changelog/2023.1010/ class="sidebar-recent__title p1">2023.1010</a></li><li class=sidebar-recent><a href=/changelog/2023.0909/ class="sidebar-recent__title p1">2023.0909</a></li><li class=sidebar-recent><a href=/changelog/2023.0806/ class="sidebar-recent__title p1">2023.0806</a></li><hr class="hr-fade sidebar-hr"></ul><div class=taxo-root></div></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=false dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/en/sitemap.xml b/en/sitemap.xml
index 723fd1e..f1f7074 100644
--- a/en/sitemap.xml
+++ b/en/sitemap.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://blog.karaoke.dev/changelog/2024.0831/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/"/></url><url><loc>https://blog.karaoke.dev/changelog/2024.0615/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0406/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0228/</loc><lastmod>2024-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1212/</loc><lastmod>2023-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1111/</loc><lastmod>2023-11-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1010/</loc><lastmod>2023-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0909/</loc><lastmod>2023-09-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0806/</loc><lastmod>2023-08-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0707/</loc><lastmod>2023-07-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0606/</loc><lastmod>2023-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0507/</loc><lastmod>2023-05-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0422/</loc><lastmod>2023-04-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0329/</loc><lastmod>2023-03-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0128/</loc><lastmod>2023-01-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1231/</loc><lastmod>2022-12-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1122/</loc><lastmod>2022-11-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1029/</loc><lastmod>2022-10-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1008/</loc><lastmod>2022-10-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0917/</loc><lastmod>2022-09-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0903/</loc><lastmod>2022-09-03T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0807/</loc><lastmod>2022-08-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0716/</loc><lastmod>2022-07-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0625/</loc><lastmod>2022-06-25T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0604/</loc><lastmod>2022-06-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0511/</loc><lastmod>2022-05-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0416/</loc><lastmod>2022-04-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0326/</loc><lastmod>2022-03-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0312/</loc><lastmod>2022-03-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0212/</loc><lastmod>2022-02-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0122/</loc><lastmod>2022-01-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0101/</loc><lastmod>2022-01-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1212/</loc><lastmod>2021-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1121/</loc><lastmod>2021-11-21T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1030/</loc><lastmod>2021-10-30T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1010/</loc><lastmod>2021-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0918/</loc><lastmod>2021-09-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0822/</loc><lastmod>2021-08-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0726/</loc><lastmod>2021-07-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0710/</loc><lastmod>2021-07-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0619/</loc><lastmod>2021-06-19T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0529/</loc><lastmod>2021-05-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0509/</loc><lastmod>2021-05-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0417/</loc><lastmod>2021-04-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0320/</loc><lastmod>2021-03-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0228/</loc><lastmod>2021-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0208/</loc><lastmod>2021-02-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0123/</loc><lastmod>2021-01-23T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0109/</loc><lastmod>2021-01-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1226/</loc><lastmod>2020-12-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1212/</loc><lastmod>2020-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1128/</loc><lastmod>2020-11-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1107/</loc><lastmod>2020-11-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1024/</loc><lastmod>2020-10-24T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1010/</loc><lastmod>2020-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0926/</loc><lastmod>2020-09-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0905/</loc><lastmod>2020-09-05T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0815/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0801/</loc><lastmod>2020-08-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0718/</loc><lastmod>2020-07-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0704/</loc><lastmod>2020-07-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0620/</loc><lastmod>2020-06-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0606/</loc><lastmod>2020-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0522/</loc><lastmod>2020-05-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0508/</loc><lastmod>2020-05-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0501/</loc><lastmod>2020-05-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0426/</loc><lastmod>2020-04-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0412/</loc><lastmod>2020-04-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0401/</loc><lastmod>2020-04-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/categories/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/categories/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/categories/"/></url><url><loc>https://blog.karaoke.dev/how-to-install/</loc></url><url><loc>https://blog.karaoke.dev/introduce/</loc></url><url><loc>https://blog.karaoke.dev/series/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/series/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/series/"/></url><url><loc>https://blog.karaoke.dev/tags/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/tags/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/tags/"/></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8" standalone="yes"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"><url><loc>https://blog.karaoke.dev/changelog/2024.0831/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.1201/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/</loc><lastmod>2024-08-31T00:00:00+00:00</lastmod><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/"/></url><url><loc>https://blog.karaoke.dev/changelog/2024.0615/</loc><lastmod>2024-06-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0406/</loc><lastmod>2024-04-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2024.0228/</loc><lastmod>2024-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1212/</loc><lastmod>2023-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1111/</loc><lastmod>2023-11-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.1010/</loc><lastmod>2023-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0909/</loc><lastmod>2023-09-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0806/</loc><lastmod>2023-08-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0707/</loc><lastmod>2023-07-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0606/</loc><lastmod>2023-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0507/</loc><lastmod>2023-05-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0422/</loc><lastmod>2023-04-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0329/</loc><lastmod>2023-03-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2023.0128/</loc><lastmod>2023-01-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1231/</loc><lastmod>2022-12-31T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1122/</loc><lastmod>2022-11-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1029/</loc><lastmod>2022-10-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.1008/</loc><lastmod>2022-10-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0917/</loc><lastmod>2022-09-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0903/</loc><lastmod>2022-09-03T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0807/</loc><lastmod>2022-08-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0716/</loc><lastmod>2022-07-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0625/</loc><lastmod>2022-06-25T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0604/</loc><lastmod>2022-06-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0511/</loc><lastmod>2022-05-11T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0416/</loc><lastmod>2022-04-16T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0326/</loc><lastmod>2022-03-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0312/</loc><lastmod>2022-03-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0212/</loc><lastmod>2022-02-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0122/</loc><lastmod>2022-01-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2022.0101/</loc><lastmod>2022-01-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1212/</loc><lastmod>2021-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1121/</loc><lastmod>2021-11-21T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1030/</loc><lastmod>2021-10-30T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.1010/</loc><lastmod>2021-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0918/</loc><lastmod>2021-09-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0822/</loc><lastmod>2021-08-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0726/</loc><lastmod>2021-07-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0710/</loc><lastmod>2021-07-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0619/</loc><lastmod>2021-06-19T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0529/</loc><lastmod>2021-05-29T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0509/</loc><lastmod>2021-05-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0417/</loc><lastmod>2021-04-17T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0320/</loc><lastmod>2021-03-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0228/</loc><lastmod>2021-02-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0208/</loc><lastmod>2021-02-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0123/</loc><lastmod>2021-01-23T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2021.0109/</loc><lastmod>2021-01-09T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1226/</loc><lastmod>2020-12-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1212/</loc><lastmod>2020-12-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1128/</loc><lastmod>2020-11-28T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1107/</loc><lastmod>2020-11-07T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1024/</loc><lastmod>2020-10-24T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.1010/</loc><lastmod>2020-10-10T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0926/</loc><lastmod>2020-09-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0905/</loc><lastmod>2020-09-05T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0815/</loc><lastmod>2020-08-15T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0801/</loc><lastmod>2020-08-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0718/</loc><lastmod>2020-07-18T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0704/</loc><lastmod>2020-07-04T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0620/</loc><lastmod>2020-06-20T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0606/</loc><lastmod>2020-06-06T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0522/</loc><lastmod>2020-05-22T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0508/</loc><lastmod>2020-05-08T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0501/</loc><lastmod>2020-05-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0426/</loc><lastmod>2020-04-26T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0412/</loc><lastmod>2020-04-12T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/changelog/2020.0401/</loc><lastmod>2020-04-01T00:00:00+00:00</lastmod></url><url><loc>https://blog.karaoke.dev/categories/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/categories/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/categories/"/></url><url><loc>https://blog.karaoke.dev/how-to-install/</loc></url><url><loc>https://blog.karaoke.dev/introduce/</loc></url><url><loc>https://blog.karaoke.dev/series/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/series/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/series/"/></url><url><loc>https://blog.karaoke.dev/tags/</loc><xhtml:link rel="alternate" hreflang="zh-tw" href="https://blog.karaoke.dev/zh-tw/tags/"/><xhtml:link rel="alternate" hreflang="en" href="https://blog.karaoke.dev/tags/"/></url></urlset>
\ No newline at end of file
diff --git a/index.html b/index.html
index b14bf7e..6469f0f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,8 @@
 <a href=# class="dropdown-item select-theme__item">light</a></div></div></div><a href=/changelog class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Changelog</a>
 <a href=/how-to-install class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>How to install</a>
 <a href=/introduce class="navbar__menu-item navbar__slide-down" dir=ltr data-ani=true>Introduce</a></div></nav><header class=header></header><main class="main inner" data-sidebar-position=right><div class="list__main lm"><div class=summary__container data-display=block><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0831/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.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;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Go to thailand on week. Unlimitd weeds. Create project board for able to see what&rsquo;s next. Adjust folder structure in the lyric editor for able to let it easier to be maintained/add more things. Improve the UI/UX in the compose lyric mode, see &ldquo;Improve the preview lyric area&rdquo; and &ldquo;Refactor the EditableLyric in the lyric editor&rdquo;. Fix the time-tag parsing issue in the LrcParser It&rsquo;s a very simple project for able to read/write the .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.1201/>2024.0831</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 31, 2024</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;3&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Re-implement the stage system. Use command to adjust the lyric&rsquo;s transformer like how storyboard did. Separate the stage from the beatmap. Planning 2-weeks december vacation. Stay at Osaka and Kyoto for few days and trying to servival. Work few days at Tokyo. Go to Comiket. Give some weird meat a try. Skiing for 5 days. Remember update the changelog. Blog Add special badge at the start of the changelog item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2024.0615/>2024.0615</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 15, 2024</time>
 <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>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not any new progress. Busying on my job ;_; Buying damn air tickets at 11/11. Code quality Update package to the latest. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.1010/>2023.1010</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 10, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Not quit the job yet to make the manager happy. Rewrite some test cases to make the proejct happy. Buy a translation pen to make me happy. Code quality Regular clean up code. karaoke Editor Let lyric editor able to drag the range of the text to create the ruby. karaoke Adjust lyric caret state brhavior for more assertion. karaoke Add StartDragging() and EndDragging() for the LyricCaretState.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0909/>2023.0909</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 9, 2023</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Get a new PR from the new contributor. Add the contributor guideline and lable to let new contributor able to know which issue is friendly to resolve. Adjust the caret state interface for let it able to support select range of the index. Code quality Regular clean up code. karaoke Editor Should be able to compare the caret position. karaoke Need to know that which of the caret position(click-down caret position or drag caret position) is in the left or right side.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2023.0806/>2023.0806</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 6, 2023</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><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><ul class=pagination><li class=active><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Trying to move the romaji text into the time-tag. Beatmap Should change the id after DeepClone() the lyric. karaoke [outdated] Use Grid instead of int as primary key. karaoke Add romaji text into time tag. karaoke Code quality [outdated] Remove all AllowNull using. karaoke [outdated] Remove all #nullable disabled annotation. karaoke Remove nullable disable annotation in the graphic namespace. karaoke Close Enable NRT by default issue because most part of class already removed nullable disable annotation.</div></div></div></div><hr></article><ul class=pagination><li class=active><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/2/index.html b/page/2/index.html
index b05b847..d81d1e3 100644
--- a/page/2/index.html
+++ b/page/2/index.html
@@ -3,7 +3,8 @@
 <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.0606/>2023.0606</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 6, 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.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><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>
@@ -14,5 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;4&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \1000 pull-request/
 Make the toolbar button more complete in the lyric editor. Got that damn real COVID-19 Not really sure, IDK. Adjust the github release flow. Refactor the checks in the editor. Code quality Refactor the edit input manager. karaoke Refactor the caret position algorithm. karaoke Should not expose the algorithm in the caret state. karaoke Adjust the namespace in the toolbar namesapce. karaoke Refactor the drawable caret and drawable part layer.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.1008/>2022.1008</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Oct 8, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Start implementing another layout for lyric editor(design is modified from flyet&rsquo;s work). karaoke
-Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/>1</a></li><li class=active><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Code quality Adjust the inherit class in the lyric editor extend area. karaoke Rename from &ldquo;extend&rdquo; into &ldquo;settings&rdquo; in the lyric editor. karaoke Move some lyric list related logic into the &ldquo;rows&rdquo; namespace. karaoke Adjust some class namespace in the lyric editor. karaoke Adjust namespace in the lyric list. karaoke Move the background adjust related logic into row namespace.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=active><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/3/index.html b/page/3/index.html
index 2b1a4f8..9e77330 100644
--- a/page/3/index.html
+++ b/page/3/index.html
@@ -3,7 +3,8 @@
 <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.0903/>2022.0903</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Sep 3, 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.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.
@@ -20,5 +21,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Got the star more fester recently in the repo. Nice star earner. Not being fired. Random fix the UX error in the karaoke editor. No 1234 pull-reuqest has been created. karaoke Beatmap Make the properties in the Singer.cs into bindable. karaoke Code quality Move some enums into the better place. karaoke Refactor time tag and caret display area. karaoke Move some mode specific action into the section.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2022.0312/>2022.0312</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Mar 12, 2022</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Find a new fucking IL packing tool to replace the broken one.
 Able to export karaoke Json beatmap for testing purposes. Start working on making the karaoke beatmap more useful(Beatmap is just for personal testing purposes).
-Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><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 [outdated] Change ruby/romaji from bindable to bindable list in the lyric 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 class=active><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Beatmap Should re-sort the order while saving the time-tags to the JSON. karaoke Implement karaoke beatmap JSON loader. karaoke Code quality Clean up code. karaoke Write the test case for caret state.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li class=active><a href=/page/3/>3</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/4/index.html b/page/4/index.html
index f19153f..efa5fef 100644
--- a/page/4/index.html
+++ b/page/4/index.html
@@ -3,7 +3,8 @@
 <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.0122/>2022.0122</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 22, 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.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 [outdated] 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><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>
@@ -13,7 +14,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;2&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix lots of API changes I guess. Code quality Clean up code. karaoke Adjust project format like osu.Game project. karaoke Move karaokeIcon.cs file into sprite namespace. karaoke Upgrade syntax to C# 9. karaoke Clean up code again to meet the coding style of C# 9. karaoke Fix grammar errors and convert the dialog into osu! style. karaoke Editor Fix the case that some of the editor components are not visible in the test case.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0822/>2021.0822</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Aug 22, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Now this ruleset can read .ttf fonts without any conversion. Code quality Refactor font manager and implement bitmap font generator. karaoke Regular clean-up code. karaoke Use new switch expression. karaoke Update nuget package and clean-up code. karaoke Editor Improve karaoke ruleset&rsquo;s own colour selector. karaoke Fix Fix the change log style broken issue. karaoke Fix TTF font cannot use in release build.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0726/>2021.0726</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 26, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement \more than 69 stars/ No. 777 PR has been created. Code quality Regular clean-up code. karaoke Refactor IPositionCalculator, for better way to detect column size changed. karaoke Rewrite note selection blueprint to use only HitObject (no DrawableHitObject) for layout. karaoke Refactor skin font. karaoke Use RNG in utils to replace System.Random. karaoke Editor Implement base extra recording mode area in lyric editor. karaoke
-Add config button next to the auto-generate button.</div></div></div></div><hr></article><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.0710/>2021.0710</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 10, 2021</time>
-<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><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li class=active><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Add config button next to the auto-generate button.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li><a href=/page/2/>2</a></li><li><a href=/page/3/>3</a></li><li class=active><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/5/index.html b/page/5/index.html
index f185b8d..ba373f2 100644
--- a/page/5/index.html
+++ b/page/5/index.html
@@ -3,7 +3,10 @@
 <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.0619/>2021.0619</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jun 19, 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.0710/>2021.0710</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 10, 2021</time>
+<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><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>
@@ -12,5 +15,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Move some tooltips out of Graphics/Cursor namespace. karaoke Re-write TimeTagsUtilsTest test. karaoke Combine LyricEditor and LyricEditorStateManager. karaoke Refactor cursor position algorithm in lyric editor. karaoke Refactor lyric editor. karaoke Make calcuoation caret position abstract for better maintainance. karaoke Editor Adjust color in lyric editor. karaoke Show alert checker in lyric editor. karaoke Combine cursor and moving cursor position into single bindable in lyric editor. karaoke Auto move position while change selected lyric in lyric editor.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0208/>2021.0208</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Feb 8, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code quality Should use current = bindable in control. karaoke Combine time tag manager with lyric manager. now lyric manager is focused on any property change in the lyric object. karaoke Use better way to get the list of lyrics in the lyric editor. karaoke Replace Enum.GetValues with utils. karaoke Fix Fix language selector not register in the editor. karaoke Editor Implement edit singer info. karaoke Enable to skip the start or end tag in record mode.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0123/>2021.0123</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 23, 2021</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Beatmap Create karaoke beatmap encoder/decoder for testing purpose. karaoke Implement conversion for color object. karaoke Remove singer metadata file in beatmap. karaoke Create IHasOrder to deal with order in OsuRearrangeableListContainer. karaoke Code quality Refactor overlay. karaoke Refactor input manager. karaoke Editor Implement UI part in generator config. karaoke Fix edit mode not apply bindable config. karaoke Add customize menu-bar in editor. karaoke Move display config into menu item.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2021.0109/>2021.0109</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 9, 2021</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li class=active><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Auto-Generator Implement Japanese lyric romaji generator. karaoke Separate auto-generator selector. karaoke Implement base layout generator. karaoke Code quality Has time-tag format in the test case. karaoke Separate utility about dealing with single and plural objects. karaoke Remane from time tag index to text index name. karaoke Use regex to detect issues or usernames in the change-log screen. karaoke Editor Implement input lyric mode. karaoke Enable to add or remove language from translate editor.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li class=active><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/6/index.html b/page/6/index.html
index f87f759..ffcd98b 100644
--- a/page/6/index.html
+++ b/page/6/index.html
@@ -3,7 +3,8 @@
 <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.1212/>2020.1212</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Dec 12, 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.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><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>
@@ -15,5 +16,4 @@
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Fix ruleset cannot run in the release version. Reinstall my MacBook Framework Trying to let osu.framework.microphone can run on iOS device.
 Trying to run rulese in the release lazer version.
 Trying to use GLSL to render text with outline(Still not working).
-Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><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><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=active><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Gameplay Fix ruleset cannot run in release lazer version. Design microphone status under saiten playfield to tell user microphone status and now to enable microphone.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li class=active><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/7/index.html b/page/7/index.html
index bdba35f..dff1b37 100644
--- a/page/7/index.html
+++ b/page/7/index.html
@@ -3,7 +3,8 @@
 <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.0704/>2020.0704</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jul 4, 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.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><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>
@@ -18,8 +19,4 @@
 In the future, users can select to import .</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0412/>2020.0412</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 12, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Code Add code factor into Github for code quality checking(but it does not work ;_;) Skin Implement note skin component. karaoke Implement judgement line component. karaoke Implement stage background component. karaoke</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/changelog/2020.0401/>2020.0401</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Apr 1, 2020</time>
 <span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Achievement Thanks for JetBrains giving me a free all-pack license for open source using.
-Framework Update osu! game to the latest version.</div></div></div></div><hr></article><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/how-to-install/>How to install</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">How to install All install ways If you are Linux or macOS user, you can copy .dll from release page like other ruleset do.
-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><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li class=active><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
+Framework Update osu! game to the latest version.</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li class=active><a href=/page/7/>7</a></li><li><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file
diff --git a/page/8/index.html b/page/8/index.html
index d3bd294..ff9ae13 100644
--- a/page/8/index.html
+++ b/page/8/index.html
@@ -3,5 +3,9 @@
 <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/introduce/>Introduce</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 0001</time>
-<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Introduction! This is the karaoke!&rsquo;s offical site. The source code of the karaoke! ruleset, running on osu!lazer. It is still a work in progress, and new information will be posted here. What are this rulesets current features? Basic karaoke gameplay, with a simply animated lyric overlay. Custom songs made for the karaoke ruleset (no conversion of beatmaps yet). Saiten(scoring) system included. Japanese lyrical support. Cross platform, pc and mobile are</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li class=active><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.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></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
+<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/how-to-install/>How to install</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">How to install All install ways If you are Linux or macOS user, you can copy .dll from release page like other ruleset do.
+But if you are Windows user, I recommend you use Osu-ModeManager to get/update ruleset.
+ Osu-ModeManager If you are trying to use Osu-ModeManager, download latest ruleset from release page.
+Download sample ruleset list from here, so you don&rsquo;t need to add it manually.</div></div></div></div><hr></article><article class=summary-classic data-ani=true><div class=summary-classic__flex-box><div class=summary-classic__content><header><h5 class="title h5"><a href=https://blog.karaoke.dev/introduce/>Introduce</a></h5><h6 class="subtitle caption"><time title="Written At" dir=ltr>📅&nbsp;Jan 1, 0001</time>
+<span title="Reading Time" dir=ltr>&#183; ☕&nbsp;1&nbsp;min read</span></h6></header><div><div class="summary-classic__text p2">Introduction! This is the karaoke!&rsquo;s offical site. The source code of the karaoke! ruleset, running on osu!lazer. It is still a work in progress, and new information will be posted here. What are this rulesets current features? Basic karaoke gameplay, with a simply animated lyric overlay. Custom songs made for the karaoke ruleset (no conversion of beatmaps yet). Saiten(scoring) system included. Japanese lyrical support. Cross platform, pc and mobile are</div></div></div></div><hr></article><ul class=pagination><li><a href=/>1</a></li><li class=disabled><a>&mldr;</a></li><li><a href=/page/4/>4</a></li><li><a href=/page/5/>5</a></li><li><a href=/page/6/>6</a></li><li><a href=/page/7/>7</a></li><li class=active><a href=/page/8/>8</a></li></ul></div><div class=search-result data-display=none><div class=search-result__header><div class=search-result__close data-dir=ltr><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentcolor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41.0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg></div></div><div class=search-result__body><ul><li class=search-result__item><div class=search-result__item--title></div><div class=search-result__item--desc></div></li></ul></div></div></div><aside class="list__sidebar r" data-dir=ltr><div class=sidebar><section class=sidebar-recent><a href=/changelog/ class="sidebar-recent__title p2">Changelog</a><ul class=sidebar-recent__ul><li><a href=/changelog/2024.0831/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.1201/ class="sidebar-recent__a p2">2024.0831</a></li><li><a href=/changelog/2024.0615/ class="sidebar-recent__a p2">2024.0615</a></li><li><a href=/changelog/2024.0406/ class="sidebar-recent__a p2">2024.0406</a></li><li><a href=/changelog/2024.0228/ class="sidebar-recent__a p2">2024.0228</a></li><li><a href=/changelog/2023.1212/ class="sidebar-recent__a p2">2023.1212</a></li><li><a href=/changelog/2023.1111/ class="sidebar-recent__a p2">2023.1111</a></li><li><a href=/changelog/2023.1010/ class="sidebar-recent__a p2">2023.1010</a></li><li><a href=/changelog/2023.0909/ class="sidebar-recent__a p2">2023.0909</a></li><li><a href=/changelog/2023.0806/ class="sidebar-recent__a p2">2023.0806</a></li></ul></section><hr class="hr-fade sidebar-hr"></div><div class=taxo-root></div><hr class="hr-fade sidebar-hr"></aside></main><script>var sidebarPosition=JSON.parse('"right"'),enableSidebar=JSON.parse("true"),listMainElem=document.querySelector('.list__main'),listSideElem=document.querySelector('.list__sidebar'),gridSmall='l',gridBig='mr',gridFull='lmr';sidebarPosition==="right"&&(gridSmall='r',gridBig='lm'),enquire.register("screen and (max-width: 769px)",{match:function(){enableSidebar?(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull),listSideElem.classList.remove(gridSmall),listSideElem.classList.add('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide'))},unmatch:function(){var b,a;enableSidebar?(listMainElem.classList.remove(gridFull),listMainElem.classList.add(gridBig),listSideElem.classList.add(gridSmall),listSideElem.classList.remove('hide')):(listMainElem&&!listMainElem.classList.contains(gridFull)&&(listMainElem.classList.remove(gridBig),listMainElem.classList.add(gridFull)),listSideElem&&!listSideElem.classList.contains('hide')&&listSideElem.classList.add('hide')),b=document.querySelector('.navbar__burger'),a=document.getElementsByClassName('navbarm__collapse')[0],a&&(a.setAttribute('data-open',!1),a.style.maxHeight=0,b.classList.remove('is-active')),document.getElementsByClassName('navbar__menu')[0]&&document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active'),document.getElementsByClassName('mobile-search')[0]&&document.getElementsByClassName('mobile-search')[0].classList.add('hide')},setup:function(){},deferSetup:!0,destroy:function(){}})</script><script>window.onload=function(){var c=JSON.parse("null"),a,b;c&&(a=document.querySelector('#busuanzi_value_site_pv'),b=document.querySelector('#busuanzi_value_site_uv'),a.textContent=a.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"),b.textContent=b.textContent.replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"))}</script><footer class=footer><div id=gtt><div class=gtt><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentcolor" d="M8.12 14.71 12 10.83l3.88 3.88c.39.39 1.02.39 1.41.0s.39-1.02.0-1.41L12.7 8.71c-.39-.39-1.02-.39-1.41.0L6.7 13.3c-.39.39-.39 1.02.0 1.41.39.38 1.03.39 1.42.0z"/></svg></div></div><hr><div class="basicflex flexwrap"></div><div class=footer__poweredby></div></footer></div><div class="wrapper__right hide" data-pad=true dir=ltr><script>document.querySelector('.wrapper__right').classList.remove('hide')</script></div></div></body></html>
\ No newline at end of file