feat: implement Telegram Instant View template and update news page SEO components

src/components/BaseHead.astro

@@ -36,7 +36,7 @@ const imageUrl = image ? new URL(image, Astro.site).toString() : null;
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
 
-  {date && <meta property="article:published_time" content={date instanceof Date ? date.toISOString() : date} />}
+  {date && <meta property="article:published_time" content={date instanceof Date ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}` : date} />}
 
   <!-- Twitter -->
 

src/pages/[locale]/[news_slug]/[id].astro

@@ -57,6 +57,10 @@ const localeDate = new Intl.DateTimeFormat(locale || "es", {
   month: "long",
   day: "numeric",
 }).format(post.data.date);
+const y = post.data.date.getFullYear();
+const m = String(post.data.date.getMonth() + 1).padStart(2, "0");
+const d = String(post.data.date.getDate()).padStart(2, "0");
+const dateISO = `${y}-${m}-${d}`;
 ---
 
 <MainLayout
@@ -113,8 +117,8 @@ const localeDate = new Intl.DateTimeFormat(locale || "es", {
       <article id="article-body">
         <time
           id="article-date"
-          class="text-center text-[#003421]/60 text-sm hidden"
-          datetime={post.data.date.toISOString()}
+          class="block text-center text-[#003421]/60 text-sm mb-8"
+          datetime={dateISO}
         >
           {localeDate}
         </time>

src/pages/[news_slug]/[id].astro

@@ -31,6 +31,10 @@ const pageUrl = new URL(`/${post.data.locale}/${news_slug}/${post.id}`, baseUrl)
 
 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);
+const y = post.data.date.getFullYear();
+const m = String(post.data.date.getMonth() + 1).padStart(2, '0');
+const d = String(post.data.date.getDate()).padStart(2, '0');
+const dateISO = `${y}-${m}-${d}`;
 ---
 
 
@@ -65,7 +69,7 @@ const localeDate = new Intl.DateTimeFormat(post.data.locale || 'es', { year: 'nu
       <meta property="og:image:type" content={`image/${post.data.gallery[0].image.format}`} />
     </>
   )}
-  <meta property="article:published_time" content={post.data.date.toISOString()} />
+  <meta property="article:published_time" content={dateISO} />
 </Fragment>
   <script type="application/ld+json" set:html={JSON.stringify({
     "@context": "https://schema.org",
@@ -85,15 +89,14 @@ const localeDate = new Intl.DateTimeFormat(post.data.locale || 'es', { year: 'nu
 
   <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">
+            <time id="article-date" class="block text-center text-[#003421]/60 text-sm mb-8" datetime={dateISO}>
+              {localeDate}
+            </time>
             <Content />
           </article>
         </div>