Create new docs navigation (#552)

* Create new docs navigation

* Add Guides root page

* Create guides and platform overview pages

* Fix 404 logging issue due to dev server polling

* Cleanup unnecessary function

* Add new Python SDK page

* Fix prev/next buttons. Add links to nav

* Update docs homepage

* Dark mode fixes, update nav

pages/404.tsx

@@ -13,17 +13,24 @@ const REPLACE_PATHNAME = "%%PATHNAME%%";
 export async function getStaticProps() {
   // Matches mdx/rehyppe.mjs
   const highlighter = await shiki.getHighlighter({ theme: "css-variables" });
-  const shikiTokens = await highlighter.codeToThemedTokens(
-    getCode({ pathname: REPLACE_PATHNAME }),
-    "typescript"
-  );
-  const shikiCodeHtml = shiki.renderToHtml(shikiTokens, {
-    elements: {
-      pre: ({ children }) => children,
-      code: ({ children }) => children,
-      line: ({ children }) => `<span>${children}</span>`,
-    },
-  });
+  // This can fail locally
+  let shikiCodeHtml = "";
+  try {
+    const shikiTokens = await highlighter.codeToThemedTokens(
+      getCode({ pathname: REPLACE_PATHNAME }),
+      "typescript"
+    );
+    shikiCodeHtml = shiki.renderToHtml(shikiTokens, {
+      elements: {
+        pre: ({ children }) => children,
+        code: ({ children }) => children,
+        line: ({ children }) => `<span>${children}</span>`,
+      },
+    });
+  } catch (e) {
+    // If it fails, just leave it blank
+  }
+
   return {
     props: {
       designVersion: "2",
@@ -52,6 +59,9 @@ export default function Custom404({ shikiCodeHtml }) {
   const pathname = router.asPath;
   const isDocs = pathname.match(/^\/docs/);
 
+  // For debugging
+  // console.log("404 - Page not found: ", pathname);
+
   const title = `404 - Page not found`;
   const lede = `We've triggered an event and a serverless function is forwarding it to the team as you read this.`;
 

pages/docs/guides/index.mdx

@@ -1,5 +1,59 @@
+import { ResourceGrid, Resource } from 'src/shared/Docs/Resources'
+
 # Guides
 
-Dive into advanced uses for Inngest with our guides:
+Learn how to build with Inngest:
+
+## Patterns
+
+<ResourceGrid cols={3}>
+
+<Resource resource={{
+  href: "/docs/guides/background-jobs",
+  name: "Background jobs",
+  icon: "paper-airplane",
+  description: "Run long-running tasks in the background out of the critical path of a request.",
+  pattern: 0,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/enqueueing-future-jobs",
+  name: "Enqueueing future jobs",
+  icon: "chevron-double-right",
+  description: "Schedule or delay functions to run in the future.",
+  pattern: 1,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/step-parallelism",
+  name: "Parallelize steps",
+  icon: "parallel",
+  description: "Run function steps in parallel to speed up execution.",
+  pattern: 2,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/fan-out-jobs",
+  name: "Fan-out",
+  icon: "arrows-pointing-out",
+  description: "Use events to trigger multiple functions at once.",
+  pattern: 3,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/batching",
+  name: "Batching events",
+  icon: "square-3-stack-3d",
+  description: "Improve efficiency with high-load systems by processing batches of events at once.",
+  pattern: 2,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/scheduled-functions",
+  name: "Scheduled functions",
+  icon: "clock",
+  description: "Run functions periodically on a cron schedule.",
+  pattern: 1,
+}}/>
 
-- [Trigger your code directly from Retool](/docs/guides/trigger-your-code-from-retool)
+</ResourceGrid>

pages/docs/index.mdx

@@ -1,99 +1,94 @@
+import { CodeBracketSquareIcon } from "@heroicons/react/20/solid"
+import { Home } from 'src/shared/Docs/Home'
 import { Guides } from 'src/shared/Docs/Guides'
-import { Resources } from 'src/shared/Docs/Resources'
+import { ResourceGrid, Resource } from 'src/shared/Docs/Resources'
+import { GuideGrid, Guide } from 'src/shared/Docs/Guides'
 import { HeroPattern } from 'src/shared/Docs/HeroPattern'
+import EventIcon from 'src/shared/Icons/Event'
+import StepsIcon from 'src/shared/Icons/Steps'
 
 export const pageTitle = 'Inngest Documentation & Guides'
 export const description =
   'Learn how to use Inngest to deploy reliable background functions to any platform.'
 
-{/*export const sections = [
-   { title: 'Guides', id: 'guides' },
-  { title: 'Resources', id: 'resources' },
-]*/}
+{/* <HeroPattern/> TODO - Add cool header graphic*/}
 
-# Introduction to Inngest
+<Home/>
 
-Inngest is an open source platform that adds superpowers to serverless functions. {{ className: 'lead' }}
+## Getting Started
 
-Using our SDK, a single line of code adds retries, queues, sleeps, cron schedules, fan-out jobs, and reliable steps to serverless functions in your existing projects. It's deployable to any platform, without any infrastructure or configuration. And, everything is locally testable via our UI.
-
-Learn how to get started:
+Discover how to get set up with Inngest in just a few minutes:
 
 <div className="not-prose mb-16 mt-6 flex gap-3">
-  <Button size="sm" href="/docs/quick-start" arrow="right">Quick start tutorial</Button>
-  {/* <Button size="sm" href="/sdks" variant="secondary">Second Action</Button> */}
+  <Button  href="/docs/quick-start" arrow="right">Quick start tutorial</Button>
 </div>
 
-## A small but powerful example {{ anchor: false }}
-
-Adding sleeps, retries, and reliable steps to a function:
-
-<CodeGroup>
-```ts
-import { EventSchemas, Inngest } from "inngest";
-
-type Events = {
-  "user/new.signup": {
-    data: {
-      email: string;
-      name: string;
-    };
-  };
-};
-
-const inngest = new Inngest({
-  id: "nextjs-shop",
-  schemas: new EventSchemas().fromRecord<Events>(),
-});
-
-export default inngest.createFunction(
-  { id: "signup-flow" },        // Function options
-  { event: "user/new.signup" }, // One or more events that trigger this function
-  async ({ event, step }) => {
-    // ⚡ If this step fails it will retry automatically. It will only run once
-    // if it succeeds
-    const promo = await step.run("generate-promo-code", async () => {
-      const promoCode = await generatePromoCode();
-      return promoCode.code;
-    });
-
-    // ⚡ Again, if the email provider is down this will retry - but we will
-    // only generate one promo code
-    await step.run("send-a-welcome-promo", () =>
-      sendEmail({ email: event.data, promo })
-    );
-
-    // 😴 You can sleep on any platform!
-    await step.sleep("wait-before-followup", "1 day");
-
-    // ⏰ This runs exactly 1 day after the user signs up
-    await step.run("send-drip-campaign", () => sendDripCampaign());
-  }
-);
-```
-</CodeGroup>
-
-In this example, you can reliably run serverless functions even if external APIs are down. You can also sleep or delay work without configuring queues. Plus, all events, jobs, and functions are strictly typed via TypeScript for maximum correctness.
-Here's how things look when you run locally:
-
-<img
-  src="/assets/docs/dev-server-overview-stream.jpg"
-  className="rounded-md"
-/>
-<img
-  src="/assets/docs/dev-server-overview-stream-details.jpg"
-  className="rounded-md"
-/>
-
-### Comparisons
-
-Without Inngest, you would have to configure several jobs amongst several different queues, then handle retries yourself. There's also a chance that many promo codes are generated depending on the reliability of that API. With Inngest, you can push this function live and everything happens automatically.
-
-{/* <Guides />
-
-<Resources /> */}
-
-
-### Resources and help
-
-If you have any questions we're always around in our [Discord community](https://www.inngest.com/discord) or on [GitHub](https://github.com/inngest/inngest).
+## Introduction to Inngest
+
+Inngest as a durable workflow engine that enables you to run reliable code on any platform, including serverless.
+
+With any Inngest SDK, you write <CodeBracketSquareIcon className="h-4 inline" style={{ marginTop: "-2px" }}/> **Functions** in your codebase and make them available to Inngest using an HTTP endpoint. Functions are triggered by <EventIcon className="inline" style={{ marginTop: "-2px" }}/> **Events** which can be sent with our SDKs, via a regular POST request, or can come from an external source such as webhooks.
+
+Functions are composed of <StepsIcon className="h-4 inline" style={{ marginTop: "-2px" }}/> **Steps**, which decouple parts of your functions into individually retriable blocks. Steps enable yuo to write complex, durable, long-lived workflows, _event on serverless_, in a single function.
+
+## Guides
+
+<ResourceGrid cols={3}>
+
+<Resource resource={{
+  href: "/docs/guides/background-jobs",
+  name: "Background jobs",
+  icon: "paper-airplane",
+  description: "Run long-running tasks in the background out of the critical path of a request.",
+  pattern: 0,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/enqueueing-future-jobs",
+  name: "Enqueueing future jobs",
+  icon: "chevron-double-right",
+  description: "Schedule or delay functions to run in the future.",
+  pattern: 1,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/step-parallelism",
+  name: "Parallelize steps",
+  icon: "parallel",
+  description: "Run function steps in parallel to speed up execution.",
+  pattern: 2,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/fan-out-jobs",
+  name: "Fan-out",
+  icon: "arrows-pointing-out",
+  description: "Use events to trigger multiple functions at once.",
+  pattern: 3,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/batching",
+  name: "Batching events",
+  icon: "square-3-stack-3d",
+  description: "Improve efficiency with high-load systems by processing batches of events at once.",
+  pattern: 2,
+}}/>
+
+<Resource resource={{
+  href: "/docs/guides/scheduled-functions",
+  name: "Scheduled functions",
+  icon: "clock",
+  description: "Run functions periodically on a cron schedule.",
+  pattern: 1,
+}}/>
+
+</ResourceGrid>
+
+## Support
+
+If you need help with Inngest, you can reach out to us in the following ways:
+
+* [Open a ticket in our support center](https://app.inngest.com/support)
+* [Ask your questions in our Discord community](/discord)
+* [Contact our sales engineering team](/contact?ref=docs)

pages/docs/platform/index.mdx

@@ -0,0 +1,27 @@
+import { GuideGrid, Guide } from 'src/shared/Docs/Guides'
+
+# Platform Guides
+
+Learn how to use the Inngest platform
+
+<GuideGrid cols={4}>
+
+  <Guide
+    href="/docs/deploy"
+    name="How to deploy"
+    description="Register your app and functions with the Inngest platform"
+  />
+
+  <Guide
+    href="/docs/platform/environments"
+    name="Working with environments"
+    description="How to use production, branch and local environments"
+  />
+
+  <Guide
+    href="/docs/events/creating-an-event-key"
+    name="Creating an event key"
+    description="Used to send events to your environment"
+  />
+
+</GuideGrid>

pages/docs/reference/python/index.mdx

@@ -0,0 +1,7 @@
+import GithubIcon from "shared/Icons/Github"
+
+# Python SDK
+
+_Docs coming soon!_ For now, check out the Github repo README for basic info: [<GithubIcon className="ml-2 inline-flex"/> inngest/inngest-py](https://github.com/inngest/inngest-py).
+
+During the beta phase, please share feedback or report issues on [Discord](https://www.inngest.com/discord) or [Github](https://github.com/inngest/inngest-py/issues)

pages/docs/reference/rest-api/index.mdx

@@ -0,0 +1,5 @@
+# REST API
+
+Our API is currently in development. We will be releasing new endpoints as they are ready.
+
+If you have any feedback or suggestions, please send it via [the form on our roadmap here](https://roadmap.inngest.com/).

pages/docs/reference/typescript/index.mdx

@@ -0,0 +1,24 @@
+import GithubIcon from "shared/Icons/Github"
+
+# TypeScript SDK
+
+## Installing
+
+<CodeGroup>
+```shell {{ title: "npm" }}
+npm install inngest
+```
+```shell {{ title: "pnpm" }}
+pnpm add inngest
+```
+```shell {{ title: "yarn" }}
+yarn add inngest
+```
+</CodeGroup>
+
+## Source code
+
+Our TypeScript SDK is open source and available on Github: [<GithubIcon className="ml-2 inline-flex"/> inngest/inngest-js](https://github.com/inngest/inngest-js).
+
+
+{/* example repos */}