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 00:28:05 +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> <script>
document.addEventListener('DOMContentLoaded',()=>{ document.addEventListener('DOMContentLoaded',()=>{
const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)] 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,'-') const slug=s=>s.toLowerCase().trim().replace(/[^\w\- ]+/g,'').replace(/\s+/g,'-')
const root=$('#suneHtml');root.className='markdown-body max-w-3xl mx-auto';root.innerHTML=md.render($('#md')?.textContent||'')
// Render markdown into suneHtml const heads=$$('#suneHtml h2, #suneHtml h3')
const root=$('#suneHtml'); root.className='markdown-body max-w-3xl mx-auto' heads.forEach(h=>{
root.innerHTML=md.render($('#md')?.textContent||'') const titleText=(h.childNodes[0]?.nodeValue||h.textContent||'').trim()
h.id=slug(titleText);h.classList.add('anchor')
// Headings: ids + subtle anchor links const a=document.createElement('a');a.href='#'+h.id;a.className='anchor-link';a.innerHTML='#';h.appendChild(a)
$$('#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)
}) })
$$('#suneHtml pre>code').forEach(code=>{
// Highlight + copy buttons
document.querySelectorAll('#suneHtml pre>code').forEach(code=>{
window.hljs&&hljs.highlightElement(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') 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.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{}} 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' 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) 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 buildNav=sel=>{
const nav=$(sel); if(!nav)return; nav.innerHTML='' const nav=$(sel);if(!nav)return;nav.innerHTML=''
const frag=document.createDocumentFragment() const frag=document.createDocumentFragment()
heads.forEach(h=>{ heads.forEach(h=>{
const lvl=h.tagName==='H2'?0:1, a=document.createElement('a') const a=document.createElement('a'),title=(h.childNodes[0]?.nodeValue||h.textContent||'').replace(/\s*#\s*$/,'').trim()
const 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)
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)
}) })
nav.appendChild(frag) nav.appendChild(frag)
const links=[...nav.querySelectorAll('a')] const links=[...nav.querySelectorAll('a')]
const io=new IntersectionObserver(es=>{ 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'})
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]})
heads.forEach(h=>io.observe(h)) 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') 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)}
// Mobile sidebar controls menuBtn?.addEventListener('click',()=>setLeft(true));overlay?.addEventListener('click',()=>setLeft(false));document.addEventListener('keydown',e=>{if(e.key==='Escape')setLeft(false)})
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)})
}) })
</script> </script>
</body> </body>