feat: integration for umami analytics

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 12, 2024 · f9a418d · f9a418d
1 parent 5e7972d
commit f9a418d
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 10 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -5,6 +5,11 @@ export default defineAppConfig({
       description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
       ogImage: '/hero.png',
       ogImageComponent: 'ShadcnDocs',
+      umami: {
+        enable: true,
+        src: 'https://cloud.umami.is/script.js',
+        dataWebsiteId: 'd793fbf3-461e-4e26-9ec9-4e9141df96ee',
+      },
     },
     theme: {
       customizable: true,

diff --git a/composables/useConfig.ts b/composables/useConfig.ts
@@ -6,6 +6,11 @@ const defaultConfig: DefaultConfig = {
     description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
     ogImage: '/hero.png',
     ogImageComponent: 'ShadcnDocs',
+    umami: {
+      enable: false,
+      src: 'https://cloud.umami.is/script.js',
+      dataWebsiteId: '',
+    },
   },
   theme: {
     customizable: true,

diff --git a/content/3.api/1.configuration/1.shadcn-docs.md b/content/3.api/1.configuration/1.shadcn-docs.md
@@ -64,6 +64,21 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
   ::field{name="ogImageComponent" type="string" default-value="ShadcnDocs"}
   The component to use for the dynamic ogImage. Possible values: `ShadcnDocs`, `Nuxt`, `NuxtSeo` or your custom component name.
   ::
+  ::field{name="umami" type="object"}
+    ::collapsible{title="Details"}
+      ::field-group
+        ::field{name="enable" type="boolean" default-value="false"}
+        Whether to turn on the umami integration.
+        ::
+        ::field{name="src" type="string" default-value="https://cloud.umami.is/script.js"}
+        The link src in the tracking code.
+        ::
+        ::field{name="dataWebsiteId" type="string"}
+        The _Website ID_ from umami dashboard.
+        ::
+      ::
+    ::
+  ::
 ::
 
 ## `theme`

diff --git a/content/3.api/1.configuration/5.edit-link.md → content/3.api/1.configuration/4.edit-link.md b/content/3.api/1.configuration/5.edit-link.md → content/3.api/1.configuration/4.edit-link.md
diff --git a/...ent/3.api/1.configuration/4.carbon-ads.md → ...ent/3.api/1.configuration/5.carbon-ads.md b/...ent/3.api/1.configuration/4.carbon-ads.md → ...ent/3.api/1.configuration/5.carbon-ads.md
diff --git a/content/3.api/1.configuration/6.umami.md b/content/3.api/1.configuration/6.umami.md
@@ -0,0 +1,41 @@
+---
+title: Umami
+icon: lucide:cloud
+description: Integration for Umami analytics.
+---
+
+**shadcn-docs-nuxt** has built-in support for [Umami Analytics](https://umami.is/). Add your Umami `data-website-id` to `app.config.ts`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    site: {
+      umami: {
+        enable: true,
+        src: 'https://cloud.umami.is/script.js',
+        dataWebsiteId: 'your-data-website-id',
+      },
+    },
+  },
+});
+```
+
+These values are used to add the Umami script to `<head>`{lang="html"} as shown below.
+
+```html
+<script defer src="https://cloud.umami.is/script.js" data-website-id="your-data-website-id"></script>
+```
+
+## Parameters
+
+::field-group
+  ::field{name="enable" type="boolean" default-value="false"}
+  Whether to turn on the umami integration.
+  ::
+  ::field{name="src" type="string" default-value="https://cloud.umami.is/script.js"}
+  The link src in the tracking code.
+  ::
+  ::field{name="dataWebsiteId" type="string"}
+  The _Website ID_ from umami dashboard.
+  ::
+::
diff --git a/plugins/analytics.client.ts b/plugins/analytics.client.ts
diff --git a/plugins/umami.client.ts b/plugins/umami.client.ts
@@ -0,0 +1,15 @@
+export default defineNuxtPlugin(() => {
+  const { enable, dataWebsiteId, src } = useConfig().value.site.umami;
+
+  if (enable && !import.meta.dev) {
+    useHead({
+      script: [
+        {
+          src,
+          'defer': true,
+          'data-website-id': dataWebsiteId,
+        },
+      ],
+    });
+  }
+});
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -4,6 +4,11 @@ interface DefaultConfig {
     description: string;
     ogImage: string;
     ogImageComponent: string;
+    umami: {
+      enable: boolean;
+      src: string;
+      dataWebsiteId: string;
+    };
   };
   theme: {
     customizable: boolean;