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

feat: enhance integrations overview with search functionality and related integrations display

Browse Source
This commit is contained in:
Usman Baig
2026-02-07 00:56:20 +01:00
parent 738c8e24d6
commit a074ba7dd9
22 changed files with 3638 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/integrations/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
/**
* @file Dynamic route for individual integration guide pages.
*
* Handles all 50 integration routes via [slug].
* Exports generateStaticParams for static generation and
* generateMetadata for per-page SEO (title, description, OG, JSON-LD).
*/
import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { integrations, getIntegration } from '@/lib/integrations'
import { getGuideContent } from '@/lib/integration-guides'
import { IntegrationGuide } from '@/components/IntegrationGuide'
// * ─── Static Params ───────────────────────────────────────────────
export function generateStaticParams() {
return integrations.map((i) => ({ slug: i.id }))
}
// * ─── SEO Metadata ────────────────────────────────────────────────
interface PageProps {
params: Promise<{ slug: string }>
}
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
const { slug } = await params
const integration = getIntegration(slug)
if (!integration) return {}
const title = `How to Add Pulse Analytics to ${integration.name} | Pulse by Ciphera`
const description = integration.seoDescription
const url = `https://pulse.ciphera.net/integrations/${integration.id}`
return {
title,
description,
keywords: [
`${integration.name} analytics`,
`${integration.name} Pulse`,
'privacy-first analytics',
'website analytics',
'Ciphera Pulse',
integration.name,
],
alternates: { canonical: url },
openGraph: {
title,
description,
url,
siteName: 'Pulse by Ciphera',
type: 'article',
},
twitter: {
card: 'summary',
title,
description,
},
}
}
// * ─── Page Component ──────────────────────────────────────────────
export default async function IntegrationPage({ params }: PageProps) {
const { slug } = await params
const integration = getIntegration(slug)
if (!integration) return notFound()
const content = getGuideContent(slug)
if (!content) return notFound()
// * HowTo JSON-LD for rich search snippets
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'HowTo',
name: `How to Add Pulse Analytics to ${integration.name}`,
description: integration.seoDescription,
step: [
{
'@type': 'HowToStep',
name: `Open your ${integration.name} project`,
text: `Navigate to your ${integration.name} project and locate the file where you manage the HTML head or layout.`,
},
{
'@type': 'HowToStep',
name: 'Add the Pulse tracking script',
text: 'Insert the Pulse analytics script tag with your data-domain attribute into the head section of your page.',
},
{
'@type': 'HowToStep',
name: 'Deploy and verify',
text: 'Deploy your changes and visit your Pulse dashboard to verify that page views are being recorded.',
},
],
tool: {
'@type': 'HowToTool',
name: 'Pulse by Ciphera',
url: 'https://pulse.ciphera.net',
},
}
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<IntegrationGuide integration={integration}>
{content}
</IntegrationGuide>
</>
)
}

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

@@ -1,63 +0,0 @@
'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
View File

@@ -1,60 +0,0 @@
'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
View File

@@ -1,65 +0,0 @@
'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
View File

@@ -1,55 +0,0 @@
'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
View File

@@ -1,65 +0,0 @@
'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>
)
}

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

@@ -1,87 +0,0 @@
'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 NextJsIntegrationPage() {
const integration = getIntegration('nextjs')
if (!integration) return notFound()
return (
<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>
<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>
<CodeBlock filename="app/layout.tsx">
{`import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<Script
defer
src="https://pulse.ciphera.net/script.js"
data-domain="your-site.com"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}`}
</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>
<CodeBlock filename="pages/_app.tsx">
{`import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Script
defer
src="https://pulse.ciphera.net/script.js"
data-domain="your-site.com"
strategy="afterInteractive"
/>
<Component {...pageProps} />
</>
)
}`}
</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>
</IntegrationGuide>
)
}

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

@@ -1,71 +0,0 @@
'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>
)
}

263
app/integrations/page.tsx
View File

