Skip to content

Commit

Permalink
Update docs homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
djfarrelly committed Nov 1, 2023
1 parent e78861a commit a8d3b19
Show file tree
Hide file tree
Showing 13 changed files with 235 additions and 183 deletions.
2 changes: 1 addition & 1 deletion pages/docs/guides/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Learn how to build with Inngest:

<Resource resource={{
href: "/docs/guides/step-parallelism",
name: "Step parallelism",
name: "Parallelize steps",
icon: "parallel",
description: "Run function steps in parallel to speed up execution.",
pattern: 2,
Expand Down
165 changes: 80 additions & 85 deletions pages/docs/index.mdx
Original file line number Diff line number Diff line change
@@ -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)
33 changes: 16 additions & 17 deletions pages/docs/sdk/overview.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# SDK Overview
# Installing the SDK

The Inngest SDK allows you to write reliable, durable functions in your existing projects incrementally. Functions can be automatically triggered by events or run on a schedule without infrastructure, and can be fully serverless or added to your existing HTTP server.
The Inngest SDK allows you to write reliable, durable functions in your existing projects incrementally. Functions can be automatically triggered by events or run on a schedule without infrastructure, and can be fully serverless or added to your existing HTTP server.

- It works with any framework and platform by using HTTP to call your functions
- It supports serverless providers, without any additional infrastructure
Expand All @@ -9,23 +9,22 @@ The Inngest SDK allows you to write reliable, durable functions in your existing

## Getting started

To get started, install the SDK via npm or Yarn:
To get started, install the SDK via your favorite package manager:

```bash
npm install inngest # or yarn add inngest
<CodeGroup>
```shell {{ title: "npm" }}
npm install inngest
```
```shell {{ title: "pnpm" }}
pnpm add inngest
```
```shell {{ title: "yarn" }}
yarn add inngest
```
</CodeGroup>

Youll need to do a few things to get set up, which will only take a few minutes.
You'll need to do a few things to get set up, which will only take a few minutes.

1. [Set up and serve the Inngest API](/docs/sdk/serve)
1. [Set up and serve the Inngest API for your framework](/docs/sdk/serve)
2. [Define and write your functions](/docs/functions)
3. [Trigger functions with events](/docs/events)

<>
{/*
TODO:
You can skip straight to serving the Inngest API, or read on to learn how the SDK works.
## How the SDK works
*/}
</>
3. [Trigger functions with events](/docs/events)
13 changes: 13 additions & 0 deletions public/assets/textures/wave-gray.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions shared/Docs/Home.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import Link from "next/link";
import { BoltIcon } from "@heroicons/react/24/outline";
import Logo from "../Icons/Logo";

export function Home() {
return (
<header className="max-w-none pt-24 pb-16 md:py-24 px-8 sm:px-10 lg:px-16 bg-white rounded-lg border border-slate-900/7.5 bg-[url(/assets/textures/wave-gray.svg)] bg-cover">
<h1>Inngest Documentation</h1>
<p className="mb-0 font-medium text-slate-500">
Learn how to build with Inngest's durable workflow engine.
</p>
</header>
);
}
1 change: 1 addition & 0 deletions shared/Docs/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { motion } from "framer-motion";

import * as mdxComponents from "src/shared/Docs/mdx";
import { Footer } from "./Footer";
import { Home } from "./Home";
import { Header } from "./Header";
import Logo from "../Icons/Logo";
import { Navigation } from "./Navigation";
Expand Down
6 changes: 5 additions & 1 deletion shared/Docs/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,11 @@ function NavigationGroup({ group, className = "" }) {
<ul role="list" className="border-l border-transparent">
{group.links.map((link) => (
<motion.li key={link.href} layout="position" className="relative">
<NavLink href={link.href} active={link.href === router.pathname}>
<NavLink
href={link.href}
active={link.href === router.pathname}
className={link.className}
>
{link.title}
</NavLink>
<AnimatePresence mode="popLayout" initial={false}>
Expand Down
56 changes: 33 additions & 23 deletions shared/Docs/navigationStructure.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const sectionGettingStarted = [
{
title: "Learn the basics",
links: [
{ title: "SDK Overview", href: `/docs/sdk/overview` },
{ title: "Installing the SDK", href: `/docs/sdk/overview` },
{ title: "Serving the API & Frameworks", href: `/docs/sdk/serve` },
{ title: "Writing Functions", href: `/docs/functions` },
{ title: "Sending Events", href: `/docs/events` },
Expand Down Expand Up @@ -74,7 +74,7 @@ const sectionGuides = [
href: `/docs/guides/enqueueing-future-jobs`,
},
{
title: "Step parallelism",
title: "Parallelize steps",
href: `/docs/guides/step-parallelism`,
},
{
Expand Down Expand Up @@ -187,26 +187,6 @@ const sectionTypeScriptReference = [
title: "Create function",
href: `/docs/reference/functions/create`,
},
{
title: "Define steps (step.run)",
href: `/docs/reference/functions/step-run`,
},
{
title: "Sleep",
href: `/docs/reference/functions/step-sleep`,
},
{
title: "Sleep until a time",
href: `/docs/reference/functions/step-sleep-until`,
},
{
title: "Wait for additional events",
href: `/docs/reference/functions/step-wait-for-event`,
},
{
title: "Sending events from functions",
href: `/docs/reference/functions/step-send-event`,
},
{
title: "Error handling & retries",
href: `/docs/functions/retries`,
Expand Down Expand Up @@ -244,6 +224,36 @@ const sectionTypeScriptReference = [
// },
],
},
{
title: "Steps",
links: [
{
title: "step.run()",
href: `/docs/reference/functions/step-run`,
className: "font-mono",
},
{
title: "step.sleep()",
href: `/docs/reference/functions/step-sleep`,
className: "font-mono",
},
{
title: "step.sleepUntil()",
href: `/docs/reference/functions/step-sleep-until`,
className: "font-mono",
},
{
title: "step.waitForEvent()",
href: `/docs/reference/functions/step-wait-for-event`,
className: "font-mono",
},
{
title: "step.sendEvent()",
href: `/docs/reference/functions/step-send-event`,
className: "font-mono",
},
],
},
{
title: "Events",
links: [
Expand Down Expand Up @@ -383,7 +393,7 @@ export const topLevelNav = [
{
title: "Support Center",
icon: LifebuoyIcon,
href: "https://app.inngest.com.support",
href: "https://app.inngest.com/support",
},
],
},
Expand Down
Loading

0 comments on commit a8d3b19

Please sign in to comment.