Load posthog and mixpanel API key from env / repo secret keys instead of hardcoded. (#79)

* Load posthog and mixpanel API key from env instead of hardcoded.

* Set posthog and mixpanel API keys during docs deployment.

Author: badmonster0

.github/workflows/docs.yml

@@ -61,6 +61,8 @@ jobs:
         env:
           USE_SSH: true
         run: |
+          export COCOINDEX_DOCS_POSTHOG_API_KEY=${{ secrets.COCOINDEX_DOCS_POSTHOG_API_KEY }}
+          export COCOINDEX_DOCS_MIXPANEL_API_KEY=${{ secrets.COCOINDEX_DOCS_MIXPANEL_API_KEY }}
           git config --global user.email "cocoindex.io@gmail.com"
           git config --global user.name "CocoIndex"
           yarn install --frozen-lockfile

docs/docusaurus.config.ts

@@ -1,3 +1,4 @@
+import webpack from 'webpack';
 import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
@@ -33,14 +34,17 @@ const config: Config = {
   },
 
   plugins: [
-    [
-      "posthog-docusaurus",
-      {
-        apiKey: "phc_SgKiQafwZjHu4jQW2q402gbz6FYQ2NJRkcgooZMNNcy",
-        appUrl: "https://us.i.posthog.com",
-        enableInDevelopment: false,
-      },
-    ],
+    () => ({
+      name: 'load-env-vars',
+      configureWebpack: () => ({
+        mergeStrategy: { plugins: "append", resolve: "merge" },
+        plugins: [
+          new webpack.DefinePlugin({
+            'process.env.COCOINDEX_DOCS_MIXPANEL_API_KEY': JSON.stringify(process.env.COCOINDEX_DOCS_MIXPANEL_API_KEY),
+          })
+        ],
+      }),
+    }),
   ],
 
   presets: [
@@ -147,4 +151,16 @@ const config: Config = {
   } satisfies Preset.ThemeConfig,
 };
 
+
+if (!!process.env.COCOINDEX_DOCS_POSTHOG_API_KEY) {
+  config.plugins.push([
+    "posthog-docusaurus",
+    {
+      apiKey: process.env.COCOINDEX_DOCS_POSTHOG_API_KEY,
+      appUrl: "https://us.i.posthog.com",
+      enableInDevelopment: false,
+    },
+  ]);
+}
+
 export default config;

docs/src/theme/Root.js

@@ -2,11 +2,12 @@ import React from 'react';
 import mixpanel from 'mixpanel-browser';
 
 // Default implementation, that you can customize
-export default function Root({children}) {
+export default function Root({ children }) {
   React.useEffect(() => {
-    if (typeof window !== 'undefined') {
+    const mixpanelApiKey = process.env.COCOINDEX_DOCS_MIXPANEL_API_KEY;
+    if (typeof window !== 'undefined' && !!mixpanelApiKey) {
       // Initialize Mixpanel with the token
-      mixpanel.init('46addeb6bedf8684a445aced6e67c76e', {
+      mixpanel.init(mixpanelApiKey, {
         track_pageview: true,
         debug: process.env.NODE_ENV === 'development'
       });