feat: integrate PostHog (#70)

.github/ISSUE_TEMPLATE/bug.yml

@@ -26,4 +26,4 @@ body:
   - type: markdown
     attributes:
       value: |
-        By submitting this bug report, I agree to follow the [code of conduct](https://inventory.fix.security/code-of-conduct).
+        By submitting this bug report, I agree to follow the [code of conduct](https://fix.security/code-of-conduct).

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -28,4 +28,4 @@ body:
   - type: markdown
     attributes:
       value: |
-        By submitting this feature request, I agree to follow the [code of conduct](https://inventory.fix.security/code-of-conduct).
+        By submitting this feature request, I agree to follow the [code of conduct](https://fix.security/code-of-conduct).

.github/PULL_REQUEST_TEMPLATE.md

@@ -23,4 +23,4 @@
 
 # Code of Conduct
 
-By submitting this pull request, I agree to follow the [code of conduct](https://inventory.fix.security/code-of-conduct).
+By submitting this pull request, I agree to follow the [code of conduct](https://fix.security/code-of-conduct).

docusaurus.config.ts

@@ -13,8 +13,8 @@ import versions from './versions.json';
 
 const isDev = process.env.NODE_ENV === 'development';
 const isBuildFast = isDev || !!process.env.BUILD_FAST;
-const isProd =
-  !isDev && !!process.env.NETLIFY && process.env.CONTEXT !== 'deploy-preview';
+const isNetlify = !!process.env.NETLIFY;
+const isProd = isNetlify && process.env.CONTEXT === 'production';
 
 const config: Config = {
   title: 'Fix Inventory by Some Engineering Inc.',
@@ -27,6 +27,12 @@ const config: Config = {
   favicon: 'img/favicon.ico',
   trailingSlash: false,
   noIndex: !isProd,
+  customFields: {
+    isDev,
+    isNetlify,
+    isProd,
+    posthogProjectApiKey: process.env.POSTHOG_PROJECT_API_KEY,
+  },
   stylesheets: [
     'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap',
   ],

package.json

@@ -40,8 +40,10 @@
     "docusaurus-plugin-openapi-docs": "3.0.0-beta.10",
     "docusaurus-theme-openapi-docs": "3.0.0-beta.10",
     "github-slugger": "2.0.0",
+    "js-cookie": "3.0.5",
     "lodash": "4.17.21",
     "netlify-plugin-cache": "1.0.3",
+    "posthog-js": "1.128.1",
     "prism-react-renderer": "2.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -58,6 +60,7 @@
     "@docusaurus/module-type-aliases": "3.2.1",
     "@docusaurus/tsconfig": "3.2.1",
     "@docusaurus/types": "3.2.1",
+    "@types/js-cookie": "3.0.6",
     "@typescript-eslint/eslint-plugin": "7.7.0",
     "@typescript-eslint/parser": "7.7.0",
     "commitizen": "4.3.0",

src/components/CookieConsent.tsx

@@ -0,0 +1,107 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Cookies from 'js-cookie';
+import { usePostHog } from 'posthog-js/react';
+import { useEffect, useState } from 'react';
+
+export default function CookieConsent() {
+  const {
+    siteConfig: {
+      customFields: { isDev, isProd, posthogProjectApiKey },
+    },
+  } = useDocusaurusContext();
+  const posthog = usePostHog();
+  const [showConsent, setShowConsent] = useState(false);
+
+  useEffect(() => {
+    if (posthog.has_opted_in_capturing()) {
+      setShowConsent(false);
+    } else {
+      setShowConsent(Cookies.get('cookie_consent') !== 'false');
+    }
+
+    if (
+      posthog.has_opted_in_capturing() ||
+      Cookies.get('cookie_consent') !== 'false'
+    ) {
+      Cookies.remove('cookie_consent', {
+        domain: isProd ? '.fix.security' : undefined,
+        secure: !isDev,
+      });
+    }
+  }, [isDev, isProd, posthog]);
+
+  if (!posthogProjectApiKey || !showConsent) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        pointerEvents: 'none',
+        position: 'fixed',
+        left: '0px',
+        right: '0px',
+        bottom: '0px',
+        padding: '0 1.5rem 1.5rem',
+      }}
+    >
+      <div
+        style={{
+          pointerEvents: 'auto',
+          marginLeft: 'auto',
+          maxWidth: '36rem',
+          borderRadius: '0.75rem',
+          backgroundColor: 'white',
+          padding: '1.5rem',
+          boxShadow: '0 0 0 1px var(--ifm-color-secondary)',
+        }}
+      >
+        <p
+          style={{
+            fontSize: '1rem',
+            lineHeight: '1.5rem',
+          }}
+        >
+          We use cookies and other tracking technologies to analyze site usage
+          and assist in marketing efforts. For details, see our{' '}
+          <Link href="https://fix.security/cookie-policy">cookie policy</Link>.
+        </p>
+        <div
+          style={{
+            marginTop: '1rem',
+            display: 'flex',
+            alignItems: 'center',
+            columnGap: '1.25rem',
+          }}
+        >
+          <button
+            className="button button--primary"
+            onClick={(e) => {
+              e.preventDefault();
+              setShowConsent(false);
+              posthog.opt_in_capturing({ enable_persistence: true });
+            }}
+          >
+            Accept
+          </button>
+          <button
+            className="button button--primary button--outline"
+            onClick={(e) => {
+              e.preventDefault();
+              setShowConsent(false);
+              Cookies.set('cookie_consent', 'false', {
+                expires: isProd ? 30 : undefined,
+                domain: isProd ? '.fix.security' : undefined,
+                secure: !isDev,
+              });
+              posthog.opt_out_capturing();
+            }}
+          >
+            Reject
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/PosthogPageView.tsx

@@ -0,0 +1,26 @@
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { usePostHog } from 'posthog-js/react';
+import { useEffect } from 'react';
+
+export default function PosthogPageView() {
+  const {
+    siteConfig: {
+      customFields: { posthogProjectApiKey },
+    },
+  } = useDocusaurusContext();
+  const { pathname, search } = useLocation();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (posthogProjectApiKey && pathname) {
+      const url = `${window.origin}${pathname}${search}`;
+
+      posthog.capture('$pageview', {
+        $current_url: url,
+      });
+    }
+  }, [posthogProjectApiKey, pathname, search, posthog]);
+
+  return null;
+}