grill-blog/public/static/index.js

"use strict";

const articlesDiv = document.getElementById("articles");

async function requestArticles() {
    await new Promise((r) => r());
    return [
        {
            id: 0,
            title: "Best Practices For Policing Protests",
            date: new Date().toISOString(),
            author: "Onion Trollage",
            preview:
                "<p>While police are well trained to shoot unarmed civilians, plant evidence, and file for overtime, dealing with larger-scale events like arresting several hundred college students can be more daunting. The following are the best practices law enforcement should follow when clearing political protests and demonstrations.",
        },
        {
            id: 1,
            title:
                "Columbia University Gives Students Option To Finish Classes From Prison",
            date: new Date().toISOString(),
            author: "Onion Trollage",
            preview:
                "<p>NEW YORK—Emphasizing that it was their only option amid the rampant protests that had erupted on campus, Columbia University announced Monday that it had given students the option to finish classes from prison.",
        },
    ];
}

async function main() {
    const articles = await requestArticles();

    articlesDiv.innerHTML = articles.map((article) => `
        <a href="/reader?id=${article.id}">
            <div class="article">
                <h1>${article.title}</h1>
                </p><i>${article.author}, ${
        new Date(article.date).toLocaleDateString()
    }</i></p>
                <p>${article.preview.replace(/<\/?p>/g, "")}</p>
            </div>
        </a>
    `).join("");
}

main();