Fix: Clean headings/anchors; no IDs in text

2026-01-14 16:48:37 +00:00 · 2025-09-14 22:32:02 -07:00
parent 68185d96ac
commit 51b98c1ba2
1 changed files with 31 additions and 33 deletions
--- a/index.html
+++ b/index.html
@@ -16,18 +16,20 @@
 .no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{scrollbar-width:none}
 .btn{transition:.15s transform}.btn:active{transform:scale(.98)}
 .anchor{scroll-margin-top:76px}
+pre{position:relative;border:1px solid #e5e7eb;border-radius:.75rem}
 .code-actions{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;align-items:center}
 .copy-btn{background:#0f172a;color:#fff;border-radius:.5rem;padding:.2rem .5rem;font-size:.75rem;opacity:.9}
 .char-c{font-size:.75rem;color:#64748b}
-pre{position:relative;border:1px solid #e5e7eb;border-radius:.75rem}
+@media (max-width:480px){.char-c{display:none}}
+.anchor-link{margin-left:.5rem;color:#9ca3af;text-decoration:none}
+.anchor-link:hover{color:#6b7280}
@media (min-width:1024px){.lg\:grid-cols-layout{grid-template-columns:var(--sbw) 1fr}}
 </style>
-<script defer src="https://cdn.jsdelivr.net/npm/cash-dom/dist/cash.min.js"></script>
 </head>
 <body class="bg-white text-gray-900 selection:bg-black/10">
 <header class="sticky top-0 z-30 bg-white/80 backdrop-blur border-b border-gray-200">
  <div class="mx-auto w-full px-4 py-3 grid grid-cols-3 items-center">
-    <button id=menuBtn class="h-9 w-9 rounded-xl bg-gray-100 hover:bg-gray-200 flex items-center justify-center btn" title="Menu"><i data-lucide=panel-left class="h-5 w-5"></i></button>
+    <button id=menuBtn class="h-9 w-9 rounded-xl bg-gray-100 hover:bg-gray-200 flex items-center justify-center btn" title="Menu"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg></button>
    <div class="justify-self-center text-base font-semibold select-none pointer-events-none">Hi</div>
    <div class="justify-self-end"></div>
  </div>
@@ -45,7 +47,7 @@ pre{position:relative;border:1px solid #e5e7eb;border-radius:.75rem}
        <h1 class="text-3xl sm:text-4xl font-bold tracking-tight">Hi — a corely symbolic language</h1>
        <p class="mt-3 text-gray-600">Inspired by JavaScript. Few keywords, many symbols. Designed so the core reads naturally across languages, for the whole world.</p>
        <div class="mt-4 flex flex-wrap gap-2">
-          <a href="#hello" class="px-3 py-1.5 rounded-full bg-gray-900 text-white text-sm btn">Get started</a>
+          <a href="#hello-world" class="px-3 py-1.5 rounded-full bg-gray-900 text-white text-sm btn">Get started</a>
          <a href="https://github.com/hi-language" class="px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 text-sm btn" target=_blank rel=noopener><svg xmlns="http://www.w3.org/2000/svg" class="inline -mt-0.5 mr-1" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5A12 12 0 0 0 0 12.64a12.15 12.15 0 0 0 8.2 11.55c.6.11.82-.27.82-.6v-2.17c-3.34.74-4.05-1.65-4.05-1.65a3.29 3.29 0 0 0-1.36-1.82c-1.1-.78.09-.77.09-.77a2.6 2.6 0 0 1 1.89 1.29 2.64 2.64 0 0 0 3.61 1 2.66 2.66 0 0 1 .78-1.65c-2.67-.31-5.47-1.36-5.47-6.06A4.8 4.8 0 0 1 6 7.57a4.45 4.45 0 0 1 .12-3.29s1-.33 3.3 1.26a11.39 11.39 0 0 1 6 0c2.3-1.59 3.3-1.26 3.3-1.26.44 1.03.48 2.2.12 3.29a4.79 4.79 0 0 1 1.27 3.32c0 4.72-2.8 5.75-5.47 6.06a2.97 2.97 0 0 1 .84 2.31v3.43c0 .34.22.73.83.6A12.16 12.16 0 0 0 24 12.64 12 12 0 0 0 12 .5Z"/></svg>GitHub</a>
        </div>
      </div>
@@ -61,14 +63,11 @@ pre{position:relative;border:1px solid #e5e7eb;border-radius:.75rem}
  <nav id="sideNavMobile" class="p-2 text-sm overflow-y-auto no-scrollbar"></nav>
 </aside>

-<script src="https://unpkg.com/lucide@latest"></script>
 <script src="https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>

-<!-- Author the docs below in Markdown; use ~~~ fences to avoid breaking outer code-block -->
+<!-- Author docs in Markdown; use ~~~ fences -->
 <script id=md type="text/markdown">
-# Hi
-
 Meet Hi — a corely symbolic language inspired by JavaScript.
 It keeps the core mostly symbols and uses keywords only where they’re truly practical.

@@ -79,14 +78,14 @@ It keeps the core mostly symbols and uses keywords only where they’re truly pr

 > Print helper: `_()` writes to the console.

-## Hello, world {#hello}
+## Hello, world

 ~~~js
 // Hello World in Hi
 _("Hi world")
 ~~~

-## Declarations and Assignment {#decl}
+## Declarations and Assignment

 - `:` declares a name.
 - `=` assigns or mutates a value.
@@ -98,7 +97,7 @@ greeting = greeting + ", " + name
 _(greeting) // "Hi, Orion"
 ~~~

-## Blocks (object + function in one) {#blocks}
+## Blocks (object + function in one)

 In Hi, `{}` is a Block. It can hold properties and executable code.
 A Block is both an “object” and a “function” at the same time.
@@ -158,7 +157,7 @@ add: (a, b) { a + b }
 _( add(2, 3) ) // 5
 ~~~

-## Truthiness and Equality {#truth}
+## Truthiness and Equality

 Truthiness is value-based:

@@ -178,7 +177,7 @@ Equality:
 ==  // equivalent to JS ===
 ~~~

-## Conditionals (ternary-style Blocks) {#conds}
+## Conditionals (ternary-style Blocks)

 A conditional is an expression that selects a Block.

@@ -204,7 +203,7 @@ grade: (score > 90) ? { "A" }
 _(grade) // "B"
 ~~~

-## Arrays {#arrays}
+## Arrays

 ~~~js
 primes: [2, 3, 5, 7]
@@ -217,7 +216,7 @@ primes[0] = 1
 _(primes) // [1, 3, 5, 7]
 ~~~

-## Loops {#loops}
+## Loops

 `* { ... }` after a loop header runs the Block each iteration.

@@ -238,7 +237,7 @@ _(primes) // [1, 3, 5, 7]
 ^   // break
 ~~~

-## Bridging examples {#bridge}
+## Bridging examples

 Closures over private state:

@@ -270,7 +269,7 @@ welcome("Ada") // "Hi, Ada!"
 welcome("")    // "Hi!"
 ~~~

-## Notes {#notes}
+## Notes

 - Comments use `//`.
 - Strings are `"..."`.
@@ -286,24 +285,23 @@ Hi is still in active development. This page will grow with specs, a reference,
 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 icons=()=>window.lucide&&lucide.createIcons()
  const slug=s=>s.toLowerCase().trim().replace(/[^\w\- ]+/g,'').replace(/\s+/g,'-')

  // Render markdown into suneHtml
-  const src=$('#md')?.textContent||'', html=md.render(src), root=$('#suneHtml')
-  root.className='markdown-body max-w-3xl mx-auto'; root.innerHTML=html
+  const root=$('#suneHtml'); root.className='markdown-body max-w-3xl mx-auto'
+  root.innerHTML=md.render($('#md')?.textContent||'')

-  // Headings: ids + anchors
+  // Headings: ids + subtle anchor links
  $$('#suneHtml h2, #suneHtml h3').forEach(h=>{
-    if(!h.id)h.id=slug(h.textContent)
+    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='ml-2 text-gray-300 hover:text-gray-500 align-middle';a.innerHTML='#';h.appendChild(a)
+    const a=document.createElement('a');a.href='#'+h.id;a.className='anchor-link';a.textContent='#';h.appendChild(a)
  })

  // Highlight + copy buttons
  document.querySelectorAll('#suneHtml pre>code').forEach(code=>{
-    if(window.hljs) hljs.highlightElement(code)
-    const pre=code.parentElement, t=code.textContent||'', btn=document.createElement('button'), meta=document.createElement('span'), box=document.createElement('div')
+    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'
@@ -311,13 +309,15 @@ document.addEventListener('DOMContentLoaded',()=>{
  })

  // Build side nav (desktop + mobile)
-  const buildNav=(navSel)=>{
-    const nav=$(navSel); if(!nav)return; nav.innerHTML=''
+  const heads=$$('#suneHtml h2,h3')
+  const buildNav=sel=>{
+    const nav=$(sel); if(!nav)return; nav.innerHTML=''
    const frag=document.createDocumentFragment()
-    $$('#suneHtml h2,h3').forEach(h=>{
+    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=h.textContent.replace('#','').trim(); frag.appendChild(a)
+      a.textContent=title; frag.appendChild(a)
    })
    nav.appendChild(frag)
    const links=[...nav.querySelectorAll('a')]
@@ -329,12 +329,12 @@ document.addEventListener('DOMContentLoaded',()=>{
        }
      })
    },{rootMargin:'-50% 0px -40% 0px',threshold:[0,1]})
-    $$('#suneHtml h2, #suneHtml h3').forEach(h=>io.observe(h))
+    heads.forEach(h=>io.observe(h))
    links.forEach(L=>L.addEventListener('click',()=>{if(window.innerWidth<1024) setLeft(false)}))
  }
  buildNav('#sideNav'); buildNav('#sideNavMobile')

-  // Mobile sidebar controls (no Alpine)
+  // Mobile sidebar controls
  const overlay=$('#overlay'), side=$('#sidebarMobile'), menuBtn=$('#menuBtn')
  const setLeft=v=>{
    overlay.classList.toggle('opacity-100',v)
@@ -346,8 +346,6 @@ document.addEventListener('DOMContentLoaded',()=>{
  menuBtn?.addEventListener('click',()=>setLeft(true))
  overlay?.addEventListener('click',()=>setLeft(false))
  document.addEventListener('keydown',e=>{if(e.key==='Escape')setLeft(false)})
-
-  icons()
 })
 </script>
 </body>