barta-india.in/src/pages/bn/[id].astro

---
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_bn', 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_bn', 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>