dwd-projects
/
barta-india.in
generated from dwd/boilarplate-astro-tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add language pages

b5
dev sp 2024-02-16 12:34:55 +00:00
parent c06befa343
commit 136ceab9b6
28 changed files with 1500 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/BNCategory.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div>
<section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div>
<a class="flex flex-col" :href="`/bn/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2>
</a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/bn/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/bn/${item.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/share.php?u=https://barta-india.in/bn/${item.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/bn/${item.slug}&text=%20${item.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/bn/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/bn/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/bn/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
openDialog(item) {
item.dialogOpen = true;
window.addEventListener('keydown', this.handleKeyDown);
},
closeDialog(item) {
item.dialogOpen = false;
window.removeEventListener('keydown', this.handleKeyDown);
},
handleKeyDown(event) {
if (event.key === 'Escape') {
this.items.forEach(item => {
item.dialogOpen = false;
});
window.removeEventListener('keydown', this.handleKeyDown);
}
},
getData() {
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
// console.log(fullURL);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-bn/?cat=${fullURL}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// console.log(data);
this.items = data;
this.items.forEach(item => {
item.dialogOpen = false;
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
},
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Adjust as needed */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Additional styles for the overlay (optional) */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the overlay is above other content */
}
</style>

88
src/components/ENCategory.vue
View File

@ -1,51 +1,55 @@
<template> <template>
<div> <div>
<section class="container mx-auto px-4"> <section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg"> <div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div> <div>
<a class="flex flex-col" :href="`/en/${item.slug}`"> <a class="flex flex-col" :href="`/en/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" /> <img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2> <h2 class="text-lg text-justify">{{ item.title }}</h2>
</a> </a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50" @click="closeDialog(item)"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/en/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/en/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]"> <div>
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" @click="closeDialog(item)">&#10008;</button> <!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/en/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/en/${item.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/share.php?u=https://barta-india.in/en/${item.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/en/${item.slug}&text=%20${item.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/en/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/en/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div> </div>
</div>
</div> </div>
</form> <div class="flex flex-row place-content-between">
</dialog> <button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
</div> <a :href="`/en/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div> </div>
<div class="flex flex-row place-content-between"> </section>
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/en/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
@ -86,7 +90,7 @@
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
console.log(data); // console.log(data);
this.items = data; this.items = data;
this.items.forEach(item => { this.items.forEach(item => {

134
src/components/ESCategory.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div>
<section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div>
<a class="flex flex-col" :href="`/es/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2>
</a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/es/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/es/${item.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/share.php?u=https://barta-india.in/es/${item.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/es/${item.slug}&text=%20${item.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/es/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/es/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/es/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
openDialog(item) {
item.dialogOpen = true;
window.addEventListener('keydown', this.handleKeyDown);
},
closeDialog(item) {
item.dialogOpen = false;
window.removeEventListener('keydown', this.handleKeyDown);
},
handleKeyDown(event) {
if (event.key === 'Escape') {
this.items.forEach(item => {
item.dialogOpen = false;
});
window.removeEventListener('keydown', this.handleKeyDown);
}
},
getData() {
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
// console.log(fullURL);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-es/?cat=${fullURL}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// console.log(data);
this.items = data;
this.items.forEach(item => {
item.dialogOpen = false;
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
},
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Adjust as needed */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Additional styles for the overlay (optional) */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the overlay is above other content */
}
</style>

134
src/components/HICategory.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div>
<section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div>
<a class="flex flex-col" :href="`/hi/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2>
</a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/hi/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/hi/${item.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/share.php?u=https://barta-india.in/hi/${item.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/hi/${item.slug}&text=%20${item.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/hi/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/hi/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/hi/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
openDialog(item) {
item.dialogOpen = true;
window.addEventListener('keydown', this.handleKeyDown);
},
closeDialog(item) {
item.dialogOpen = false;
window.removeEventListener('keydown', this.handleKeyDown);
},
handleKeyDown(event) {
if (event.key === 'Escape') {
this.items.forEach(item => {
item.dialogOpen = false;
});
window.removeEventListener('keydown', this.handleKeyDown);
}
},
getData() {
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
// console.log(fullURL);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-hi/?cat=${fullURL}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// console.log(data);
this.items = data;
this.items.forEach(item => {
item.dialogOpen = false;
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
},
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Adjust as needed */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Additional styles for the overlay (optional) */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the overlay is above other content */
}
</style>

134
src/components/ZHCategory.vue Normal file
View File

@ -0,0 +1,134 @@
<template>
<div>
<section class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div v-for="item in items" :key="item.id" class="flex flex-col border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col">
<div>
<a class="flex flex-col" :href="`/zh/${item.slug}`">
<img class="aspect-video rounded-t-lg" :src="item.img" :alt="item.title" />
<h2 class="text-lg text-justify">{{ item.title }}</h2>
</a>
</div>
<div>
<!-- Overlay -->
<div v-if="item.dialogOpen" class="fixed inset-0 bg-black opacity-50"></div>
<dialog :id="`d-${item.id}`" class="shadow-xl rounded-xl md:w-[50%] xl:w-[30%] dialog" :open="item.dialogOpen">
<form method="dialog">
<div class="flex flex-col md:flex-col">
<a :href="`/zh/${item.slug}`" class="flex flex-col md:flex-col">
<img class="rounded-t-xl" :src="item.img" :alt="item.title" />
<h1 class="text-lg font-bold">{{ item.heading }}</h1>
<h2 class="text-justify">{{ item.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=${item.title}%20%0A%20https://barta-india.in/zh/${item.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/share.php?u=https://barta-india.in/zh/${item.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/zh/${item.slug}&text=%20${item.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/zh/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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>
<!-- <a class="hover:-translate-y-2 duration-[1s]" :href="`whatsapp://send?text=${item.title}%20%0A%20https://barta-india.in/${item.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/share.php?u=https://barta-india.in/zh/${item.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/${item.slug}&text=${item.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/${item.slug}&title=${item.title}&summary=${item.title}&source=${item.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" @click="closeDialog(item)">&#10008;</button>
</div>
</div>
</div>
</form>
</dialog>
</div>
</div>
<div class="flex flex-row place-content-between">
<button @click="openDialog(item)" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">In Brief</button>
<a :href="`/zh/${item.slug}`" class="bg-[#780a0a] text-white rounded-md font-bold py-2 px-6">Details</a>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
methods: {
openDialog(item) {
item.dialogOpen = true;
window.addEventListener('keydown', this.handleKeyDown);
},
closeDialog(item) {
item.dialogOpen = false;
window.removeEventListener('keydown', this.handleKeyDown);
},
handleKeyDown(event) {
if (event.key === 'Escape') {
this.items.forEach(item => {
item.dialogOpen = false;
});
window.removeEventListener('keydown', this.handleKeyDown);
}
},
getData() {
let fullURL = window.location.href.split('/')[5].split('?cat=')[1];
// console.log(fullURL);
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/category-zh/?cat=${fullURL}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// console.log(data);
this.items = data;
this.items.forEach(item => {
item.dialogOpen = false;
});
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
},
},
mounted() {
this.getData();
}
};
</script>
<style scoped>
.dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white; /* Adjust as needed */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Additional styles for the overlay (optional) */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
z-index: 999; /* Ensure the overlay is above other content */
}
</style>

159
src/pages/bn/[id].astro
View File

@ -1,97 +1,94 @@
--- ---
import LayoutBN from '../../layouts/LayoutBN.astro'; import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[lang][_eq]=bengali'); const postData = { key1: 'value1', key2: 'value2'};
const data = await response.json(); const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const finalData = data.data.map((n: { slug: string | undefined; })=>{ const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_bn', options);
return {params: {id:n.slug}} const data = await response.json();
}) const finalData = data.map((n: { slug: string | undefined; })=>{
return finalData; return {params: {id:n.slug}}
})
return finalData;
} }
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[lang][_eq]=bengali'); const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_bn', options);
const data = await response.json(); const data = await response.json();
const { id } = Astro.params; const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id); const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data.data[idx]; const items = data[idx];
// console.log(data.data[idx]) // console.log(items)
--- ---
<LayoutBN title={items.meta_title} <Layout title=""
metaTitle={items.meta_title} metaTitle={items.meta_title}
description={items.meta_description} description={items.meta_description}
ogImg={`https://api7.siliconpin.com/assets/${items.img}`} ogImg={items.img}
tiwtterCard="summary_large_image" tiwtterCard="summary_large_image"
tiwtterImage={`https://api7.siliconpin.com/assets/${items.img}`} tiwtterImage={items.img}
tiwtterTitle={items.meta_title} tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description} tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/bn/${items.slug}` tiwtterURL=`https://barta-india.in/bn/${items.slug}`
artPubTime={items.date_created} artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/bn/${items.slug}` ogSiteName=`https://barta-india.in/bn/${items.slug}`
ogType='News' ogType='News'
ogTitle={items.meta_title} ogTitle={items.meta_title}
ogDesc={items.meta_description} ogDesc={items.meta_description}
ogURL=`https://barta-india.in/bn/${items.slug}` ogURL=`https://barta-india.in/bn/${items.slug}`>
>
<main> <main>
<section class="container mx-auto px-4 mt-16"> <section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div> <div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1> <h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2> <h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center"> <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%]" /> <img src={items.img} 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/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/${items.slug}&text=%20${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/bn/${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>
</div> <div class="flex flex-row justify-center md:justify-end mt-2">
<p class="text-justify text-red-700 mt-4" set:html={items.content}></p> <div class="flex flex-row place-items-center p-2 shadow-lg shadow-[#780a0a] border-b-2 border-[#780a0a] rounded-b-2xl w-fit">
</div> <p class="text-xl font-bold text-[#780a0a]">Share on: </p>
</section> <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
</main> <a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
</LayoutBN> <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/${items.slug}&text=%20${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/bn/${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 mt-4">{items.content}</p>
</div>
</section>
</main>
</Layout>
<script is:inline> <script is:inline>
let isListening = false; let isListening = false;
let speechSynthesisInstance = window.speechSynthesis; let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() { function toggleSpeech() {
if (isListening) { if (isListening) {
stopSpeech(); stopSpeech();
} else { } else {
startSpeech(); startSpeech();
}
} }
}
function startSpeech() { function startSpeech() {
let message1 = document.getElementById('message1').innerText; let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText; let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2; let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText); let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText); speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop'; document.getElementById('listenButton').innerText = 'Stop';
isListening = true; isListening = true;
} }
function stopSpeech() { function stopSpeech() {
speechSynthesisInstance.cancel(); speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen'; document.getElementById('listenButton').innerText = 'Listen';
isListening = false; isListening = false;
} }
// if(window.location.reload()){ // if(window.location.reload()){
// isListening = false; // isListening = false;
// } // }
</script> </script>
<style>
section > div > p > p {
text-align: justify;
}
</style>

29
src/pages/bn/cat/index.astro Normal file
View File

@ -0,0 +1,29 @@
---
import Layout from "../../../layouts/Layout.astro"
import BNCategory from "../../../components/BNCategory.vue";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_en', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<main>
<div>
<section class="container mx-auto px-4">
<div class="text-[#780a0a] py-6 flex flex-row" id="">
<a id="folder" href="/en"></a> &nbsp;>&nbsp;
<p id="cat"></p>
</div>
<BNCategory client:visible />
</section>
</div>
</main>
</Layout>
<script is:inline>
let fullURL = window.location.href.split('/');
// console.log(fullURL);
let folderName = document.getElementById('folder').innerHTML = fullURL[3];
let catName = document.getElementById('cat').innerHTML = fullURL[5].split('?cat=')[1]
</script>

70
src/pages/bn/index.astro
View File

@ -1,44 +1,33 @@
--- ---
import LayoutBN from '../../layouts/LayoutBN.astro'; import Layout from "../../layouts/Layout.astro";
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?sort=-date_created&filter[lang][_eq]=bengali'); const postData = { key1: 'value1', key2: 'value2'};
const dataJSON = await fetchData.json(); const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const data = dataJSON.data; const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_bn', options);
const fetchMeta = await fetch('https://api7.siliconpin.com/items/meta_data?filter[status][_eq]=published&filter[domain][_eq]=barta&filter[pages][_eq]=home_bn'); const data = await response.json();
const metaJSON = await fetchMeta.json(); const news = data;
const items = metaJSON.data[0]; // console.log(news);
// const imageData = data.image;
// const data = fetchDataJSON.data;
// console.log()
--- ---
<Layout title="">
<LayoutBN title={items.title} <main>
metaTitle={items.meta_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/bn`
ogSiteName=`https://barta-india.in/bn`
ogType={items.og_type}
ogTitle={items.title}
ogDesc={items.description}
ogURL=`https://barta-india.in/bn`
>
<main>
<section class="container mx-auto px-4"> <section class="container mx-auto px-4">
<div class="my-16"> <div class="my-16">
<span class="text-[#780a0a] font-bold" id="pageName"></span> <span class="text-[#780a0a] font-bold" id="pageName"></span>
<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1> <h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
</div> </div>
<div class="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
<a href="/bn/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
<a href="/bn/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
<a href="/bn/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
<a href="/bn/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
<a href="/bn/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4"> <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;}) => {news.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 border-2 border-[#780a0a] gap-6 p-4 place-content-between rounded-lg">
<div class="flex flex-col"> <div class="flex flex-col">
<div class=""> <div class="">
<a class="flex flex-col" href={`/bn/${items.slug}`}> <a class="flex flex-col" href={`/bn/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} /> <img class="aspect-video rounded-t-lg" src={items.img} alt={items.title} />
<h2 class="text-lg text-justify ">{items.title}</h2> <h2 class="text-lg text-justify ">{items.title}</h2>
</a> </a>
</div> </div>
@ -47,16 +36,16 @@ const items = metaJSON.data[0];
<form method="dialog"> <form method="dialog">
<div class="flex flex-col md:flex-col"> <div class="flex flex-col md:flex-col">
<a href={`/bn/${items.slug}`} class="flex flex-col md:flex-col"> <a href={`/bn/${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} /> <img class="rounded-t-xl" src={items.img} alt={items.title} />
<h1 class="text-lg font-bold">{items.heading} </h1> <h1 class="text-lg font-bold">{items.heading} </h1>
<h2 class="text-justify ">{items.in_brief}</h2> <h2 class="text-justify ">{items.in_brief}</h2>
</a> </a>
<div class="flex flex-row place-content-between place-items-center"> <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"> <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={`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/bn/${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={`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${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={`http://www.twitter.com/share?url=https://barta-india.in/bn/${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> <a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/bn/${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>
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]"> <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()`}>&#10008;</button> <button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>&#10008;</button>
@ -69,21 +58,14 @@ const items = metaJSON.data[0];
</div> </div>
<div class="flex flex-row place-content-between"> <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> <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={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a> <a href={`/bn/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">Details</a>
</div> </div>
</div> </div>
)} )}
<!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> --> <!-- <a href={`/${items.slug}`} class="bg-[#780A0A] text-white rounded-md font-bold px-6 ">Read More>></a> -->
<!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
</div> </div>
</section> </section>
</main> </main>
</LayoutBN> </Layout>
<script is:inline>
const pageName = window.location.href.split('/')[3];
document.getElementById('pageName').innerHTML = '>&nbsp;' + pageName;
// console.log(pageName)
</script>
<style>
</style>

97
src/pages/bn_old/[id].astro Normal file
View File

@ -0,0 +1,97 @@
---
import LayoutBN from '../../layouts/LayoutBN.astro';
export async function getStaticPaths() {
const response = await fetch('https://api7.siliconpin.com/items/barta?filter[status][_eq]=published&filter[lang][_eq]=bengali');
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]=bengali');
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(data.data[idx])
---
<LayoutBN 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/bn/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/bn/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/bn/${items.slug}`
>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" 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/bn/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/bn/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/${items.slug}&text=%20${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/bn/${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>
</LayoutBN>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>
<style>
section > div > p > p {
text-align: justify;
}
</style>

89
src/pages/bn_old/index.astro Normal file
View File

@ -0,0 +1,89 @@
---
import LayoutBN from '../../layouts/LayoutBN.astro';
const fetchData = await fetch('https://api7.siliconpin.com/items/barta?sort=-date_created&filter[lang][_eq]=bengali');
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_bn');
const metaJSON = await fetchMeta.json();
const items = metaJSON.data[0];
// const imageData = data.image;
// const data = fetchDataJSON.data;
// console.log()
---
<LayoutBN title={items.title}
metaTitle={items.meta_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/bn`
ogSiteName=`https://barta-india.in/bn`
ogType={items.og_type}
ogTitle={items.title}
ogDesc={items.description}
ogURL=`https://barta-india.in/bn`
>
<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 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={`/bn/${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={`/bn/${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()`}>&#10008;</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={`/bn/${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>
</LayoutBN>
<script is:inline>
const pageName = window.location.href.split('/')[3];
document.getElementById('pageName').innerHTML = '>&nbsp;' + pageName;
// console.log(pageName)
</script>
<style>
</style>

0
src/pages/bn/local/[id].astro → src/pages/bn_old/local/[id].astro
View File

0
src/pages/bn/local/index.astro → src/pages/bn_old/local/index.astro
View File

0
src/pages/bn/national/[id].astro → src/pages/bn_old/national/[id].astro
View File

0
src/pages/bn/national/index.astro → src/pages/bn_old/national/index.astro
View File

0
src/pages/bn/politics/[id].astro → src/pages/bn_old/politics/[id].astro
View File

0
src/pages/bn/politics/index.astro → src/pages/bn_old/politics/index.astro
View File

0
src/pages/bn/technology/[id].astro → src/pages/bn_old/technology/[id].astro
View File

0
src/pages/bn/technology/index.astro → src/pages/bn_old/technology/index.astro
View File

12
src/pages/en/cat/index.astro
View File

@ -12,10 +12,18 @@ const news = data;
<main> <main>
<div> <div>
<section class="container mx-auto px-4"> <section class="container mx-auto px-4">
<h1 class="text-[#780a0a] py-6">Page > Name </h1> <div class="text-[#780a0a] py-6 flex flex-row" id="">
<a id="folder" href="/en"></a> &nbsp;>&nbsp;
<p id="cat"></p>
</div>
<ENCategory client:visible /> <ENCategory client:visible />
</section> </section>
</div> </div>
</main> </main>
</Layout> </Layout>
<script is:inline>
let fullURL = window.location.href.split('/');
console.log(fullURL);
let folderName = document.getElementById('folder').innerHTML = fullURL[3];
let catName = document.getElementById('cat').innerHTML = fullURL[5].split('?cat=')[1]
</script>

94
src/pages/es/[id].astro Normal file
View File

@ -0,0 +1,94 @@
---
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_es', options);
const data = await response.json();
const finalData = data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
return finalData;
}
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_es', options);
const data = await response.json();
const { id } = Astro.params;
const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data[idx];
// console.log(items)
---
<Layout title=""
metaTitle={items.meta_title}
description={items.meta_description}
ogImg={items.img}
tiwtterCard="summary_large_image"
tiwtterImage={items.img}
tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/zh/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/zh/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/zh/${items.slug}`>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={items.img} 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/zh/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/zh/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/zh/${items.slug}&text=%20${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/zh/${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 mt-4">{items.content}</p>
</div>
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>

29
src/pages/es/cat/index.astro Normal file
View File

@ -0,0 +1,29 @@
---
import Layout from "../../../layouts/Layout.astro"
import ESCategory from "../../../components/ESCategory.vue";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<main>
<div>
<section class="container mx-auto px-4">
<div class="text-[#780a0a] py-6 flex flex-row" id="">
<a id="folder" href="/zh"></a> &nbsp;>&nbsp;
<p id="cat"></p>
</div>
<ESCategory client:visible />
</section>
</div>
</main>
</Layout>
<script is:inline>
let fullURL = window.location.href.split('/');
// console.log(fullURL);
let folderName = document.getElementById('folder').innerHTML = fullURL[3];
let catName = document.getElementById('cat').innerHTML = fullURL[5].split('?cat=')[1]
</script>

71
src/pages/es/index.astro Normal file
View File

@ -0,0 +1,71 @@
---
import Layout from "../../layouts/Layout.astro";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_es', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<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="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
<a href="/es/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
<a href="/es/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
<a href="/es/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
<a href="/es/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
<a href="/es/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{news.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={`/es/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={items.img} 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={`/es/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={items.img} 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/es/${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/share.php?u=https://barta-india.in/es/${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/es/${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/es/${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()`}>&#10008;</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>
<a href={`/es/${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> -->
<!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
</div>
</section>
</main>
</Layout>

94
src/pages/hi/[id].astro Normal file
View File

@ -0,0 +1,94 @@
---
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_hi', options);
const data = await response.json();
const finalData = data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
return finalData;
}
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_hi', options);
const data = await response.json();
const { id } = Astro.params;
const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data[idx];
// console.log(items)
---
<Layout title=""
metaTitle={items.meta_title}
description={items.meta_description}
ogImg={items.img}
tiwtterCard="summary_large_image"
tiwtterImage={items.img}
tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/hi/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/hi/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/hi/${items.slug}`>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={items.img} 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/hi/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/hi/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/hi/${items.slug}&text=%20${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/hi/${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 mt-4">{items.content}</p>
</div>
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>

29
src/pages/hi/cat/index.astro Normal file
View File

@ -0,0 +1,29 @@
---
import Layout from "../../../layouts/Layout.astro"
import HICategory from "../../../components/HICategory.vue";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_hi', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<main>
<div>
<section class="container mx-auto px-4">
<div class="text-[#780a0a] py-6 flex flex-row" id="">
<a id="folder" href="/en"></a> &nbsp;>&nbsp;
<p id="cat"></p>
</div>
<HICategory client:visible />
</section>
</div>
</main>
</Layout>
<script is:inline>
let fullURL = window.location.href.split('/');
// console.log(fullURL);
let folderName = document.getElementById('folder').innerHTML = fullURL[3];
let catName = document.getElementById('cat').innerHTML = fullURL[5].split('?cat=')[1]
</script>

71
src/pages/hi/index.astro Normal file
View File

@ -0,0 +1,71 @@
---
import Layout from "../../layouts/Layout.astro";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_hi', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<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="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
<a href="/hi/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
<a href="/hi/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
<a href="/hi/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
<a href="/hi/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
<a href="/hi/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{news.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={`/hi/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={items.img} 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={`/hi/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={items.img} 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/hi/${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/share.php?u=https://barta-india.in/hi/${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/hi/${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/hi/${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()`}>&#10008;</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>
<a href={`/hi/${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> -->
<!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
</div>
</section>
</main>
</Layout>

94
src/pages/zh/[id].astro Normal file
View File

@ -0,0 +1,94 @@
---
import Layout from "../../layouts/Layout.astro";
export async function getStaticPaths() {
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const finalData = data.map((n: { slug: string | undefined; })=>{
return {params: {id:n.slug}}
})
return finalData;
}
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const { id } = Astro.params;
const idx = data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);
const items = data[idx];
// console.log(items)
---
<Layout title=""
metaTitle={items.meta_title}
description={items.meta_description}
ogImg={items.img}
tiwtterCard="summary_large_image"
tiwtterImage={items.img}
tiwtterTitle={items.meta_title}
tiwtterDesc={items.meta_description}
tiwtterURL=`https://barta-india.in/zh/${items.slug}`
artPubTime={items.date_created}
ogSiteName=`https://barta-india.in/zh/${items.slug}`
ogType='News'
ogTitle={items.meta_title}
ogDesc={items.meta_description}
ogURL=`https://barta-india.in/zh/${items.slug}`>
<main>
<section class="container mx-auto px-4 mt-16">
<div class="flex flex-col justify-center">
<div class=""><button onclick="toggleSpeech();" id="listenButton" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
<h1 id="message1" class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
<h2 id="message2" class="text-xl py-2">{items.title}</h2>
<div class="flex flex-col place-items-center">
<img src={items.img} 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/zh/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
<a href=`https://www.facebook.com/share.php?u=https://barta-india.in/zh/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
<a href=`http://www.twitter.com/share?url=https://barta-india.in/zh/${items.slug}&text=%20${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/zh/${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 mt-4">{items.content}</p>
</div>
</section>
</main>
</Layout>
<script is:inline>
let isListening = false;
let speechSynthesisInstance = window.speechSynthesis;
function toggleSpeech() {
if (isListening) {
stopSpeech();
} else {
startSpeech();
}
}
function startSpeech() {
let message1 = document.getElementById('message1').innerText;
let message2 = document.getElementById('message2').innerText;
let allSpeechText = message1 + ' ' + message2;
let speechText = new SpeechSynthesisUtterance(allSpeechText);
speechText.lang = 'bn'; // Set language to Bengali
speechSynthesisInstance.speak(speechText);
document.getElementById('listenButton').innerText = 'Stop';
isListening = true;
}
function stopSpeech() {
speechSynthesisInstance.cancel();
document.getElementById('listenButton').innerText = 'Listen';
isListening = false;
}
// if(window.location.reload()){
// isListening = false;
// }
</script>

29
src/pages/zh/cat/index.astro Normal file
View File

@ -0,0 +1,29 @@
---
import Layout from "../../../layouts/Layout.astro"
import ZHCategory from "../../../components/ZHCategory.vue";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<main>
<div>
<section class="container mx-auto px-4">
<div class="text-[#780a0a] py-6 flex flex-row" id="">
<a id="folder" href="/zh"></a> &nbsp;>&nbsp;
<p id="cat"></p>
</div>
<ZHCategory client:visible />
</section>
</div>
</main>
</Layout>
<script is:inline>
let fullURL = window.location.href.split('/');
// console.log(fullURL);
let folderName = document.getElementById('folder').innerHTML = fullURL[3];
let catName = document.getElementById('cat').innerHTML = fullURL[5].split('?cat=')[1]
</script>

71
src/pages/zh/index.astro Normal file
View File

@ -0,0 +1,71 @@
---
import Layout from "../../layouts/Layout.astro";
const postData = { key1: 'value1', key2: 'value2'};
const options = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Origin': 'https://2024.dev2-cs.siliconpin.com' }, body: JSON.stringify(postData)};
const response = await fetch('https://apisp.dev2.cicdhosting.com/_dedicated/dwd/get-news/?action=news_zh', options);
const data = await response.json();
const news = data;
// console.log(news);
---
<Layout title="">
<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="flex flex-row md:justify-center my-10 overflow-x-scroll md:overflow-x-clip">
<a href="/zh/cat/?cat=local" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Local</a>
<a href="/zh/cat/?cat=national" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">National</a>
<a href="/zh/cat/?cat=world" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">World</a>
<a href="/zh/cat/?cat=politics" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Politics</a>
<a href="/zh/cat/?cat=technology" class="border-2 border-[#780a0a] py-2.5 px-6 text-lg text-[#780a0a] hover:bg-[#780a0a50] duration-[1s]">Technology</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{news.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={`/zh/${items.slug}`}>
<img class="aspect-video rounded-t-lg" src={items.img} 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={`/zh/${items.slug}`} class="flex flex-col md:flex-col">
<img class="rounded-t-xl" src={items.img} 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/zh/${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/share.php?u=https://barta-india.in/zh/${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/zh/${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/zh/${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()`}>&#10008;</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>
<a href={`/zh/${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> -->
<!-- <p class="">Publish at: <br/> {items.date_created.split(':')[0].split('T')[0]}</p> -->
</div>
</section>
</main>
</Layout>