simonw / til

Following:

#81

The output of the GitHub Markdown API I am using changed and now:

https://til.simonwillison.net/sqlite/sqlite-tg

But it doesn't quite work - #installation does not resolve to user-content-installation:

<h2 id="user-content-installation">
  <a class="heading-link" href="#installation">Installation
    <span aria-hidden="true" class="octicon octicon-link"></span>
  </a>
</h2>

On older pages rendered before that change it looks like this: https://til.simonwillison.net/sqlite/cr-sqlite-macos

Short-term fix: JavaScript. Longer-term fix: rewrite the HTML that comes back from the API before saving it in the database.

Current JavaScript:

til/templates/pages/{topic}/{slug}.html

Lines 50 to 68 in 0f7967e

    
           // Add visible # links to all h2+ headings   
        
           document.querySelectorAll('h2,h3,h4,h5,h6').forEach(el => { 
        
             let anchor = el.querySelector('a.anchor'); 
        
             if (!anchor) { 
        
               return; 
        
             } 
        
             let id = anchor.getAttribute('id'); 
        
             el.removeChild(anchor); 
        
             el.setAttribute('id', id); 
        
             let hashLink = document.createElement('a'); 
        
             hashLink.style.textDecoration = 'none'; 
        
             hashLink.style.color = '#b7b3b3'; 
        
             hashLink.style.fontSize = '0.8em'; 
        
             hashLink.setAttribute('href', '#' + id); 
        
             hashLink.innerText = '#'; 
        
             el.appendChild(document.createTextNode(' ')); 
        
             // Add that link 
        
             el.appendChild(hashLink); 
        
           });

Previous HTML looks like this:

<h2>
  <a id="user-content-how-that-all-works" class="anchor" aria-hidden="true" href="#how-that-all-works">
  <span aria-hidden="true" class="octicon octicon-link"></span>
  </a>How that all works
</h2>

I'm almost happy with this workaround: https://til.simonwillison.net/sqlite/sqlite-tg

But... https://til.simonwillison.net/sqlite/sqlite-tg#trying-it-out is the link it generates, which works with JS enabled but isn't the actual ID in the page. I'll fix that.

I'm happy with this.

	// Add visible # links to all h2+ headings
	document.querySelectorAll('h2,h3,h4,h5,h6').forEach(el => {
	let anchor = el.querySelector('a.anchor');
	if (!anchor) {
	return;
	}
	let id = anchor.getAttribute('id');
	el.removeChild(anchor);
	el.setAttribute('id', id);
	let hashLink = document.createElement('a');
	hashLink.style.textDecoration = 'none';
	hashLink.style.color = '#b7b3b3';
	hashLink.style.fontSize = '0.8em';
	hashLink.setAttribute('href', '#' + id);
	hashLink.innerText = '#';
	el.appendChild(document.createTextNode(' '));
	// Add that link
	el.appendChild(hashLink);
	});

GitHub Markdown API changed and broke my links