Bugfix/rza 250159 : fixed audio element properly on pages; analytics added (#160)

recursivezero · web-flow · commit c22fe9195346 · 2025-07-24T19:40:19.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "A website for our kids trial phase of abcdkbd.com",
   "homepage": "https://abcdkbd.com",
   "displayName": "abcd",
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
@@ -1,9 +1,9 @@
-<svg width="100%" height="100%" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <!-- Circle -->
   <circle cx="12" cy="12" r="10"  stroke-width="2" stroke-linecap="round" />
   <!-- Cross -->
-  <line x1="6" y1="6" x2="18" y2="18" stroke-width="1.5"
-    stroke-linecap="square" />
-  <line x1="18" y1="6" x2="6" y2="18"  stroke-width="1.5"
-    stroke-linecap="square" />
+  <line x1="7" y1="7" x2="17" y2="16" stroke-width="1.5"
+    stroke-linecap="butt" />
+  <line x1="17" y1="7" x2="7" y2="16"  stroke-width="1.5"
+    stroke-linecap="butt" />
 </svg>
diff --git a/src/assets/styles/draw.css b/src/assets/styles/draw.css
@@ -304,21 +304,6 @@
 }
 
 @media (max-width: 480px) {
-  #keyboard-trigger {
-    height: 32px !important;
-    width: 32px !important;
-  }
-
-  .share-trigger-button {
-    height: 32px !important;
-    width: 32px !important;
-  }
-
-  .share-trigger-button svg {
-    height: 12px !important;
-    width: 12px !important;
-  }
-
   .controls {
     right: 0;
     padding: 0.25rem;
diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css
@@ -274,7 +274,7 @@
     transition: transform 0.2s ease-in-out;
   }
 
-  .footer__nav--item[open]>summary .fa-chevron-down {
+  .footer__nav--item[open] > summary .fa-chevron-down {
     transform: rotate(180deg);
   }
 
@@ -291,4 +291,4 @@
     margin-top: 1rem;
     font-size: 0.85rem;
   }
-}
+}
diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css
@@ -19,23 +19,15 @@
     transition: transform 330ms ease-in-out;
 
     &::after {
-      /*content: '🕸';*/
       outline: 1px solid slateblue;
     }
-
-    /*&:hover {
-        transform: scale(1.05) rotate(45deg);
-      }*/
   }
 
   @media (max-width: 480px) {
     .setting__trigger {
       font-size: 0.6rem;
-      /* Adjust font size for smaller screens */
       width: 2.5rem;
-      /* Adjust width for smaller screens */
       height: 2.5rem;
-      /* Adjust height for smaller screens */
       margin-top: 12px;
     }
   }
