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 }} · <a href="{{ til.url|replace("https://github.com/simonw/til/blob/", "https://github.com/simonw/til/commits/") }}">History</a>{% endif %} · <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 %}