@@ -1,12 +1,49 @@
'use client'
/**
* @file Integrations overview page with search, grouped by category.
*
* Displays all 50 integrations in a filterable grid.
* When the search query returns no results, a "Missing something?" card is shown.
*/
import { useState, useMemo } from 'react'
import Link from 'next/link'
import { motion } from 'framer-motion'
import { motion, AnimatePresence } from 'framer-motion'
import { ArrowRightIcon } from '@ciphera-net/ui'
import { getGroupedIntegrations } from '@/lib/integrations'
import {
integrations,
categoryLabels,
categoryOrder,
type IntegrationCategory,
} from '@/lib/integrations'
export default function IntegrationsPage() {
const groups = getGroupedIntegrations()
const [query, setQuery] = useState('')
// * Filter integrations by name, description, or category label
const filteredGroups = useMemo(() => {
const q = query.toLowerCase().trim()
const filtered = q
? integrations.filter(
(i) =>
i.name.toLowerCase().includes(q) ||
i.description.toLowerCase().includes(q) ||
categoryLabels[i.category].toLowerCase().includes(q),
)
: integrations
return categoryOrder
.map((cat) => ({
category: cat as IntegrationCategory,
label: categoryLabels[cat],
items: filtered.filter((i) => i.category === cat),
}))
.filter((g) => g.items.length > 0)
}, [query])
const hasResults = filteredGroups.length > 0
return (
<div className="relative min-h-screen flex flex-col overflow-hidden selection:bg-brand-orange/20">
@@ -25,85 +62,167 @@ export default function IntegrationsPage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="text-center mb-16"
className="text-center mb-12"
>
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
Integrations
</h1>
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
Connect Pulse with your favorite frameworks and platforms in minutes.
</p>
</motion.div>
{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.4 }}
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
>
{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>
))}
{/* * --- Search Input --- */}
<div className="relative max-w-md mx-auto">
<div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
<svg
className="w-5 h-5 text-neutral-400"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search integrations..."
className="w-full pl-12 pr-10 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
/>
{query && (
<button
onClick={() => setQuery('')}
className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
aria-label="Clear search"
>
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
)}
</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"
>
Request Integration
</a>
</motion.div>
<AnimatePresence mode="wait">
{hasResults ? (
<motion.div
key="results"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
>
{filteredGroups.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.4 }}
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
>
{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.05 }}
>
<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>
))}
</motion.div>
) : (
// * --- No Results: "Missing something?" card ---
<motion.div
key="no-results"
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.3 }}
className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
>
<div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
<svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</div>
<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-1">
No integrations found for &ldquo;{query}&rdquo;.
</p>
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
Let us know which integration you&apos;d like to see next.
</p>
<a
href="mailto:support@ciphera.net"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
>
Request Integration
</a>
</motion.div>
)}
</AnimatePresence>
{/* * Request Integration Card — always shown when there ARE results */}
{hasResults && (
<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 mt-12 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"
>
Request Integration
</a>
</motion.div>
)}
</div>
</div>
)

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

@@ -1,76 +0,0 @@
'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 ReactIntegrationPage() {
const integration = getIntegration('react')
if (!integration) return notFound()
return (
<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>
<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>
<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"
src="https://pulse.ciphera.net/script.js"
></script>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>`}
</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>
<CodeBlock filename="src/App.tsx">
{`import { useEffect } from 'react'
function App() {
useEffect(() => {
// Only load in production
if (process.env.NODE_ENV === 'production') {
const script = document.createElement('script')
script.defer = true
script.setAttribute('data-domain', 'your-site.com')
script.src = 'https://pulse.ciphera.net/script.js'
document.head.appendChild(script)
}
}, [])
return (
<div className="App">
<h1>Hello World</h1>
</div>
)
}`}
</CodeBlock>
</IntegrationGuide>
)
}

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

@@ -1,71 +0,0 @@
'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
View File

@@ -1,53 +0,0 @@
'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
View File

@@ -1,52 +0,0 @@
'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
View File

@@ -1,70 +0,0 @@
'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>
)
}

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

@@ -1,53 +0,0 @@
'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 VueIntegrationPage() {
const integration = getIntegration('vue')
if (!integration) return notFound()
return (
<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>
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
<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>
<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 Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>`}
</CodeBlock>
<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
View File

@@ -1,55 +0,0 @@
'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
View File

@@ -1,54 +0,0 @@
'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>
)
}

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

@@ -1,46 +0,0 @@
'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 WordPressIntegrationPage() {
const integration = getIntegration('wordpress')
if (!integration) return notFound()
return (
<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>
<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 &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>
<CodeBlock filename="Header Script">
{`<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}
</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>
</IntegrationGuide>
)
}