homepage.html

{% extends "bighead.html" %}

{% block title %}Simon Willison’s Weblog{% endblock %}

{% block extrahead %}
<link href="https://github.com/simonw" rel="me">
<link href="https://twitter.com/simonw" rel="me">
{% for entry in entries %}{{ entry.extra_head_html|default:""|safe }}{% endfor %}
{% endblock %}

{% block primary %}
<h2 class="overband">Recent entries <a href="/atom/entries/" class="small-atom" title="Atom feed of new entries"><svg width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><circle cx="68" cy="189" r="24" fill="#FFF"/><path fill="#FFF" d="M160 213h-34a82 82 0 0 0-82-82V97a116 116 0 0 1 116 116z"/><path fill="#FFF" d="M184 213A140 140 0 0 0 44 73V38a175 175 0 0 1 175 175z"/></svg></a></h2>
{% load entry_tags %}
{% for entry in entries %}
<div class="entry segment" data-date="{{ entry.created|date:"c" }}">
<h3><a href="{{ entry.get_absolute_url }}" rel="bookmark">{{ entry.title|typography }}</a> <span class="textago">{% if entry.is_today %}today{% else %}{{ entry.created|text_ago }}{% endif %}</span></h3>
{{ entry.body|xhtml|resize_images_to_fit_width:"450"|typography|strip_p_ids|xhtml2html }}
<div class="entryFooter">
{% entry_footer entry %}
</div>
</div> <!-- end div.entry -->
{% endfor %}
{% endblock %}

{% block secondary %}
<h2 class="overband">Elsewhere <a href="/atom/links/" class="small-atom" title="Atom feed of new links"><svg xmlns="http://www.w3.org/2000/svg"  width="14px" height="14px" viewBox="0 0 256 256"><circle cx="68" cy="189" r="24" fill="#FFF"/><path fill="#FFF" d="M160 213h-34a82 82 0 0 0-82-82V97a116 116 0 0 1 116 116z"/><path fill="#FFF" d="M184 213A140 140 0 0 0 44 73V38a175 175 0 0 1 175 175z"/></svg></a></h2>
{% for day in days %}
<div class="day">
<h3><a href="{{ day.date|date:"/Y/M/j/" }}">{% if day.special %}{{ day.special }}{% else %}{{ day.date|date:"jS F Y" }}{% endif %}</a></h3>
{% if day.photos %}<div class="photos">{% for photo in day.photos %}<a href="{{ photo.photopage }}" class="photolink"><img src="{{ photo.url_s }}" alt="{{ photo.title }}" title="{{ photo.title }}"></a>{% endfor %}</div>
<br style="clear: both">{% endif %}
{% if day.items %}
<ul>{% for item in day.items %}
  <li data-date="{{ item.obj.created|date:"c" }}">{% ifequal item.type "link" %}
      <a href="{{ item.obj.link_url }}">{{ item.obj.link_title }}</a>{% if item.obj.via_url %} (<a href="{{ item.obj.via_url }}" title="{{ item.obj.via_title }}">via</a>){% endif %}{% if not item.obj.via_url and not item.obj.link_title|ends_with_punctuation %}.{% endif %} {{ item.obj.commentary|typography }} <a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a><span class="elsewhere-date"> &mdash; <a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>, {{ item.obj.created|date:"f A"|lower }}</span>
      {% else %}
      <blockquote><p>{{ item.obj.quotation|typography }}</p></blockquote><p class="cite">&mdash; {% if item.obj.source_url %}<a href="{{ item.obj.source_url }}">{{ item.obj.source }}</a>{% else %}{{ item.obj.source }}{% endif %} <a href="{{ item.obj.get_absolute_url }}" rel="bookmark">#</a> <span class="elsewhere-date">&mdash; <a href="/{{ item.obj.created|date:"Y/M/j/" }}">{{ item.obj.created|date:"jS F Y" }}</a>, {{ item.obj.created|date:"f A"|lower }}</span></p>
      {% endifequal %}
  </li>
  {% endfor %}
</ul>
{% endif %}
</div> <!-- .day -->
{% endfor %}
<script>
/* Rearrange content on smaller screens */
window.hasBeenRearrangedForMobile = false;
function rearrangeForMobile() {
  document.querySelector('#secondary').classList.add('hide-secondary-on-mobile');
  const items = Array.from(document.querySelectorAll('*[data-date]'));
  items.sort((a, b) => {
    const aDate = a.getAttribute('data-date');
    const bDate = b.getAttribute('data-date');
    if (aDate < bDate) {
      return 1;
    }
    if (aDate > bDate) {
      return -1;
    }
    return 0;
  });
  const primary = document.querySelector('#primary');
  items.forEach(el => {
    if (el.tagName == 'LI') {
      // Turn this into a <div>
      var div = document.createElement('div');
      div.classList.add('segment');
      div.classList.add('elsewhere-in-primary');
      if (el.querySelector('blockquote')) {
        div.classList.add('quote');
      }
      div.innerHTML = el.innerHTML;
      primary.appendChild(div);
    } else {
      primary.appendChild(el);
    }
  });
}
function conditionalRearrange(m) {
  if (m.matches && !window.hasBeenRearrangedForMobile) {
    rearrangeForMobile();
    window.hasBeenRearrangedForMobile = true;
  }
}
var mediaMatcher = window.matchMedia('(max-width: 800px)');
conditionalRearrange(mediaMatcher);
mediaMatcher.addListener(conditionalRearrange);
</script>
{% endblock %}