Skip to content

Commit

Permalink
filip(feat): replace matomo with posthog (#186)
Browse files Browse the repository at this point in the history
* filip(feat): replace matomo with posthog

* filip(chore): abstract posthog variables with env vars
  • Loading branch information
fstoqnov-iohk authored Nov 21, 2023
1 parent fff44ff commit fda93a4
Show file tree
Hide file tree
Showing 7 changed files with 189 additions and 128 deletions.
123 changes: 61 additions & 62 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const lightCodeTheme = require("prism-react-renderer/themes/github");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");

const OSANO_SRC = process.env.OSANO_SRC;
const scripts = [];
if (OSANO_SRC) {
scripts.push({
src: OSANO_SRC,
async: false
})
async: false,
});
}

/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Marlowe',
tagline: 'Peer to peer financial agreements',
favicon: 'img/favicon.ico',
url: 'https://play.marlowe.iohk.io/',
baseUrl: '/',
organizationName: 'Marlowe', // Usually your GitHub org/user name.
projectName: 'Marlowe', // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
title: "Marlowe",
tagline: "Peer to peer financial agreements",
favicon: "img/favicon.ico",
url: "https://play.marlowe.iohk.io/",
baseUrl: "/",
organizationName: "Marlowe", // Usually your GitHub org/user name.
projectName: "Marlowe", // Usually your repo name.
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "throw",

// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
defaultLocale: "en",
locales: ["en"],
},

presets: [
[
'docusaurus-preset-openapi',
({
"docusaurus-preset-openapi",
{
api: {
path: require.resolve('./static/api/openapi.latest.json'),
routeBasePath: 'api',
path: require.resolve("./static/api/openapi.latest.json"),
routeBasePath: "api",
},
docs: {
sidebarPath: require.resolve('./sidebars.js'),
editUrl: 'https://github.com/input-output-hk/marlowe-doc/edit/main',
sidebarPath: require.resolve("./sidebars.js"),
editUrl: "https://github.com/input-output-hk/marlowe-doc/edit/main",
},
blog: false,
theme: {
customCss: require.resolve('./src/css/custom.scss'),
customCss: require.resolve("./src/css/custom.scss"),
},
}),
},
],
],

