117 lines
3.9 KiB
Plaintext
117 lines
3.9 KiB
Plaintext
---
|
|
import { YouTube } from 'astro-embed';
|
|
import MainLayout from "../../layouts/MainLayout.astro";
|
|
import Header from "../../components/Header.astro";
|
|
import CarouselSection from "../../components/section/CarouselSection.astro";
|
|
import { Image } from "@unpic/astro";
|
|
import { getCollection, render } from "astro:content";
|
|
import TitleSection from "../../components/section/TitleSection.astro";
|
|
import FooterSection from '../../components/section/FooterSection.astro';
|
|
import { getLocalizedRoute } from '@/i18n';
|
|
export const prerender = true;
|
|
// 1. Generate a new path for every collection entry
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection("news");
|
|
return posts.map((post) => ({
|
|
params: {
|
|
id: post.id,
|
|
news_slug: getLocalizedRoute('news', post.data.locale)
|
|
},
|
|
props: { post },
|
|
}));
|
|
}
|
|
const { news_slug } = Astro.params;
|
|
const { post } = Astro.props;
|
|
const { Content } = await render(post);
|
|
|
|
console.log("astro site", Astro.site);
|
|
const baseUrl = Astro.site ?? "https://mk8nrc8p-4321.brs.devtunnels.ms";
|
|
|
|
const pageUrl = new URL(`/${post.data.locale}/${news_slug}/${post.id}`, baseUrl).toString();
|
|
|
|
const imageUrl = post.data.thumbnail ? new URL(post.data.thumbnail, baseUrl).toString() : null;
|
|
const localeDate = new Intl.DateTimeFormat(post.data.locale || 'es', { year: 'numeric', month: 'long', day: 'numeric' }).format(post.data.date);
|
|
---
|
|
|
|
|
|
<style>
|
|
.content h2 {
|
|
font-size: 42px !important;
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
|
|
<MainLayout
|
|
title={post.data.title}
|
|
date={post.data.date}
|
|
>
|
|
<Fragment slot="head">
|
|
<!-- Título -->
|
|
<title>{post.data.title}</title>
|
|
|
|
<!-- Descripción SEO -->
|
|
<meta name="description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />
|
|
|
|
<!-- Open Graph (Facebook / WhatsApp / LinkedIn) -->
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:title" content={post.data.title} />
|
|
<meta property="og:description" content={`${post.data.title} - ${post.data.city ?? ""} ${post.data.country ?? ""}`} />
|
|
<meta property="og:url" content={pageUrl} />
|
|
{post.data.gallery && post.data.gallery.length > 0 && post.data.gallery[0].image && (
|
|
<>
|
|
<meta property="og:image" content={new URL(post.data.gallery[0].image.src, baseUrl)} />
|
|
<meta property="og:image:width" />
|
|
<meta property="og:image:height" />
|
|
<meta property="og:image:type" content={`image/${post.data.gallery[0].image.format}`} />
|
|
</>
|
|
)}
|
|
<meta property="article:published_time" content={post.data.date.toISOString()} />
|
|
</Fragment>
|
|
<script type="application/ld+json" set:html={JSON.stringify({
|
|
"@context": "https://schema.org",
|
|
"@type": "NewsArticle",
|
|
"headline": post.data.title,
|
|
"datePublished": post.data.date,
|
|
"image": imageUrl,
|
|
"url": pageUrl,
|
|
"author": {
|
|
"@type": "Organization",
|
|
"name": "Centro del Reino de Paz y Justicia"
|
|
}
|
|
})} />
|
|
<div class="container mx-auto py-16">
|
|
<Header />
|
|
</div>
|
|
|
|
<TitleSection title={post.data.title} />
|
|
|
|
<time id="article-date" class="block text-center text-[#003421]/60 text-sm mt-4 mb-8" datetime={post.data.date.toISOString()}>
|
|
{localeDate}
|
|
</time>
|
|
|
|
<div class="container mx-auto">
|
|
{post.data.gallery && <CarouselSection images={post.data.gallery} />}
|
|
<div class="grid md:grid-cols-10">
|
|
<div id="article-content" class="md:col-span-7 content bg-white p-8 md:p-20 prose-p:mb-4 text-[#003421]">
|
|
<article id="article-body">
|
|
<Content />
|
|
</article>
|
|
</div>
|
|
<div class="md:col-span-3 bg-tertiary md:sticky top-0 h-fit">
|
|
{ post.data.youtube && (
|
|
<YouTube id={post.data.youtube} />
|
|
|
|
)}
|
|
|
|
{post.data.gallery && (
|
|
post.data.gallery.map(galleryImage => (
|
|
<Image src={galleryImage.image} alt={galleryImage.text} />
|
|
))
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</MainLayout>
|
|
|
|
<FooterSection /> |