chore: Enhance 404 page and analytics integration (#60)

- Refactored 404.js to integrate analytics tracking with `trackEvent`.
- Updated analytics.js to add a reusable `trackEvent` function for event tracking.
- Improved event tracking on index.js for buttons, social links, and copy-link functionality.
- Renamed and standardized CSS class names in 404.scss and 404.ejs for consistency.
- Added lazy loading for images on the 404 page and optimized clipboard functionality.

Author: warnyul

src/js/404.js

@@ -1,2 +1,10 @@
 import '../scss/404.scss';
-import "./analytics.js";
+import { trackEvent } from "./analytics.js";
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.clazz-error-container a').forEach(a => {
+        a.addEventListener('click', (e) => {
+            trackEvent("click", a);
+        });
+    });
+});

src/js/analytics.js

@@ -1,5 +1,5 @@
 import { initializeApp } from "firebase/app";
-import { getAnalytics } from "firebase/analytics";
+import { getAnalytics, logEvent } from "firebase/analytics";
 
 // See: https://firebase.google.com/docs/web/learn-more#config-object
 const firebaseConfig = {
@@ -16,4 +16,16 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 
 // Initialize Analytics and get a reference to the service
-export const analytics = getAnalytics(app);
+const analytics = getAnalytics(app);
+
+export function trackEvent(event, element, additionalData = {}) {
+    const eventName =  element.getAttribute('aria-label') || obj.innerText || obj.textContent;
+    const eventData = {
+        name: eventName,
+        page_location: window.location.href,
+        page_referrer: document.referrer,
+        page_title: document.title,
+        ...additionalData,
+    };
+    logEvent(analytics, event, eventData);
+}

src/js/index.js

@@ -1,40 +1,36 @@
 import '../scss/index.scss';
-import { analytics } from './analytics.js';
-import { logEvent } from "firebase/analytics";
+import { trackEvent } from "./analytics.js";
 
-function trackButtonClick(obj) {
-    const event = obj.innerText || obj.textContent;
-    logEvent(analytics, "click", { name: event });
-}
-
-function trackSocialButtonClick(obj) {
-    const event = obj.getAttribute('aria-label');
-    logEvent(analytics, "click-social", { name: event });
-}
-
-function copyLink(url) {
-    window.navigator.clipboard.writeText(url);
-    confirm("Page URL copied to the clipboard.");
+function copyLinkToClipboard(url) {
+    if (navigator.clipboard) {
+        navigator.clipboard.writeText(url).then(() => {
+            alert('Page URL copied to the clipboard.');
+        }).catch(() => {
+            alert('Failed to copy the URL. Please copy manually.');
+        });
+    } else {
+        alert('Clipboard API is not supported in this browser.');
+    }
 }
 
 // Attach Event Handlers
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.clazz-button-container a').forEach(a => {
-    a.addEventListener('click', (e) => {
-      trackButtonClick(a);
+    document.querySelectorAll('.clazz-button-container a').forEach(a => {
+        a.addEventListener('click', (e) => {
+            trackEvent("click", a);
+        });
     });
-  });
 
-  document.querySelectorAll('.clazz-social-links a').forEach(a => {
-    a.addEventListener('click', (e) => {
-      trackSocialButtonClick(a);
+    document.querySelectorAll('.clazz-social-links a').forEach(a => {
+        a.addEventListener('click', (e) => {
+            trackEvent("social-click", a);
+        });
     });
-  });
 
-  document.querySelectorAll('.clazz-copy-link').forEach(a => {
-    a.addEventListener('click', (e) => {
-        e.preventDefault();
-        copyLink(window.location.href);
+    document.querySelectorAll('.clazz-copy-link').forEach(a => {
+        a.addEventListener('click', (e) => {
+            e.preventDefault();
+            copyLinkToClipboard(window.location.href);
+        });
     });
-  });
 });

src/scss/404.scss

@@ -2,7 +2,8 @@
 @use "variables" as *;
 
 // Reset
-body, html {
+body,
+html {
     margin: 0;
     padding: 0;
     font-family: $font-family;
@@ -15,7 +16,7 @@ body, html {
 }
 
 // Main container
-.error-container {
+.clazz-error-container {
     text-align: center;
     max-width: 640px;
     margin: auto;
@@ -39,12 +40,12 @@ body, html {
         filter: brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(1590%) hue-rotate(193deg) brightness(95%) contrast(102%);
     }
 
-    .action p {
+    .clazz-action p {
         font-size: $font-size-small;
         margin-bottom: calc($gap / 2); // Smaller gap for less important text
     }
 
-    .home-link {
+    .clazz-home-link {
         display: inline-block;
         padding: calc($gap / 2) $gap; // Padding with gap-based scaling
         font-size: $font-size-link;

src/views/404.ejs

@@ -8,7 +8,7 @@
     <link rel="preload" href="../assets/images/confused-robot.png?as=webp" as="image" type="image/webp" />
 </head>
 <body>
-    <div class="error-container">
+    <div class="clazz-error-container">
         <header>
             <h1>Page not found</h1>
             <p>Oops! Looks like you’ve hit a dead end.</p>
@@ -18,9 +18,9 @@
             <source type="image/webp" srcset="../assets/images/confused-robot.png?as=webp">
             <img src="../assets/images/confused-robot.png" alt="Confused robot looking for the page" loading="lazy" width="300" height="270" />
         </picture>
-        <div class="action">
+        <div class="clazz-action">
             <p>Don't worry, even robots get lost sometimes.</p>
-            <a href="/" class="home-link">Take Me Home</a>
+            <a href="/" aria-label="Visit the Home Page" class="clazz-home-link">Take Me Home</a>
         </div>
     </div>
 </body>