add listening options

try to add listening options
add publish date
2024-01-19 07:57:07 +00:00 · 2024-01-18 17:27:57 +00:00 · 2024-01-18 14:09:40 +00:00 · 2024-01-17 16:18:06 +00:00 · 2024-01-17 07:30:35 +00:00 · 2024-01-17 07:28:05 +00:00
27 changed files with 400 additions and 79 deletions
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -26,10 +26,20 @@
            <!-- <a href="/contact">Contact</a> -->
          </div>
        </div>
-      </div>
+      </div>  
    </section>
    <div class="flex bg-[#780a0a] text-white justify-center place-items-center border-t-4 border-white py-4">
      <a href="https://dwd.siliconpin.com/" target="_blank">Powered by <span class="font-bold">DWD Consultancy Services</span></a>
    </div>
  </div>
-</main>
+</main>
+<!-- Google tag (gtag.js) -->
+
+<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-GXF4D64859"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-GXF4D64859');
+</script>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -36,7 +36,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 		<meta property="og:image:width" content="526" />
 		<meta property="og:image:height" content="275" />
 		<meta  name="og:image:secure_url" content={ogImg} />
-		<script type="application/ld+json">
+		<!-- <script type="application/ld+json">
 			{
 				"@context": "https://schema.org",
 				"@type": "News Portal",
@@ -52,7 +52,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 					"https://www.facebook.com/bartaindia?mibextid=eHce3h",
 				]
 			}
-		</script>
+		</script> -->
 	</head>
 	<body>
 		<div>
--- a/src/layouts/LayoutBN.astro
+++ b/src/layouts/LayoutBN.astro
@@ -1,6 +1,5 @@
 ---
 import MainHeaderBN from '../components/MainHeaderBN.astro';
-import TopHeader from '../components/TopHeader.astro';
 import Footer from '../components/Footer.astro';
 export interface Props {
 	title: string; metaTitle: string; description: string; ogImg: string;  tiwtterCard: string; tiwtterImage: string; tiwtterTitle: string; tiwtterDesc: string; tiwtterURL: string; artPubTime: string; artUpdtTime: string; ogSiteName: string; ogType: string; ogTitle: string; ogDesc: string; ogURL: string; canonical: string;
@@ -15,8 +14,8 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/ico+xml" href="/favicon.ico" />
-		<link rel="canonical" href={canonical} />
 		<meta name="generator" content="barta-india.in html generator" />
+		<link rel="canonical" href={canonical} />
 		<title>{title}</title>
 		<meta name="title" content={metaTitle}>
 		<meta name="description" content={description}>
@@ -37,7 +36,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 		<meta property="og:image:width" content="526" />
 		<meta property="og:image:height" content="275" />
 		<meta  name="og:image:secure_url" content={ogImg} />
-		<script type="application/ld+json">
+		<!-- <script type="application/ld+json">
 			{
 				"@context": "https://schema.org",
 				"@type": "News Portal",
@@ -53,7 +52,7 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 					"https://www.facebook.com/bartaindia?mibextid=eHce3h",
 				]
 			}
-		</script>
+		</script> -->
 	</head>
 	<body>
 		<div>
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro"
+---
+<Layout title="404 Page Not Found | Barta-India">
+    <main>
+        <div>
+            <h1 class="text-3xl text-center py-40 text-[#580a0a] font-bold">404 Page Not Found</h1>
+        </div>
+    </main>
+</Layout>
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -31,13 +31,13 @@ const items  = data.data[idx];
        ogTitle={items.meta_title}
        ogDesc={items.meta_description}
        ogURL=`https://barta-india.in/${items.slug}`
-        canonical=`https://barta-india.in/${items.slug}`
        >
    <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>
