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

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/).