65 lines
1.9 KiB
Text
65 lines
1.9 KiB
Text
---
|
|
import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
|
|
import { changeLanguage } from "i18next";
|
|
import { getCollection } from "astro:content";
|
|
import Layout from "@layouts/Layout.astro";
|
|
import Card from "@components/Card.astro";
|
|
import Pagination from "@components/Pagination.astro";
|
|
import { Image } from "astro:assets";
|
|
|
|
changeLanguage("en");
|
|
|
|
export const getStaticPaths = (async ({ paginate }) => {
|
|
const rawEntries = await getCollection("portafolio", ({ data }) => {
|
|
return import.meta.env.PROD ? data.draft !== true : true;
|
|
});
|
|
const entries = rawEntries.map((item, idx) => ({
|
|
...item.data,
|
|
id: idx + 1,
|
|
slug: item.slug,
|
|
}));
|
|
return paginate(entries, { pageSize: 6 });
|
|
}) satisfies GetStaticPaths;
|
|
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
|
|
const { page } = Astro.props;
|
|
---
|
|
|
|
<Layout title="List of blog entries">
|
|
<h1 class="text-center">Projects</h1>
|
|
|
|
<section class="clean">
|
|
<div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
|
|
{
|
|
page.data.map((item) => (
|
|
<div>
|
|
<Card className="anim-hover-zoom h-100">
|
|
<a class="clean" href={`/projects/${item.slug}`}>
|
|
<Image
|
|
src={item.thumbnail}
|
|
alt="project img"
|
|
class="border-radius respect-width"
|
|
/>
|
|
<h3 class="fs-4 text-center my-1">{item.title}</h3>
|
|
<p class="text-justify">{item.brief}</p>
|
|
</a>
|
|
<div class="text-end" slot="footer">
|
|
<a href={`/projects/${item.slug}`}>See more...</a>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<Pagination page={page} urlPattern="/projects/{}" />
|
|
</section>
|
|
</Layout>
|
|
|
|
<style lang="scss">
|
|
a.clean {
|
|
color: var(--prj-text);
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
</style>
|