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

fix: code blocks rendering + consistent styling with ciphera-website /learn

Browse Source 
- Convert MDX CodeBlock components to standard markdown code fences
- Add rehype-mdx-code-props to pass filename meta to code components
- Custom pre/code MDX components map fences to CodeBlock
- Add brand color badges (product + category) matching /learn layout
- Match prose styling: orange inline code, orange links, white strong
- Remove brand color background glow (not in /learn)
This commit is contained in:
Usman Baig
2026-03-29 01:01:56 +01:00
parent a992afe04b
commit 627613dc13
30 changed files with 235 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
content/integrations/angular.mdx
View File

@@ -16,7 +16,8 @@ Add the script to your `src/index.html` — the single entry point for all Angul
Place the Pulse script inside the `<head>` tag of your Angular app's `src/index.html`.
<CodeBlock filename="src/index.html">{`<!doctype html>
```html filename="src/index.html"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@@ -34,6 +35,7 @@ Place the Pulse script inside the `<head>` tag of your Angular app's `src/index.
<body>
<app-root></app-root>
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Angular docs](https://angular.dev/guide/components).

6
content/integrations/astro.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your base layout so it's included on every page of your
Place the Pulse script in the `<head>` of your shared layout component.
<CodeBlock filename="src/layouts/BaseLayout.astro">{`---
```html filename="src/layouts/BaseLayout.astro"
---
interface Props {
title: string
}
@@ -41,7 +42,8 @@ const { title } = Astro.props
<body>
<slot />
</body>
</html>`}</CodeBlock>
</html>
```
If you're using Astro's View Transitions, the script will persist across navigations by default since it's in the `<head>`.

6
content/integrations/django.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your base template with a debug guard.
Use Django's template tags to only load the script when `DEBUG` is `False`.
<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
```html filename="templates/base.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -35,7 +36,8 @@ Use Django's template tags to only load the script when `DEBUG` is `False`.
<body>
{% block content %}{% endblock %}
</body>
</html>`}</CodeBlock>
</html>
```
Make sure to pass `debug` to the template context via `settings.DEBUG`, or use a context processor to make it available globally.

6
content/integrations/drupal.mdx
View File

@@ -20,7 +20,8 @@ Install the [Asset Injector](https://www.drupal.org/project/asset_injector) modu
Add the script directly to your theme's `html.html.twig` template in the head area.
<CodeBlock filename="templates/html.html.twig">{`<!DOCTYPE html>
```twig filename="templates/html.html.twig"
<!DOCTYPE html>
<html{{ html_attributes }}>
<head>
<head-placeholder token="{{ placeholder_token }}">
@@ -40,6 +41,7 @@ Add the script directly to your theme's `html.html.twig` template in the head ar
{{ page_bottom }}
<js-bottom-placeholder token="{{ placeholder_token }}">
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Drupal theming docs](https://www.drupal.org/docs/theming-drupal).

6
content/integrations/eleventy.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your base Nunjucks or Liquid layout.
Place the Pulse script inside the `<head>` of your shared base template.
<CodeBlock filename="src/_includes/base.njk">{`<!DOCTYPE html>
```html filename="src/_includes/base.njk"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -33,6 +34,7 @@ Place the Pulse script inside the `<head>` of your shared base template.
<body>
{{ content | safe }}
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Eleventy layouts docs](https://www.11ty.dev/docs/layouts/).

12
content/integrations/express.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your template engine's layout (EJS, Pug, Handlebars) or
If you use EJS as your template engine, add the script to your layout with a production guard.
<CodeBlock filename="views/layout.ejs">{`<!DOCTYPE html>
```html filename="views/layout.ejs"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -35,13 +36,15 @@ If you use EJS as your template engine, add the script to your layout with a pro
<body>
<%- body %>
</body>
</html>`}</CodeBlock>
</html>
```
## Method 2: Static HTML
If you serve static HTML files via Express, add the script directly.
<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
```html filename="public/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -58,4 +61,5 @@ If you serve static HTML files via Express, add the script directly.
<body>
<h1>Hello World</h1>
</body>
</html>`}</CodeBlock>
</html>
```

6
content/integrations/flask.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your Jinja2 base template with a debug guard.
Use Jinja2's conditional to only load the script when `DEBUG` is off.
<CodeBlock filename="templates/base.html">{`<!DOCTYPE html>
```html filename="templates/base.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -35,6 +36,7 @@ Use Jinja2's conditional to only load the script when `DEBUG` is off.
<body>
{% block content %}{% endblock %}
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Flask template docs](https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/).

