Automatically wrap the definition component on relevant terms (#1323)

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:



https://github.com/user-attachments/assets/a55e39cf-f424-422b-92fb-2fa31001c732


[Preview
here](https://ngrok-docs-git-shaquil-doc-267-automatically-w-1615c7-ngrok-dev.vercel.app/docs/k8s/installation/install/)

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.

## Other changes

This also updates our codeblock component to more accurately align with
the redesign by Micah
- [Check it out
here](https://ngrok.slack.com/archives/C062MGJHNV6/p1743797304496219?thread_ts=1743788702.760899&cid=C062MGJHNV6)

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: S3Prototype

docs/agent-sdks/index.mdx

@@ -23,20 +23,62 @@ ngrok's cloud service just as if you opened a socket to listen on a port.
 
 ## Example Usage
 
-<Tabs groupId="connectivity" queryString="cty">
-	<TabItem value="go-sdk" label="Go SDK">
-		<RandomGoSdkExample />
-	</TabItem>
-	<TabItem value="javascript-sdk" label="Javascript SDK">
-		<RandomJavascriptSdkExample />
-	</TabItem>
-	<TabItem value="python-sdk" label="Python SDK">
-		<RandomPythonSdkExample />
-	</TabItem>
-	<TabItem value="rust-sdk" label="Rust SDK">
-		<RandomRustSdkExample />
-	</TabItem>
-</Tabs>
+<LangSwitcher>
+```go
+import (
+	"context"
+	"net"
+  "golang.ngrok.com/ngrok/v2"
+)
+
+func ngrokListener(ctx context.Context) (net.Listener, error) {
+return ngrok.Listen(ctx)
+}
+
+````
+
+```javascript
+const ngrok = require("@ngrok/ngrok");
+
+(async function () {
+	const listener = await ngrok.forward({
+		addr: 8080,
+		authtoken_from_env: true,
+	});
+
+	console.log(`Ingress established at: ${listener.url()}`);
+})();
+````
+
+```python
+import ngrok
+
+listener = ngrok.forward("localhost:8080", authtoken_from_env=True)
+
+print(f"Ingress established at: {listener.url()}");
+```
+
+```rust
+use ngrok::prelude::*;
+
+async fn listen_ngrok() -> anyhow::Result<impl Tunnel> {
+    let sess = ngrok::Session::builder()
+        .authtoken_from_env()
+        .connect()
+        .await?;
+
+    let tun = sess
+        .http_endpoint()
+        .listen()
+        .await?;
+
+    println!("Listening on URL: {:?}", tun.url());
+
+    Ok(tun)
+}
+```
+
+</LangSwitcher>
 
 ## Supported Languages
 

docs/iam/users.mdx

@@ -1,5 +1,3 @@
-import { Definition } from "/src/components/Definition/";
-
 # Users
 
 Users are members of your Account that may log into the dashboard, start
@@ -50,7 +48,7 @@ additional details on configuring it.
 
 In addition to the normal authentication factors required to log into the ngrok
 dashboard, you may also configure your ngrok account to further restrict
-dashboard access to a set of <Definition>IP CIDR</Definition> blocks.
+dashboard access to a set of IP CIDR blocks.
 
 Dashboard IP Restrictions should always be used in a warning mode first to test
 that you won't accidentally lock yourself out of your account if you restrict
@@ -107,7 +105,7 @@ Settings page](https://dashboard.ngrok.com/settings). By default, you provision
 new users by inviting them to join your Account with Invitations.
 
 If you have configured [SSO](#single-sign-on), you may also add users to your
-account via the <Definition>SCIM</Definition> or <Definition>JIT provisioning</Definition> methods.
+account via the SCIM or JIT provisioning methods.
 
 ### Invitations
 

docs/whats-new.mdx

@@ -14,7 +14,7 @@ You can expect this page to update regularly (at least monthly). We'll include t
 
 ## March 2025
 
-- 2025-03-13 - Agent now supports TCP KeepAlive configuration.
+- 2025-03-13 - Agent now supports TCP-KeepAlive configuration.
 
 ## February 2025
 

docusaurus.config.ts

@@ -133,6 +133,7 @@ const config = {
 				docs: {
 					sidebarPath: require.resolve("./sidebars.js"),
 					routeBasePath: "/",
+					rehypePlugins: [require("./src/plugins/definition-wrapper")],
 					editUrl: `${docsRepo}/edit/main`,
 					showLastUpdateAuthor: true,
 					showLastUpdateTime: true,

package.json

@@ -44,7 +44,9 @@
     "@ngrok/mantle": "0.27.2",
     "@phosphor-icons/react": "2.1.7",
     "@stackql/docusaurus-plugin-hubspot": "1.1.0",
+    "@types/capitalize": "^2.0.2",
     "algoliasearch": "5.24.0",
+    "capitalize": "^2.0.4",
     "clsx": "2.1.1",
     "concurrently": "9.1.2",
     "cross-env": "7.0.3",
@@ -56,6 +58,7 @@
     "react-hubspot-form": "1.3.7",
     "react-markdown": "10.1.0",
     "react-player": "2.16.0",
+    "unist-util-visit": "^5.0.0",
     "yaml": "2.7.1",
     "zod": "3.24.4"
   },

pnpm-lock.yaml

@@ -50,30 +50,30 @@ export function CodeBlockWithInfo({
 		<div className="flex flex-col">
 			<CodeBlock className={className} {...codeBlockProps}>
 				<CodeBlockHeader className={clsx("flex w-[100%]  justify-start p-2")}>
-					{headerContent}
-					{info && <SdkButton className="ml-auto mr-0.5" data={info} />}
-				</CodeBlockHeader>
-				<CodeBlockBody>
 					{meta?.title && (
-						<div className="mx-2 mt-3.5 flex w-[100%] items-end justify-start gap-1">
+						<div className="flex w-[100%] items-end justify-start gap-1">
 							<>
 								{meta?.mode ? (
 									<CodeBlockIcon preset={meta.mode} />
 								) : (
 									<CodeBlockIcon preset="file" />
 								)}
-								<CodeBlockTitle>
+								<CodeBlockTitle className="font-sans">
 									{meta?.titleLink ? (
 										<a href={useBaseUrl(meta.titleLink)}>
 											<strong>{meta.title}</strong>
 										</a>
 									) : (
-										<strong>{meta?.title}</strong>
+										<strong>{meta.title}</strong>
 									)}
 								</CodeBlockTitle>
 							</>
 						</div>
 					)}
+					<span className="justify-end mr-0.5 ml-auto">{headerContent}</span>
+					{info && <SdkButton className="ml-4 mr-0.5" data={info} />}
+				</CodeBlockHeader>
+				<CodeBlockBody>
 					{!meta?.disableCopy && <CodeBlockCopyButton />}
 					<CodeBlockCode
 						indentation={meta?.indentation}

src/components/CodeBlockWithInfo/index.tsx

@@ -19,7 +19,7 @@ const showExample = (
 ) => {
 	const titleToUse = title || defaultTitle;
 	return (
-		<LangSwitcher>
+		<LangSwitcher className="mb-3">
 			<DocsCodeBlock
 				language="yaml"
 				metastring={yamlMetastring}