---

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

import { RSS_FEEDS } from "@/data/constants";

const meta = {

	title: "/feeds",

	description: "RSS feeds available on this site",

};

---

<PageLayout meta={meta}>

  <div class="space-y-6">

    <h1 class="title">/feeds</h1>

    <p>RSS feeds available on this site and some of my other apps. Drop any of these into your reader of choice.</p>

    <ul class="list-none pl-0 grid grid-cols-1 sm:grid-cols-2 gap-4">

      {RSS_FEEDS.map((feed) => {

        const absHref = feed.href.startsWith("http")

          ? feed.href

          : `https://stevedylan.dev${feed.href}`;

        return (

          <li class="group relative flex flex-col gap-2 border border-zinc-700 hover:border-zinc-500 rounded-md p-4 transition-colors">

            <div class="flex items-center gap-2">

              <svg

                xmlns="http://www.w3.org/2000/svg"

                width="18"

                height="18"

                viewBox="0 0 256 256"

                class="shrink-0 text-accent-2"

                aria-hidden="true"

              >

                <path

                  fill="currentColor"

                  d="M106.91 149.09A71.53 71.53 0 0 1 128 200a8 8 0 0 1-16 0a56 56 0 0 0-56-56a8 8 0 0 1 0-16a71.53 71.53 0 0 1 50.91 21.09M56 80a8 8 0 0 0 0 16a104 104 0 0 1 104 104a8 8 0 0 0 16 0A120 120 0 0 0 56 80m118.79 1.21A166.9 166.9 0 0 0 56 32a8 8 0 0 0 0 16a151 151 0 0 1 107.48 44.52A151 151 0 0 1 208 200a8 8 0 0 0 16 0a166.9 166.9 0 0 0-49.21-118.79M60 184a12 12 0 1 0 12 12a12 12 0 0 0-12-12"

                />

              </svg>

              <p class="font-bold m-0">{feed.name}</p>

            </div>

            {feed.description && (

              <p class="m-0 text-zinc-400">{feed.description}</p>

            )}

            <div class="flex items-center gap-2 mt-auto pt-2">

              <a

                href={feed.href}

                target="_blank"

                rel="noreferrer"

                class="style-link truncate text-xs"

              >

                {feed.href}

              </a>

            </div>

          </li>

        );

      })}

    </ul>

    <p>If you're looking for the list of blogs I follow, check out <a class="style-link" href="/blogroll">/blogroll</a></p>

  </div>

</PageLayout>