Merge pull request #1 from ngrok/shaquil/doc-95-import-content-from-current-docs-site

Add content from main in our prod docs

Author: S3Prototype

app/root.tsx

@@ -44,8 +44,8 @@ export const meta: V2_MetaFunction = ({ data, matches }) => {
 
   return [
     getSeo({
-      title: config.title,
-      description: config.description,
+      title: config?.title,
+      description: config?.description,
       url: data.canonical ? data.canonical : "",
     }),
   ];

app/routes/docs+/$.tsx

@@ -1,12 +1,12 @@
 import type {
-	LoaderArgs,
-	V2_MetaFunction,
-	HeadersFunction,
-	SerializeFrom,
+  LoaderArgs,
+  V2_MetaFunction,
+  HeadersFunction,
+  SerializeFrom,
 } from "@vercel/remix";
-import { json, redirect } from '@vercel/remix';
-import { useLoaderData } from '@remix-run/react'
-import { parseISO, format } from 'date-fns';
+import { json, redirect } from "@vercel/remix";
+import { useLoaderData } from "@remix-run/react";
+import { parseISO, format } from "date-fns";
 
 import invariant from "tiny-invariant";
 
@@ -17,78 +17,99 @@ import { getContent } from "~/utils/blog.server";
 import { CacheControl } from "~/utils/cache-control.server";
 import { getSeo } from "~/seo";
 
-export const loader = async ({params}: LoaderArgs) => {
-	let path = params["*"];
+export const loader = async ({ params }: LoaderArgs) => {
+  let path = params["*"];
 
-	invariant(path, "BlogPost: path is required");
+  invariant(path, "BlogPost: path is required");
 
-	if (!path) {
-		throw new Error('path is not defined')
-	}    
+  if (!path) {
+    throw new Error("path is not defined");
+  }
 
-	const files = await getContent(`docs/${path}`);
-	let post = files && parseMarkdown(files[0].content);
+  const files = await getContent(`docs/${path}`);
+  let post = files && parseMarkdown(files[0].content);
 
-	//invariant(post, "Not found");
-	if (!post) {
-		throw json({}, {
-			status: 404, headers:  {}
-		})
-	}    
+  //invariant(post, "Not found");
+  if (!post) {
+    throw json(
+      {},
+      {
+        status: 404,
+        headers: {},
+      }
+    );
+  }
 
-	return json({post}, {
-		headers: { 
-			"Cache-Control": new CacheControl("swr").toString() 
-		}
-	})
-}
+  return json(
+    { post },
+    {
+      headers: {
+        "Cache-Control": new CacheControl("swr").toString(),
+      },
+    }
+  );
+};
 
-export const headers: HeadersFunction = ({loaderHeaders}) => {
-	return {
-		'Cache-Control': loaderHeaders.get('Cache-Control')!
-	}
-}
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+  return {
+    "Cache-Control": loaderHeaders.get("Cache-Control")!,
+  };
+};
 
 export const meta: V2_MetaFunction = ({ data, matches }) => {
-	if(!data) return [];
+  if (!data) return [];
 
-	const parentData = matches.flatMap((match) => match.data ?? [] );
+  const parentData = matches.flatMap((match) => match.data ?? []);
 
-	return [
-		getSeo({
-			title: data.post.frontmatter.meta.title,
-			description: data.post.frontmatter.meta.description,
-			url: `${parentData[0].requestInfo.url}`,
-		}),  
-	]
-}
+  const {
+    post: { frontmatter },
+  } = data;
+  console.error("Post info", data.post);
+
+  return [
+    getSeo({
+      title: frontmatter?.meta?.title ?? frontmatter?.title,
+      description: frontmatter?.meta?.description ?? frontmatter?.description,
+      url: `${parentData[0].requestInfo.url}`,
+    }),
+  ];
+};
 
 export default function BlogPost() {
-	const {post} = useLoaderData<typeof loader>();
-
-	return (
-        <div className="flex flex-col items-start justify-center w-full max-w-2xl mx-auto mb-16">
-			<article className="flex flex-col items-start justify-center w-full max-w-2xl mx-auto mb-16">
-				<h1 className="mb-4 text-3xl font-bold tracking-tight text-black md:text-5xl dark:text-white">{post.frontmatter.meta.title}</h1>
-				<div className="flex flex-col items-start justify-between w-full mt-2 md:flex-row md:items-center">
-					<div className="flex items-center space-x-2">
-						{post.frontmatter.date && <p className="text-sm text-gray-700 dark:text-gray-300">
-							{'Created: '}
-							{post.frontmatter.date && format(parseISO(post.frontmatter.date), 'MMMM dd, yyyy')}
-						</p>}
-						{post.frontmatter.updated && <p className="text-sm text-gray-700 dark:text-gray-300">
-							{'Last updated: '}
-							{post.frontmatter.updated && format(parseISO(post.frontmatter.updated), 'MMMM dd, yyyy')}
-						</p>}
-					</div>
-					<p className="mt-2 text-sm text-gray-600 dark:text-gray-400 min-w-32 md:mt-0">
-						{post.readTime.text}
-					</p>
-				</div>
-				<div className="w-full mt-4 prose dark:prose-dark max-w-none">
-					{post.body && <MarkdownView content={post.body} />}
-				</div>
-			</article>
+  const { post } = useLoaderData<typeof loader>();
+
+  const { frontmatter, body } = post;
+  return (
+    <div className="flex flex-col items-start justify-center w-full max-w-2xl mx-auto mb-16">
+      <article className="flex flex-col items-start justify-center w-full max-w-2xl mx-auto mb-16">
+        <h1 className="mb-4 text-3xl font-bold tracking-tight text-black md:text-5xl dark:text-white">
+          {frontmatter?.meta?.title ?? frontmatter?.title}
+        </h1>
+        <div className="flex flex-col items-start justify-between w-full mt-2 md:flex-row md:items-center">
+          <div className="flex items-center space-x-2">
+            {frontmatter?.date && (
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                {"Created: "}
+                {frontmatter?.date &&
+                  format(parseISO(frontmatter?.date), "MMMM dd, yyyy")}
+              </p>
+            )}
+            {frontmatter?.updated && (
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                {"Last updated: "}
+                {frontmatter?.updated &&
+                  format(parseISO(frontmatter?.updated), "MMMM dd, yyyy")}
+              </p>
+            )}
+          </div>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400 min-w-32 md:mt-0">
+            {frontmatter?.readTime && frontmatter.readTime.text}
+          </p>
+        </div>
+        <div className="w-full mt-4 prose dark:prose-dark max-w-none">
+          {body && <MarkdownView content={body} />}
         </div>
-	)
+      </article>
+    </div>
+  );
 }

