Automatically wrap the definition component on relevant terms

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"
   },

src/components/CodeBlockWithInfo/index.tsx

@@ -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/Definition/data.ts

@@ -2,25 +2,135 @@ export type Term = {
 	titles: string[];
 	meaning: string;
 	link?: string;
+	caseSensitive?: boolean;
+	// If the term can be pluralized, this is the ending to use.
+	// For example, "IP CIDR" -> "IP CIDRs", so pluralEnding = "s"
+	// "Ingress" -> "Ingresses", so pluralEnding = "es"
+	pluralEnding?: string;
 };
 
 export const terms: Term[] = [
 	{
-		titles: ["CIDR", "IP CIDR"],
+		titles: ["IP CIDR", "CIDR"],
 		meaning:
 			"Classless Inter-Domain Routing is a method used to allocate IP addresses more efficiently and route IP packets more flexibly than the older class-based system.",
 		link: "https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing",
+		pluralEnding: "s",
 	},
 	{
-		titles: ["SCIM", "SCIM provisioning"],
+		titles: ["IP CIDR", "CIDR"],
 		meaning:
-			"SSO SCIM Provisioning refers to the combination of two identity management technologies: Single Sign-On (SSO) and System for Cross-domain Identity Management (SCIM). Together, they automate user account creation, updates, and removal across different systems.",
-		link: "https://en.wikipedia.org/wiki/System_for_Cross-domain_Identity_Management",
+			"Classless Inter-Domain Routing is a method used to allocate IP addresses more efficiently and route IP packets more flexibly than the older class-based system.",
+		link: "https://en.wikipedia.org/wiki/Classless_Inter-Domain_Routing",
+		pluralEnding: "s",
+	},
+	{
+		titles: ["shadow IT"],
+		meaning:
+			"Shadow IT refers IT systems, software, and cloud services used by individuals within an organization without the IT department's knowledge or approval",
+		link: "https://en.wikipedia.org/wiki/Shadow_IT",
+	},
+	{
+		titles: ["OpenID Connect", "OIDC"],
+		meaning:
+			"OpenID Connect (OIDC) is an authentication protocol that enables third-party applications to confirm a user's identity and access basic profile details through a single sign-on (SSO) process.",
+		link: "https://en.wikipedia.org/wiki/OpenID",
+	},
+	{
+		titles: ["Let’s Encrypt", "Let's Encrypt", "LetsEncrypt", "Lets encrypt"],
+		meaning:
+			"Let's Encrypt is a free, automated, and open certificate authority (CA) that provides digital certificates to enable HTTPS (SSL/TLS) for websites.",
+		link: "https://letsencrypt.org/about/",
 	},
 	{
-		titles: ["JIT", "JIT provisioning"],
+		titles: ["JIT provisioning"],
 		meaning:
 			"Just-In-Time Single Sign-On Provisioning is a user account provisioning method that automatically creates (or updates) user accounts at the time of login via Single Sign-On, rather than pre-creating all user accounts in advance.",
 		link: "https://en.wikipedia.org/wiki/System_for_Cross-domain_Identity_Management",
 	},
+	{
+		titles: ["K8"],
+		meaning: "K8s is an industry-standard abbreviation for Kubernetes.",
+		pluralEnding: "s",
+	},
+	{
+		titles: ["Ingress"],
+		meaning:
+			"An ingress is an entry point into a network for traffic from outside of the network.",
+		pluralEnding: "es",
+	},
+	{
+		titles: [
+			"TCP-KeepAlive",
+			"TCP KeepAlive",
+			"TCP Keep-Alive",
+			"TCP Keep Alive",
+		],
+		meaning:
+			"TCP KeepAlive enables TCP connections to remain active even when no data is exchanged between the connected endpoints.",
+		link: "https://en.wikipedia.org/wiki/Keepalive",
+	},
+	{
+		titles: ["v3"],
+		caseSensitive: true,
+		meaning: "v3 is shorthand for the third major version of the ngrok Agent.",
+		link: "/docs/agent/config/v3",
+	},
+	{
+		titles: ["v2"],
+		caseSensitive: true,
+		meaning: "v2 is shorthand for the second major version of the ngrok Agent.",
+		link: "/docs/agent/config/v2",
+	},
+	{
+		titles: ["OWASP"],
+		meaning:
+			"OWASP: The Open Web Application Security Project. This non-profit organization is dedicated to improving software security through providing resources, tools, and community support.",
+		link: "https://owasp.org/about/",
+	},
+	{
+		titles: ["Helm"],
+		meaning:
+			"Helm is a package manager for Kubernetes that simplifies the deployment and management of applications on Kubernetes clusters.",
+		link: "https://helm.sh/",
+	},
+	{
+		titles: ["TLS Termination"],
+		meaning:
+			"TLS termination is the process of decrypting incoming TLS (Transport Layer Security) traffic at a server or load balancer before passing the unencrypted traffic to internal systems.",
+		link: "/docs/universal-gateway/tls-termination/",
+	},
+	{
+		titles: ["Gateway API CRD", "Gateway API"],
+		link: "https://gateway-api.sigs.k8s.io/guides/",
+		meaning:
+			"Gateway API CRDs (Custom Resource Definitions) are a set of standardized, extensible resources that define and manage networking configurations like routing, gateways, and traffic policies in a more expressive and role-oriented way than Ingress.",
+		pluralEnding: "s",
+	},
+	{
+		titles: ["CRD", "Custom Resource Definition"],
+		meaning:
+			"CustomResourceDefinitions allow users to extend the Kubernetes API by defining their own resource types.",
+		link: "https://kubernetes.io/docs/tasks/extend-kubernetes/custom-resources/custom-resource-definitions/",
+		pluralEnding: "s",
+	},
+	{
+		titles: ["ALPN"],
+		link: "https://en.wikipedia.org/wiki/Application-Layer_Protocol_Negotiation",
+		meaning:
+			"ALPN (Application-Layer Protocol Negotiation) allows a client and server to negotiate which application protocol (like HTTP/2 or HTTP/1.1) to use over a secure connection during the TLS handshake.",
+	},
+	{
+		titles: ["SNI"],
+		link: "https://en.wikipedia.org/wiki/Server_Name_Indication",
+		meaning:
+			"SNI (Server Name Indication) is a TLS extension that allows a client to specify the hostname it is trying to connect to during the TLS handshake, enabling servers to present the correct SSL/TLS certificate for that hostname.",
+	},
+	{
+		titles: ["CEL"],
+		caseSensitive: true,
+		link: "https://github.com/google/cel-spec/tree/master?tab=readme-ov-file#common-expression-language",
+		meaning:
+			"CEL (Common Expression Language) is a fast, safe, and portable expression language developed by Google for evaluating expressions in configuration, policy, and runtime environments.",
+	},
 ];