Automatically wrap the definition component on relevant terms

[S3Prototype]

This PR adds a custom rehype plugin that wraps the first instance of certain technical terms in a <Definition> component automatically. Here's how it looks:

example.mp4

Preview here

Because this plugin adds the component automatically, we get this functionality for free everywhere in the docs. This opens up a lot of possibilities:

1. We can add as many technical terms as we think users may be confused by, and since the component is a popover they can learn the meanings without leaving the page.
2. We could potentially add our own product terminology to the list of terms. For example, if we add "Traffic Policy" and link to that docs page, then the first instance of Traffic Policy on every page of the docs will automatically be linked. The same goes for our other terms
3. We can define proprietary terms like "ngrok's cloud service" without having a full dedicated docs page

How to test

Mostly, click around the site and see if the terms listed are highlighted on the pages they appear on.

Terms include:

• IP CIDR
• CEL
• Gateway API CDR
• CDR
• SCIM
• JIT Provisioning
• K8s
• Ingress
• TCP Keepalive
• v3
• v2
• OWASP
• Helm
• TLS Termination
• ALPN
• SNI

Considerations

• I've noticed no apparent slowdown in page loads either in localhost or in the preview deployment as a result of this plugin
• Vercel build times appear to be slower by 1 minute due to this plugin (from 7.5 minutes to 8.5 minutes). Local build times appear to be slower by about 1 minute as well.
  • For localhost, this is only relevant to the initial build of the site when running pnpm run dev. HMR is not slower.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ngrok-docs	✅ Ready (Inspect)	Visit Preview	Jun 23, 2025 4:31pm