Beautified post lists page

TODO:
- Fix when blog page is non existent in selected language
This commit is contained in:
2024-06-03 20:42:22 +02:00
parent 3b50c525e5
commit fb2a983a91
8 changed files with 135 additions and 11 deletions

View File

@ -6,6 +6,15 @@ import { dictionary } from "../../../i18n/dictionary";
import SinglePage from "../../../layouts/SinglePage.astro";
const { title, description } = dictionary[Astro.currentLocale];
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "../../../components/ui/card";
export async function getStaticPaths() {
return ["en", "fr", "cs", "de"].map((lang) => {
return { params: { lang } };
@ -13,22 +22,34 @@ export async function getStaticPaths() {
}
var posts = await getBlogPosts();
var filtered_posts = posts.filter(
(post) => post.data.language == Astro.currentLocale
(post) => post.data.language == Astro.currentLocale,
);
---
<MainLayout title={title} description={description} lang={Astro.currentLocale}>
<SinglePage>
<ul>
<div class="grid lg:flex gap-2">
{
filtered_posts.map((post) => (
<li>
<div>
<a href={post.blog_slug}>
<h1>{post.data.title}</h1>
<Card>
<CardHeader>
<img src={post.data.image.url} alt={post.data.image.alt} class="rounded-md">
<span class="py-2"/>
<CardTitle>{post.data.title}</CardTitle>
<CardDescription>
<p>{post.data.author} • {post.data.publishDate.toLocaleString(Astro.currentLocale)}</p>
</CardDescription>
</CardHeader>
<CardContent>
<p>{post.data.description}</p>
</CardContent>
</Card>
</a>
</li>
</div>
))
}
</ul>
</div>
</SinglePage>
</MainLayout>

View File

@ -0,0 +1,16 @@
---
import MainLayout from '../../../../layouts/MainLayout.astro';
import SinglePage from '../../../../layouts/SinglePage.astro';
//@ts-ignore
import { dictionary } from "../../../../i18n/dictionary";
import { LANGUAGES } from '../../../../i18n/utils';
const { title, description } = dictionary[Astro.currentLocale];
const { tag } = Astro.params;
---
<MainLayout title={title} description={description} lang={Astro.currentLocale}>
<SinglePage>
<p>Posts tagged with {tag}</p>
</SinglePage>
</MainLayout>