achat-maison-albi-fr/src/pages/blog/[...slug].astro
Emil Gulamov ac22de1301 Add insights category and related articles section to blog
Code has been updated to include insights as a new category of blog posts. Each blog post now also includes a related articles section at the bottom. The new feature enriches the content offering for users and potentially increases user engagement. The code has also been cleaned up for readability and consistency, improving maintainability long term.
2024-02-18 00:55:32 +04:00

120 lines
4.5 KiB
Text

---
// Import section components
import MainLayout from "../../layouts/MainLayout.astro";
import AvatarBlogLarge from "../../components/ui/avatars/AvatarBlogLarge.astro";
import CardRelated from "../../components/ui/cards/CardRelated.astro";
import { Image } from "astro:assets";
import { capitalize, formatDate } from "../../utils";
import { getCollection } from "astro:content";
import type { CollectionEntry } from "astro:content";
export async function getStaticPaths() {
const blogPosts = await getCollection("blog");
return blogPosts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}
const { post } = Astro.props;
const blogPosts: CollectionEntry<"blog">[] = await getCollection("blog");
const relatedPosts: CollectionEntry<"blog"> = blogPosts.filter(
(blogEntry) => blogEntry.slug !== post.slug,
);
---
<MainLayout
title={post.data.title + " | ScrewFast"}
meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."
>
<div class="mx-auto max-w-3xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pt-10">
<div class="max-w-2xl">
<div class="mb-6 flex items-center justify-between">
<div class="flex w-full gap-x-5 sm:items-center sm:gap-x-3">
<AvatarBlogLarge blogEntry={post} />
<div class="grow">
<div class="flex items-center justify-between gap-x-2">
<div>
<div
class="hs-tooltip inline-block [--placement:bottom] [--trigger:hover]"
>
<span
class="font-bold text-neutral-700 dark:text-neutral-300"
>
{post.data.author}
</span>
</div>
<ul class="text-xs text-neutral-500">
<li
class="relative inline-block pe-6 before:absolute before:end-2 before:top-1/2 before:size-1 before:-translate-y-1/2 before:rounded-full before:bg-neutral-300 last:pe-0 last-of-type:before:hidden dark:text-neutral-400 dark:before:bg-neutral-600"
>
{formatDate(post.data.pubDate)}
</li>
<li
class="relative inline-block pe-6 before:absolute before:end-2 before:top-1/2 before:size-1 before:-translate-y-1/2 before:rounded-full before:bg-neutral-300 last:pe-0 last-of-type:before:hidden dark:text-neutral-400 dark:before:bg-neutral-600"
>
{post.data.readTime} min read
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<h2
class="mb-3 text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
>
{post.data.title}
</h2>
<div class="mb-5 space-y-5 md:mb-8 md:space-y-8">
{
post.data.contents.map((content: string, index: any) =>
index === 1 ? (
<p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
{content}
</p>
<Image
class="w-full rounded-xl object-cover"
src={post.data.cardImage}
alt={post.data.cardImageAlt}
draggable={"false"}
format={"avif"}
/>
) : (
<p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
{content}
</p>
),
)
}
</div>
<div class="space-x-2">
{
post.data.tags?.map((tag: string) => (
<span class="inline-flex items-center gap-x-1.5 rounded-lg bg-neutral-400/30 px-3 py-1.5 text-xs font-medium text-neutral-700 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring dark:bg-neutral-700/60 dark:text-neutral-300">
{capitalize(tag)}
</span>
))
}
</div>
</div>
</div>
<div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
<div class="mb-10 max-w-2xl">
<h2
class="text-balance text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
>
Related articles
</h2>
</div>
<div class="grid grid-cols-2 gap-6">
{relatedPosts.map((entry) => <CardRelated blogEntry={entry} />)}
</div>
</div>
</MainLayout>