Handlers page

src/app/[...slug]/page.tsx

@@ -1,5 +1,5 @@
 import { DocsLayout } from "@/components/DocsLayout";
-import { getAllContent, getContentBySlug } from "@/lib/content";
+import { getAllContent, getSlugContent } from "@/lib/content";
 import { compileMdx } from "@/lib/markdown/mdx";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -8,13 +8,16 @@ interface ArticleFrontMatter {
   title: string;
 }
 
+const sourceDir = "docs";
+
 export async function generateMetadata({
   params,
 }: {
   params: { slug: string[] };
 }): Promise<Metadata> {
-  const result = await getContentBySlug<ArticleFrontMatter>({
+  const result = await getSlugContent<ArticleFrontMatter>({
     slug: params.slug,
+    sourceDir,
   });
   if (!result) {
     return {};
@@ -27,8 +30,9 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params }: { params: { slug: string[] } }) {
-  const result = await getContentBySlug<ArticleFrontMatter>({
+  const result = await getSlugContent<ArticleFrontMatter>({
     slug: params.slug,
+    sourceDir,
   });
   if (!result) {
     return notFound();

src/app/handlers/[...slug]/page.tsx

@@ -0,0 +1,55 @@
+import { DocsLayout } from "@/components/DocsLayout";
+import { getAllContent, getSlugContent } from "@/lib/content";
+import { compileMdx } from "@/lib/markdown/mdx";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+interface ArticleFrontMatter {
+  title: string;
+}
+
+const sourceDir = "docs/handlers";
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string[] };
+}): Promise<Metadata> {
+  const result = await getSlugContent<ArticleFrontMatter>({
+    slug: params.slug,
+    sourceDir,
+  });
+
+  if (!result) {
+    return {};
+  }
+
+  const { data } = result;
+  return {
+    title: data.title,
+  };
+}
+
+export default async function Page({ params }: { params: { slug: string[] } }) {
+  const result = await getSlugContent<ArticleFrontMatter>({
+    slug: params.slug,
+    sourceDir,
+  });
+  if (!result) {
+    return notFound();
+  }
+  const { data, source } = result;
+  const { content, toc } = await compileMdx(source);
+
+  return (
+    <DocsLayout frontmatter={data} sections={toc}>
+      {content}
+    </DocsLayout>
+  );
+}
+
+export async function generateStaticParams() {
+  const posts = await getAllContent();
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}

src/app/handlers/page.tsx

@@ -0,0 +1,55 @@
+import { Metadata } from "next";
+import Link from "next/link";
+import { DocsHeader } from "../../components/DocsHeader";
+import { DocsContainer } from "@/components/DocsContainer";
+import { Prose } from "@/components/Prose";
+import { Card } from "@/components/Card";
+import handlers from "@/data/handlers";
+
+export const metadata: Metadata = {
+  title: "Handlers",
+};
+
+export default async function Page() {
+  return (
+    <DocsContainer className="w-full flex-col px-1 pb-[60px] md:px-8">
+      <DocsHeader title="Handlers" />
+      <Prose>
+        <p>
+          Handlers are the core of the Zuplo API gateway. Handlers are
+          responsible for streaming a response from your downstream API or a
+          place where you can write custom code for any scenario.
+        </p>
+        <p>
+          Handlers are in the middle of the request lifecycle of Zuplo between
+          inbound and outbound{" "}
+          <Link
+            href="docs/policies/"
+            className="text-pink underline transition-colors hover:text-pink-hover"
+          >
+            policies
+          </Link>{" "}
+          .
+        </p>
+      </Prose>
+      <p>
+        Zuplo comes with several built-in handlers as well as the ability to
+        write your own with a custom module.
+      </p>
+
+      <div
+        role="list"
+        className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        {handlers.map((item) => (
+          <Card
+            key={item.id}
+            name={item.name}
+            href={item.href}
+            icon={item.icon}
+          />
+        ))}
+      </div>
+    </DocsContainer>
+  );
+}

src/app/policies/page.tsx

@@ -4,7 +4,7 @@ import { DocsHeader } from "../../components/DocsHeader";
 import { getAllPolicies } from "../../lib/policies";
 import { DocsContainer } from "@/components/DocsContainer";
 import { Prose } from "@/components/Prose";
-import { PolicyCard } from "@/components/PolicyCard";
+import { Card } from "@/components/Card";
 
 export const metadata: Metadata = {
   title: "Policies",
@@ -53,7 +53,7 @@ export default async function Page() {
         className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
       >
         {policies.map((item) => (
-          <PolicyCard
+          <Card
             key={item.meta.id}
             name={item.meta.name}
             href={item.meta.href}

src/components/PolicyCard.tsx → src/components/Card.tsx

@@ -6,7 +6,7 @@ interface Props {
   icon: string;
 }
 
-export const PolicyCard: React.FC<Props> = ({ name, href, icon }) => {
+export const Card: React.FC<Props> = ({ name, href, icon }) => {
   return (
     <Link
       href={href}

src/data/handlers.ts

@@ -3,31 +3,31 @@ const handlers = [
     id: "url-forward",
     name: "URL Forward",
     icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZmFzdC1mb3J3YXJkIj48cG9seWdvbiBwb2ludHM9IjEzIDE5IDIyIDEyIDEzIDUgMTMgMTkiPjwvcG9seWdvbj48cG9seWdvbiBwb2ludHM9IjIgMTkgMTEgMTIgMiA1IDIgMTkiPjwvcG9seWdvbj48L3N2Zz4=",
-    href: "/docs/handlers/url-forward",
+    href: "/handlers/url-forward",
   },
   {
     id: "url-rewrite",
     name: "URL Rewrite",
     icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE1LjIzMiA1LjIzMmwzLjUzNiAzLjUzNm0tMi4wMzYtNS4wMzZhMi41IDIuNSAwIDExMy41MzYgMy41MzZMNi41IDIxLjAzNkgzdi0zLjU3MkwxNi43MzIgMy43MzJ6IiAvPjwvc3ZnPg==",
-    href: "/docs/handlers/url-rewrite",
+    href: "/handlers/url-rewrite",
   },
   {
     id: "custom-handler",
     name: "Custom Handler",
     icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY29kZSI+PHBvbHlsaW5lIHBvaW50cz0iMTYgMTggMjIgMTIgMTYgNiI+PC9wb2x5bGluZT48cG9seWxpbmUgcG9pbnRzPSI4IDYgMiAxMiA4IDE4Ij48L3BvbHlsaW5lPjwvc3ZnPg==",
-    href: "/docs/handlers/custom-handler",
+    href: "/handlers/custom-handler",
   },
   {
     id: "redirect",
     name: "URL Redirect",
     icon: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY29ybmVyLXVwLWxlZnQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTQgNCA5IDkgNCI+PC9wb2x5bGluZT48cGF0aCBkPSJNMjAgMjB2LTdhNCA0IDAgMCAwLTQtNEg0Ij48L3BhdGg+PC9zdmc+",
-    href: "/docs/handlers/redirect",
+    href: "/handlers/redirect",
   },
   {
     id: "aws-lambda",
     name: "AWS Lambda",
     icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyIiBoZWlnaHQ9IjE5MiIgdmlld0JveD0iMCAwIDE5MiAxOTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE4NC40MzkgMTkySDEzNy4xMzJDMTM2LjQxIDE5MS45OTUgMTM1LjcwNCAxOTEuNzg4IDEzNS4wOTUgMTkxLjQwMUMxMzQuNDg1IDE5MS4wMTUgMTMzLjk5NiAxOTAuNDY1IDEzMy42ODQgMTg5LjgxNEw2Ni43OTgyIDQ5LjkzNThIMzguNDkzMkMzNy40NzE1IDQ5LjkzNTggMzYuNDkxNiA0OS41Mjk5IDM1Ljc2OTIgNDguODA3NUMzNS4wNDY3IDQ4LjA4NSAzNC42NDA5IDQ3LjEwNTIgMzQuNjQwOSA0Ni4wODM1VjMuODUyMzNDMzQuNjQwOSAyLjgzMDYzIDM1LjA0NjcgMS44NTA3NyAzNS43NjkyIDEuMTI4MzJDMzYuNDkxNiAwLjQwNTg2NiAzNy40NzE1IDAgMzguNDkzMiAwSDk3LjU4NzlDOTguMzE0IDAuMDAyMDU1NDggOTkuMDI0NyAwLjIwOTI4MSA5OS42MzgyIDAuNTk3Nzg5QzEwMC4yNTIgMC45ODYyOTggMTAwLjc0MyAxLjU0MDI3IDEwMS4wNTUgMi4xOTU4M0wxNjcuNjE0IDE0Mi4wNjRIMTg0LjQzOUMxODUuNDYgMTQyLjA2NCAxODYuNDQgMTQyLjQ3IDE4Ny4xNjMgMTQzLjE5M0MxODcuODg1IDE0My45MTUgMTg4LjI5MSAxNDQuODk1IDE4OC4yOTEgMTQ1LjkxN1YxODguMTQ4QzE4OC4yOTEgMTg5LjE2OSAxODcuODg1IDE5MC4xNDkgMTg3LjE2MyAxOTAuODcyQzE4Ni40NCAxOTEuNTk0IDE4NS40NiAxOTIgMTg0LjQzOSAxOTJaTTEzOS41NTkgMTg0LjI5NUgxODAuNTk2VjE0OS43NTlIMTY1LjE4N0MxNjQuNDYyIDE0OS43NTggMTYzLjc1MSAxNDkuNTUyIDE2My4xMzggMTQ5LjE2NkMxNjIuNTI1IDE0OC43NzkgMTYyLjAzMyAxNDguMjI3IDE2MS43MiAxNDcuNTczTDk1LjE2MDkgNy43MDQ2NUg0Mi4zNjQ4VjQyLjI2SDY5LjI0NDRDNjkuOTY4NCA0Mi4yNjAzIDcwLjY3NzcgNDIuNDY0NyA3MS4yOTEgNDIuODQ5N0M3MS45MDQyIDQzLjIzNDYgNzIuMzk2NSA0My43ODQ2IDcyLjcxMTUgNDQuNDM2NkwxMzkuNTU5IDE4NC4yOTVaIiBmaWxsPSJibGFjayIvPjxwYXRoIGQ9Ik01Ny42NTg1IDE5Mkg3LjgwOTM4QzcuMTY3MTMgMTkxLjk5MyA2LjUzNjg2IDE5MS44MjUgNS45NzU5MSAxOTEuNTEyQzUuNDE0OTYgMTkxLjE5OSA0Ljk0MTE0IDE5MC43NTEgNC41OTc1NSAxOTAuMjA5QzQuMjUzOTUgMTg5LjY2NiA0LjA1MTUgMTg5LjA0NiA0LjAwODYgMTg4LjQwNUMzLjk2NTcgMTg3Ljc2NCA0LjA4MzcyIDE4Ny4xMjMgNC4zNTE5MiAxODYuNTM5TDU2LjQ5MzIgNzcuMjk2OUM1Ni44MDYxIDc2LjY0NDYgNTcuMjk2MyA3Ni4wOTM2IDU3LjkwNzggNzUuNzA3QzU4LjUxOTIgNzUuMzIwNCA1OS4yMjcyIDc1LjExMzcgNTkuOTUwNiA3NS4xMTA3QzYwLjY2MiA3NS4xMTI5IDYxLjM1ODkgNzUuMzEyIDYxLjk2NDEgNzUuNjg2QzYyLjU2OTMgNzYuMDU5OSA2My4wNTkxIDc2LjU5NDIgNjMuMzc5MiA3Ny4yMjk1TDg4LjQxOTMgMTI4LjgwM0M4OC42NjczIDEyOS4zMjEgODguNzk2IDEyOS44ODkgODguNzk2IDEzMC40NjRDODguNzk2IDEzMS4wMzkgODguNjY3MyAxMzEuNjA2IDg4LjQxOTMgMTMyLjEyNUw2MS4xMjU2IDE4OS44MDRDNjAuODEzNCAxOTAuNDYgNjAuMzIyMiAxOTEuMDE0IDU5LjcwODggMTkxLjQwMkM1OS4wOTU0IDE5MS43OTEgNTguMzg0NiAxOTEuOTk4IDU3LjY1ODUgMTkyWk0xMy45MDU3IDE4NC4yOTVINTUuMjMxNUw4MC43MTQ3IDEzMC40OThMNTkuOTk4OCA4Ny43NjU2TDEzLjkwNTcgMTg0LjI5NVoiIGZpbGw9ImJsYWNrIi8+PC9zdmc+Cg==",
-    href: "/docs/handlers/aws-lambda",
+    href: "/handlers/aws-lambda",
   },
 ];
 

src/lib/content.ts

@@ -18,13 +18,15 @@ export interface Content<Data = Record<string, any>> {
   slug: string[];
 }
 
-export async function getContentBySlug<Data = Record<string, any>>({
+export async function getSlugContent<Data = Record<string, any>>({
   slug,
+  sourceDir,
 }: {
-  slug: string[];
+  slug: Array<string>;
+  sourceDir: string;
 }): Promise<Content<Data> | undefined> {
   const fileName = `${slug.join("/")}.md`;
-  const filepath = path.join(process.cwd(), "docs", fileName);
+  const filepath = path.join(process.cwd(), sourceDir, fileName);
   if (!existsSync(filepath)) {
     return undefined;
   }