---
import ArticleList from '../components/ArticleList.astro';
import Page from '../layouts/Page.astro';
import { getPublishedPosts } from '../lib/site';

const RECENT_ARTICLES = 5;

const posts = await getPublishedPosts();
const recent = posts.slice(0, RECENT_ARTICLES);
---

<Page
  title="This page doesn't exist"
  description="The link you followed may be broken, or the page may have moved."
  noindex
>
  <div class="empty-state">
    <p>
      Try the <a href="/articles/">articles archive</a>, the
      <a href="/projects/">project index</a>, the
      <a href="/tags/">tag index</a>, or head back to the
      <a href="/">homepage</a>.
    </p>
  </div>

  <section class="home-section">
    <div class="section-heading">
      <h2 id="recent-articles-404">Recent articles</h2>
      <a href="/articles/">All articles <span aria-hidden="true">→</span></a>
    </div>
    <ArticleList posts={recent} />
  </section>
</Page>