try to add listening options

src/pages/[id].astro

@@ -35,8 +35,9 @@ const items  = data.data[idx];
     <main>
         <section class="container mx-auto px-4 mt-16">
             <div class="flex flex-col justify-center">
-                <h1 class="text-3xl font-bold border-b-4 border-[#780A0A]">{items.heading}</h1>
+              <div class=""><button onclick="textSpeech();" class="float-right text-white font-bold px-6 py-2 rounded-lg bg-[#780a0a]">Listen</button></div>
-                <h2 class="text-xl py-2">{items.title}</h2>
+                <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>
@@ -50,16 +51,21 @@ const items  = data.data[idx];
                     <a 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>
-                <p class="text-justify text-red-700 mt-4" set:html={items.content}></p>
+                <p id="" class="text-justify text-red-700 mt-4" set:html={items.content}></p>
             </div>
         </section>
     </main>
 </Layout>
 <script is:inline>
-  // let whatsAppurl = document.location.href;
+  function textSpeech(){
-  // console.log(whatsAppurl);
+      let message1 = document.getElementById('message1').innerHTML;
-  // document.getElementById('whatsappURL').href = `whatsapp://send?text=${whatsAppurl}`;
+      console.log(message1);
-  // document.getElementById('whatsappURL').href = `whatsapp://send?text=Sample Text%20goes%20here%20-%20${whatsAppurl}`
+      let message2 = document.getElementById('message2').innerHTML;
+      // let message3 = document.getElementById('message3').innerHTML;
+      let allSpeechText = message1 + message2;
+      let speechText = new SpeechSynthesisUtterance(allSpeechText);
+      window.speechSynthesis.speak(speechText);
+  }
 </script>
 <style>
   section > div > p > p {

src/pages/bn/technology/index.astro

@@ -33,12 +33,13 @@ const items = metaJSON.data[0];
 				<h1 class="text-4xl font-bold border-b-4 border-[#780A0A]">Latest News</h1>
 			</div>
 				<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined;}) =>
+					{data.map((items: {heading: string | undefined; img: string | undefined; title : string | undefined; content : string | undefined; slug : string | undefined; date_created: string | undefined;}) =>
 					<div class="flex flex-col border-2 border-[#780a0a] gap-6 p-6 place-content-between rounded-lg">
 						<div class="flex flex-col">
 							<a href={`/bn/technology/${items.slug}`} class="border-b-4 border-[#780a0a] text-2xl font-bold line-clamp-1">{items.heading}</a>
 							<h2 class="text-lg line-clamp-1">{items.title}</h2>
 							<img class="aspect-video" src={`https://api7.siliconpin.com/assets/${items.img}?quality=50&format=jpeg`} alt={items.title} />
+							<p class="text-end font-bold">Publish at: {items.date_created.split(':')[0].split('T')[0]}</p>
 							<div class="h-[100px] overflow-y-hidden">
 								<p id="" set:html={items.content}></p>		
 							</div>

src/pages/speech-text.astro

@@ -0,0 +1,25 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+<Layout title="Text to Speech | Barta">
+    <main>
+        <div>
+            <section class="container mx-auto px-4 max-w-xl">
+                <div class="flex flex-col justify-center space-y-4">
+                    <h1>Text to Speech</h1>
+                    <label for="message"></label>
+                    <textarea name="message" id="message" cols="30" rows="10" class="border-2 border-gray-400 focus:outline-none focus:border-[4px] focus:border-[#780a0a] rounded-2xl shadow-lg p-4"></textarea>
+                    <button onclick="textSpeech();" class="bg-[#780a0a] px-6b py-2 rounded-lg text-white font-bold ">Speech</button>
+                    <!-- <input name="message" id="message" type="text" class=""> -->
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout> 
+<script is:inline>
+    function textSpeech(){
+        let message = document.getElementById('message').value;
+        let speechText = new SpeechSynthesisUtterance(message);
+        window.speechSynthesis.speak(speechText);
+    }
+</script>