Use configexample to format snippets

Author: S3Prototype

docs/k8s/guides/endpoint-types.mdx

@@ -4,6 +4,7 @@ title: Endpoint Types
 
 import TabItem from "@theme/TabItem";
 import Tabs from "@theme/Tabs";
+import ConfigExample from "/src/components/ConfigExample.tsx";
 
 The ngrok Kubernetes operator offers `CloudEndpoint` and `AgentEndpoint` as custom resource types that let you create endpoints in ngrok.
 The [using CRDs guide](/k8s/guides/using-crds) goes over the details and differences about how to configure each one.
@@ -17,39 +18,63 @@ The following examples showcase how you can create endpoints that accept `http:/
 	<TabItem value="agent-endpoint" label="AgentEndpoint" default>
 	The example showcases an upstream that accepts `http://` requests, but you can also use `https://` for the upstream.
 	For `AgentEndpoints`, the `upstream.url` scheme does not need to match the scheme of the public URL.
-	
-	```yaml
-  apiVersion: ngrok.k8s.ngrok.com/v1alpha1
-  kind: AgentEndpoint
-  metadata:
-    name: https-agent-endpoint
-    namespace: default
-  spec:
-    url: http://example-http-domain.ngrok.app
-    upstream:
-      url: http://example-service.default:8080
-    bindings:
-    - public
-	```
+
+	<ConfigExample		
+		title="ngrok-crds"
+		snippetText={null}
+		showLineNumbers={true}
+		hideJSON={true}
+		config={{
+			apiVersion: "ngrok.k8s.ngrok.com/v1alpha1",
+			kind: "AgentEndpoint",
+			metadata: {
+				name: "https-agent-endpoint",
+				namespace: "default",
+			},
+			spec: {
+				url: "http://example-http-domain.ngrok.app",
+				upstream: {
+					url: "http://example-service.default:8080",
+				},
+				bindings: ["public"],
+			},
+		}}
+	/>
 	</TabItem>
 	<TabItem value="cloud-endpoint" label="CloudEndpoint">
-	```yaml
-  apiVersion: ngrok.k8s.ngrok.com/v1alpha1
-  kind: CloudEndpoint
-  metadata:
-    name: http-cloud-endpoint
-  spec:
-    url: http://example-http-domain.ngrok.app
-    bindings:
-    - public
-    trafficPolicy:
-      policy:
-        on_http_request:
-        - actions:
-          - type: forward-internal
-            config:
-              url: http://example-service.internal:8080
-	```
+	<ConfigExample
+		title="ngrok-crds"
+		snippetText={null}
+		showLineNumbers={true}
+		hideJSON={true}
+		config={{
+			apiVersion: "ngrok.k8s.ngrok.com/v1alpha1",
+			kind: "CloudEndpoint",
+			metadata: {
+				name: "http-cloud-endpoint",
+			},
+			spec: {
+				url: "http://example-http-domain.ngrok.app",
+				bindings: ["public"],
+				trafficPolicy: {
+					policy: {
+						on_http_request: [
+							{
+								actions: [
+									{
+										type: "forward-internal",
+										config: {
+											url: "http://example-service.internal:8080",
+										},
+									},
+								],
+							},
+						],
+					},
+				},
+			},
+		}}
+	/>
 	</TabItem>
 </Tabs>
 

src/components/CodeBlockWithInfo/index.tsx

@@ -66,6 +66,7 @@ export function CodeBlockWithInfo({
 				<CodeBlock.Body>
 					{!meta?.disableCopy && <CodeBlock.CopyButton />}
 					<CodeBlock.Code
+						indentation={meta?.indentation}
 						language={language}
 						value={fmtCode`${content}`}
 					/>

src/components/ConfigExample.tsx

@@ -13,29 +13,37 @@ const showExample = (
 		title,
 		icon,
 		snippetText,
+		hideJSON,
+		hideYAML,
 	}: ConfigExampleProps,
 	yamlConfig: string,
 	jsonConfig: string,
 ) => {
 	const titleToUse = title || defaultTitle;
+	const yamlBlock = <DocsCodeBlock
+		language="yaml"
+		metastring={yamlMetastring}
+		title={`${titleToUse}.yml`}
+		icon={icon}
+	>
+		{snippetText ? `# ${snippetText}\n${yamlConfig}` : yamlConfig}
+	</DocsCodeBlock>;
+
+	const jsonBlock = 
+	<DocsCodeBlock
+		language="json"
+		metastring={jsonMetastring}
+		title={`${titleToUse}.json`}
+		icon={icon}
+	>
+		{snippetText ? `// ${snippetText}\n${jsonConfig}` : jsonConfig}
+	</DocsCodeBlock>;
+	if(hideJSON) return yamlBlock;
+	if(hideYAML) return jsonBlock;
 	return (
 		<LangSwitcher className="mb-3">
-			<DocsCodeBlock
-				language="yaml"
-				metastring={yamlMetastring}
-				title={`${titleToUse}.yml`}
-				icon={icon}
-			>
-				{snippetText ? `# ${snippetText}\n${yamlConfig}` : yamlConfig}
-			</DocsCodeBlock>
-			<DocsCodeBlock
-				language="json"
-				metastring={jsonMetastring}
-				title={`${titleToUse}.json`}
-				icon={icon}
-			>
-				{snippetText ? `// ${snippetText}\n${jsonConfig}` : jsonConfig}
-			</DocsCodeBlock>
+			{yamlBlock}
+			{jsonBlock}
 		</LangSwitcher>
 	);
 };
@@ -68,6 +76,8 @@ export type ConfigExampleProps = {
 	showLineNumbers?: boolean;
 	yamlMetastring?: string;
 	jsonMetastring?: string;
+	hideJSON?: boolean;
+	hideYAML?: boolean;
 	title?: string;
 	icon?: ReactNode;
 	showAgentConfig?: boolean;
@@ -78,6 +88,7 @@ export default function ConfigExample({
 	// Show the agent config by default
 	showAgentConfig = false,
 	showTrafficPolicy = true,
+	title,
 	...props
 }: ConfigExampleProps) {
 	const yamlOptions = {
@@ -91,15 +102,15 @@ export default function ConfigExample({
 	const policyJsonConfig = JSON.stringify(props.config, null, 2);
 
 	const policySnippet = showExample(
-		"traffic-policy",
+		title || "traffic-policy",
 		props,
 		policyYamlConfig,
 		policyJsonConfig,
 	);
 
 	const agentConfig = getAgentConfig(props.config, yamlOptions);
 	const agentConfigSnippet = showExample(
-		"config",
+		title || "ngrok",
 		props,
 		agentConfig.yamlConfig,
 		agentConfig.jsonConfig,

src/components/code-block.tsx

@@ -61,7 +61,7 @@ function DocsCodeBlock({
 	const langInClassName = langMatchesInClassName
 		? langMatchesInClassName[0]?.split("-")[1]
 		: "";
-	const langToFind = langInClassName || parseLanguage(langInClassName);
+	const langToFind = langInClassName || parseLanguage(_language || langInClassName);
 
 	const language = getLanguageInfo(langToFind) || defaultLanguageInfo;