content/blog-cache.json

@@ -1 +1 @@
-[{"attributes":{"meta":{"title":"Hello World","description":"Isn't this awesome?"},"date":"2022-08-02T00:00:00","excerpt":"Hello","headers":{"Cache-Control":"no-cache"}},"body":"Hello...","url":"/blog/hello-world"},{"attributes":{"meta":{"title":"Another Post","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"Hello Gaseous cloud......","url":"/blog/another-post"},{"attributes":{"meta":{"title":"ABC","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"Hello Gaseous cloud......","url":"/blog/hello-world/abc"},{"attributes":{"meta":{"title":"A test","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"More Testin","headers":{"Cache-Control":"no-cache"}},"body":"More Testin...","url":"/blog/2022/test"},{"attributes":{"meta":{"title":"More Hello","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"Hello Gaseous cloud......","url":"/blog/hello-world/more-hello"}]
+[{"attributes":{"meta":{"title":"Hello World","description":"Isn't this awesome?"},"date":"2022-08-02T00:00:00","excerpt":"Hello","headers":{"Cache-Control":"no-cache"}},"body":"...","url":"/blog/hello-world"},{"attributes":{"meta":{"title":"Another Post","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"...","url":"/blog/another-post"},{"attributes":{"meta":{"title":"ABC","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"...","url":"/blog/hello-world/abc"},{"attributes":{"meta":{"title":"A test","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"More Testin","headers":{"Cache-Control":"no-cache"}},"body":"...","url":"/blog/2022/test"},{"attributes":{"meta":{"title":"More Hello","description":"Isn't this awesome?"},"date":"2021-10-02T00:00:00","excerpt":"Hello Gaseous cloud...","headers":{"Cache-Control":"no-cache"}},"body":"...","url":"/blog/hello-world/more-hello"}]

content/docs-cache.json

@@ -0,0 +1,65 @@
+---
+sidebar_position: 1
+title: Overview
+pagination_next: k8s/index
+---
+
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+import RandomGoSdkExample from "/examples/go-sdk/http-random.mdx";
+import RandomJavascriptSdkExample from "/examples/javascript-sdk/http-random.mdx";
+import RandomPythonSdkExample from "/examples/python-sdk/http-random.mdx";
+import RandomRustSdkExample from "/examples/rust-sdk/http-random.mdx";
+
+# Agent SDKs
+
+## Overview
+
+Agent SDKs enable you to embed ngrok directly into your application. They allow
+you to programmatically create ngrok endpoints. You handle connections from
+ngrok's edge 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>
+
+## Supported Languages
+
+| Language   | Docs                                                               | Quickstart                                      | Repository                                                                     | Status |
+| ---------- | ------------------------------------------------------------------ | ----------------------------------------------- | ------------------------------------------------------------------------------ | ------ |
+| Go         | [ngrok-go docs](https://pkg.go.dev/golang.ngrok.com/ngrok)         | [ngrok-go quickstart](/getting-started/go/)     | [github.com/ngrok/ngrok-go](https://github.com/ngrok/ngrok-go)                 | Stable |
+| Rust       | [ngrok-rust docs](https://docs.rs/ngrok/latest/ngrok/)             | [ngrok-rust quickstart](/getting-started/rust/) | [github.com/ngrok/ngrok-rust](https://github.com/ngrok/ngrok-rust)             | Stable |
+| Python     | [ngrok-python docs](https://ngrok.github.io/ngrok-python/)         |                                                 | [github.com/ngrok/ngrok-python](https://github.com/ngrok/ngrok-python)         | Stable |
+| JavaScript | [ngrok-javascript docs](https://ngrok.github.io/ngrok-javascript/) |                                                 | [github.com/ngrok/ngrok-javascript](https://github.com/ngrok/ngrok-javascript) | Stable |
+| Java       |                                                                    |                                                 | [github.com/ngrok/ngrok-java](https://github.com/ngrok/ngrok-java)             | Alpha  |
+
+## When should I use Agent SDKs?
+
+Agent SDKs are often a better fit for your use case over using the [ngrok
+agent](/agent/). This is especially true when running ngrok with
+production apps. Agent SDKs are a better choice if:
+
+- You don't want to manage the lifetime of a separate agent process
+- You don't want to bundle and distribute the ngrok agent
+- The ngrok agent doesn't run on your target platform
+- The ngrok agent's resource requirements are too high for your target platform
+- You want fine-grained programmatic control over the agent's functionality
+
+## Pricing
+
+The agent SDKs are available to all ngrok users at no additional charge. You
+only incur costs if the resources provisioned by the SDKs incur a cost.