Feed View Updated

<style>
.feed-container a.card
{
    color: var(--text-normal) !important;
    text-decoration: none !important;
    border-radius: var(--radius-l);
    border: 1px solid var(--divider-color);
    margin: 0 !important;
    transition: border 0.1s ease-in-out, background-color 0.2s ease-in-out;
    padding: 1em !important;
    display: flow;
}
.feed-container a.card:hover
{
    border: 1px solid var(--divider-color-hover);
    background-color: hsla(var(--accent-h), var(--accent-s), calc(var(--accent-l) * 1.5), 0.1);
}
.feed-container a.card a:hover
{
    text-decoration: underline;
}
.feed-container a.card a.tag
{
    margin-block: 0.5em;
    display: block;
    width: fit-content;
}
.feed-container a.card > h3:first-child
{
    margin: 0 !important;
    margin-bottom: 0.5em !important;
}
.feed-container a.card p
{
    margin: 0 !important;
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.feed-container a.card .feed-time
{
    display: inline-block;
    margin-top: 0.6em;
    font-size: var(--font-smallest);
    color: var(--text-muted);
}
.feed-container
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    gap: 0.5em;
}
</style>

<script>
    function getHumanReadableTimeDiff(oldTime, newTime)
    {
        const diff = oldTime - newTime;
        const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
        let time = formatter.format(Math.round(diff / 86400000), 'day');
        if (time == "today")
            time = formatter.format(Math.round(diff / 3600000), 'hour');
        if (time == "this hour")
            time = formatter.format(Math.round(diff / 600000), 'minute');
        if (time == "this minute")
            time = "now";
        return time;
    }
    async function createFeed()
    {
        if (window.location.pathname != "/" && window.location.pathname != "/index.html")
            return;
        let rssResp = await fetch("/lib/rss.xml");
        if (!rssResp.ok) return;
        let rss = await rssResp.text();
        let rssDoc = await new DOMParser().parseFromString(rss, "text/xml");
        let items = Array.from(rssDoc.querySelectorAll("item"));
        function getItem(itemEl)
        {
            let regex = /<!-?-?\[CDATA\[([\w\W]+?)]]>/;
            let title = itemEl.querySelector("title")?.textContent;
            let description = itemEl.querySelector("description")?.textContent;
            let link = itemEl.querySelector("link")?.textContent;
            let date = itemEl.querySelector("pubDate")?.textContent;
            title = title?.match(regex)?.[1] ?? title?.match(regex)?.[0] ?? title;
            description = description?.match(regex)?.[1] ?? description?.match(regex)?.[0] ?? description;
            link = link?.match(regex)?.[1] ?? link?.match(regex)?.[0] ?? link;
            date = new Date(date);
            return {title: title, description: description, link: link, date: date}
        }
        let rssItems = items.map((i) => getItem(i));
        let container = document.createElement("div");
        container.classList.add("feed-container");
        document.querySelector(".markdown-preview-sizer").append(container);
        for (let item of rssItems)
        {
            let card = document.createElement("a");
            container.append(card);
            card.href = item.link;
            card.classList.add("card", "internal-link");
            let title = document.createElement("h3");
            card.append(title);
            title.innerHTML = item.title;
            let description = document.createElement("p");
            card.append(description);
            description.innerHTML = item.description;
            let timeEl = document.createElement("span");
            timeEl.classList.add("feed-time");
            card.append(timeEl);
            timeEl.innerHTML = getHumanReadableTimeDiff(item.date, Date.now());
        }
        container.querySelectorAll("a.tag").forEach((t) => {t.style = ""; t.parentElement.before(t)});
        container.querySelectorAll("img").forEach((el) => el.remove());
        container.querySelectorAll("[src]").forEach(el => el.src = el.src.replace("https://docs.obsidianweb.net", ""));
        container.querySelectorAll("[href]").forEach(el => el.href = el.href.replace("https://docs.obsidianweb.net", ""));
        container.querySelectorAll("br:first-child").forEach(el => el.remove());
        setupLinks(container);
    }
    onPageLoad(createFeed);
</script>