hi-language/hi-language.github.io
1
0
Fork 0
mirror of https://github.com/hi-language/hi-language.github.io.git synced 2026-01-14 08:38:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Repair markdown parsing and mobile layout

Browse Source
This commit is contained in:
multipleof4
2025-09-14 22:37:48 -07:00
parent 51b98c1ba2
commit 018dbdd0c0
1 changed files with 21 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@@ -284,68 +284,39 @@ Hi is still in active development. This page will grow with specs, a reference,
<script>
document.addEventListener('DOMContentLoaded',()=>{
const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)]
const md=window.markdownit({html:false,linkify:true,typographer:true,breaks:false})
const md=window.markdownit({html:true,linkify:true,typographer:true,breaks:false})
const slug=s=>s.toLowerCase().trim().replace(/[^\w\- ]+/g,'').replace(/\s+/g,'-')
// Render markdown into suneHtml
const root=$('#suneHtml'); root.className='markdown-body max-w-3xl mx-auto'
root.innerHTML=md.render($('#md')?.textContent||'')
// Headings: ids + subtle anchor links
$$('#suneHtml h2, #suneHtml h3').forEach(h=>{
if(!h.id)h.id=slug((h.childNodes[0]?.nodeValue||h.textContent||'').trim())
h.classList.add('anchor')
const a=document.createElement('a');a.href='#'+h.id;a.className='anchor-link';a.textContent='#';h.appendChild(a)
const root=$('#suneHtml');root.className='markdown-body max-w-3xl mx-auto';root.innerHTML=md.render($('#md')?.textContent||'')
const heads=$$('#suneHtml h2, #suneHtml h3')
heads.forEach(h=>{
const titleText=(h.childNodes[0]?.nodeValue||h.textContent||'').trim()
h.id=slug(titleText);h.classList.add('anchor')
const a=document.createElement('a');a.href='#'+h.id;a.className='anchor-link';a.innerHTML='#';h.appendChild(a)
})
// Highlight + copy buttons
document.querySelectorAll('#suneHtml pre>code').forEach(code=>{
$$('#suneHtml pre>code').forEach(code=>{
window.hljs&&hljs.highlightElement(code)
const pre=code.parentElement, t=code.textContent||'', box=document.createElement('div'), btn=document.createElement('button'), meta=document.createElement('span')
btn.className='copy-btn'; btn.textContent='Copy'
btn.onclick=async e=>{e.stopPropagation();try{await navigator.clipboard.writeText(code.innerText);btn.textContent='Copied';setTimeout(()=>btn.textContent='Copy',1100)}catch{}}
meta.className='char-c'; meta.textContent=(t.length>=1e3?(t.length/1e3).toFixed(1)+'K':t.length)+' chars'
box.className='code-actions'; box.append(meta,btn); pre.appendChild(box)
const pre=code.parentElement,t=code.textContent||'',box=document.createElement('div'),btn=document.createElement('button'),meta=document.createElement('span')
btn.className='copy-btn';btn.textContent='Copy'
btn.onclick=async()=>{try{await navigator.clipboard.writeText(code.innerText);btn.textContent='Copied';setTimeout(()=>btn.textContent='Copy',1100)}catch{}}
meta.className='char-c';meta.textContent=(t.length>=1e3?`${(t.length/1e3).toFixed(1)}K`:t.length)+' chars'
box.className='code-actions';box.append(meta,btn);pre.appendChild(box)
})
// Build side nav (desktop + mobile)
const heads=$$('#suneHtml h2,h3')
const buildNav=sel=>{
const nav=$(sel); if(!nav)return; nav.innerHTML=''
const nav=$(sel);if(!nav)return;nav.innerHTML=''
const frag=document.createDocumentFragment()
heads.forEach(h=>{
const lvl=h.tagName==='H2'?0:1, a=document.createElement('a')
const title=(h.childNodes[0]?.nodeValue||h.textContent||'').replace(/\s*#\s*$/,'').trim()
a.href='#'+h.id; a.className=(lvl?'pl-6 ':'')+'block px-2 py-1 rounded-lg hover:bg-gray-100 text-gray-700'
a.textContent=title; frag.appendChild(a)
const a=document.createElement('a'),title=(h.childNodes[0]?.nodeValue||h.textContent||'').replace(/\s*#\s*$/,'').trim()
a.href='#'+h.id;a.className=(h.tagName==='H3'?'pl-6 ':'')+'block px-2 py-1 rounded-lg hover:bg-gray-100 text-gray-700';a.textContent=title;frag.appendChild(a)
})
nav.appendChild(frag)
const links=[...nav.querySelectorAll('a')]
const io=new IntersectionObserver(es=>{
es.forEach(e=>{
if(e.isIntersecting){
const id='#'+e.target.id
links.forEach(L=>L.classList.toggle('bg-gray-100 font-medium',L.getAttribute('href')===id))
}
})
},{rootMargin:'-50% 0px -40% 0px',threshold:[0,1]})
const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){const id='#'+e.target.id;links.forEach(L=>L.classList.toggle('bg-gray-100 font-medium',L.getAttribute('href')===id))}})},{rootMargin:'-50% 0px -40% 0px'})
heads.forEach(h=>io.observe(h))
links.forEach(L=>L.addEventListener('click',()=>{if(window.innerWidth<1024) setLeft(false)}))
links.forEach(L=>L.addEventListener('click',()=>{if(window.innerWidth<1024)setLeft(false)}))
}
buildNav('#sideNav'); buildNav('#sideNavMobile')
// Mobile sidebar controls
const overlay=$('#overlay'), side=$('#sidebarMobile'), menuBtn=$('#menuBtn')
const setLeft=v=>{
overlay.classList.toggle('opacity-100',v)
overlay.classList.toggle('opacity-0',!v)
overlay.classList.toggle('pointer-events-none',!v)
side.classList.toggle('-translate-x-full',!v)
side.classList.toggle('translate-x-0',v)
}
menuBtn?.addEventListener('click',()=>setLeft(true))
overlay?.addEventListener('click',()=>setLeft(false))
document.addEventListener('keydown',e=>{if(e.key==='Escape')setLeft(false)})
buildNav('#sideNav');buildNav('#sideNavMobile')
const overlay=$('#overlay'),side=$('#sidebarMobile'),menuBtn=$('#menuBtn'),setLeft=v=>{overlay.classList.toggle('opacity-100',v);overlay.classList.toggle('pointer-events-none',!v);side.classList.toggle('-translate-x-full',!v)}
menuBtn?.addEventListener('click',()=>setLeft(true));overlay?.addEventListener('click',()=>setLeft(false));document.addEventListener('keydown',e=>{if(e.key==='Escape')setLeft(false)})
})
</script>
</body>