generated from dwd/boilarplate-astro-tailwind
add dyanamic category pages
dev sp
parent
00a1640ff5
commit
c06befa343
|
|
@ -0,0 +1,130 @@
|
|||
<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="`/en/${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" @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 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)">✘</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="`/en/${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-en/?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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="modal-mask" v-if="show" @click="closeModal">
|
||||
<div class="modal-container" @click.stop>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$parent.$on('open-modal', this.openModal);
|
||||
},
|
||||
methods: {
|
||||
openModal(itemId) {
|
||||
// Logic to show modal, optionally filter by itemId if needed
|
||||
this.show = true;
|
||||
},
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background-color: white;
|
||||
border-radius: 0.5rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -107,3 +107,6 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
})
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
<!-- <AddFile client:visible /> -->
|
||||
<section class="container mx-auto px-4 max-w-2xl shadow-2xl rounded-2xl mt-16">
|
||||
<h3 class="text-2xl py-4">Add File</h3>
|
||||
<p id="uploadConfirm" class="text-green-500 font-bold py-2" style="display: none;">Image Uploaded successfully</p>
|
||||
<form id="imageChoose" class="flex flex-col">
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
|
||||
|
|
@ -97,7 +98,10 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
})
|
||||
.then(response => response.json()) // Convert response to text
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
console.log(data);
|
||||
if(data.success === true){
|
||||
document.getElementById('uploadConfirm').style.display = 'block';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error occurred:', error);
|
||||
|
|
|
|||
|
|
@ -27,13 +27,13 @@ const items = data[idx];
|
|||
tiwtterImage={items.img}
|
||||
tiwtterTitle={items.meta_title}
|
||||
tiwtterDesc={items.meta_description}
|
||||
tiwtterURL=`https://barta-india.in/bn/${items.slug}`
|
||||
tiwtterURL=`https://barta-india.in/en/${items.slug}`
|
||||
artPubTime={items.date_created}
|
||||
ogSiteName=`https://barta-india.in/bn/${items.slug}`
|
||||
ogSiteName=`https://barta-india.in/en/${items.slug}`
|
||||
ogType='News'
|
||||
ogTitle={items.meta_title}
|
||||
ogDesc={items.meta_description}
|
||||
ogURL=`https://barta-india.in/bn/${items.slug}`>
|
||||
ogURL=`https://barta-india.in/en/${items.slug}`>
|
||||
<main>
|
||||
<section class="container mx-auto px-4 mt-16">
|
||||
<div class="flex flex-col justify-center">
|
||||
|
|
@ -46,10 +46,10 @@ const items = data[idx];
|
|||
<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>
|
||||
<a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/en/${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/en/${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/en/${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/en/${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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
import Layout from "../../../layouts/Layout.astro"
|
||||
import ENCategory from "../../../components/ENCategory.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">
|
||||
<h1 class="text-[#780a0a] py-6">Page > Name </h1>
|
||||
<ENCategory client:visible />
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<main>
|
||||
<div>
|
||||
<section>sqjns
|
||||
<img src="https://cdn33.siliconpin.com/files/siliconid0/gtfdo20u6v_" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -5,7 +5,7 @@ const options = { method: 'POST', headers: { 'Content-Type': 'application/json',
|
|||
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);
|
||||
// console.log(news);
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
|
|
@ -14,6 +14,13 @@ console.log(news);
|
|||
<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="/en/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="/en/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="/en/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="/en/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="/en/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">
|
||||
|
|
@ -36,7 +43,7 @@ console.log(news);
|
|||
<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={`https://www.facebook.com/share.php?u=https://barta-india.in/en/${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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue