Add Swetrix Analytics component

README.md

@@ -7,6 +7,7 @@ Pliny provides out of the box components to enhance your static site:
   - Plausible Analytics
   - Simple Analytics
   - Umami Analytics
+  - Swetrix
   - Posthog
   - Microsoft Clarity
 - Comments
@@ -91,6 +92,9 @@ const analytics: AnalyticsConfig = {
     clarityAnalytics: {
       ClarityWebsiteId: '', // e.g. abcdefjhij
     },
+    swetrixAnalytics: {
+      swetrixProjectId: '', // e.g. ABCdEfG123hI
+    },
   }
 
 export default function Layout() {
@@ -176,6 +180,21 @@ export default function Layout() {
 }
 ```
 
+#### Swetrix
+
+```tsx
+import { Swetrix } from 'pliny/analytics/Swetrix'
+
+const swetrixProjectId = '' // e.g. ABCdEfG123hI
+
+export default function Layout() {
+  return (
+    ...
+    <Swetrix swetrixProjectId={swetrixProjectId} />
+  )
+}
+```
+
 #### Posthog
 
 ```tsx

packages/pliny/src/analytics/Swetrix.tsx

@@ -0,0 +1,73 @@
+import Script from 'next/script.js'
+
+export interface SwetrixProps {
+  swetrixProjectId: string
+  apiURL?: string
+  src?: string
+}
+
+/**
+ * Swetrix analytics component.
+ * To proxy the requests through your own domain, you can use the apiURL and src attributes.
+ * See the Swetrix [proxying docs](https://docs.swetrix.com/adblockers/guides/nextjs#update-swetrix-tracking-script-configuration)
+ * for more information.
+ *
+ */
+export const Swetrix = ({
+  swetrixProjectId,
+  apiURL = 'https://api.swetrix.com/log',
+  src = 'https://swetrix.org/swetrix.js',
+}: SwetrixProps) => {
+  return (
+    <>
+      <Script strategy="lazyOnload" src={src} />
+      <Script strategy="lazyOnload" id="swetrix-script">
+        {`
+          if (document.readyState !== 'loading') {
+            swetrixInit();
+          } else {
+            document.addEventListener('DOMContentLoaded', swetrixInit);
+          }
+
+          function swetrixInit() {
+            swetrix.init('${swetrixProjectId}', {
+              apiURL: '${apiURL}',
+            })
+            swetrix.trackViews()
+          }
+        `}
+      </Script>
+    </>
+  )
+}
+
+export interface LogEventProps {
+  /** The custom event name. */
+  ev: string
+
+  /** If set to `true`, only 1 event with the same ID will be saved per user session. */
+  unique?: boolean
+
+  /** Event-related metadata object with string values. */
+  meta?: {
+    [key: string]: string
+  }
+}
+
+// https://docs.swetrix.com/swetrix-js-reference#track
+export const logEvent = (options: LogEventProps) => {
+  return window.swetrix?.track?.(options)
+}
+
+export interface LogErrorProps {
+  name: string
+  message: string | null | undefined
+  lineno: number | null | undefined
+  colno: number | null | undefined
+  filename: string | null | undefined
+}
+
+// https://docs.swetrix.com/swetrix-js-reference#trackerror
+export const logError = (payload: LogErrorProps) => {
+  return window.swetrix?.trackError?.(payload)
+}

packages/pliny/src/analytics/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { GA, GoogleAnalyticsProps } from './GoogleAnalytics'
 import { Plausible, PlausibleProps } from './Plausible'
+import { Swetrix, SwetrixProps } from './Swetrix'
 import { SimpleAnalytics, SimpleAnalyticsProps } from './SimpleAnalytics.js'
 import { Umami, UmamiProps } from './Umami'
 import { Posthog, PosthogProps } from './Posthog'
@@ -11,12 +12,17 @@ declare global {
     gtag?: (...args: any[]) => void
     plausible?: (...args: any[]) => void
     sa_event?: (...args: any[]) => void
+    swetrix?: {
+      track: (...args: any[]) => void
+      trackError: (...args: any[]) => void
+    }
   }
 }
 
 export interface AnalyticsConfig {
   googleAnalytics?: GoogleAnalyticsProps
   plausibleAnalytics?: PlausibleProps
+  swetrixAnalytics?: SwetrixProps
   umamiAnalytics?: UmamiProps
   posthogAnalytics?: PosthogProps
   simpleAnalytics?: SimpleAnalyticsProps
@@ -32,6 +38,7 @@ export interface AnalyticsConfig {
  *  posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
  *  googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
  *  ClarityWebsiteId: '', // e.g. abcdefjhij
+ *  swetrixProjectId: '', // e.g. ABCdEfG123hI
  * }
  */
 export interface AnalyticsProps {
@@ -41,7 +48,7 @@ export interface AnalyticsProps {
 const isProduction = process.env.NODE_ENV === 'production'
 
 /**
- * Supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+ * Supports Plausible, Simple Analytics, Umami, Posthog, Swetrix 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.
  *
@@ -71,10 +78,21 @@ export const Analytics = ({ analyticsConfig }: AnalyticsProps) => {
       {isProduction && analyticsConfig.clarityAnalytics && (
         <Clarity {...analyticsConfig.clarityAnalytics} />
       )}
+      {isProduction && analyticsConfig.swetrixAnalytics && (
+        <Swetrix {...analyticsConfig.swetrixAnalytics} />
+      )}
     </>
   )
 }
 
-export { GA, Plausible, SimpleAnalytics, Umami, Posthog, Clarity }
+export { GA, Plausible, SimpleAnalytics, Umami, Posthog, Clarity, Swetrix }
 
-export type { GoogleAnalyticsProps, PlausibleProps, UmamiProps, PosthogProps, SimpleAnalyticsProps, ClarityProps }
+export type {
+  GoogleAnalyticsProps,
+  PlausibleProps,
+  UmamiProps,
+  PosthogProps,
+  SimpleAnalyticsProps,
+  ClarityProps,
+  SwetrixProps,
+}

packages/pliny/src/config.ts

@@ -59,6 +59,9 @@ const sampleConfig: PlinyConfig = {
     plausibleAnalytics: {
       plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
     },
+    swetrixAnalytics: {
+      swetrixProjectId: '', // e.g. ABCdEfG123hI
+    },
     simpleAnalytics: {},
     umamiAnalytics: {
       umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000