---
import { SEO } from "astro-seo";
import { format } from "date-fns";

const posts = await Astro.glob("./posts/*.md");

posts.sort((a, b) => {
  const dateA = new Date(a.frontmatter.pubDate);
  const dateB = new Date(b.frontmatter.pubDate);

  if (dateA === dateB) {
    return 0;
  }

  if (dateA < dateB) {
    return 1;
  }

  return -1;
});
---

<html lang="en">
  <head>
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="stylesheet" href="/font.css" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <SEO
      charset="utf-8"
      title="Zvonimir Rudinski | Blog"
      description="Looking for a fully commited developer who can digitalize your business and make it more efficient? Look no further, I am here to help you!"
      twitter={{
        creator: "@rudinskiz",
      }}
    />
  </head>
  <body class="bg-primary m-12">
    <h1 class="text-2xl md:text-4xl text-secondary font-squada">
      $ Zvonimir Rudinski / Blog
    </h1>

    <div class="mb-4">
      <a
        href="/"
        class="font-pt-sans text-white hover:text-secondary hover:text-underline transition-colors"
      >
        ← Back to Home</a
      >
    </div>

    <ul class="list-disc list-inside text-white">
      {
        posts.map((post) => (
          <li>
            <a
              href={post.url}
              class="text-lg md:text-xl lowercase transition-colors opacity-60 hover:text-secondary hover:cursor-pointer hover:opacity-80"
            >
              {post.frontmatter.title} -{" "}
              {format(new Date(post.frontmatter.pubDate), "MMMM dd, yyyy")}
            </a>
          </li>
        ))
      }
    </ul>

    <footer class="mt-12">
      <p class="text-secondary text-center">&copy; 2024 Zvonimir Rudinski</p>
    </footer>
  </body>
</html>
