generated from dwd/boilarplate-astro-tailwind
86 lines
5.0 KiB
Plaintext
86 lines
5.0 KiB
Plaintext
---
|
|
import Layout from '../layouts/Layout.astro';
|
|
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?sort=-date_created&filter[lang][_eq]=english');
|
|
const dataJSON = await fetchData.json();
|
|
const data = dataJSON.data;
|
|
const fetchMeta = await fetch('https://api7.siliconpin.com/items/meta_data?filter[status][_eq]=published&filter[domain][_eq]=barta&filter[pages][_eq]=home_en');
|
|
const metaJSON = await fetchMeta.json();
|
|
const items = metaJSON.data[0];
|
|
// console.log(items.title)
|
|
// const imageData = data.image;
|
|
// const data = fetchDataJSON.data;
|
|
// console.log() https://api7.siliconpin.com/items/meta_data?filter[status][_eq]=published&filter[domain][_eq]=barta&filter[pages][_eq]=home_en
|
|
---
|
|
|
|
<Layout title={items.title}
|
|
metaTitle={items.title}
|
|
description={items.description}
|
|
ogImg={`https://api7.siliconpin.com/assets/${items.img}`}
|
|
tiwtterCard="summary_large_image"
|
|
tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`}
|
|
tiwtterTitle={items.title}
|
|
tiwtterDesc={items.description}
|
|
tiwtterURL=`https://barta-india.in`
|
|
ogSiteName=`https://barta-india.in/`
|
|
ogType={items.og_type}
|
|
ogTitle={items.title}
|
|
ogDesc={items.description}
|
|
ogURL=`https://barta-india.in`
|
|
>
|
|
<main>
|
|
<section class="container mx-auto px-4">
|
|
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A] my-16">Latest News</h1>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
{data.map((items: {id: string | undefined; heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined; in_brief: string | undefined;}) =>
|
|
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
|
|
<div class="flex flex-col">
|
|
<div class="">
|
|
<a class="flex flex-col" href={`/${items.slug}`}>
|
|
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
|
|
<h2 class="text-lg text-justify">{items.title}</h2>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<dialog id={`d-${items.id}`} class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%]">
|
|
<form method="dialog">
|
|
<div class="flex flex-col md:flex-col">
|
|
<a href={`/${items.slug}`} class="flex flex-col md:flex-col">
|
|
<img class="rounded-t-xl" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
|
|
<h1 class="text-lg font-bold">{items.heading} </h1>
|
|
<h2 class="text-justify ">{items.in_brief}</h2>
|
|
</a>
|
|
<div class="flex flex-row place-content-between place-items-center">
|
|
<div class="flex flex-row place-content-between place-items-center p-2 space-x-6 shadow-lg shadow-gray-400 rounded-2xl">
|
|
<a class="hover:-translate-y-2 duration-[1s]" 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 class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
|
|
<a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.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 class="hover:-translate-y-2 duration-[1s]" 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 class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
|
|
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>✘</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row place-content-between">
|
|
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
|
|
<p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p>
|
|
<a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</Layout>
|
|
<script is:inline>
|
|
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|