110 lines
3.0 KiB
Plaintext
110 lines
3.0 KiB
Plaintext
---
|
|
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">
|
|
{SITE.title}
|
|
</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 rtl:-rotate-90"
|
|
/>
|
|
<span class="sr-only">RSS Feed</span>
|
|
</a>
|
|
|
|
<p>
|
|
{SITE.desc}
|
|
</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="me-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">Featured</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">Recent Posts</h2>
|
|
<ul>
|
|
{recentPosts.map(
|
|
(data, index) =>
|
|
index < SITE.postPerIndex && <Card variant="h3" {...data} />
|
|
)}
|
|
</ul>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<div class="my-8 text-center">
|
|
<LinkButton href="/posts/">
|
|
All Posts
|
|
<IconArrowRight class="inline-block rtl:-rotate-180" />
|
|
</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>
|