[RZA-250159]: added google analytics

Author: recursivezero

src/assets/icons/close.svg

@@ -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;
     }
   }
@@ -155,4 +147,4 @@
       transform: scale(1.05) rotate(45deg);
     }
   }
-}
+}

src/assets/styles/setting.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;
@@ -506,4 +504,4 @@
     width: 18px;
     height: 18px;
   }
-}
+}

src/assets/styles/stories/stories.css

@@ -0,0 +1,15 @@
+---
+const GA_ID = "G-GV20S7JE8Q";
+---
+
+<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} is:inline></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    {
+      dataLayer.push(arguments);
+    }
+  }
+  gtag("js", new Date());
+  gtag("config", "{GA_ID}");
+</script>

src/components/Analytics.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 />-->

src/layouts/BaseHead.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"

src/layouts/common/Footer.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);
           })

src/pages/contact.astro

@@ -42,3 +42,4 @@ const meta = {
     <PoemDialog />
   </div>
 </BaseLayout>
+