feat: add multilingual SEO metadata

app.js

@@ -1,2 +1,2 @@
 // Author: fruit.com.cn
-(function(){'use strict';const d=window.YMB_DATA,s={genre:'Semua',query:''},grid=document.querySelector('#video-grid'),toast=document.querySelector('#toast');const notify=(m)=>{toast.textContent=m;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),1600)};const render=()=>{document.querySelector('#genre-nav').innerHTML=d.genres.slice(1).map((g)=>`<a href="#home" data-genre="${g}">${g}</a>`).join('');document.querySelector('#filter-chips').innerHTML=d.genres.map((g)=>`<button class="chip ${g===s.genre?'active':''}" data-genre="${g}">${g}</button>`).join('');const rows=d.videos.filter((v)=>(s.genre==='Semua'||v[2]===s.genre)&&(!s.query||v.join(' ').toLowerCase().includes(s.query)));grid.innerHTML=rows.map((v,i)=>`<article class="video-card" data-play="${v[0]}"><div class="thumb"><img src="${v[3]}" alt="${v[0]}" loading="lazy"><span class="duration">${v[4]}</span></div><div class="video-meta"><span class="channel-avatar">${v[1][0]}</span><div><p class="video-title">${v[0]}</p><p class="video-sub">${v[1]}<br>${(i+4)*137} rb tayangan · ${i+1} hari lalu</p></div></div></article>`).join('')||'<p>Belum ada drama yang cocok.</p>';document.querySelector('#shorts-row').innerHTML=d.shorts.map((v)=>`<article class="short-card" data-play="${v[0]}"><img src="${v[1]}" alt="${v[0]}" loading="lazy"><span class="short-title">${v[0]}</span></article>`).join('');document.querySelector('#channel-grid').innerHTML=d.channels.map((v)=>`<article class="channel-card"><span class="channel-avatar" style="background:${v[3]}">${v[2]}</span><div><p>${v[0]}</p><span>${v[1]}</span></div><button class="follow-button" data-follow>${'Ikuti'}</button></article>`).join('')};document.addEventListener('click',(e)=>{const g=e.target.closest('[data-genre]');if(g){e.preventDefault();s.genre=g.dataset.genre;render()}const p=e.target.closest('[data-play]');if(p)notify(`Memutar: ${p.dataset.play}`);const f=e.target.closest('[data-follow]');if(f){f.textContent=f.textContent==='Ikuti'?'Mengikuti':'Ikuti';notify(f.textContent==='Mengikuti'?'Channel ditambahkan':'Channel dihapus')}if(e.target.closest('#menu-toggle'))document.querySelector('#sidebar').classList.toggle('open')});document.querySelector('#search-form').addEventListener('submit',(e)=>{e.preventDefault();s.query=document.querySelector('#global-search').value.trim().toLowerCase();render()});document.querySelector('#global-search').addEventListener('focus',()=>document.querySelector('#search-form').classList.add('open'));render()}());
+(function(){'use strict';const d=window.YMB_DATA;const params=new URLSearchParams(location.search);const s={lang:d.locales[params.get('lang')]?params.get('lang'):'id',genre:'',query:params.get('q')||''};const $=(q)=>document.querySelector(q);const t=()=>d.locales[s.lang];const notify=(m)=>{const toast=$('#toast');toast.textContent=m;toast.classList.add('show');setTimeout(()=>toast.classList.remove('show'),1600)};const setMeta=()=>{const locale=t();document.documentElement.lang=locale.lang;document.title=locale.title;$('#page-title').textContent=locale.title;$('#meta-description').content=locale.description;$('#canonical-link').href=`https://ymb.example.com/?lang=${s.lang}`;$('#og-title').content=locale.title;$('#og-description').content=locale.description;$('#twitter-title').content=locale.title;$('#twitter-description').content=locale.description;$('#structured-data').textContent=JSON.stringify({'@context':'https://schema.org','@type':'WebSite',name:'YMB',inLanguage:locale.lang,url:`https://ymb.example.com/?lang=${s.lang}`,description:locale.description,potentialAction:{'@type':'SearchAction',target:`https://ymb.example.com/?lang=${s.lang}&q={search_term_string}`,'query-input':'required name=search_term_string'}});$('#global-search').placeholder=locale.search;$('#language-select').value=s.lang;document.querySelectorAll('[data-i18n]').forEach((node)=>{const key=node.dataset.i18n;if(locale[key])node.textContent=locale[key]})};const updateUrl=()=>{const query=new URLSearchParams({lang:s.lang});if(s.query)query.set('q',s.query);history.replaceState(null,'',`?${query.toString()}`)};const render=()=>{const locale=t();const genres=locale.genres;const activeGenre=s.genre?d.locales.id.genres[genres.indexOf(s.genre)]:'';$('#genre-nav').innerHTML=genres.slice(1).map((g)=>`<a href="#home" data-genre="${g}">${g}</a>`).join('');$('#filter-chips').innerHTML=genres.map((g)=>`<button class="chip ${g===s.genre?'active':''}" data-genre="${g}">${g}</button>`).join('');const rows=d.videos.filter((v)=>(!activeGenre||v[2]===activeGenre)&&(!s.query||v.join(' ').toLowerCase().includes(s.query)));$('#video-grid').innerHTML=rows.map((v,i)=>`<article class="video-card" data-play="${v[0]}"><div class="thumb"><img src="${v[3]}" alt="${v[0]}" loading="lazy"><span class="duration">${v[4]}</span></div><div class="video-meta"><span class="channel-avatar">${v[1][0]}</span><div><p class="video-title">${v[0]}</p><p class="video-sub">${v[1]}<br>${(i+4)*137} rb tayangan · ${i+1} hari lalu</p></div></div></article>`).join('')||`<p>${locale.empty}</p>`;$('#shorts-row').innerHTML=d.shorts.map((v)=>`<article class="short-card" data-play="${v[0]}"><img src="${v[1]}" alt="${v[0]}" loading="lazy"><span class="short-title">${v[0]}</span></article>`).join('');$('#channel-grid').innerHTML=d.channels.map((v)=>`<article class="channel-card"><span class="channel-avatar" style="background:${v[3]}">${v[2]}</span><div><p>${v[0]}</p><span>${v[1]}</span></div><button class="follow-button" data-follow>${locale.follow}</button></article>`).join('');setMeta()};document.addEventListener('click',(e)=>{const genre=e.target.closest('[data-genre]');if(genre){e.preventDefault();s.genre=genre.dataset.genre;render()}const play=e.target.closest('[data-play]');if(play)notify(`${t().playing}${play.dataset.play}`);const follow=e.target.closest('[data-follow]');if(follow){const isFollowing=follow.textContent===t().follow;follow.textContent=isFollowing?t().following:t().follow;notify(isFollowing?t().added:t().removed)}if(e.target.closest('#menu-toggle'))$('#sidebar').classList.toggle('open')});$('#search-form').addEventListener('submit',(e)=>{e.preventDefault();s.query=$('#global-search').value.trim().toLowerCase();updateUrl();render()});$('#language-select').addEventListener('change',(e)=>{s.lang=e.target.value;s.genre='';updateUrl();render()});$('#global-search').value=s.query;render()})();