homepage/res/blog.js

const blogArticles = {
    'Welcome': 'a welcome page for my new blog'
}

const blogPopulateArticleList = (elementId) => {
    const element = A(`#${elementId}`);

    let html = '';
    for (const [k, v] of Object.entries(blogArticles)) {
        html += `<a href="#" onclick="blogVisitArticle('${k}', '${v}')">${k}</a>`;
    }

    element.html(html);
};

const blogVisitArticle = async (name, desc) => {
    if (!name || !desc) return;
    if (/[^a-zA-Z0-9\.]/.test(name)) {
        alert('Tried to access and invalid article (invalid name)');
        console.error('Tried to access and invalid article (invalid name)');
        return;
    }

    const res = await fetch(`/pages/blog/articles/${name}.md`);
    if (!res.ok) {
        console.error('Article not found');
        peformRouteAction('/');
        return;
    }

    const articleMarkdown = await res.text();
    // TODO: The output markdown is not sanitized. This is not really 100000% urgent, since I am the one that is uploading the aricles, but this still may pose a threat.
    A('#content-container').html(marked(articleMarkdown));
    A('meta[name="description"]').attr('content', desc);
    history.pushState({ route: `/article/${name}`, articleName: name }, '', `/article/${name}`);
}