-                <h2 class="text-xl py-2">{items.title}</h2>
+              <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>
@@ -45,23 +45,45 @@ const items  = data.data[idx];
                  <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/${items.slug}` data-action="share/whatsapp/share"><img src="/img/whatsapp.svg" alt="WhatsApp Logo"/></a>
-                    <!-- <a href=`https://www.facebook.com/sharer/sharer.php?u=https://barta-india.in/retail-inflation-rate-due-to-the-sharp-increase-in-the-cost-of-dal-and-vegetables-this-is-the-greatest-rate-of-retail-inflation-in-the-previous-four-months-rice` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> -->
-                    <!-- <a href=`https://www.facebook.com/sharer/sharer.php?u=https://barta-india.in/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a> -->
-                    <a href=`https://www.facebook.com/share.php?u=https://barta-india.in/${items.slug}` target="_blank"><img src="/img/facebook.svg" alt="Facebook Logo"/></a>
-                    <a href=`http://www.x.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 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 href=`https://www.facebook.com/share.php?u=https://barta-india.in/${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/${items.slug}&text=${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/${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="message3" 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;
-  // console.log(whatsAppurl);
-  // document.getElementById('whatsappURL').href = `whatsapp://send?text=${whatsAppurl}`;
-  // document.getElementById('whatsappURL').href = `whatsapp://send?text=Sample Text%20goes%20here%20-%20${whatsAppurl}`
+   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);
+        speechSynthesisInstance.speak(speechText);
+
+        document.getElementById('listenButton').innerText = 'Stop';
+        isListening = true;
+    }
+
+    function stopSpeech() {
+        speechSynthesisInstance.cancel();
+        document.getElementById('listenButton').innerText = 'Listen';
+        isListening = false;
+    }
 </script>
 <style>
  section > div > p > p {
--- a/src/pages/bn/[id].astro
+++ b/src/pages/bn/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
          ogTitle={items.meta_title}
          ogDesc={items.meta_description}
          ogURL=`https://barta-india.in/bn/${items.slug}`
-          canonical=`https://barta-india.in/bn/${items.slug}`
          >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -45,7 +45,7 @@ const items  = data.data[idx];
                <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=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X 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>
@@ -54,6 +54,42 @@ const items  = data.data[idx];
      </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;
--- a/src/pages/bn/index.astro
+++ b/src/pages/bn/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 			ogTitle={items.title}
 			ogDesc={items.description}
 			ogURL=`https://barta-india.in/bn`
-			canonical=`https://barta-india.in/bn`
 			>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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/${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>
--- a/src/pages/bn/local/[id].astro
+++ b/src/pages/bn/local/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
          ogTitle={items.meta_title}
          ogDesc={items.meta_description}
          ogURL=`https://barta-india.in/bn/local/${items.slug}`
-          canonical=`https://barta-india.in/bn/local/${items.slug}`
          >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -45,7 +45,7 @@ const items  = data.data[idx];
                <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/local/${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/local/${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/local/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/local/${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/local/${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>
@@ -54,6 +54,41 @@ const items  = data.data[idx];
      </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;
--- a/src/pages/bn/local/index.astro
+++ b/src/pages/bn/local/index.astro
@@ -8,7 +8,6 @@ const metaJSON = await fetchMeta.json();
 const items = metaJSON.data[0];
 // const imageData = data.image;
 // const data = fetchDataJSON.data;
-// console.log()
 ---

 <LayoutBN title={items.title}
@@ -25,7 +24,6 @@ const items = metaJSON.data[0];
 			ogTitle={items.title}
 			ogDesc={items.description}
 			ogURL=`https://barta-india.in/bn/local/`
-			canonical=`https://barta-india.in/bn/local`
 			>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,12 +32,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/${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>
--- a/src/pages/bn/national/[id].astro
+++ b/src/pages/bn/national/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
          ogTitle={items.meta_title}
          ogDesc={items.meta_description}
          ogURL=`https://barta-india.in/bn/national/${items.slug}`
-          canonical=`https://barta-india.in/bn/local/${items.slug}`
          >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -45,7 +45,7 @@ const items  = data.data[idx];
                <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/national/${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/national/${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/national/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/national/${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/national/${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>
@@ -54,6 +54,41 @@ const items  = data.data[idx];
      </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;
--- a/src/pages/bn/national/index.astro
+++ b/src/pages/bn/national/index.astro
@@ -24,7 +24,6 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/bn/national/`
-		canonical=`https://barta-india.in/bn/national`
 		>
 	<main>
 		<section class="container mx-auto px-4">
@@ -33,12 +32,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/national/${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>
--- a/src/pages/bn/politics/[id].astro
+++ b/src/pages/bn/politics/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
          ogTitle={items.meta_title}
          ogDesc={items.meta_description}
          ogURL=`https://barta-india.in/bn/politics/${items.slug}`
-          canonical=`https://barta-india.in/bn/politics/${items.slug}`
          >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -45,7 +45,7 @@ const items  = data.data[idx];
                <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/politics/${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/politics/${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/politics/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/politics/${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/politics/${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>
@@ -54,6 +54,41 @@ const items  = data.data[idx];
      </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;
--- a/src/pages/bn/politics/index.astro
+++ b/src/pages/bn/politics/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 			ogTitle={items.title}
 			ogDesc={items.description}
 			ogURL=`https://barta-india.in/bn/politics/`
-			canonical=`https://barta-india.in/bn/politics`
 			>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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/politics/${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>
--- a/src/pages/bn/technology/[id].astro
+++ b/src/pages/bn/technology/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
          ogTitle={items.meta_title}
          ogDesc={items.meta_description}
          ogURL=`https://barta-india.in/bn/technology/${items.slug}`
-          canonical=`https://barta-india.in/bn/politics/${items.slug}`
          >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -45,7 +45,7 @@ const items  = data.data[idx];
                <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/technology/${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/technology/${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/technology/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/bn/technology/${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/technology/${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>
--- a/src/pages/bn/technology/index.astro
+++ b/src/pages/bn/technology/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 			ogTitle={items.title}
 			ogDesc={items.description}
 			ogURL=`https://barta-india.in/bn/technology/`
-			canonical=`https://barta-india.in/bn/technology`
 			>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -26,18 +26,18 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in`
-		canonical=`https://barta-india.in`
 		>
 	<main>
 		<section class="container mx-auto px-4">
 			<h1 class="text-4xl font-bold border-b-4 border-[#780A0A] my-16">Latest News</h1>
 				<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={`/${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>
--- a/src/pages/local/[id].astro
+++ b/src/pages/local/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
        ogTitle={items.meta_title}
        ogDesc={items.meta_description}
        ogURL=`https://barta-india.in/local/${items.slug}`
-        canonical=`https://barta-india.in/local/${items.slug}`
        >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -44,8 +44,8 @@ const items  = data.data[idx];
              <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/local/${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/local/${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/local/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href={`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fbarta-india.in%2Flocal%2F${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/local/${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/local/${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>
@@ -54,6 +54,35 @@ const items  = data.data[idx];
      </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);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
  section > div > p > p {
    text-align: justify;
--- a/src/pages/local/index.astro
+++ b/src/pages/local/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/local/`
-		canonical=`https://barta-india.in/local`
 		>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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={`/local${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>
--- a/src/pages/national/[id].astro
+++ b/src/pages/national/[id].astro
@@ -31,13 +31,13 @@ const items  = data.data[idx];
        ogTitle={items.meta_title}
        ogDesc={items.meta_description}
        ogURL=`https://barta-india.in/national/${items.slug}`
-        canonical=`https://barta-india.in/national/${items.slug}`
        >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -46,7 +46,7 @@ const items  = data.data[idx];
                <p class="text-xl font-bold text-[#780a0a]">Share on: </p>
                <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/national/${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/national/${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/national/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/national/${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/national/${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>
@@ -55,6 +55,35 @@ const items  = data.data[idx];
      </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);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
  section > div > p > p {
    text-align: justify;
--- a/src/pages/national/index.astro
+++ b/src/pages/national/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/national/`
-		canonical=`https://barta-india.in/national`
 		>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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={`/national${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>
--- a/src/pages/politics/[id].astro
+++ b/src/pages/politics/[id].astro
@@ -30,14 +30,14 @@ const items  = data.data[idx];
        ogTitle={items.meta_title}
        ogDesc={items.meta_description}
        ogURL=`https://barta-india.in/politics/${items.slug}`
-        canonical=`https://barta-india.in/politics/${items.slug}`
        
        >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+          <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>
@@ -46,7 +46,7 @@ const items  = data.data[idx];
                <p class="text-xl font-bold text-[#780a0a]">Share on: </p>
                <a href=`whatsapp://send?text=${items.title}%20%0A%20https://barta-india.in/politics/${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/politics/${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/politics/${items.slug}&text=Your%20${items.title}` target="_blank"><img src="/img/x.svg" alt="Twitter/X Logo"/></a>
+                <a href=`http://www.twitter.com/share?url=https://barta-india.in/politics/${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/politics/${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>
@@ -55,6 +55,35 @@ const items  = data.data[idx];
      </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);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
  /* section > div > p > p {
    text-align: justify;
--- a/src/pages/politics/index.astro
+++ b/src/pages/politics/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/politics/`
-		canonical=`https://barta-india.in/politics`
 		>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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={`/politics${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>
--- a/src/pages/privacy-policy.astro
+++ b/src/pages/privacy-policy.astro
@@ -2,7 +2,6 @@
 import Layout from "../layouts/Layout.astro";
 ---
 <Layout title="Privacy Policy | Barta-India"
-        canonical=`https://barta-india.in/privacy-policy`
        >
    
    <main>
--- a/src/pages/speech-text.astro
+++ b/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>
--- a/src/pages/technology/[id].astro
+++ b/src/pages/technology/[id].astro
@@ -30,13 +30,13 @@ const items  = data.data[idx];
        ogTitle={items.meta_title}
        ogDesc={items.meta_description}
        ogURL=`https://barta-india.in/technology/${items.slug}`
-        canonical=`https://barta-india.in/technology/${items.slug}`
        >
    <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>
-            <h2 class="text-xl py-2">{items.title}</h2>
+            <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>
@@ -54,6 +54,35 @@ const items  = data.data[idx];
      </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);
+       speechSynthesisInstance.speak(speechText);
+
+       document.getElementById('listenButton').innerText = 'Stop';
+       isListening = true;
+   }
+
+   function stopSpeech() {
+       speechSynthesisInstance.cancel();
+       document.getElementById('listenButton').innerText = 'Listen';
+       isListening = false;
+   }
+</script>
 <style>
  section > div > p > p {
    text-align: justify;
--- a/src/pages/technology/index.astro
+++ b/src/pages/technology/index.astro
@@ -25,7 +25,6 @@ const items = metaJSON.data[0];
 		ogTitle={items.title}
 		ogDesc={items.description}
 		ogURL=`https://barta-india.in/technology/`
-		canonical=`https://barta-india.in/technology`
 		>
 	<main>
 		<section class="container mx-auto px-4">
@@ -34,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={`/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>
--- a/src/pages/terms-and-conditions.astro
+++ b/src/pages/terms-and-conditions.astro
@@ -1,7 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro"
 ---
-<Layout title="Terms & Conditions | Barta-India" canonical=`https://barta-india.in/terms-and-conditions`>
+<Layout title="Terms & Conditions | Barta-India">
    <main>
        <div class="mt-16">
            <section class="container mx-auto px-4 ">
Author	SHA1	Message	Date
dev sp	78d9081f87	add listening options	2024-01-19 07:57:07 +00:00
dev sp	d4043d1678	try to add listening options	2024-01-18 17:27:57 +00:00
dev sp	e90b7329c4	add publish date	2024-01-18 14:09:40 +00:00
dev sp	4982a72f0c	change twitter link text	2024-01-17 16:18:06 +00:00
dev sp	ee0bc8482a	add 404	2024-01-17 07:30:35 +00:00
dev sp	318e7f4c48	add 404	2024-01-17 07:28:05 +00:00
dev sp	443422300d	add 404	2024-01-17 07:25:07 +00:00
dev sp	37155aa643	add 404	2024-01-17 07:20:50 +00:00
dev sp	9191fb5642	done og image issue in facebook shares	2024-01-16 12:52:15 +00:00
dev sp	5d5c73b65b	remove canonical from every pages	2024-01-16 12:15:23 +00:00