function addHeader() {
    const header = document.querySelector("header");
    
    const h1 = document.createElement('h1');
    h1.textContent = document.title;
    header.appendChild(h1);
    
    const time = document.createElement('time');
    const metaDate = document.querySelector('meta[property="article:published_time"]');
    const dateString = metaDate.getAttribute('content');
    const displayDate = (new Date(dateString)).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
        timeZone: 'UTC'
    });
    time.setAttribute('datetime', dateString);
    time.textContent = displayDate;
    header.appendChild(time);

    const hr = document.createElement('hr');
    header.appendChild(hr);
}

function addTOC() {
    const tocDiv = document.getElementById("toc");
    if (!tocDiv) return;

    const tocHeading = document.createElement("h2");
    tocHeading.textContent = "Table of Contents";
    tocDiv.appendChild(tocHeading);

    const toc = document.createElement("ul");

    document.querySelectorAll('article :is(h1, h2, h3, h4, h5, h6):not(header *, #toc *)').forEach(heading => {
        const link = document.createElement("a");
        link.href = "#" + heading.id.toLowerCase();
        link.textContent = heading.textContent;

        const li = document.createElement("li");
        li.appendChild(link);

        toc.appendChild(li);
    });

    tocDiv.appendChild(toc);
}

document.addEventListener("DOMContentLoaded", () => {
    addHeader()
    addTOC()
})