diff --git a/src/assets/styles/stories/stories.css b/src/assets/styles/stories/stories.css
@@ -290,7 +290,7 @@
 }
 
 .reading-time {
-  color: light-dark(#000000, #ffffff);
+  /*color: light-dark(#000000, #ffffff);*/
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -335,7 +335,6 @@
 
 .story-description {
   font-size: clamp(1rem, 2.5vw, 1.25rem);
-  color: light-dark(#000000, #ffffff);
   margin-bottom: 2rem;
   line-height: 1.7;
   max-width: 800px;
@@ -372,7 +371,6 @@
 }
 
 .category-badge {
-  color: light-dark(#000000, #ffffff);
   padding: 0.3rem 0.9rem;
   border-radius: 9999px;
   font-size: 15px;
diff --git a/src/assets/styles/varnmala/reader.css b/src/assets/styles/varnmala/reader.css
@@ -31,7 +31,6 @@
 .container__reader > .letter {
   width: 100%;
   box-sizing: border-box;
-  margin-left: 4rem;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro
@@ -0,0 +1,16 @@
+---
+const GA_ID = "G-GV20S7JE8Q";
+const gtagScript = `
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
+  gtag('config', '${GA_ID}');
+`;
+---
+
+<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}></script>
+<script is:inline>
+  {
+    gtagScript;
+  }
+</script>
diff --git a/src/components/ControllerContainer.astro b/src/components/ControllerContainer.astro
@@ -7,7 +7,7 @@ import BackgroundToggle from "@/components/draw/BgToggle.astro";
 import ResetButton from "@/components/draw/ResetButton.astro";
 import SharePopover from "@/components/ShareButton.astro";
 import Help from "@/components/Help.astro";
-import Speak from "@/components/Speaker.astro";
+import AudioToggle from "@/components/Speaker.astro";
 import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
 ---
 
@@ -22,7 +22,7 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
     <KeyboardTrigger />
     <SharePopover />
   </div>
-  <Speak />
+  <AudioToggle />
   <Help
     title="Draw Keyboard"
     description="Draw letters by sliding your finger across the keys! Try the buttons to change the style, make it BIG or small, change the images, pick cool backgrounds, and customize font colors!"
@@ -57,6 +57,7 @@ import KeyboardTrigger from "@/components/KeyboardTrigger.astro";
       isKeyboardNav = false;
       controlButtons.forEach((btn) => btn.classList.remove("keyboard-focus"));
     });
+    //for the audio feature
     document.addEventListener("keydown", (event) => {
       const e = event as KeyboardEvent;
       if (e.key === "Tab") {
diff --git a/src/components/KeyboardTrigger.astro b/src/components/KeyboardTrigger.astro
@@ -2,19 +2,24 @@
 import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
 ---
 
-<button id="keyboard-trigger" aria-label="Toggle virtual keyboard">
+<button id="keyboard-trigger" class="show_on_touch" aria-label="Toggle virtual keyboard">
   <KeyboardIcon />
 </button>
 
 <style>
+  @media (hover: none), (pointer: coarse) {
+    .show_on_touch {
+      display: flex !important;
+    }
+  }
+
   #keyboard-trigger {
     background-color: transparent;
     color: var(--primary);
     border: 1px solid var(--primary);
     border-radius: 50%;
     width: 49px;
     height: 49px;
-    display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
@@ -33,6 +38,9 @@ import KeyboardIcon from "@/assets/icons/KeyboardIcon.svg";
 </style>
 
 <script>
+  const showOnTouchElement = document.querySelector(".show_on_touch");
+  const isTouchDevice = window.matchMedia("(hover: none), (pointer: coarse)").matches;
+  (showOnTouchElement as HTMLElement).style.display = isTouchDevice ? "flex" : "none";
   let currentHiddenInput: HTMLInputElement | null = null;
   let isKeyboardForcedOpen: boolean = false;
 
diff --git a/src/components/Speaker.astro b/src/components/Speaker.astro
@@ -5,15 +5,16 @@ declare global {
   }
 }
 
-//Append this to script section where you want to add this feature:
+//Append this to script on keydown section where you want to add this feature:
 /*    
-    document.addEventListener('keydown', (event) => {
-    const key = event.key;
-    if (key.length === 1 && key.match(/[a-z]/i)) {
-      if (window.playLetterSound) {
-        window.playLetterSound(key.toLowerCase());
-      }
+  const attachAudio = (key: string) => {
+    if (/[A-Z]/i.test(key)) {
+      window?.playLetterSound(key.toLowerCase());
     }
+  };
+  document.addEventListener("keydown", (event) => {
+    const {key} =event;
+    attachAudio(key)
   });
 */
 ---
diff --git a/src/layouts/BaseHead.astro b/src/layouts/BaseHead.astro
@@ -4,6 +4,7 @@
 import "@/assets/styles/globals.css";
 import { siteConfig } from "@/site-config";
 import "@fontsource/roboto";
+import Analytics from "../components/Analytics.astro";
 
 const { title, description, ogImage, articleDate } = Astro.props;
 
@@ -76,5 +77,6 @@ const socialImageURL = new URL(ogImage ? ogImage : "/assets/icons/logo.png", Ast
 <link rel="alternate" type="application/rss+xml" title={siteConfig.title} href="/rss.xml" />
 
 <meta name="generator" content={Astro.generator} />
+<Analytics />
 
 <!--<ClientRouter />-->
diff --git a/src/layouts/common/Footer.astro b/src/layouts/common/Footer.astro
@@ -3,7 +3,6 @@ import "@/assets/styles/footer.css";
 import ToggleIcon from "@/assets/icons/toggle.svg";
 ---
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
 <div class="container__footer">
   <div class="footer__main-content">
     <!-- Brand and description -->
@@ -13,7 +12,7 @@ import ToggleIcon from "@/assets/icons/toggle.svg";
       </div>
       <p>Making learning fun and engaging for young minds everywhere.</p>
       <div class="social hide">
-        <a href="https://twitter.com/" aria-label="X" target="_blank" rel="noopener noreferrer"
+        <a href="https://twitter.com/abcd_kbd" aria-label="X" target="_blank" rel="noopener noreferrer"
           ><i class="fa-brands fa-x-twitter"></i></a
         >
         <a href="https://facebook.com/" aria-label="Facebook" target="_blank" rel="noopener noreferrer"
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -51,14 +51,10 @@ const meta = {
           .writeText(emailText)
           .then(() => {
             // Success feedback
-            copyIcon.classList.remove("fa-copy");
-            copyIcon.classList.add("fa-check");
             copyButton.title = "Copied!";
 
             // Revert back after 2 seconds
             setTimeout(() => {
-              copyIcon.classList.remove("fa-check");
-              copyIcon.classList.add("fa-copy");
               copyButton.title = "Copy email";
             }, 2000);
           })
diff --git a/src/pages/draw.astro b/src/pages/draw.astro
@@ -2,7 +2,7 @@
 import "@/assets/styles/draw.css";
 import Back from "@/components/Back.astro";
 import ControlsContainer from "@/components/ControllerContainer.astro";
-import Keyboard from "@/components/DrawKeyboard.astro";
+import DrawComponent from "@/components/DrawKeyboard.astro";
 import MobileSplash from "@/components/MobileSplash.astro";
 import BaseLayout from "@/layouts/Base";
 
@@ -19,5 +19,5 @@ const meta = {
   <Fragment slot="header-right">
     <ControlsContainer />
   </Fragment>
-  <Keyboard />
+  <DrawComponent />
 </BaseLayout>
diff --git a/src/pages/varnmala/listen.astro b/src/pages/varnmala/listen.astro

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@recursivezero/abcd",`
`3`		`- "version": "3.2.2",`
	`3`	`+ "version": "3.2.3",`
`4`	`4`	`"description": "A website for our kids trial phase of abcdkbd.com",`
`5`	`5`	`"homepage": "https://abcdkbd.com",`
`6`	`6`	`"displayName": "abcd",`
Original file line number	Diff line number	Diff line change
`@@ -274,7 +274,7 @@`
`274`	`274`	`transition: transform 0.2s ease-in-out;`
`275`	`275`	`}`
`276`	`276`
`277`		`- .footer__nav--item[open]>summary .fa-chevron-down {`
	`277`	`+ .footer__nav--item[open] > summary .fa-chevron-down {`
`278`	`278`	`transform: rotate(180deg);`
`279`	`279`	`}`
`280`	`280`
`@@ -291,4 +291,4 @@`
`291`	`291`	`margin-top: 1rem;`
`292`	`292`	`font-size: 0.85rem;`
`293`	`293`	`}`
`294`		`-}`
	`294`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -19,23 +19,15 @@`
`19`	`19`	`transition: transform 330ms ease-in-out;`
`20`	`20`
`21`	`21`	`&::after {`
`22`		`- /content: '🕸';/`
`23`	`22`	`outline: 1px solid slateblue;`
`24`	`23`	`}`
`25`		`-`
`26`		`- /*&:hover {`
`27`		`- transform: scale(1.05) rotate(45deg);`
`28`		`- }*/`
`29`	`24`	`}`
`30`	`25`
`31`	`26`	`@media (max-width: 480px) {`
`32`	`27`	`.setting__trigger {`
`33`	`28`	`font-size: 0.6rem;`
`34`		`- /* Adjust font size for smaller screens */`
`35`	`29`	`width: 2.5rem;`
`36`		`- /* Adjust width for smaller screens */`
`37`	`30`	`height: 2.5rem;`
`38`		`- /* Adjust height for smaller screens */`
`39`	`31`	`margin-top: 12px;`
`40`	`32`	`}`
`41`	`33`	`}`