async function renderFeed() {
    const fragment = document.createDocumentFragment();
    try {
        const feed = await fetch('recent-blog-posts.json').then(x => x.json());
        for (const item of feed) {
            const li = document.createElement('li');
            const a = document.createElement('a');
            li.appendChild(a);
            a.href = item.link;
            a.appendChild(document.createTextNode(item.title));
            fragment.appendChild(li);
        }
    } catch (e) {
        const li = document.createElement('li');
        li.innerHTML = '<i>Failed to fetch recent blogs</i>';
        fragment.appendChild(li);
    }
    return fragment;
}

async function attachPosts() {
    const el = document.getElementById("recent_blog_posts");
    if (!el) return;
    el.appendChild(await renderFeed());
}

attachPosts();