function addMetadata() {
    // Favicon
    const favicon = document.createElement("link");
    favicon.rel = "icon";
    favicon.href = "https://static.williamsfam.us.com/Logo.svg";
    favicon.type = "image/svg+xml";
    document.head.appendChild(favicon);

    // UTF-8 (for special characters)
    const charset = document.createElement("meta");
    charset.setAttribute("charset", "UTF-8");
    document.head.appendChild(charset);

    // viewport (for mobile)
    const viewport = document.createElement("meta");
    viewport.setAttribute("name", "viewport");
    viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
    document.head.appendChild(viewport);

    // css
    const proseCss = document.createElement("link");
    proseCss.rel = "stylesheet";
    proseCss.href = "article.css";
    document.head.appendChild(proseCss);
}

function addHeader() {
    const header = document.querySelector("header");

    const headerTop = document.createElement("div");
    headerTop.classList.add("header-top");

    const logoLink = document.createElement("a");
    logoLink.href = "writing";
    logoLink.classList.add("header-logo-link");
    headerTop.appendChild(logoLink);

    const info = document.createElement("div");
    info.classList.add("header-info");
    const h1 = document.createElement("h1");
    h1.textContent = document.title;
    info.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 = `Published ${displayDate}`;
    info.appendChild(time);
    headerTop.appendChild(info);
    header.appendChild(headerTop);

    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", () => {
    addMetadata();
    addHeader();
    addTOC();

    const article = document.querySelector('article');
    article.classList.add('markdown-body');
})