feat: PlausibleHQ support (#233)

Co-authored-by: Moulik Aggarwal <[email protected]>
Co-authored-by: Elliot Hesp <[email protected]>

Author: 3 people

api/src/utils/config.ts

@@ -81,6 +81,7 @@ export const defaultConfig: OutputConfig = {
   experimentalCodehike: false,
   experimentalMath: false,
   automaticallyInferNextPrevious: true,
+  plausibleAnalytics: false,
 };
 
 // Merges any user config with default values.
@@ -121,6 +122,7 @@ export function mergeConfig(json: Record<string, unknown>): OutputConfig {
       'automaticallyInferNextPrevious',
       defaultConfig.automaticallyInferNextPrevious,
     ),
+    plausibleAnalytics: getBoolean(json, 'plausibleAnalytics', defaultConfig.plausibleAnalytics),
   };
 }
 

docs/configuration.mdx

@@ -216,3 +216,11 @@ Note; If using the `<Image />` component, the `zoom` property provided will over
 | Key          | Type      | Default |
 | ------------ | --------- | ------- |
 | `zoomImages` | `boolean` | `false` |
+
+### `plausibleAnalytics`
+
+If enabled, Plausible Analytics will be added to all of your documentation pages only if a custom domain has been enabled for this project.
+
+| Key                  | Type      | Default |
+| -------------------- | --------- | ------- |
+| `plausibleAnalytics` | `boolean` | `false` |

packages/server/src/types.ts

@@ -40,6 +40,8 @@ export interface ConfigWithoutLocales {
   experimentalMath: boolean;
   // automatically infer next/previous
   automaticallyInferNextPrevious: boolean;
+  // Adds Plausible Analytics to your documentation pages.
+  plausibleAnalytics: string;
 }
 
 export interface ConfigWithLocales {
@@ -85,6 +87,8 @@ export interface ConfigWithLocales {
   experimentalMath: boolean;
   // automatically infer next/previous
   automaticallyInferNextPrevious: boolean;
+  // Adds Plausible Analytics to your documentation pages.
+  plausibleAnalytics: string;
 }
 export type InputConfig = ConfigWithoutLocales | ConfigWithLocales;
 
@@ -137,6 +141,8 @@ export interface OutputConfig {
   experimentalMath: boolean;
   // automatically infer next/previous
   automaticallyInferNextPrevious: boolean;
+  // Adds Plausible Analytics to your documentation pages.
+  plausibleAnalytics: boolean;
 }
 
 export const defaultConfig: OutputConfig = {
@@ -158,6 +164,7 @@ export const defaultConfig: OutputConfig = {
   experimentalCodehike: false,
   experimentalMath: false,
   automaticallyInferNextPrevious: true,
+  plausibleAnalytics: '',
 };
 
 export type FetchBundleInput = {

website/app/components/Head.tsx

@@ -1,9 +1,12 @@
 import { Helmet } from 'react-helmet';
 import { DocumentationLoader } from '~/loaders/documentation.server';
 import codeHikeStyles from '@code-hike/mdx/dist/index.css';
+import domains from '../../../domains.json';
 
 export const Head = ({ data }: { data: DocumentationLoader }) => {
   const favicon = getFavicon({ data });
+  const domain =
+    domains.find(([, repository]) => repository === `${data.owner}/${data.repo}`)?.[0] || null;
   data.repo;
   return (
     <Helmet>
@@ -35,6 +38,9 @@ export const Head = ({ data }: { data: DocumentationLoader }) => {
           `}
         </script>
       )}
+      {data.config.plausibleAnalytics && domain && (
+        <script defer data-domain={domain} src="https://plausible.io/js/plausible.js"></script>
+      )}
       <link rel="icon" href={favicon} />
       {data.config.experimentalMath && (
         <link