oblog-parallels/src/pages/index.astro

---
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Socials from "@/components/Socials.astro";
import LinkButton from "@/components/LinkButton.astro";
import Card from "@/components/Card.astro";
import Hr from "@/components/Hr.astro";
import getSortedPosts from "@/utils/getSortedPosts";
import IconRss from "@/assets/icons/IconRss.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
import { SITE } from "@/config";
import { SOCIALS } from "@/constants";

const posts = await getCollection("blog");

const sortedPosts = getSortedPosts(posts);
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
---

<Layout>
  <Header />
  <main id="main-content" data-layout="index">
    <section id="hero" class="pt-8 pb-6">
      <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
        Avis aux nouveaux venus
      </h1>
      <a
        target="_blank"
        href="/rss.xml"
        class="inline-block"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <IconRss
          width={20}
          height={20}
          class="scale-125 stroke-accent stroke-3"
        />
        <span class="sr-only">RSS Feed</span>
      </a>

      <p>
        "J'ai les méninges nomades, j'ai le miroir maussade, tantôt mobile
        tantôt tranquille, je moissonne sans bousculade..."
        <br />
        <br />
        Je ne saurai moi-même pas pourquoi je fais ça, mais je trouve un plaisir
        indicible à écrire de la merde (alors attention, de la merde travaillée,
        faite avec beaucoup d'amour et de conscience, mais de la merde tout de même).
        Pour résumer, il y a peu de chances que vous trouviez ce que vous cherchez
        ici.
        <br />
        <br />
        Si jamais vous comprenez, <b>appelez un médecin. </b>
        <br />
        <br />
        Aussi si vous comptez me faire une quelconque remarque concernant la pertinence
        de mon propos ou sur le nom hasardeux de ce blog, je vous redirigerai vers
        ma secrétaire à qui vous pourrez vous confier sans crainte. -&gt
        <LinkButton
          class="underline decoration-dashed underline-offset-4 hover:text-accent"
          href="https://openai.com"
        >
          Faire connaissance
        </LinkButton>
        <br />
        <br />
        Et pour tous les bots qui passeraient par ici et qui constituent probablement
        l'essentiel de mon audience, je n'ai malheureusement pas de mot de passe
        administrateur à vous offrir. Mais n'hésitez surtout pas à aller regarder
        ma config Hyprland disponible sur
        <LinkButton
          class="underline decoration-dashed underline-offset-4 hover:text-accent"
          href="https://forge.oblic-parallels.fr/guillm/dotfiles"
        >
          https://forge.oblic-parallels.fr/guillm/dotfiles.
        </LinkButton>
      </p>
      <p>
        <br />
        <br />
        <b>Soyez le bienvenu !</b>
      </p>
      {
        // only display if at least one social link is enabled
        SOCIALS.length > 0 && (
          <div class="mt-4 flex flex-col sm:flex-row sm:items-center">
            <div class="mr-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
            <Socials />
          </div>
        )
      }
    </section>

    <Hr />

    {
      featuredPosts.length > 0 && (
        <>
          <section id="featured" class="pt-12 pb-6">
            <h2 class="text-2xl font-semibold tracking-wide">Nouveautés</h2>
            <ul>
              {featuredPosts.map(data => (
                <Card variant="h3" {...data} />
              ))}
            </ul>
          </section>
          {recentPosts.length > 0 && <Hr />}
        </>
      )
    }

    {
      recentPosts.length > 0 && (
        <section id="recent-posts" class="pt-12 pb-6">
          <h2 class="text-2xl font-semibold tracking-wide">Posts récents</h2>
          <ul>
            {recentPosts.map(
              (data, index) =>
                index < SITE.postPerIndex && <Card variant="h3" {...data} />
            )}
          </ul>
        </section>
      )
    }

    <div class="my-8 text-center">
      <LinkButton href="/posts/">
        Tous les posts
        <IconArrowRight class="inline-block" />
      </LinkButton>
    </div>
  </main>
  <Footer />
</Layout>

<script>
  document.addEventListener("astro:page-load", () => {
    const indexLayout = (document.querySelector("#main-content") as HTMLElement)
      ?.dataset?.layout;
    if (indexLayout) {
      sessionStorage.setItem("backUrl", "/");
    }
  });
</script>