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

{% extends "til_base.html" %}
 
{% set tils = sql("""
    select * from til where path = :topic || '_' || :slug || '.md'
""", {"topic": topic, "slug": slug}, database="tils")
%}
{% set til = tils[0] %}
{% if not tils %}
    {% set raised = raise_404("TIL not found") %}
{% endif %}
 
{% block title %}{{ til.title }} | Simon Willison’s TILs{% endblock %}
 
{% block extra_head %}
<link rel="stylesheet" href="https://til.simonwillison.net/static/github-light.css">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@simonw">
<meta name="twitter:title" content="{{ til.title }}">
<meta name="twitter:description" content="{{ til.summary }}">
<meta name="twitter:image" content="https://s3.amazonaws.com/til.simonwillison.net/{{ til.shot_hash }}.jpg">
<meta name="twitter:image:alt" content="Screenshot: {{ til.title  }} - {{ til.summary }}">
<meta property="og:url" content="https://til.simonwillison.net/{{ til.topic }}/{{ til.slug }}">
<meta property="og:type" content="article">
<meta property="og:title" content="{{ til.title }}">
<meta property="og:description" content="{{ til.summary }}">
<meta property="og:image" content="https://s3.amazonaws.com/til.simonwillison.net/{{ til.shot_hash }}.jpg">
<meta property="og:image:alt" content="Screenshot: {{ til.title  }} - {{ til.summary }}">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="400">
{% endblock %}
 
{% block body %}
<h1>{{ til.title }}</h1>
 
{{ til.html|safe }}
 
{% set related = related_tils(til) %}
{% if related %}
  <h3 id="related">Related</h3>
  <ul class="related">
    {% for til in related %}
    <li><span class="topic">{{ til.topic }}</span> <a href="/{{ til.topic }}/{{ til.slug }}">{{ til.title }}</a> - {{ til.created[:10] }}</li>
    {% endfor %}
  </ul>
{% endif %}
 
<p class="created">Created {{ til.created }}{% if til.created != til.updated %}, updated {{ til.updated }} &middot; <a href="{{ til.url|replace("https://github.com/simonw/til/blob/", "https://github.com/simonw/til/commits/") }}">History</a>{% endif %} &middot; <a href="{{ til.url }}">Edit</a></p>
 
<script>
// Add visible # links to all h2+ headings  
document.querySelectorAll('h2,h3,h4,h5,h6').forEach(el => {
  // New style of links
  let id = null;
  let newStyle = el.querySelector('.heading-link');
  if (newStyle) {
    // Keep using existing ID on element
    id = el.getAttribute('id');
    // Need to pull the text out of the link
    let text = newStyle.innerText;
    el.removeChild(newStyle);
    el.innerText = text;
  } else {
    let anchor = el.querySelector('a.anchor');
    if (anchor) {
      id = anchor.getAttribute('id');
      el.removeChild(anchor);  
    }
  }
  if (!id) {
    return;
  }  
  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);
});
 
// Add an audio player after any .wav or .mp3 links
// Get all anchor tags on the page
document.querySelectorAll('a[href$=".wav"],a[href$=".mp3"],a[href$=".m4a"]').forEach(function(link) {
  var href = link.getAttribute('href');
  var audio = document.createElement('audio');
  audio.controls = true;  // Show controls
  audio.src = href;
  var paragraph = document.createElement('p');
  paragraph.appendChild(audio);
  link.insertAdjacentElement('afterend', paragraph);
});
</script>
{% endblock %}