6
content/integrations/framer.mdx
View File

@@ -16,10 +16,12 @@ Add the Pulse script to your Framer project's custom code settings.
Go to **Project Settings -> General -> Custom Code -> Head** and paste the Pulse script.
<CodeBlock filename="Project Settings -> Head">{`<script
```html filename="Project Settings -> Head"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
For more details, see the [Framer custom code docs](https://www.framer.com/help/articles/custom-code/).

12
content/integrations/gatsby.mdx
View File

@@ -16,7 +16,8 @@ Use the Gatsby SSR API or the Gatsby Head API to add Pulse to your site.
Use the `onRenderBody` hook to inject the Pulse script into every page's `<head>`.
<CodeBlock filename="gatsby-ssr.js">{`import React from "react"
```jsx filename="gatsby-ssr.js"
import React from "react"
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
@@ -27,13 +28,15 @@ export const onRenderBody = ({ setHeadComponents }) => {
src="https://pulse.ciphera.net/script.js"
/>,
])
}`}</CodeBlock>
}
```
## Method 2: Gatsby Head API (v4.19+)
If you're on Gatsby 4.19 or later, you can use the Head export in any page or template component.
<CodeBlock filename="src/pages/index.tsx">{`import React from "react"
```tsx filename="src/pages/index.tsx"
import React from "react"
export function Head() {
return (
@@ -47,6 +50,7 @@ export function Head() {
export default function IndexPage() {
return <h1>Hello World</h1>
}`}</CodeBlock>
}
```
For more details, see the [Gatsby Head API docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/).

6
content/integrations/ghost.mdx
View File

@@ -16,11 +16,13 @@ Use Ghost's built-in Code Injection feature to add the Pulse script — no theme
Go to **Settings -> Code injection -> Site Header** and paste the Pulse script.
<CodeBlock filename="Settings -> Code injection -> Site Header">{`<script
```html filename="Settings -> Code injection -> Site Header"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
Alternatively, you can add the script directly to your theme's `default.hbs` template file.

10
content/integrations/gtm.mdx
View File

@@ -21,7 +21,9 @@ Follow these steps to add Pulse through GTM:
3. Set the trigger to **All Pages**
4. Publish your container
<CodeBlock filename="GTM -> Custom HTML Tag">{`<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
```html filename="GTM -> Custom HTML Tag"
<script defer src="https://pulse.ciphera.net/script.js"></script>
```
That's it. Pulse auto-detects the domain from the page, so no extra configuration is needed.
@@ -30,10 +32,12 @@ That's it. Pulse auto-detects the domain from the page, so no extra configuratio
If your site is registered under a different domain than the page hostname, or you need custom options (API endpoint, storage mode, etc.), use `pulseConfig`:
<CodeBlock filename="GTM -> Custom HTML Tag (with config)">{`<script>
```html filename="GTM -> Custom HTML Tag (with config)"
<script>
window.pulseConfig = { domain: "your-site.com" };
</script>
<script defer src="https://pulse.ciphera.net/script.js"></script>`}</CodeBlock>
<script defer src="https://pulse.ciphera.net/script.js"></script>
```
</details>
For more details, see the [GTM Custom HTML tag docs](https://support.google.com/tagmanager/answer/6103696).

12
content/integrations/hugo.mdx
View File

@@ -16,19 +16,22 @@ Add the Pulse script via a Hugo partial or directly in your base template.
Create an analytics partial with a production guard using Hugo's `.Site.IsServer` flag.
<CodeBlock filename="layouts/partials/analytics.html">{`{{ if not .Site.IsServer }}
```html 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>
{{ end }}
```
## Method 2: Include the partial in your base layout
Add the partial to your `baseof.html` layout.
<CodeBlock filename="layouts/_default/baseof.html">{`<!DOCTYPE html>
```html filename="layouts/_default/baseof.html"
<!DOCTYPE html>
<html lang="{{ .Site.Language }}">
<head>
<meta charset="utf-8">
@@ -39,6 +42,7 @@ Add the partial to your `baseof.html` layout.
<body>
{{ block "main" . }}{{ end }}
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Hugo partials docs](https://gohugo.io/templates/partials/).

6
content/integrations/laravel.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your Blade layout template with a production guard.
Use Laravel's `@production` directive to only load the script in production.
<CodeBlock filename="resources/views/layouts/app.blade.php">{`<!DOCTYPE html>
```php filename="resources/views/layouts/app.blade.php"
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
@@ -36,6 +37,7 @@ Use Laravel's `@production` directive to only load the script in production.
<body>
@yield('content')
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Laravel @production docs](https://laravel.com/docs/blade#the-production-directive).

12
content/integrations/nextjs.mdx
View File

@@ -16,7 +16,8 @@ The best way to add Pulse to your Next.js application is using the built-in `nex
Add the Pulse script to your root layout so it loads on every page.
<CodeBlock filename="app/layout.tsx">{`import Script from 'next/script'
```tsx filename="app/layout.tsx"
import Script from 'next/script'
export default function RootLayout({
children,
@@ -36,13 +37,15 @@ export default function RootLayout({
<body>{children}</body>
</html>
)
}`}</CodeBlock>
}
```
## Method 2: Pages Router
If you're using the Pages Router, add the script to your custom `_app.tsx`.
<CodeBlock filename="pages/_app.tsx">{`import Script from 'next/script'
```tsx filename="pages/_app.tsx"
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
@@ -57,7 +60,8 @@ export default function App({ Component, pageProps }: AppProps) {
<Component {...pageProps} />
</>
)
}`}</CodeBlock>
}
```
## Configuration options

12
content/integrations/nuxt.mdx
View File

@@ -16,7 +16,8 @@ Configure Pulse analytics in your `nuxt.config` for a framework-native setup.
Add the Pulse script via the `app.head` option in your Nuxt 3 config.
<CodeBlock filename="nuxt.config.ts">{`export default defineNuxtConfig({
```tsx filename="nuxt.config.ts"
export default defineNuxtConfig({
app: {
head: {
script: [
@@ -28,13 +29,15 @@ Add the Pulse script via the `app.head` option in your Nuxt 3 config.
],
},
},
})`}</CodeBlock>
})
```
## Method 2: Nuxt 2
In Nuxt 2, use the `head` property in your config.
<CodeBlock filename="nuxt.config.js">{`export default {
```jsx filename="nuxt.config.js"
export default {
head: {
script: [
{
@@ -44,6 +47,7 @@ In Nuxt 2, use the `head` property in your config.
},
],
},
}`}</CodeBlock>
}
```
For more details, see the [Nuxt head config docs](https://nuxt.com/docs/api/nuxt-config#head).

6
content/integrations/rails.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your application layout with a production environment gu
Use an `if` guard to only load the script in production.
<CodeBlock filename="app/views/layouts/application.html.erb">{`<!DOCTYPE html>
```erb filename="app/views/layouts/application.html.erb"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
@@ -37,6 +38,7 @@ Use an `if` guard to only load the script in production.
<body>
<%= yield %>
</body>
</html>`}</CodeBlock>
</html>
```
For more details, see the [Rails layout docs](https://guides.rubyonrails.org/layouts_and_rendering.html).

12
content/integrations/react.mdx
View File

@@ -16,7 +16,8 @@ For standard React SPAs, add the script to your `index.html`.
The simplest approach is to add the Pulse script directly to your HTML entry point.
<CodeBlock filename="public/index.html">{`<!DOCTYPE html>
```html filename="public/index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -33,13 +34,15 @@ The simplest approach is to add the Pulse script directly to your HTML entry poi
<body>
<div id="root"></div>
</body>
</html>`}</CodeBlock>
</html>
```
## Method 2: Programmatic injection via useEffect
If you prefer to inject the script programmatically (e.g. only in production), use a `useEffect` hook.
<CodeBlock filename="src/App.tsx">{`import { useEffect } from 'react'
```tsx filename="src/App.tsx"
import { useEffect } from 'react'
function App() {
useEffect(() => {
@@ -53,4 +56,5 @@ function App() {
}, [])
return <div className="App"><h1>Hello World</h1></div>
}`}</CodeBlock>
}
```

6
content/integrations/remix.mdx
View File

@@ -16,7 +16,8 @@ Add the Pulse script to your `app/root.tsx` so it's included on every route.
The root route is the top-level layout in Remix. Add the Pulse script inside the `<head>` section.
<CodeBlock filename="app/root.tsx">{`import {
```tsx filename="app/root.tsx"
import {
Links,
Meta,
Outlet,
@@ -45,6 +46,7 @@ export default function App() {
</body>
</html>
)
}`}</CodeBlock>
}
```
For more details, see the [Remix root docs](https://remix.run/docs/en/main/file-conventions/root).

6
content/integrations/script-tag.mdx
View File

@@ -16,14 +16,16 @@ Add Pulse to any website by pasting a single script tag into your HTML. This wor
Add the following script tag inside the `<head>` section of your website:
<CodeBlock filename="index.html">{`<head>
```html filename="index.html"
<head>
<!-- ... other head elements ... -->
<script
defer
src="https://pulse.ciphera.net/script.js"
data-domain="your-site.com"
></script>
</head>`}</CodeBlock>
</head>
```
## Configuration

6
content/integrations/shopify.mdx
View File

@@ -16,12 +16,14 @@ Add the Pulse script via the Shopify theme editor — no app needed.
Go to **Online Store -> Themes -> Edit code** and open `layout/theme.liquid`. Add the Pulse script before the closing `</head>` tag.
<CodeBlock filename="layout/theme.liquid">{`<!-- Add before </head> -->
```liquid filename="layout/theme.liquid"
<!-- Add before </head> -->
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
## Method 2: Shopify Plus — Customer Events

6
content/integrations/squarespace.mdx
View File

@@ -16,11 +16,13 @@ Use Squarespace's Code Injection feature to add the Pulse script.
Go to **Settings -> Developer Tools -> Code Injection -> Header** and paste the Pulse script.
<CodeBlock filename="Settings -> Code Injection -> Header">{`<script
```html filename="Settings -> Code Injection -> Header"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
**Note:** Code Injection requires a Business or Commerce plan.

12
content/integrations/svelte.mdx
View File

@@ -16,7 +16,8 @@ Add the script to your `index.html` for Vite-based Svelte, or use `<svelte:head>
For standard Svelte projects using Vite, add the Pulse script to your `index.html`.
<CodeBlock filename="index.html">{`<!DOCTYPE html>
```html filename="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -34,13 +35,15 @@ For standard Svelte projects using Vite, add the Pulse script to your `index.htm
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>`}</CodeBlock>
</html>
```
## Method 2: SvelteKit
In SvelteKit, use `<svelte:head>` in your root layout to add the script to every page.
<CodeBlock filename="src/routes/+layout.svelte">{`<svelte:head>
```svelte filename="src/routes/+layout.svelte"
<svelte:head>
<script
defer
data-domain="your-site.com"
@@ -48,6 +51,7 @@ In SvelteKit, use `<svelte:head>` in your root layout to add the script to every
></script>
</svelte:head>
<slot />`}</CodeBlock>
<slot />
```
Alternatively, you can add the script directly to `src/app.html` in your SvelteKit project.

6
content/integrations/vue.mdx
View File

@@ -16,7 +16,8 @@ Add the script to your `index.html` — works for both Vue CLI and Vite-based pr
Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pulse script inside the `<head>` tag.
<CodeBlock filename="index.html">{`<!DOCTYPE html>
```html filename="index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -34,6 +35,7 @@ Both Vue CLI and Vite use an `index.html` as the entry point. Simply add the Pul
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>`}</CodeBlock>
</html>
```
Looking for Nuxt? Check the dedicated [Nuxt guide](/integrations/nuxt).

6
content/integrations/webflow.mdx
View File

@@ -16,11 +16,13 @@ Paste the Pulse script into your Webflow project's custom code settings.
Go to **Project Settings -> Custom Code -> Head Code** and paste the Pulse script.
<CodeBlock filename="Project Settings -> Head Code">{`<script
```html filename="Project Settings -> Head Code"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
**Note:** Custom code requires a paid Webflow site plan. The script won't appear in the Designer preview — publish your site to see it in action.

6
content/integrations/wix.mdx
View File

@@ -16,11 +16,13 @@ Use Wix's Custom Code settings to add the Pulse script.
Go to **Settings -> Custom Code -> Add Custom Code**. Set the placement to **Head** and apply it to **All pages**.
<CodeBlock filename="Custom Code Snippet">{`<script
```html filename="Custom Code Snippet"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
**Note:** Custom Code requires a Wix Premium plan.

6
content/integrations/wordpress.mdx
View File

@@ -16,11 +16,13 @@ Add the Pulse script via a plugin or by editing your theme's header file directl
The easiest way is to use the [WPCode (Insert Headers and Footers)](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. Install it, then go to **Code Snippets -> Header & Footer** and paste the Pulse script into the Header section.
<CodeBlock filename="Header Script">{`<script
```html filename="Header Script"
<script
defer
data-domain="your-site.com"
src="https://pulse.ciphera.net/script.js"
></script>`}</CodeBlock>
></script>
```
## Method 2: Edit header.php directly