---

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>