---

import { createMarkdownRenderer } from "@/utils";

import { POSTS_API } from "@/data/constants";

const md = await createMarkdownRenderer();

interface Post {

	short_id: string;

	title: string | null;

	slug: string;

	published_date: string | null;

	meta_description: string | null;

	meta_image: string | null;

	canonical_url: string | null;

	lang: string;

	tags: string | null;

	content: string;

	created_at: string;

	updated_at: string;

}

interface PostsListResponse {

	posts: Post[];

}

let posts: Post[] = [];

let error = false;

try {

	const res = await fetch(`${POSTS_API}/posts`);

	if (res.ok) {

		const data = (await res.json()) as PostsListResponse;

		posts = (data.posts || []).slice().sort((a, b) => {

			const dateA = a.published_date ? new Date(a.published_date).getTime() : 0;

			const dateB = b.published_date ? new Date(b.published_date).getTime() : 0;

			return dateB - dateA;

		});

	} else {

		error = true;

	}

} catch (err) {

	console.error("Error fetching updates:", err);

	error = true;

}

---

{error && <p>Error loading recent updates.</p>}

{!error && posts.length === 0 && <p>No recent updates found.</p>}

{!error && posts.length > 0 && (

	<div class="space-y-4">

		{posts.map((post) => {

			const publishedAt = post.published_date

				? new Date(post.published_date).toLocaleDateString()

				: "";

			const contentHTML = post.content

				? md.render(post.content).trim()

					.replace(/<img\s([^>]*?)>/g, (_, attrs) => {

						const hasLoading = /loading\s*=/.test(attrs);

						const hasDecoding = /decoding\s*=/.test(attrs);

						const hasWidth = /width\s*=/.test(attrs);

						const extra = `${hasLoading ? "" : ' loading="lazy"'}${hasDecoding ? "" : ' decoding="async"'}${hasWidth ? "" : ' width="800"'}`;

						return `<img ${attrs}${extra} style="height:auto">`;

					})

				: "";

			return (

				<article class="border-b pb-6 mb-6 last:border-b-0">

					{post.title && (

						<a

							href={`/now/${post.slug}`}

							class="block hover:opacity-80 transition-opacity"

						>

							<h3 class="text-lg font-semibold mb-3">{post.title}</h3>

						</a>

					)}

					<div

						class="prose prose-invert max-w-none mb-3"

						set:html={contentHTML}

					/>

					<div class="flex items-center gap-2 text-sm text-zinc-500">

						<time>{publishedAt}</time>

					</div>

				</article>

			);

		})}

	</div>

)}