Merge pull request #120 from timlrx/v2

Fix algolia css and refactor analytics scripts

Author: timlrx

.changeset/modern-planes-end.md

@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Expose option to configure host for analytics scripts

.changeset/poor-buses-remember.md

@@ -0,0 +1,5 @@
+---
+'pliny': patch
+---
+
+Fix algolia css specificity issues with tailwind

.changeset/pre.json

@@ -14,7 +14,9 @@
     "great-chairs-warn",
     "metal-coats-grab",
     "mighty-garlics-appear",
+    "modern-planes-end",
     "neat-tables-occur",
+    "poor-buses-remember",
     "pretty-worms-help",
     "proud-brooms-laugh",
     "tall-rocks-hear",

README.md

@@ -63,16 +63,31 @@ module.exports = {
 
 The `Analytics` component provides an easy interface to switch between different analytics providers. It might not be as feature rich as the official analytics providers but it should be sufficient for simple use cases.
 
+All components default to the hosted service, but can be configured to use a self-hosted or proxied version of the script by providing the `src` / `apiHost` props to the respective analytics component.
+
+Note: As an external script will be loaded, do ensure that `script-src` in the content security policy of `next.config.js` has been configured to whitelist the domain.
+
 ```tsx
 import { Analytics, AnalyticsConfig } from 'pliny/analytics'
 
 const analytics: AnalyticsConfig = {
-  plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
-  simpleAnalytics: false, // true or false
-  umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
-  posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
-  googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
-}
+    // If you want to use an analytics provider you have to add it to the
+    // content security policy in the `next.config.js` file.
+    // supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
+    simpleAnalytics: {},
+    umamiAnalytics: {
+      umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+    },
+    posthogAnalytics: {
+      posthogProjectApiKey: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+    },
+    googleAnalytics: {
+      googleAnalyticsId: '', // e.g. G-XXXXXXX
+    },
+  }
 
 export default function Layout() {
   return (

packages/pliny/CHANGELOG.md

@@ -1,5 +1,12 @@
 # pliny
 
+## 0.1.0-beta.11
+
+### Patch Changes
+
+- e0aa18c: Expose option to configure host for analytics scripts
+- 562605b: Fix algolia css specificity issues with tailwind
+
 ## 0.1.0-beta.10
 
 ### Patch Changes

packages/pliny/package.json

@@ -2,7 +2,7 @@
   "name": "pliny",
   "description": "Main entry point for pliny components",
   "homepage": "https://github.com/timlrx/pliny",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "type": "module",
   "exports": {
     "./*": "./*",

packages/pliny/public/algolia.css

@@ -782,10 +782,8 @@ svg.DocSearch-Hit-Select-Icon {
   --docsearch-logo-color: theme(colors.gray.300);
 }
 
-.light .DocSearch-Input {
-  box-shadow: 0 0 #0000;
-}
-
+.light .DocSearch-Input,
 .dark .DocSearch-Input {
   box-shadow: 0 0 #0000;
+  background: transparent;
 }

packages/pliny/src/analytics/Plausible.tsx

@@ -2,15 +2,29 @@ import Script from 'next/script.js'
 
 export interface PlausibleProps {
   plausibleDataDomain: string
+  dataApi?: string
+  src?: string
 }
 
-export const Plausible = ({ plausibleDataDomain }: PlausibleProps) => {
+/**
+ * Plausible analytics component.
+ * To proxy the requests through your own domain, you can use the dataApi and src attribute.
+ * See [Plausible docs](https://plausible.io/docs/proxy/guides/nextjs#step-2-adjust-your-deployed-script)
+ * for more information.
+ *
+ */
+export const Plausible = ({
+  plausibleDataDomain,
+  dataApi = undefined,
+  src = 'https://plausible.io/js/plausible.js',
+}: PlausibleProps) => {
   return (
     <>
       <Script
         strategy="lazyOnload"
         data-domain={plausibleDataDomain}
-        src="https://plausible.io/js/plausible.js"
+        data-api={dataApi}
+        src={src}
       />
       <Script strategy="lazyOnload" id="plausible-script">
         {`

packages/pliny/src/analytics/Posthog.tsx

@@ -2,17 +2,24 @@ import Script from 'next/script.js'
 
 export interface PosthogProps {
   posthogProjectApiKey: string
+  apiHost?: string
 }
 
-export const Posthog = ({ posthogProjectApiKey }: PosthogProps) => {
+/**
+ * Posthog analytics component.
+ * See [Posthog docs](https://posthog.com/docs/libraries/js#option-1-add-javascript-snippet-to-your-html-badgerecommendedbadge) for more information.
+ *
+ */
+export const Posthog = ({
+  posthogProjectApiKey,
+  apiHost = 'https://app.posthog.com',
+}: PosthogProps) => {
   return (
-    <>
-      <Script strategy="lazyOnload" id="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".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('${posthogProjectApiKey}',{api_host:'https://app.posthog.com'})
-        `}
-      </Script>
-    </>
+    <Script strategy="lazyOnload" id="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".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('${posthogProjectApiKey}',{api_host:'${apiHost}'})
+      `}
+    </Script>
   )
 }

packages/pliny/src/analytics/SimpleAnalytics.tsx

@@ -1,14 +1,20 @@
 import Script from 'next/script.js'
 
-export const SimpleAnalytics = () => {
+export interface SimpleAnalyticsProps {
+  src?: string
+}
+
+export const SimpleAnalytics = ({
+  src = 'https://scripts.simpleanalyticscdn.com/latest.js',
+}: SimpleAnalyticsProps) => {
   return (
     <>
       <Script strategy="lazyOnload" id="sa-script">
         {`
             window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
         `}
       </Script>
-      <Script strategy="lazyOnload" src="https://scripts.simpleanalyticscdn.com/latest.js" />
+      <Script strategy="lazyOnload" src={src} />
     </>
   )
 }

packages/pliny/src/analytics/Umami.tsx

@@ -2,17 +2,19 @@ import Script from 'next/script.js'
 
 export interface UmamiProps {
   umamiWebsiteId: string
+  src?: string
 }
 
-export const Umami = ({ umamiWebsiteId }: UmamiProps) => {
+export const Umami = ({
+  umamiWebsiteId,
+  src = 'https://analytics.umami.is/script.js',
+}: UmamiProps) => {
   return (
-    <>
-      <Script
-        async
-        defer
-        data-website-id={umamiWebsiteId}
-        src="https://umami.example.com/umami.js" // Replace with your umami instance
-      />
-    </>
+    <Script
+      async
+      defer
+      data-website-id={umamiWebsiteId}
+      src={src} // Replace with your umami instance
+    />
   )
 }

packages/pliny/src/analytics/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { GA, GoogleAnalyticsProps } from './GoogleAnalytics'
 import { Plausible, PlausibleProps } from './Plausible'
-import { SimpleAnalytics } from './SimpleAnalytics.js'
+import { SimpleAnalytics, SimpleAnalyticsProps } from './SimpleAnalytics.js'
 import { Umami, UmamiProps } from './Umami'
 import { Posthog, PosthogProps } from './Posthog'
 
@@ -13,12 +13,12 @@ declare global {
   }
 }
 
-export interface AnalyticsConfig
-  extends Partial<GoogleAnalyticsProps>,
-    Partial<PlausibleProps>,
-    Partial<PosthogProps>,
-    Partial<UmamiProps> {
-  simpleAnalytics?: boolean
+export interface AnalyticsConfig {
+  googleAnalytics?: GoogleAnalyticsProps
+  plausibleAnalytics?: PlausibleProps
+  umamiAnalytics?: UmamiProps
+  posthogAnalytics?: PosthogProps
+  simpleAnalytics?: SimpleAnalyticsProps
 }
 
 /**
@@ -38,32 +38,37 @@ export interface AnalyticsProps {
 const isProduction = process.env.NODE_ENV === 'production'
 
 /**
- * Supports plausible, simpleAnalytics, umami or googleAnalytics.
- * If you want to use an analytics provider you have to add it to the
+ * Supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+ * All components default to the hosted service, but can be configured to use a self-hosted
+ * or proxied version of the script by providing the `src` / `apiHost` props.
+ *
+ * Note: If you want to use an analytics provider you have to add it to the
  * content security policy in the `next.config.js` file.
  * @param {AnalyticsProps} { analytics }
  * @return {*}
  */
 export const Analytics = ({ analyticsConfig }: AnalyticsProps) => {
   return (
     <>
-      {isProduction && analyticsConfig.plausibleDataDomain && (
-        <Plausible plausibleDataDomain={analyticsConfig.plausibleDataDomain} />
+      {isProduction && analyticsConfig.plausibleAnalytics && (
+        <Plausible {...analyticsConfig.plausibleAnalytics} />
       )}
-      {isProduction && analyticsConfig.simpleAnalytics && <SimpleAnalytics />}
-      {isProduction && analyticsConfig.posthogProjectApiKey && (
-        <Posthog posthogProjectApiKey={analyticsConfig.posthogProjectApiKey} />
+      {isProduction && analyticsConfig.simpleAnalytics && (
+        <SimpleAnalytics {...analyticsConfig.simpleAnalytics} />
       )}
-      {isProduction && analyticsConfig.umamiWebsiteId && (
-        <Umami umamiWebsiteId={analyticsConfig.umamiWebsiteId} />
+      {isProduction && analyticsConfig.posthogAnalytics && (
+        <Posthog {...analyticsConfig.posthogAnalytics} />
       )}
-      {isProduction && analyticsConfig.googleAnalyticsId && (
-        <GA googleAnalyticsId={analyticsConfig.googleAnalyticsId} />
+      {isProduction && analyticsConfig.umamiAnalytics && (
+        <Umami {...analyticsConfig.umamiAnalytics} />
+      )}
+      {isProduction && analyticsConfig.googleAnalytics && (
+        <GA {...analyticsConfig.googleAnalytics} />
       )}
     </>
   )
 }
 
 export { GA, Plausible, SimpleAnalytics, Umami, Posthog }
 
-export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps }
+export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps, SimpleAnalyticsProps }

packages/pliny/src/comments/Disqus.tsx

@@ -33,7 +33,7 @@ export const Disqus = ({ shortname, slug }: DisqusProps) => {
       //@ts-ignore
       window.DISQUS.reset({ reload: true })
     }
-  }, [])
+  }, [shortname, slug])
 
   useEffect(() => {
     LoadComments()

packages/pliny/src/comments/Utterances.tsx

@@ -37,7 +37,7 @@ export const Utterances = ({ theme, darkTheme, repo, label, issueTerm }: Utteran
       const comments = document.getElementById(COMMENTS_ID)
       if (comments) comments.innerHTML = ''
     }
-  }, [commentsTheme, issueTerm])
+  }, [commentsTheme, issueTerm, label, repo])
 
   // Reload on theme change
   useEffect(() => {

packages/pliny/src/config.ts

@@ -55,12 +55,20 @@ const sampleConfig: PlinyConfig = {
   analytics: {
     // If you want to use an analytics provider you have to add it to the
     // content security policy in the `next.config.js` file.
-    // supports plausible, simpleAnalytics, umami or googleAnalytics
-    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
-    simpleAnalytics: false, // true or false
-    umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
-    posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
-    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+    // supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+    plausibleAnalytics: {
+      plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    },
+    simpleAnalytics: {},
+    umamiAnalytics: {
+      umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+    },
+    posthogAnalytics: {
+      posthogProjectApiKey: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+    },
+    googleAnalytics: {
+      googleAnalyticsId: '', // e.g. G-XXXXXXX
+    },
   },
   newsletter: {
     // supports mailchimp, buttondown, convertkit, klaviyo, revue, emailOctopus