fix: invalid hook call and analytic measurement_id error (#114)

### Description
This PR will:
- Fix the `MEASUREMENT_ID` variable not being recognised in the base
layout (It was logging an error in the browser).
- Fix the "Invalid hook call" issue that occurred when starting the dev
server.


### Related Issue
Fixes #23 



### Screenshots/Screencasts
N/A



### Notes to Reviewer
- There's a slight formatting change to the affected file due to to my
eslint config (I tried my best to configure it to match the source).
- Slightly unrelated to this PR, but I feel it would be better to have
the recent word in a row(not sure what to call it exactly) layout (Very
rough sketch below).



![IMG_1997](https://github.com/user-attachments/assets/b75cf945-1ac4-4e3f-82b8-4c94b3c401df)

---------

Co-authored-by: babblebey <babblebey@gmail.com>

Author: AFOJ

src/components/islands/recent-searches.jsx

@@ -4,8 +4,8 @@ import { $recentSearches } from "../../lib/stores/search.js";
 
 /**
  * Recent Searches Component - An Island that displays a user's last 5 searches
- * 
- * @todo implement a default list instead of `null` when no `$recentSearch` is found 
+ *
+ * @todo implement a default list instead of `null` when no `$recentSearch` is found
  * @todo implement loading component to avoid flickering UI
  */
 export default function RecentSearches() {
@@ -17,16 +17,18 @@ export default function RecentSearches() {
 
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
-			<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-			<ol className="space-y-1.5 underline">
+	  <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+	  <ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
           <li key={i}>
             <a href={item.url}>
               { item.word }
             </a>
           </li>
         ))}
-			</ol>
-		</div>
-  ) : null;
+	  </ol>
+	</div>
+  ) : (
+	<></>
+  );
 }

src/layouts/base.astro

@@ -7,12 +7,12 @@ import { SITE_META_KEYWORDS, SITE_META_DESCRIPTION } from "../../constants.js";
 const MEASUREMENT_ID = import.meta.env.PUBLIC_GOOGLE_ANALYTICS_MEASUREMENT_ID;
 
 const { props, url } = Astro;
-const { 
-	pageTitle, 
-	class:list, 
-	ogImageUrl = `${url.origin}/og.png`, 
+const {
+	pageTitle,
+	class:list,
+	ogImageUrl = `${url.origin}/og.png`,
 	description = SITE_META_DESCRIPTION,
-	subtitle = "Developer Jargons" 
+	subtitle = "Developer Jargons",
 } = props;
 ---
 
@@ -25,32 +25,34 @@ const {
 		<meta name="description" content={description} />
 		<meta name="keyword" content={SITE_META_KEYWORDS.join(",")} />
 
-		<meta property="og:url" content={url.href}>
-		<meta property="og:type" content="website">
-		<meta property="og:title" content={`${ pageTitle } - ${subtitle}`}>
-		<meta property="og:description" content={description}>
-		<meta property="og:image" content={ogImageUrl}>
+		<meta property="og:url" content={url.href} />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content={`${pageTitle} - ${subtitle}`} />
+		<meta property="og:description" content={description} />
+		<meta property="og:image" content={ogImageUrl} />
 
-		<meta name="twitter:card" content="summary_large_image">
-		<meta property="twitter:domain" content={url.host}>
-		<meta property="twitter:url" content={url.href}>
-		<meta name="twitter:title" content={`${ pageTitle } - ${subtitle}`}>
-		<meta name="twitter:description" content={description}>
-		<meta name="twitter:image" content={ogImageUrl}>
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta property="twitter:domain" content={url.host} />
+		<meta property="twitter:url" content={url.href} />
+		<meta name="twitter:title" content={`${pageTitle} - ${subtitle}`} />
+		<meta name="twitter:description" content={description} />
+		<meta name="twitter:image" content={ogImageUrl} />
 
 		<!-- Google tag (gtag.js) -->
 		<script async src=`https://www.googletagmanager.com/gtag/js?id=${MEASUREMENT_ID}`></script>
-		<script>
+		<script define:vars={{ MEASUREMENT_ID }}>
 			window.dataLayer = window.dataLayer || [];
-			function gtag(){dataLayer.push(arguments);}
-			gtag('js', new Date());
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag("js", new Date());
 
-			gtag('config', MEASUREMENT_ID);
+			gtag("config", MEASUREMENT_ID);
 		</script>
 
-		<title>{ pageTitle } - {subtitle}</title>
+		<title>{pageTitle} - {subtitle}</title>
 	</head>
 	<body class={list}>
-    	<slot />
+		<slot />
 	</body>
-</html>
+</html>