---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
import { CardGrid } from "@astrojs/starlight/components";
import { z } from "astro/zod";
import PluginCard from "~/components/PluginCard.astro";
import { PluginSchema } from "~/utils/types";
import { zodFetch } from "~/utils/fetch";

const pluginResponse = await zodFetch(
  z.array(PluginSchema),
  "Failed to fetch plugins",
  "https://raw.githubusercontent.com/sern-handler/awesome-plugins/main/pluginlist.json",
);

if (!pluginResponse.ok) {
  return console.error(pluginResponse.error);
}

const plugins = pluginResponse.value;
---

<StarlightPage frontmatter={{ title: "Plugins", template: "splash" }}>
  <h5>
    First time here? View <a href="/v4/reference/plugins">plugins</a>
  </h5>
  <CardGrid>
    {plugins.map((p) => <PluginCard {...p} />)}
  </CardGrid>
</StarlightPage>