themes: [
'@docusaurus/theme-mermaid',
"@docusaurus/theme-mermaid",
[
require.resolve("@easyops-cn/docusaurus-search-local"),
/** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
Expand All @@ -65,14 +65,14 @@ const config = {
],
],
plugins: [
'docusaurus-plugin-sass',
"docusaurus-plugin-sass",
[
'@docusaurus/plugin-content-docs',
"@docusaurus/plugin-content-docs",
{
id: 'tutorials',
path: 'tutorials',
routeBasePath: 'tutorials',
sidebarPath: require.resolve('./sidebar-tutorial.js'),
id: "tutorials",
path: "tutorials",
routeBasePath: "tutorials",
sidebarPath: require.resolve("./sidebar-tutorial.js"),
},
],
],
Expand All @@ -89,67 +89,66 @@ const config = {
},
},
navbar: {
title: '',
title: "",
logo: {
alt: 'Marlowe Logo',
src: 'img/marlowe-logo-primary-black-purple.svg',
srcDark: 'img/marlowe-logo-primary-white-purple.svg',
href: 'https://marlowe.iohk.io/',
alt: "Marlowe Logo",
src: "img/marlowe-logo-primary-black-purple.svg",
srcDark: "img/marlowe-logo-primary-white-purple.svg",
href: "https://marlowe.iohk.io/",
},
items: [
{
type: 'doc',
docId: 'introduction',
position: 'left',
label: 'Documentation',
type: "doc",
docId: "introduction",
position: "left",
label: "Documentation",
},
{
to: 'tutorials',
position: 'left',
label: 'Tutorials',
to: "tutorials",
position: "left",
label: "Tutorials",
},
{
type: 'dropdown',
label: 'Community',
position: 'left',
type: "dropdown",
label: "Community",
position: "left",
items: [
{
label: 'Github',
href: 'https://github.com/input-output-hk/marlowe',
label: "Github",
href: "https://github.com/input-output-hk/marlowe",
},
{
label: 'Stack Exchange',
href: 'https://cardano.stackexchange.com/questions/tagged/marlowe',
label: "Stack Exchange",
href: "https://cardano.stackexchange.com/questions/tagged/marlowe",
},
{
label: 'Discord',
href: 'https://discord.com/channels/826816523368005654/936295815926927390',
label: "Discord",
href: "https://discord.com/channels/826816523368005654/936295815926927390",
},
{
label: 'Twitter',
href: 'https://twitter.com/marlowe_io',
label: "Twitter",
href: "https://twitter.com/marlowe_io",
},
],
},
{
type: 'search',
position: 'right',
type: "search",
position: "right",
},
],
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
additionalLanguages: ['rest', 'haskell', 'http'],
additionalLanguages: ["rest", "haskell", "http"],
},
}
),
}),
scripts,
customFields: {
matomoBaseUrl: process.env.MATOMO_BASE_URL,
matomoSiteId: process.env.MATOMO_SITE_ID
}
posthogApiKey: process.env.POSTHOG_API_KEY,
posthogApiHost: process.env.POSTHOG_API_HOST,
posthogProjectId: process.env.POSTHOG_PROJECT_ID,
},
};

module.exports = config;

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
"typecheck": "tsc"
},
"dependencies": {
"@datapunt/matomo-tracker-react": "^0.5.1",
"@docusaurus/core": "^2.4.3",
"@docusaurus/plugin-content-docs": "^2.4.3",
"@docusaurus/plugin-content-pages": "^2.4.3",
Expand All @@ -27,10 +26,12 @@
"@mdx-js/react": "^1.6.22",
"classnames": "^2.3.2",
"clsx": "^1.2.1",
"dayjs": "^1.11.10",
"docusaurus-plugin-sass": "^0.2.5",
"docusaurus-preset-openapi": "^0.6.4",
"path": "^0.12.7",
"path-browserify": "^1.0.1",
"posthog-js": "^1.83.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
Expand Down
89 changes: 89 additions & 0 deletions src/analytics/AnalyticsContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React, {
PropsWithChildren,
createContext,
useCallback,
useEffect,
useState,
} from "react";
import { PostHog, PostHogProvider } from "posthog-js/react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import { posthog } from "posthog-js";
import dayjs from "dayjs";
import TrackRoute from "./TrackRoute";

export const AnalyticsContext = createContext<
(eventName: string, eventProps?: Record<string, unknown>) => void
>(() => {});

export function AnalyticsProvider({ children }: PropsWithChildren) {
const {
siteConfig: { customFields },
} = useDocusaurusContext();
const [client, setClient] = useState<PostHog | undefined>();

const baseEventProps = useCallback(
() => ({
sent_at_local: dayjs().format(),
posthog_project_id: customFields.posthogProjectId,
}),
[customFields.posthogProjectId]
);

const capture = useCallback(
(
eventName: string,
eventProperties: Record<string | number, unknown> = {}
) => {
client?.capture(eventName, {
...baseEventProps(),
...eventProperties,
});
},
[client, baseEventProps]
);

useEffect(() => {
const { posthogApiKey, posthogApiHost } = customFields;
const turnOn =
typeof posthogApiKey === "string" &&
posthogApiKey &&
typeof posthogApiHost === "string" &&
posthogApiHost;

setClient((oldClient) => {
if (turnOn) {
const client =
oldClient ??
(posthog.init(posthogApiKey ?? "", {
api_host: posthogApiHost,
capture_pageleave: false,
capture_pageview: false,
}) as PostHog);

// clear localStorage state that might have been set by previous clients
client.clear_opt_in_out_capturing();

// we got consent, start capturing
client.opt_in_capturing({
capture_properties: baseEventProps(),
});
// calling a private function as a fix for bug https://github.com/PostHog/posthog-js/issues/336
client._start_queue_if_opted_in();

return client;
} else {
oldClient?.opt_out_capturing();
return undefined;
}
});
}, [customFields.posthogApiKey, customFields.posthogApiHost, baseEventProps]);

return (
<PostHogProvider client={client}>
<AnalyticsContext.Provider value={capture}>
<TrackRoute />
{children}
</AnalyticsContext.Provider>
</PostHogProvider>
);
}
14 changes: 14 additions & 0 deletions src/analytics/TrackRoute.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { useLocation } from "@docusaurus/router";
import { useContext, useEffect } from "react";
import { AnalyticsContext } from "./AnalyticsContext";

export default function TrackRoute() {
const location = useLocation();
const capture = useContext(AnalyticsContext);

useEffect(() => {
capture("$pageview");
}, [capture, location.pathname, location.search]);

return null;
}
37 changes: 0 additions & 37 deletions src/context/MatomoContext.tsx

This file was deleted.

12 changes: 4 additions & 8 deletions src/theme/Root.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import React from "react";
import { MatomoContext } from "@site/src/context/MatomoContext";
import React, { PropsWithChildren } from "react";
import { AnalyticsProvider } from "../analytics/AnalyticsContext";

export default function Root({ children }) {
return (
<MatomoContext>
{children}
</MatomoContext>
);
export default function Root({ children }: PropsWithChildren) {
return <AnalyticsProvider>{children}</AnalyticsProvider>;
}
Loading

1 comment on commit fda93a4

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for marlowe-doc ready!

✅ Preview
https://marlowe-45n02zcbz-iog.vercel.app
https://docs.marlowe.iohk.io
https://marlowe-doc.vercel.app

Built with commit fda93a4.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.