Feature/rza-250175:Analytics Added with partytown integration (#172)

Author: recursivezero

.vscode/dictionaries/project-words.txt

@@ -26,6 +26,7 @@ datetime
 Deepavali
 dhaga
 Dhaivat
+Disha
 dogri
 DPDP
 Dussehra
@@ -59,6 +60,7 @@ LXXX
 Madhyam
 Magha
 maithili
+Majeure
 Margashirsha
 matra
 matras

CHANGELOG.md

@@ -36,6 +36,11 @@ Created Repo from template
 - Mobile view fixed for pages
 - FAQs updated
 
+## [3.2.3] - 2025-09-07
+
+- Added Google Analytics with partytown
+- Added Disha and Purana names in Glossary
+
 ### [Unreleased]
 
 Here we write upgrading notes for brands. It's a team effort to make them as straightforward as possible.

astro.config.mjs

@@ -1,4 +1,5 @@
 import mdx from "@astrojs/mdx";
+import partytown from "@astrojs/partytown";
 import sitemap from "@astrojs/sitemap";
 import { defineConfig } from "astro/config";
 
@@ -18,7 +19,16 @@ export default defineConfig({
   experimental: {
     svg: true
   },
-  integrations: [sitemap(), mdx()],
+  integrations: [
+    partytown({
+      // https://partytown.qwik.dev/google-tag-manager/#google-analytics-4-ga4
+      config: {
+        forward: ["dataLayer.push"]
+      }
+    }),
+    sitemap(),
+    mdx()
+  ],
   style: {
     global: true // Ensure global styles are applied
   },

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "A website for our kids trial phase of abcdkbd.com",
   "homepage": "https://abcdkbd.com",
   "displayName": "abcd",
@@ -112,6 +112,7 @@
     "@astrojs/check": "0.9.4",
     "@astrojs/mdx": "4.0.3",
     "@astrojs/node": "9.1.2",
+    "@astrojs/partytown": "2.1.4",
     "@astrojs/sitemap": "3.4.1",
     "@fontsource/roboto": "5.1.0",
     "astro": "5.4.1",
@@ -135,5 +136,8 @@
     "prettier": "3.1.0",
     "prettier-plugin-astro": "0.14.1",
     "shx": "0.3.4"
+  },
+  "engines": {
+    "node": "^20"
   }
-}
+}

package.json

@@ -29,16 +29,14 @@
     justify-content: center;
     align-items: center;
     height: 100%;
-    font-size: clamp(3rem, 6vw, 4rem);
+    font-size: clamp(3rem, 6vw, 3.25rem);
     font-weight: 800;
     margin: 0;
     line-height: 1.2;
     /* Adjusted line-height */
-    background: linear-gradient(
-      135deg,
-      var(--character-gradient-start, var(--primary)) 0%,
-      var(--character-gradient-end, var(--primary-light)) 100%
-    );
+    background: linear-gradient(135deg,
+        var(--character-gradient-start, var(--primary)) 0%,
+        var(--character-gradient-end, var(--primary-light)) 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
@@ -194,11 +192,9 @@
   & .card__glow {
     position: absolute;
     inset: 0;
-    background: radial-gradient(
-      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
-      color-mix(in srgb, var(--primary) 10%, transparent) 0%,
-      transparent 60%
-    );
+    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
+        color-mix(in srgb, var(--primary) 10%, transparent) 0%,
+        transparent 60%);
     opacity: 0;
     transition: opacity 0.3s ease;
     pointer-events: none;
@@ -217,4 +213,4 @@
       font-size: 0.875rem;
     }
   }
-}
+}

src/assets/styles/letter-card.css

@@ -4,22 +4,61 @@
   padding-inline: 1rem;
 }
 
+.legend__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  div {
+    flex: 1;
+    text-align: right;
+    font-style: italic;
+  }
+
+  .legend {
+    font-size: large;
+    color: rgb(44, 45, 42);
+    margin-inline-end: 4px;
+
+    &::before {
+      content: attr(data-icon);
+      font-size: 1.75rem;
+    }
+  }
+
+  dl {
+    display: flex;
+    margin: 3px 4px;
+    align-items: center;
+    padding-inline: 1rem;
+    border: 3px dotted #b2c3d9;
+  }
+
+  dd {
+    margin: 0;
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+  }
+}
+
 .card__list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
   gap: 1rem;
-  margin: 1rem;
-}
+  margin-block: 1rem;
+
 
-@container nakshtra (width <=700px) {
-  .card__list {
-    grid-template-columns: repeat(2, 1fr);
+  @container nakshtra (width <=700px) {
+    .card__list {
+      grid-template-columns: repeat(2, 1fr);
+    }
   }
-}
 
-@container nakshtra (width <=468px) {
-  .card__list {
-    grid-template-columns: 1fr;
+  @container nakshtra (width <=468px) {
+    .card__list {
+      grid-template-columns: 1fr;
+    }
   }
 }
 
@@ -31,4 +70,71 @@
   background-color: rgba(var(--card-bg), 0.5);
   border-left: 4px solid var(--primary-color);
   opacity: 0.8;
+}
+
+
+
+
+/* Nakshtra card */
+.card {
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  box-shadow: 0 2px 5px var(--primary-color);
+  aspect-ratio: 1/1;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  position: relative;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 25px 75px var(--primary-color);
+}
+
+.nakshatra-card {
+  aspect-ratio: auto;
+  cursor: default;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+
+  h3 {
+    font-size: 2rem;
+    color: #df9f9f;
+    margin: 0;
+  }
+
+  .nakshatra-details {
+    padding: 0;
+    margin: 0;
+    font-size: 0.95rem;
+    width: 100%;
+    text-align: left;
+
+    p {
+      padding: 0.5rem 1rem;
+      margin: 0;
+      font-size: 1.5rem;
+
+      &:nth-child(even) {
+        border-block: 1px dashed light-dark(#78818d, #123456);
+      }
+
+      & span {
+        padding-inline: 0.5rem;
+      }
+    }
+  }
 }

src/assets/styles/nakshtra.css

@@ -61,3 +61,10 @@
     display: none;
   }
 }
+
+[data-category="scripture"] .page__grid {
+  .character {
+    margin-top: 8px;
+    font-size: clamp(1rem, 4vw, 2rem);
+  }
+}

src/assets/styles/tile.css

@@ -8,8 +8,8 @@ const gtagScript = `
 `;
 ---
 
-<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} is:inline></script>
-<script define:vars={{ gtagScript }} is:inline>
+<script async type="text/partytown" src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} is:inline></script>
+<script type="text/partytown" define:vars={{ gtagScript }} is:inline>
   {
     gtagScript;
   }

src/components/Analytics.astro

@@ -108,6 +108,7 @@ import "@/assets/styles/map/district.css";
               });
               texts.forEach((text) => {
                 text.style.display = "block";
+                text.style.stroke = "#5417dcb0";
                 text.style.fill = getComputedStyle(document.documentElement).getPropertyValue("--text");
               });
               break;
@@ -238,6 +239,7 @@ import "@/assets/styles/map/district.css";
 
           const mouseX = e.clientX;
           const mouseY = e.clientY;
+          tooltip.style.color = "green";
 
           tooltip.style.left = `${mouseX - 250}px`;
           tooltip.style.top = `${mouseY - 120}px`;