---
export const prerender = false;

import PageLayout from "@/layouts/Base.astro";

const meta = {
	title: "/blogroll",
	description: "A collection of RSS feeds I'm subscribed to",
};

// Fetch the feeds data
const response = await fetch("https://feeds.stevedylan.dev/api/subscriptions");
const data = await response.json();

// Sort subscriptions by title
const sortedFeeds = data.subscriptions.sort((a, b) =>
	a.title.localeCompare(b.title),
);
---

<PageLayout meta={meta}>
  <div class="space-y-6">
    <h1 class="title">/blogroll</h1>
    <p>
      Help build a blog network with me! Check out some of the people I follow
      below, and if you end up following them too, create a <a
        href="https://indieweb.org/blogroll"
        class="style-link"
        target="_blank"
        rel="noreferrer">/blogroll</a
      > page of your own with your list of people!
    </p>
    <h2 class="text-xl font-semibold text-accent-2">Links</h2>
    <ul
      class="list-none pl-0 space-y-4 sm:grid sm:grid-cols-2 sm:gap-y-4 sm:space-y-0"
    >
      {
        sortedFeeds.map((feed) => (
          <li>
            <a
              href={feed.site_url}
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center gap-2"
            >
              {feed.favicon_url && (
                <img
                  src={feed.favicon_url}
                  alt={`Favicon for ${feed.title}`}
                  width="16"
                  height="16"
                  loading="lazy"
                  class="favicon w-4 h-4 rounded-sm"
                  onerror="this.style.display='none';this.nextElementSibling.style.display='inline-block'"
                />
              )}
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 256 256"
                class="favicon-fallback w-4 h-4"
                style={feed.favicon_url ? "display:none" : ""}
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16m0 16v32H40V56Zm0 144H40v-96h176z"
                />
              </svg>
              {feed.title}
            </a>
          </li>
        ))
      }
    </ul>
    <h2 class="text-xl font-semibold text-accent-2 pt-8">API</h2>
    <p>
      I'm currently using my own RSS aggregator and reader called <a
        href="https://andromeda.build/apps/feeds/"
        target="_blank"
        rel="noopener noreferrer"
        class="style-link">Feeds</a
      > to manage my feeds, which inlcudes an API to programmatically share them as
      a list.
    </p>
    <pre
      class="whitespace-pre-wrap break-all"><code># JSON
curl https://feeds.stevedylan.dev/feeds?format=json

# OPML File
curl https://feeds.stevedylan.dev/feeds?format=opml -o feed.opml</code></pre>
  </div>
</PageLayout>