feat: environment variables in Node.js article (#38)

* feat: working on env vars article + do not run analytics in dev mode

* feat: env vars article improvements (fact fixes, when-to-use section, intro rework)

* fix: extract Analytics component so prod-only analytics rendering parses correctly

Author: lmammino

.claude/content-calendar.md

@@ -22,7 +22,7 @@
 | #   | Status      | Article                          | Primary Keyword                 | Est. Volume | Pillar    |
 | --- | ----------- | -------------------------------- | ------------------------------- | ----------- | --------- |
 | 1   | COMPLETE    | **HTTP request in Node.js**      | "node js http request"          | 15,000+     | Core APIs |
-| 2   | NOT STARTED | Environment variables in Node.js | "node js environment variables" | 8,000+      | Core APIs |
+| 2   | COMPLETE    | **Environment variables in Node.js** | "node js environment variables" | 8,000+      | Core APIs |
 | 3   | NOT STARTED | Using Node.js built-in SQLite    | "node js sqlite"                | 5,000+      | Modern    |
 | 4   | NOT STARTED | Writing a CLI with Node.js       | "node js cli"                   | 4,000+      | Core APIs |
 

.prettierignore

@@ -1,3 +1,4 @@
+.agents/
 .claude/
 .tmp/
 pnpm-lock.yaml

src/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import './styles/global.css'
 import { Font } from 'astro:assets'
+import Analytics from './components/Analytics.astro'
 import Navigation from './components/Navigation.astro'
 import ThemeSelector from './components/ThemeSelector.astro'
 import {
@@ -246,27 +247,7 @@ const {
     <Font cssVariable="--font-base-serif" preload />
     <Font cssVariable="--font-base-mono" preload />
 
-    <!-- Google tag (gtag.js) -->
-    <script
-      is:inline
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-NFE37ZH2W3"></script>
-    <script is:inline>
-      window.dataLayer = window.dataLayer || []
-      function gtag() {
-        // eslint-disable-next-line no-undef
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-      // Disable all tracking by default
-      gtag('consent', 'default', {
-        ad_storage: 'denied',
-        ad_user_data: 'denied',
-        ad_personalization: 'denied',
-        // analytics_storage: 'denied',
-      })
-      gtag('config', 'G-NFE37ZH2W3')
-    </script>
+    {import.meta.env.PROD && <Analytics />}
   </head>
   <body
     class="antialiased transition-colors duration-300 bg-base-100 text-base-content"

src/components/Analytics.astro

@@ -0,0 +1,26 @@
+---
+// Google Analytics (gtag.js). Rendered by Layout.astro only in production
+// builds so that local development does not send tracking data.
+---
+
+<!-- Google tag (gtag.js) -->
+<script
+  is:inline
+  async
+  src="https://www.googletagmanager.com/gtag/js?id=G-NFE37ZH2W3"></script>
+<script is:inline>
+  window.dataLayer = window.dataLayer || []
+  function gtag() {
+    // eslint-disable-next-line no-undef
+    dataLayer.push(arguments)
+  }
+  gtag('js', new Date())
+  // Disable all tracking by default
+  gtag('consent', 'default', {
+    ad_storage: 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+    // analytics_storage: 'denied',
+  })
+  gtag('config', 'G-NFE37ZH2W3')
+</script>