mirror of
https://github.com/SkyfallWasTaken/skyfalldev.git
synced 2025-04-03 18:24:15 +00:00
69 lines
2.1 KiB
Text
69 lines
2.1 KiB
Text
---
|
|
import BaseHead from "../../components/BaseHead.astro";
|
|
import Header from "../../components/Header.astro";
|
|
import Footer from "../../components/Footer.astro";
|
|
import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
|
|
import { getCollection } from "astro:content";
|
|
import FormattedDate from "../../components/FormattedDate.astro";
|
|
import { Image } from "astro:assets";
|
|
|
|
const posts = (await getCollection("blog")).sort(
|
|
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
|
|
);
|
|
|
|
const IMAGE_EAGER_COUNT = 8;
|
|
let imagesLoadedEagerly = 0;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
|
</head>
|
|
<body>
|
|
<Header />
|
|
<main>
|
|
<section>
|
|
<ul
|
|
class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 m-4 my-6 text-text"
|
|
>
|
|
{
|
|
posts.map((post) => {
|
|
const shouldLoadEagerly = imagesLoadedEagerly < IMAGE_EAGER_COUNT;
|
|
if (shouldLoadEagerly) {
|
|
imagesLoadedEagerly += 1;
|
|
}
|
|
|
|
return (
|
|
<li>
|
|
<a href={`/blog/${post.slug}/`}>
|
|
{() => {
|
|
if (post.data.heroImage) {
|
|
return (
|
|
<Image
|
|
width={720}
|
|
height={360}
|
|
src={post.data.heroImage}
|
|
loading={shouldLoadEagerly ? "eager" : "lazy"}
|
|
class="rounded-md mb-3"
|
|
alt=""
|
|
/>
|
|
);
|
|
}
|
|
}}
|
|
<h4 class="text-2xl font-bold">{post.data.title}</h4>
|
|
<p class="text-text mb-2">{post.data.description}</p>
|
|
<p>
|
|
<FormattedDate date={post.data.pubDate} />
|
|
</p>
|
|
</a>
|
|
</li>
|
|
);
|
|
})
|
|
}
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</body>
|
|
</html>
|