Show links/quotes mixed in order with entries on mobile

[simonw]

On mobile stuff in the "Elsewhere" column is only visible if you scroll most of the way down the page. I want to interleave this content in date order with the entries when the site is displayed in a single column.

[simonw]

I was hoping this would be possible using clever CSS grid tricks but it looks like it needs some JavaScript after all.

[simonw]

JavaScript prototype (to paste into devtools):

var 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;
});
primary = document.querySelector('#primary');
items.forEach(el => primary.appendChild(el));

[simonw]

This version turns the <li> elements into <div>:

var 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;
});
var primary = document.querySelector('#primary');
items.forEach(el => {
    if (el.tagName == 'LI') {
        // Turn this into a <div>
        var div = document.createElement('div');
        div.classList.add('elsewhere-in-primary');
        div.innerHTML = el.innerHTML;
        primary.appendChild(div);
        el.parentNode.removeChild(el);
    } else {
        primary.appendChild(el);
    }
});

[simonw]

I'm going to style it to look like the search results, with the date displayed on each item when they are shown in the primary navigation. https://simonwillison.net/search/?q=jupyter

[simonw]

Shipped.