From a8d4cf094b54179e4edaf4ef80839f8698a73847 Mon Sep 17 00:00:00 2001
From: James Tansiri <tansirijames@gmail.com>
Date: Fri, 20 Dec 2024 08:31:37 +0700
Subject: [PATCH] feat: hide posthog and analytics on local development

---
 .env.example               |  1 +
 .gitignore                 |  1 +
 _data/env.js               |  3 +++
 _includes/layouts/base.njk | 29 ++++++++++++++++-------------
 package.json               |  1 +
 public/css/tailwind.css    | 15 +++++----------
 6 files changed, 27 insertions(+), 23 deletions(-)
 create mode 100644 .env.example
 create mode 100644 _data/env.js

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..cfa75aa
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+DEVELOPMENT=true # Set this value to anything for local development.
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 15e9d48..fde6a5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 package-lock.json
 .cache
 .DS_Store
+.env
\ No newline at end of file
diff --git a/_data/env.js b/_data/env.js
new file mode 100644
index 0000000..4d6263c
--- /dev/null
+++ b/_data/env.js
@@ -0,0 +1,3 @@
+require("dotenv").config();
+
+module.exports = process.env;
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 8ea516a..e4a7f3c 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -13,12 +13,12 @@
         <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}"> {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
         {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
         {#-
-                		CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
-                		1. You can add to them using `{% css %}`
-                		2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
-                		3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
-                		4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
-                		#}
+        CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
+        1. You can add to them using `{% css %}`
+        2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
+        3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
+        4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
+        #}
         {#- Add an arbitrary string to the bundle #}{%- css %}* { box-sizing: border-box; }
         {% endcss %}{%- css %}[x-cloak] { display: none !important; }
         {% endcss %}
@@ -42,6 +42,15 @@
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="theme-color" content="#ffffff">
         <noscript><link rel="stylesheet" href="{% getBundleFileUrl "css", "fontawesome" %}"></noscript>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
+        {% if env.DEVELOPMENT %}
+        <!-- PostHog -->
+        <script>
+            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+            posthog.init('phc_yLM9HWAMOTKet6v7aCH99ym6JhGgOEjqqIdKJzcRY62', {api_host: "https://a.pythonexpert.dev"})
+        </script>
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-DLK6DEB1NJ"></script>
         <script>
@@ -50,13 +59,7 @@
             gtag('js', new Date());
             gtag('config', 'G-DLK6DEB1NJ');
         </script>
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&family=Victor+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
-        <script>
-            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-            posthog.init('phc_yLM9HWAMOTKet6v7aCH99ym6JhGgOEjqqIdKJzcRY62', {api_host: "https://a.pythonexpert.dev"})
-        </script>
+        {% endif %}
     </head>
     <body>
         {% include 'navigation.njk' %}
diff --git a/package.json b/package.json
index a2d9f1b..cffa2f5 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 		"@tailwindcss/typography": "^0.5.13",
 		"alpinejs": "^3.14.1",
 		"cross-env": "^7.0.3",
+		"dotenv": "^16.4.7",
 		"hotkeys-js": "^3.13.7",
 		"image-size": "^1.1.1",
 		"luxon": "^3.3.0",
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
index bb96d5c..cedf38c 100644
--- a/public/css/tailwind.css
+++ b/public/css/tailwind.css
@@ -2207,6 +2207,11 @@ h4 {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .text-indigo-200 {
   --tw-text-opacity: 1;
   color: rgb(199 210 254 / var(--tw-text-opacity));
@@ -2262,16 +2267,6 @@ h4 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
-.text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }