ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add more integration pages

Browse Source
This commit is contained in:
Usman Baig
2026-02-07 00:05:52 +01:00
parent c9a9479598
commit 738c8e24d6
23 changed files with 1298 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/integrations/angular/page.tsx Normal file
View File

@@ -0,0 +1,63 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function AngularIntegrationPage() {
const integration = getIntegration('angular')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Angular application by placing the script in your <code>index.html</code> or by using the Angular CLI&apos;s built-in scripts array.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: index.html (Recommended)</h3>
<p>
Add the Pulse script tag directly to the <code>&lt;head&gt;</code> section of your <code>src/index.html</code>.
</p>
<CodeBlock filename="src/index.html">
{`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Angular App</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Pulse Analytics -->
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
</head>
<body>
<app-root></app-root>
</body>
</html>`}
</CodeBlock>
<h3>Method 2: angular.json Scripts Array</h3>
<p>
Alternatively, reference an external script in your <code>angular.json</code> build configuration. However, for analytics scripts that need <code>defer</code> and <code>data-*</code> attributes, Method 1 is simpler and recommended.
</p>
<h3>Configuration Options</h3>
<ul>
<li>
<strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
</li>
<li>
<strong>defer</strong>: Ensures the script loads without blocking the page.
</li>
</ul>
</IntegrationGuide>
)
}

60
app/integrations/astro/page.tsx Normal file
View File

@@ -0,0 +1,60 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function AstroIntegrationPage() {
const integration = getIntegration('astro')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Astro makes it easy to add third-party scripts. Drop the Pulse snippet into your base layout and you&apos;re done.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Base Layout (Recommended)</h3>
<p>
Add the script to the <code>&lt;head&gt;</code> of your base layout file so it loads on every page.
</p>
<CodeBlock filename="src/layouts/BaseLayout.astro">
{`---
// Base layout used by all pages
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Pulse Analytics -->
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
<title>My Astro Site</title>
</head>
<body>
<slot />
</body>
</html>`}
</CodeBlock>
<h3>Using Astro&apos;s Script Integration</h3>
<p>
You can also configure the script in your <code>astro.config.mjs</code> using the <code>injectScript</code> API of an Astro integration, but the layout approach above is simpler for most projects.
</p>
<h3>Astro + View Transitions</h3>
<p>
If you use Astro&apos;s View Transitions, the Pulse script persists across navigations automatically since it is loaded in the <code>&lt;head&gt;</code> with <code>defer</code>.
</p>
</IntegrationGuide>
)
}

65
app/integrations/gatsby/page.tsx Normal file
View File

@@ -0,0 +1,65 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function GatsbyIntegrationPage() {
const integration = getIntegration('gatsby')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Gatsby site using the <code>gatsby-ssr</code> API or the Gatsby Head API.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: gatsby-ssr.js (Recommended)</h3>
<p>
Use the <code>onRenderBody</code> API to inject the script into every page&apos;s <code>&lt;head&gt;</code>.
</p>
<CodeBlock filename="gatsby-ssr.js">
{`import React from "react"
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
key="pulse-analytics"
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
/>,
])
}`}
</CodeBlock>
<h3>Method 2: Gatsby Head API (Gatsby 4.19+)</h3>
<p>
If you prefer the newer Head API, export a <code>Head</code> component from your layout or page.
</p>
<CodeBlock filename="src/pages/index.tsx">
{`export function Head() {
return (
<>
<title>My Gatsby Site</title>
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
/>
</>
)
}`}
</CodeBlock>
<p>
The <code>gatsby-ssr.js</code> approach is better for global scripts because it automatically applies to every page without needing to add it to each route individually.
</p>
</IntegrationGuide>
)
}

55
app/integrations/ghost/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function GhostIntegrationPage() {
const integration = getIntegration('ghost')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Ghost publication using the built-in Code Injection feature.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Code Injection (Recommended)</h3>
<ol>
<li>Log in to your Ghost admin panel.</li>
<li>Go to <strong>Settings &gt; Code injection</strong>.</li>
<li>In the <strong>Site Header</strong> field, paste the following snippet:</li>
</ol>
<CodeBlock filename="Settings → Code injection → Site Header">
{`<script
defer
data-domain="your-blog.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</CodeBlock>
<ol start={4}>
<li>Click <strong>Save</strong>.</li>
</ol>
<h3>Theme-Level Integration (Alternative)</h3>
<p>
If you prefer, you can also add the script directly to your Ghost theme&apos;s <code>default.hbs</code> file, just before the closing <code>&lt;/head&gt;</code> tag. This approach requires re-uploading the theme whenever you make changes.
</p>
<h3>Important Notes</h3>
<ul>
<li>
<strong>data-domain</strong>: Use your publication&apos;s domain (e.g., <code>blog.example.com</code>).
</li>
<li>
Code Injection is available on all Ghost plans, including the free self-hosted version.
</li>
</ul>
</IntegrationGuide>
)
}

65
app/integrations/hugo/page.tsx Normal file
View File

@@ -0,0 +1,65 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function HugoIntegrationPage() {
const integration = getIntegration('hugo')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Hugo site by placing the script in a partial or directly in your base template.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: Partial (Recommended)</h3>
<p>
Create an analytics partial and include it in your base template&apos;s <code>&lt;head&gt;</code>.
</p>
<CodeBlock filename="layouts/partials/analytics.html">
{`{{ if not .Site.IsServer }}
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
{{ end }}`}
</CodeBlock>
<p>
Then include the partial in your <code>baseof.html</code>:
</p>
<CodeBlock filename="layouts/_default/baseof.html">
{`<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ .Title }}</title>
{{ partial "analytics.html" . }}
</head>
<body>
{{ block "main" . }}{{ end }}
</body>
</html>`}
</CodeBlock>
<h3>Method 2: Direct Insertion</h3>
<p>
If you prefer, add the script tag directly to the <code>&lt;head&gt;</code> of your <code>baseof.html</code> without creating a partial.
</p>
<p>
The <code>if not .Site.IsServer</code> guard ensures the script is excluded during local development with <code>hugo server</code>.
</p>
</IntegrationGuide>
)
}

116
app/integrations/nextjs/page.tsx
View File

@@ -1,59 +1,28 @@
'use client'
import Link from 'next/link'
import { ArrowLeftIcon } from '@ciphera-net/ui'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function NextJsIntegrationPage() {
const integration = getIntegration('nextjs')
if (!integration) return notFound()
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
<div
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
/>
</div>
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
</p>
<div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
<Link
href="/integrations"
className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4 mr-2" />
Back to Integrations
</Link>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<div className="flex items-center gap-4 mb-8">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
<svg viewBox="0 0 128 128" className="w-10 h-10 dark:invert">
<path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
Next.js Integration
</h1>
</div>
<h3>Using App Router (Recommended)</h3>
<p>
Add the script to your root layout file (usually <code>app/layout.tsx</code> or <code>app/layout.js</code>).
</p>
<div className="prose prose-neutral dark:prose-invert max-w-none">
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Using App Router (Recommended)</h3>
<p>
Add the script to your root layout file (usually <code>app/layout.tsx</code> or <code>app/layout.js</code>).
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">app/layout.tsx</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
<CodeBlock filename="app/layout.tsx">
{`import Script from 'next/script'
export default function RootLayout({
@@ -75,21 +44,14 @@ export default function RootLayout({
</html>
)
}`}
</pre>
</div>
</div>
</CodeBlock>
<h3>Using Pages Router</h3>
<p>
If you are using the older Pages Router, add the script to your custom <code>_app.tsx</code> or <code>_document.tsx</code>.
</p>
<h3>Using Pages Router</h3>
<p>
If you are using the older Pages Router, add the script to your custom <code>_app.tsx</code> or <code>_document.tsx</code>.
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">pages/_app.tsx</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
<CodeBlock filename="pages/_app.tsx">
{`import Script from 'next/script'
import type { AppProps } from 'next/app'
@@ -106,24 +68,20 @@ export default function App({ Component, pageProps }: AppProps) {
</>
)
}`}
</pre>
</div>
</div>
</CodeBlock>
<h3>Configuration Options</h3>
<ul>
<li>
<strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
</li>
<li>
<strong>src</strong>: The URL of our tracking script: <code>https://pulse.ciphera.net/script.js</code>
</li>
<li>
<strong>strategy</strong>: We recommend <code>afterInteractive</code> to ensure it loads quickly without blocking hydration.
</li>
</ul>
</div>
</div>
</div>
<h3>Configuration Options</h3>
<ul>
<li>
<strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
</li>
<li>
<strong>src</strong>: The URL of our tracking script: <code>https://pulse.ciphera.net/script.js</code>
</li>
<li>
<strong>strategy</strong>: We recommend <code>afterInteractive</code> to ensure it loads quickly without blocking hydration.
</li>
</ul>
</IntegrationGuide>
)
}

71
app/integrations/nuxt/page.tsx Normal file
View File

@@ -0,0 +1,71 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function NuxtIntegrationPage() {
const integration = getIntegration('nuxt')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Configure Pulse in your Nuxt application by adding the script to your <code>nuxt.config</code> file.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Nuxt 3 (Recommended)</h3>
<p>
Add the script to the <code>app.head</code> section of your <code>nuxt.config.ts</code>.
</p>
<CodeBlock filename="nuxt.config.ts">
{`export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://pulse.ciphera.net/script.js',
defer: true,
'data-domain': 'your-site.com'
}
]
}
}
})`}
</CodeBlock>
<h3>Nuxt 2</h3>
<p>
For Nuxt 2 projects, add the script to the <code>head</code> object in <code>nuxt.config.js</code>.
</p>
<CodeBlock filename="nuxt.config.js">
{`export default {
head: {
script: [
{
src: 'https://pulse.ciphera.net/script.js',
defer: true,
'data-domain': 'your-site.com'
}
]
}
}`}
</CodeBlock>
<h3>Configuration Options</h3>
<ul>
<li>
<strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
</li>
<li>
<strong>defer</strong>: Ensures the script loads without blocking rendering.
</li>
</ul>
</IntegrationGuide>
)
}

166
app/integrations/page.tsx
View File

@@ -3,60 +3,18 @@
import Link from 'next/link'
import { motion } from 'framer-motion'
import { ArrowRightIcon } from '@ciphera-net/ui'
const integrations = [
{
id: 'nextjs',
name: 'Next.js',
description: 'Add privacy-friendly analytics to your Next.js application using next/script.',
icon: (
<svg viewBox="0 0 128 128" className="w-8 h-8 dark:invert">
<path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
</svg>
),
},
{
id: 'react',
name: 'React',
description: 'Integrate Pulse with any React SPA (Create React App, Vite, etc).',
icon: (
<svg viewBox="0 0 128 128" className="w-8 h-8 text-[#61DAFB] fill-current">
<path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
<circle cx="64" cy="64" r="10.6" />
</svg>
),
},
{
id: 'vue',
name: 'Vue.js',
description: 'Simple setup for Vue 2 and Vue 3 applications.',
icon: (
<svg viewBox="0 0 128 128" className="w-8 h-8 text-[#4FC08D] fill-current">
<path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
<path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
</svg>
),
},
{
id: 'wordpress',
name: 'WordPress',
description: 'Add the tracking script to your WordPress header or use a plugin.',
icon: (
<svg viewBox="0 0 128 128" className="w-8 h-8 text-[#21759B] fill-current">
<path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
</svg>
),
},
]
import { getGroupedIntegrations } from '@/lib/integrations'
export default function IntegrationsPage() {
const groups = getGroupedIntegrations()
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
<div
<div
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
/>
@@ -77,61 +35,75 @@ export default function IntegrationsPage() {
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{integrations.map((integration, i) => (
<motion.div
key={integration.id}
initial={{ opacity: 0, y: 20 }}
{groups.map((group) => (
<div key={group.category} className="mb-12">
<motion.h2
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: i * 0.1 }}
transition={{ duration: 0.4 }}
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
>
<Link
href={`/integrations/${integration.id}`}
className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
>
<div className="flex items-start justify-between mb-6">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
{integration.icon}
</div>
<ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
</div>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
{integration.name}
</h3>
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
{integration.description}
</p>
<span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
View Guide <span aria-hidden="true">&rarr;</span>
</span>
</Link>
</motion.div>
))}
{/* * Request Integration Card */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: integrations.length * 0.1 }}
className="p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
{group.label}
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{group.items.map((integration, i) => (
<motion.div
key={integration.id}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: i * 0.1 }}
>
<Link
href={`/integrations/${integration.id}`}
className="group relative p-8 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
>
<div className="flex items-start justify-between mb-6">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
{integration.icon}
</div>
<ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
</div>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
{integration.name}
</h3>
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
{integration.description}
</p>
<span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
View Guide <span aria-hidden="true">&rarr;</span>
</span>
</Link>
</motion.div>
))}
</div>
</div>
))}
{/* * Request Integration Card */}
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5 }}
className="max-w-md mx-auto p-8 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
Missing something?
</h3>
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
Let us know which integration you&apos;d like to see next.
</p>
<a
href="mailto:support@ciphera.net"
className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
>
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
Missing something?
</h3>
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
Let us know which integration you'd like to see next.
</p>
<a
href="mailto:support@ciphera.net"
className="text-sm font-medium text-brand-orange hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
>
Request Integration
</a>
</motion.div>
</div>
Request Integration
</a>
</motion.div>
</div>
</div>
)

103
app/integrations/react/page.tsx
View File

@@ -1,94 +1,55 @@
'use client'
import Link from 'next/link'
import { ArrowLeftIcon } from '@ciphera-net/ui'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function ReactIntegrationPage() {
const integration = getIntegration('react')
if (!integration) return notFound()
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
<div
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
/>
</div>
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
</p>
<div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
<Link
href="/integrations"
className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4 mr-2" />
Back to Integrations
</Link>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<div className="flex items-center gap-4 mb-8">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
<path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
<circle cx="64" cy="64" r="10.6" />
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
React Integration
</h1>
</div>
<h3>Method 1: index.html (Recommended)</h3>
<p>
The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
</p>
<div className="prose prose-neutral dark:prose-invert max-w-none">
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: index.html (Recommended)</h3>
<p>
The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">public/index.html</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
<CodeBlock filename="public/index.html">
{`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Pulse Analytics -->
<script
defer
data-domain="your-site.com"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>`}
</pre>
</div>
</div>
</CodeBlock>
<h3>Method 2: Programmatic Injection</h3>
<p>
If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
</p>
<h3>Method 2: Programmatic Injection</h3>
<p>
If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">src/App.tsx</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
<CodeBlock filename="src/App.tsx">
{`import { useEffect } from 'react'
function App() {
@@ -109,11 +70,7 @@ function App() {
</div>
)
}`}
</pre>
</div>
</div>
</div>
</div>
</div>
</CodeBlock>
</IntegrationGuide>
)
}

71
app/integrations/remix/page.tsx Normal file
View File

@@ -0,0 +1,71 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function RemixIntegrationPage() {
const integration = getIntegration('remix')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Remix application by placing the script tag in your root route&apos;s <code>&lt;head&gt;</code>.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Root Route (Recommended)</h3>
<p>
In Remix, the <code>app/root.tsx</code> file controls the HTML shell. Add the Pulse script inside the <code>&lt;head&gt;</code> section.
</p>
<CodeBlock filename="app/root.tsx">
{`import {
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react"
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
{/* Pulse Analytics */}
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
/>
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}`}
</CodeBlock>
<h3>Configuration Options</h3>
<ul>
<li>
<strong>data-domain</strong>: The domain name you added to your Pulse dashboard (e.g., <code>example.com</code>).
</li>
<li>
<strong>defer</strong>: Ensures the script loads without blocking the page.
</li>
</ul>
</IntegrationGuide>
)
}

53
app/integrations/shopify/page.tsx Normal file
View File

@@ -0,0 +1,53 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function ShopifyIntegrationPage() {
const integration = getIntegration('shopify')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add privacy-first analytics to your Shopify store in minutes using the theme editor &mdash; no app installation required.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: Theme Settings (Easiest)</h3>
<ol>
<li>In your Shopify admin, go to <strong>Online Store &gt; Themes</strong>.</li>
<li>Click <strong>Actions &gt; Edit code</strong> on your active theme.</li>
<li>Open <code>layout/theme.liquid</code>.</li>
<li>Paste the following snippet just before the closing <code>&lt;/head&gt;</code> tag:</li>
</ol>
<CodeBlock filename="layout/theme.liquid">
{`<!-- Pulse Analytics -->
<script
defer
data-domain="your-store.myshopify.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</CodeBlock>
<h3>Method 2: Custom Pixels (Shopify Plus)</h3>
<p>
If you are on Shopify Plus, you can also use <strong>Customer Events &gt; Custom Pixels</strong> to add the script. Go to <strong>Settings &gt; Customer events</strong> and create a new custom pixel.
</p>
<h3>Important Notes</h3>
<ul>
<li>
<strong>data-domain</strong>: Use your custom domain (e.g., <code>shop.example.com</code>) if you have one, or your <code>.myshopify.com</code> domain.
</li>
<li>
Pulse does not use cookies and is fully GDPR-compliant &mdash; no cookie banner changes needed.
</li>
</ul>
</IntegrationGuide>
)
}

52
app/integrations/squarespace/page.tsx Normal file
View File

@@ -0,0 +1,52 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function SquarespaceIntegrationPage() {
const integration = getIntegration('squarespace')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Squarespace site using the built-in Code Injection feature &mdash; no plugins needed.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Code Injection (Recommended)</h3>
<ol>
<li>In your Squarespace dashboard, go to <strong>Settings &gt; Developer Tools &gt; Code Injection</strong>.</li>
<li>In the <strong>Header</strong> field, paste the following snippet:</li>
</ol>
<CodeBlock filename="Settings → Code Injection → Header">
{`<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</CodeBlock>
<ol start={3}>
<li>Click <strong>Save</strong>.</li>
</ol>
<h3>Important Notes</h3>
<ul>
<li>
Code Injection is available on <strong>Squarespace Business</strong> and <strong>Commerce</strong> plans.
</li>
<li>
<strong>data-domain</strong>: Use your custom domain (e.g., <code>example.com</code>) rather than the <code>.squarespace.com</code> subdomain.
</li>
<li>
Pulse is cookie-free, so you do not need to update your Squarespace cookie banner settings.
</li>
</ul>
</IntegrationGuide>
)
}

70
app/integrations/svelte/page.tsx Normal file
View File

@@ -0,0 +1,70 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function SvelteIntegrationPage() {
const integration = getIntegration('svelte')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Integrating Pulse with Svelte or SvelteKit takes less than a minute. Just add the script tag to your HTML entry point.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Svelte (Vite)</h3>
<p>
For a standard Svelte project scaffolded with Vite, add the script to the <code>&lt;head&gt;</code> of your <code>index.html</code>.
</p>
<CodeBlock filename="index.html">
{`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Pulse Analytics -->
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
<title>My Svelte App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>`}
</CodeBlock>
<h3>SvelteKit</h3>
<p>
In SvelteKit, add the script to your root layout&apos;s <code>&lt;svelte:head&gt;</code> block so it loads on every page.
</p>
<CodeBlock filename="src/routes/+layout.svelte">
{`<svelte:head>
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
</svelte:head>
<slot />`}
</CodeBlock>
<p>
Alternatively, you can add the script to <code>src/app.html</code> directly in the <code>&lt;head&gt;</code> section.
</p>
</IntegrationGuide>
)
}

114
app/integrations/vue/page.tsx
View File

@@ -1,73 +1,41 @@
'use client'
import Link from 'next/link'
import { ArrowLeftIcon } from '@ciphera-net/ui'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function VueIntegrationPage() {
const integration = getIntegration('vue')
if (!integration) return notFound()
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
<div
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
/>
</div>
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Integrating Pulse with Vue.js is straightforward. Add the script to your <code>index.html</code> file.
</p>
<div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
<Link
href="/integrations"
className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4 mr-2" />
Back to Integrations
</Link>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<div className="flex items-center gap-4 mb-8">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
<path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
<path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
Vue.js Integration
</h1>
</div>
<h3>index.html (Vue CLI &amp; Vite)</h3>
<p>
Add the script tag to the <code>&lt;head&gt;</code> section of your <code>index.html</code> file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite.
</p>
<div className="prose prose-neutral dark:prose-invert max-w-none">
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: index.html (Recommended)</h3>
<p>
Add the script tag to the <code>&lt;head&gt;</code> section of your <code>index.html</code> file. This works for both Vue 2 and Vue 3 projects created with Vue CLI or Vite.
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">index.html</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
<CodeBlock filename="index.html">
{`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Pulse Analytics -->
<script
defer
data-domain="your-site.com"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>
<title>My Vue App</title>
</head>
<body>
@@ -75,39 +43,11 @@ export default function VueIntegrationPage() {
<script type="module" src="/src/main.js"></script>
</body>
</html>`}
</pre>
</div>
</div>
</CodeBlock>
<h3>Method 2: Nuxt.js</h3>
<p>
For Nuxt.js applications, you should add the script to your <code>nuxt.config.js</code> or <code>nuxt.config.ts</code> file.
</p>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">nuxt.config.ts</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
{`export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://pulse.ciphera.net/script.js',
defer: true,
'data-domain': 'your-site.com'
}
]
}
}
})`}
</pre>
</div>
</div>
</div>
</div>
</div>
<p>
Looking for Nuxt.js? Check the dedicated <a href="/integrations/nuxt" className="text-brand-orange hover:underline">Nuxt integration guide</a>.
</p>
</IntegrationGuide>
)
}

55
app/integrations/webflow/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function WebflowIntegrationPage() {
const integration = getIntegration('webflow')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Webflow site by pasting a single snippet into your project&apos;s custom code settings.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Project-Level Custom Code (Recommended)</h3>
<ol>
<li>Open your Webflow project and go to <strong>Project Settings</strong>.</li>
<li>Navigate to the <strong>Custom Code</strong> tab.</li>
<li>In the <strong>Head Code</strong> section, paste the following snippet:</li>
</ol>
<CodeBlock filename="Project Settings → Head Code">
{`<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</CodeBlock>
<ol start={4}>
<li>Click <strong>Save Changes</strong> and publish your site.</li>
</ol>
<h3>Page-Level Custom Code</h3>
<p>
If you only want to track specific pages, you can add the script to individual page settings instead of the project-level settings. Go to the page&apos;s settings panel and paste the snippet in the <strong>Head Code</strong> section.
</p>
<h3>Important Notes</h3>
<ul>
<li>
Custom code requires a <strong>Webflow paid site plan</strong> (Basic or higher).
</li>
<li>
The script will not appear in the Webflow Designer preview &mdash; publish the site and view the live version to verify.
</li>
</ul>
</IntegrationGuide>
)
}

54
app/integrations/wix/page.tsx Normal file
View File

@@ -0,0 +1,54 @@
'use client'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function WixIntegrationPage() {
const integration = getIntegration('wix')
if (!integration) return notFound()
return (
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
Add Pulse to your Wix site using the Custom Code feature in your site settings.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Custom Code (Recommended)</h3>
<ol>
<li>In your Wix dashboard, go to <strong>Settings &gt; Custom Code</strong> (under &ldquo;Advanced&rdquo;).</li>
<li>Click <strong>+ Add Custom Code</strong>.</li>
<li>Paste the following snippet:</li>
</ol>
<CodeBlock filename="Custom Code Snippet">
{`<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</CodeBlock>
<ol start={4}>
<li>Set the code to load in the <strong>Head</strong> of <strong>All pages</strong>.</li>
<li>Click <strong>Apply</strong>.</li>
</ol>
<h3>Important Notes</h3>
<ul>
<li>
Custom Code requires a <strong>Wix Premium plan</strong> with a connected domain.
</li>
<li>
<strong>data-domain</strong>: Use your connected custom domain, not the <code>.wixsite.com</code> subdomain.
</li>
<li>
Pulse is cookie-free and GDPR-compliant &mdash; no consent banner changes are needed.
</li>
</ul>
</IntegrationGuide>
)
}

101
app/integrations/wordpress/page.tsx
View File

@@ -1,81 +1,46 @@
'use client'
import Link from 'next/link'
import { ArrowLeftIcon } from '@ciphera-net/ui'
import { IntegrationGuide } from '@/components/IntegrationGuide'
import { CodeBlock } from '@/components/CodeBlock'
import { getIntegration } from '@/lib/integrations'
import { notFound } from 'next/navigation'
export default function WordPressIntegrationPage() {
const integration = getIntegration('wordpress')
if (!integration) return notFound()
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
{/* * --- ATMOSPHERE (Background) --- */}
<div className="absolute inset-0 -z-10 pointer-events-none">
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-brand-orange/10 rounded-full blur-[128px] opacity-60" />
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
<div
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
/>
</div>
<IntegrationGuide integration={integration}>
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
</p>
<div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-12 pb-10 z-10">
<Link
href="/integrations"
className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
>
<ArrowLeftIcon className="w-4 h-4 mr-2" />
Back to Integrations
</Link>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<div className="flex items-center gap-4 mb-8">
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
<path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
WordPress Integration
</h1>
</div>
<h3>Method 1: Using a Plugin (Easiest)</h3>
<ol>
<li>Install a plugin like &ldquo;Insert Headers and Footers&rdquo; (WPCode).</li>
<li>Go to the plugin settings and find the &ldquo;Scripts in Header&rdquo; section.</li>
<li>Paste the following code snippet:</li>
</ol>
<div className="prose prose-neutral dark:prose-invert max-w-none">
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
</p>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<h3>Method 1: Using a Plugin (Easiest)</h3>
<ol>
<li>Install a plugin like "Insert Headers and Footers" (WPCode).</li>
<li>Go to the plugin settings and find the "Scripts in Header" section.</li>
<li>Paste the following code snippet:</li>
</ol>
<div className="bg-[#1e1e1e] rounded-xl overflow-hidden border border-neutral-800 my-6">
<div className="flex items-center px-4 py-2 bg-[#252526] border-b border-neutral-800">
<span className="text-xs text-neutral-400 font-mono">Header Script</span>
</div>
<div className="p-4 overflow-x-auto">
<pre className="text-sm font-mono text-neutral-300">
{`<script
defer
data-domain="your-site.com"
<CodeBlock filename="Header Script">
{`<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</pre>
</div>
</div>
</CodeBlock>
<h3>Method 2: Edit Theme Files (Advanced)</h3>
<p>
If you are comfortable editing your theme files, you can add the script directly to your <code>header.php</code> file.
</p>
<ol>
<li>Go to Appearance &gt; Theme File Editor.</li>
<li>Select <code>header.php</code> from the right sidebar.</li>
<li>Paste the script tag just before the closing <code>&lt;/head&gt;</code> tag.</li>
</ol>
</div>
</div>
</div>
<h3>Method 2: Edit Theme Files (Advanced)</h3>
<p>
If you are comfortable editing your theme files, you can add the script directly to your <code>header.php</code> file.
</p>
<ol>
<li>Go to Appearance &gt; Theme File Editor.</li>
<li>Select <code>header.php</code> from the right sidebar.</li>
<li>Paste the script tag just before the closing <code>&lt;/head&gt;</code> tag.</li>
</ol>
</IntegrationGuide>
)
}