barta-india.in/src/pages/[id].astro

71 lines
4.4 KiB
Plaintext

---
import Layout from '../layouts/Layout.astro';
export async function getStaticPaths() {
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[lang][_eq]=english');
const data = await response.json();
const finalData = data.data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
return finalData;
}
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[lang][_eq]=english');
const data = await response.json();
const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data.data[idx];
// console.log(items.meta_title, items.meta_description)
---
<!-- title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtterTitle, tiwtterDesc, tiwtterURL, artPubTime, artUpdtTime, ogSiteName, ogType, ogTitle, ogDesc, ogURL -->
<Layout title={items.meta_title}
metaTitle={items.meta_title}
description={items.meta_description}
ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
tiwtterCard="summary_large_image"
tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/${items.slug}`
canonical=`https://barta-india.in/${items.slug}`
>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} class="md:w-[40%]" />
</div>
<div class="flex flex-row justify-center md:justify-end mt-2">
<div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
<p class="text-xl font-bold text-[#780a0a]">Share on: </p>
<a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<!-- <a href=`https://www.facebook.com/sharer/sharer.php?u=https://barta-india.in/retail-inflation-rate-due-to-the-sharp-increase-in-the-cost-of-dal-and-vegetables-this-is-the-greatest-rate-of-retail-inflation-in-the-previous-four-months-rice` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> -->
<!-- <a href=`https://www.facebook.com/sharer/sharer.php?u=https://barta-india.in/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> -->
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.x.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
<a href=`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}` onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
</div>
</div>
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
</div>
</section>
</main>
</Layout>
<script is:inline>
// let whatsAppurl = document.location.href;
// console.log(whatsAppurl);
// document.getElementById('whatsappURL').href = `whatsapp://send?text=${whatsAppurl}`;
// document.getElementById('whatsappURL').href = `whatsapp://send?text=Sample Text%20goes%20here%20-%20${whatsAppurl}`
</script>
<style>
section > div > p > p {
text-align: justify;
}
</style>