generated from dwd/boilarplate-astro-tailwind
single file upload page
parent
74973dfc1e
commit
abb1200c95
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div class="my-10">
|
||||
<section class="container mx-auto px-4 max-w-2xl shadow-lg rounded-xl p-6">
|
||||
<p class="text-2xl py-4">Edit News</p>
|
||||
<form id="formID">
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
|
||||
<label for="file">Choose a file:</label>
|
||||
<input @change="saveFile" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
|
||||
</form>
|
||||
<form action="">
|
||||
<div>
|
||||
<input :value="data.file_url" type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slugURLbn: "",
|
||||
fullURL: "",
|
||||
spliturl: "",
|
||||
bartaData: {}, // Initialize bartaData as an object
|
||||
bnData: {},
|
||||
data:{},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.getBarta();
|
||||
let fullURL = window.location.href.split("/")[5].split('?add=')[1];
|
||||
console.log(fullURL)
|
||||
},
|
||||
methods: {
|
||||
saveFile(event) {
|
||||
event.preventDefault();
|
||||
let formData = new FormData();
|
||||
// Append the selected file to the FormData object
|
||||
formData.append('file', event.target.files[0]);
|
||||
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
|
||||
// getBarta() {
|
||||
// let currentUrl = window.location.href;
|
||||
// console.log('full url', currentUrl)
|
||||
// let langValue = currentUrl.split("/")[5].split('?add=')[1];
|
||||
// console.log( langValue);
|
||||
// let formData = new FormData();
|
||||
// formData.append('slug', langValue);
|
||||
// fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/`, {
|
||||
// method: 'POST',
|
||||
// body: formData,
|
||||
// })
|
||||
// .then(response => response.json())
|
||||
// .then(data => {
|
||||
// // Assign fetched data to bartaData property
|
||||
// // console.log(data)
|
||||
// this.bartaData = data;
|
||||
// console.log(this.bartaData)
|
||||
// })
|
||||
// .catch(error => {
|
||||
// // console.log('An error occurred', error);
|
||||
// });
|
||||
// },
|
||||
// getBartaBN() {
|
||||
// let currentUrl = window.location.href;
|
||||
// let spliturl = currentUrl.split("/")[3].split("edit=")[1];
|
||||
// // console.log(spliturl);
|
||||
// let formData = new FormData();
|
||||
// formData.append('slug', spliturl);
|
||||
// fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/edit-news/?action=news_bn`, {
|
||||
// method: 'POST',
|
||||
// body: formData,
|
||||
// })
|
||||
// .then(response => response.json())
|
||||
// .then(data => {
|
||||
// // Assign fetched data to bartaData property
|
||||
// // console.log(data)
|
||||
// this.bnData = data;
|
||||
// console.log(this.bnData)
|
||||
// })
|
||||
// .catch(error => {
|
||||
// // console.log('An error occurred', error);
|
||||
// });
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
|
@ -5,6 +5,7 @@
|
|||
<div class="flex flex-row ">
|
||||
<a class="p-4" href="/editor/add-news">Add News</a>
|
||||
<a class="p-4" href="/editor/edit-news">Edit News</a>
|
||||
<a class="p-4" href="/editor/add-file-list">Add Image</a>
|
||||
</div>
|
||||
<!-- <a href="/editor/add-news">Add News</a>
|
||||
<a href="/editor/add-news">Add News</a> -->
|
||||
|
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import AdminHeader from "../../components/AdminHeader.astro";
|
||||
---
|
||||
<Layout title="Upload File | Barta-India">
|
||||
<AdminHeader />
|
||||
<main>
|
||||
<div>
|
||||
<section class="container mx-auto px-4">
|
||||
<div>
|
||||
<table class="border-2">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>ID</th>
|
||||
<th>Status</th>
|
||||
<th>Image</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="border-2" id="statusTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="container mx-auto px-4 flex flex-col space-y-4">
|
||||
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
|
||||
Select image to upload:
|
||||
<input type="file" name="fileToUploadToSpApi" id="fileToUpload">
|
||||
<input type="submit" value="Upload Image" name="submit">
|
||||
</form> -->
|
||||
<!-- <h1>Upload File</h1> -->
|
||||
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="file" id="file" /> <br>
|
||||
<input type="submit" value="Upload">
|
||||
</form> -->
|
||||
<!-- <form id="formID">
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
|
||||
<label for="file">Choose a file:</label>
|
||||
<input type="file" name="fileToUploadToSpApi" id="fileToUpload" required>
|
||||
<br>
|
||||
<input onclick="noImageNews();" type="submit" value="Upload">
|
||||
</form> -->
|
||||
</div>
|
||||
<!-- <button onclick="noImageNews();">onclick="noImageNews();"</button> -->
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
window.onload = function noImageNews() {
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file/`)
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
let tableBody = document.getElementById('statusTableBody');
|
||||
data.forEach(function(singleData) {
|
||||
let row = tableBody.insertRow();
|
||||
let cellId = row.insertCell(0);
|
||||
cellId.innerHTML = singleData.id;
|
||||
let cellStatus = row.insertCell(1);
|
||||
cellStatus.innerHTML = singleData.slug;
|
||||
let cellEdit = row.insertCell(2);
|
||||
let addButton = document.createElement('a');
|
||||
addButton.innerText = 'Add';
|
||||
addButton.style.color = 'blue';
|
||||
addButton.href = `/editor/add-file/?add=${singleData.slug}`
|
||||
addButton.addEventListener('click', function() {
|
||||
// Add your edit functionality here
|
||||
// console.log('Editing ID:', singleData.id);
|
||||
});
|
||||
cellEdit.appendChild(addButton);
|
||||
});
|
||||
console.log(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error); // Typo was here: 'console.erroe'
|
||||
});
|
||||
};
|
||||
|
||||
// noImageNews = window.onload;
|
||||
function saveFile(event){
|
||||
event.preventDefault();
|
||||
let formID = document.getElementById('formID');
|
||||
let formData = new FormData(formID);
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(data => data.json())
|
||||
.then(data => {
|
||||
if(data.error_code == 8050){
|
||||
document.getElementById('errorMessage').innerHTML = data.error;
|
||||
document.getElementById('errorMessage').style.display = 'block';
|
||||
document.getElementById('errorMessage2').style.display = 'none';
|
||||
}
|
||||
if(data.error_code == 8051){
|
||||
document.getElementById('errorMessage2').innerHTML = data.error;
|
||||
document.getElementById('errorMessage2').style.display = 'block';
|
||||
document.getElementById('errorMessage').style.display = 'none';
|
||||
}
|
||||
|
||||
console.log(data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
}
|
||||
</script>
|
|
@ -1,35 +1,62 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import AdminHeader from "../../components/AdminHeader.astro";
|
||||
---
|
||||
<Layout title="Upload File | Barta-India">
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div class="container mx-auto px-4 flex flex-col space-y-4">
|
||||
<form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
|
||||
Select image to upload:
|
||||
<input type="file" name="fileToUploadToSpApi" id="fileToUpload">
|
||||
<input type="submit" value="Upload Image" name="submit">
|
||||
</form>
|
||||
<h1>Upload File</h1>
|
||||
<!-- <form action="https://apisp.dev2.cicdhosting.com/upload_file/v2/" method="post" enctype="multipart/form-data">
|
||||
<input type="file" name="file" id="file" /> <br>
|
||||
<input type="submit" value="Upload">
|
||||
</form> -->
|
||||
<!-- <form id="formID">
|
||||
<AdminHeader />
|
||||
<div>
|
||||
<!-- <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>
|
||||
<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>
|
||||
<label for="file">Choose a file:</label>
|
||||
<input type="file" name="file" id="file" required>
|
||||
<input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload" />
|
||||
<br>
|
||||
<input onclick="saveFile(event);" type="submit" value="Upload">
|
||||
</form> -->
|
||||
<!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
|
||||
</form>
|
||||
<form id="imageLink" style="display: none;" class="space-y-4">
|
||||
<div class="flex flex-col">
|
||||
<input type="text" name="slug" id="slug" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" required />
|
||||
</div>
|
||||
<div>
|
||||
<input onclick="submitNewsImage(event);" type="submit" value="Upload" class="bg-[#780a0a] px-4 py-2 rounded-lg text-white cursor-pointer" />
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex flex-col justify-center place-items-center p-6">
|
||||
<img id="imgview" src="" alt="" class="rounded-xl" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<!-- <script is:inline>
|
||||
<script is:inline>
|
||||
function imagePreview() {
|
||||
let fileInput = document.getElementById('fileToUpload');
|
||||
let file = fileInput.files[0];
|
||||
let imgView = document.getElementById('imgview');
|
||||
if (file) {
|
||||
document.getElementById('imgview').style.display = 'block';
|
||||
let imgUrl = URL.createObjectURL(file);
|
||||
imgView.src = imgUrl;
|
||||
} else {
|
||||
imgView.src = "";
|
||||
}
|
||||
}
|
||||
|
||||
let slug = window.location.href.split('/')[5].split('?add=')[1];
|
||||
// console.log(slug)
|
||||
document.getElementById('slug').value = slug;
|
||||
|
||||
function saveFile(event){
|
||||
event.preventDefault();
|
||||
let formID = document.getElementById('formID');
|
||||
let formData = new FormData(formID);
|
||||
let imageChoose = document.getElementById('imageChoose');
|
||||
let formData = new FormData(imageChoose);
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
|
@ -46,11 +73,36 @@ import Layout from "../../layouts/Layout.astro";
|
|||
document.getElementById('errorMessage2').style.display = 'block';
|
||||
document.getElementById('errorMessage').style.display = 'none';
|
||||
}
|
||||
|
||||
if(data.file_url){
|
||||
document.getElementById('fileLink').value = data.file_url;
|
||||
document.getElementById('imageChoose').style.display = 'none';
|
||||
document.getElementById('imageLink').style.display = 'block';
|
||||
}
|
||||
console.log(data)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
imagePreview();
|
||||
}
|
||||
</script> -->
|
||||
|
||||
function submitNewsImage(event) {
|
||||
event.preventDefault();
|
||||
let formElement = document.getElementById('imageLink'); // Replace 'yourFormId' with the actual ID of your form
|
||||
let formData = new FormData(formElement); // Pass the form element
|
||||
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/_dedicated/dwd/no-file-add-file/`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(response => response.json()) // Convert response to text
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error occurred:', error);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
|
@ -36,19 +36,22 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
<div class="flex flex-col">
|
||||
<textarea required name="systemMessage" id="systemMessage" cols="30" rows="3" class="border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">provide meta_title within 60 characters, meta_description within 160 characters, short_description within 280 characters, heading within 170 characters in en, bn, hi, zh, es ar all in a json structure no use comma after line ending</textarea>
|
||||
</div>
|
||||
<div class="flex flex-col" id="imgDIV">
|
||||
<!-- <img class="w-[100px]" id="imgview" src="" alt="" style="display: none;"/>
|
||||
<label for="file" class="cursor-pointer"><img src="/img/camera.svg" alt="add file | Barta-India"></label> -->
|
||||
<input oninput="saveFile(event);" type="file" name="file" id="file" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl">
|
||||
<input style="display: none;" value="" type="text" name="img" id="img" class="border-2 p-1.5 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-col">
|
||||
<input type="text" name="fileLink" id="fileLink" class="p-2 border-2 border-[#580a0a] focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/>
|
||||
</div>
|
||||
<div>
|
||||
<button id="genButton" onclick="submitNewsPara(event);" class="bg-[#580a0a] text-white px-4 py-2 rounded-lg" >Genarate</button>
|
||||
</div>
|
||||
<!-- <input id="message" type="text" value="" class="border-2 border-[#580a0a] p-2 focus:outline-none focus:border-4 focus:border-[#580a0a] rounded-xl"/> -->
|
||||
</form>
|
||||
<form id="formID">
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage"></p>
|
||||
<p class="text-red-500" style="display: none;" id="errorMessage2"></p>
|
||||
<label for="file">Choose a file:</label>
|
||||
<input oninput="saveFile(event);" type="file" name="fileToUploadToSpApi" id="fileToUpload" required />
|
||||
<br>
|
||||
<!-- <input oninput="saveFile(event);" type="submit" value="Upload"> -->
|
||||
</form>
|
||||
</section>
|
||||
<!-- border-2 border-[#780a0a] rounded-xl -->
|
||||
<section class="bg-white rounded-full px-6 py-4" id="loadingSection" style="display: none;">
|
||||
|
@ -64,10 +67,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
<script is:inline>
|
||||
function saveFile(event){
|
||||
event.preventDefault();
|
||||
let formID = document.getElementById('newsPara');
|
||||
let file = document.getElementById('file').file;
|
||||
let formData = new FormData;
|
||||
formData.append('file', file);
|
||||
let formID = document.getElementById('formID');
|
||||
let formData = new FormData(formID);
|
||||
fetch(`https://apisp.dev2.cicdhosting.com/upload_file/v2/`,{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
|
@ -84,14 +85,8 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
document.getElementById('errorMessage2').style.display = 'block';
|
||||
document.getElementById('errorMessage').style.display = 'none';
|
||||
}
|
||||
document.getElementById('img').value = data.file_url;
|
||||
if(data.file_url){
|
||||
document.getElementById('img').style.display = 'block';
|
||||
document.getElementById('file').style.display = 'none';
|
||||
|
||||
}else{
|
||||
document.getElementById('img').style.display = 'none';
|
||||
document.getElementById('file').style.display = 'block';
|
||||
document.getElementById('fileLink').value = data.file_url;
|
||||
}
|
||||
console.log(data)
|
||||
})
|
||||
|
|
|
@ -8,7 +8,6 @@ import AdminHeader from "../../components/AdminHeader.astro";
|
|||
<main>
|
||||
<div>
|
||||
<EditNews client:visible />
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<!-- </Layout>
|
||||
|
|
|
@ -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_en', 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_en', 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/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={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>
|
||||
<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>
|
|
@ -0,0 +1,7 @@
|
|||
<main>
|
||||
<div>
|
||||
<section>sqjns
|
||||
<img src="https://cdn33.siliconpin.com/files/siliconid0/gtfdo20u6v_" alt="">
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
|
@ -9,9 +9,61 @@ 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="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={`/en/${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={`/en/${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/${items.slug}`} data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
|
||||
<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2F${items.slug}`} target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
|
||||
<a class="hover:-translate-y-2 duration-[1s]" href={`http://www.twitter.com/share?url=https://barta-india.in/${items.slug}&text=${items.title}`} target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
|
||||
<a class="hover:-translate-y-2 duration-[1s]" href={`https://www.linkedin.com/shareArticle?mini=true&url=https://barta-india.in/${items.slug}&title=${items.title}&summary=${items.title}&source=${items.title}`} onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;"><img src="/img/link.svg" alt="Linkdin Logo"/></a>
|
||||
</div>
|
||||
<div class="flex border-b-4 border-gray-500 border-t rounded-full text-3xl hover:rotate-180 duration-[3s]">
|
||||
<button class="text-white font-bold py-2 px-4 bg-[#780a0a] rounded-full shadow-xl" onclick={`document.getElementById('d-${items.id}').close()`}>✘</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row place-content-between">
|
||||
<button onclick={`document.getElementById('d-${items.id}').showModal()`} class="bg-[#780A0A] text-white rounded-md font-bold py-2 px-6">In Brief</button>
|
||||
<a href={`/en/${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>
|
||||
<!-- <main>
|
||||
<div>
|
||||
<p>News English</p>
|
||||
<!-- <img src="https:\/\/cdn33.siliconpin.com\/files\/siliconid0\/gtdk3ixrvs_Screenshot-from-2024-02-07-12-42-53.png" alt=""> -->
|
||||
<div class="">
|
||||
{data.map((items: {id: string | undefined; title: string | undefined;}) =>
|
||||
<div>
|
||||
|
@ -21,5 +73,5 @@ console.log(news);
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main> -->
|
||||
</Layout>
|
||||
|
|
Loading…
Reference in New Issue