generated from dwd/boilarplate-astro-tailwind
73 lines
3.2 KiB
Plaintext
73 lines
3.2 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[category][_eq]=politics&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]=politics_en');
|
|
const metaJSON = await fetchMeta.json();
|
|
const items = metaJSON.data[0];
|
|
// const imageData = data.image;
|
|
// const data = fetchDataJSON.data;
|
|
// console.log()
|
|
---
|
|
|
|
<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/politics/`
|
|
ogSiteName=`https://barta-india.in/politics/`
|
|
ogType={items.og_type}
|
|
ogTitle={items.title}
|
|
ogDesc={items.description}
|
|
ogURL=`https://barta-india.in/politics/`
|
|
>
|
|
<main>
|
|
<section class="container mx-auto px-4">
|
|
<div class="my-16">
|
|
<span class="text-[#780a0a] font-bold" id="pageName"></span>
|
|
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
|
|
</div>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created : string | undefined;}) =>
|
|
<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
|
|
<div class="flex flex-col">
|
|
<a href={`/politics${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
|
|
<h2 class="text-lg line-clamp-1">{items.title}</h2>
|
|
<img class="aspect-video " src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
|
|
<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
|
|
<div class="h-[100px] overflow-y-hidden">
|
|
<p id="" set:html={items.content}></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<a href={`/politics/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Read More</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<!-- <div class="flex flex-col">
|
|
{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined;}) =>
|
|
<div class="flex flex-col border-2 gap-6 p-6">
|
|
<h1 class="border-b-4 border-[#780a0a] text-2xl font-bold">{items.heading}</h1>
|
|
<h2 class="text-lg">{items.title}</h2>
|
|
<img src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt=""/>
|
|
</div>
|
|
)}
|
|
</div> -->
|
|
</section>
|
|
</main>
|
|
</Layout>
|
|
<script is:inline>
|
|
const pageName = window.location.href.split('/')[3];
|
|
document.getElementById('pageName').innerHTML = '> ' + pageName
|
|
// console.log(pageName)
|
|
</script>
|
|
<style>
|
|
|
|
</style>
|