Skip to content

Commit 668b34d

Browse files
D-K-PD-K-P
authored
Adding example projects (#1564)
* Added new side menu section and updated intro * Updated the fal ai realtime project * Copy update * Added example project * Swapped walkthrough and repo * Restore original fal task page * Added links back to the intro
1 parent 6a2d033 commit 668b34d

File tree

4 files changed

+79
-52
lines changed

4 files changed

+79
-52
lines changed

‎docs/guides/example-projects/realtime-fal-ai.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
3+
sidebarTitle: "Realtime image gen with Fal.ai"
4+
description: "This example project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime."
5+
---
6+
7+
## Overview
8+
9+
This full stack Next.js project showcases the following:
10+
11+
- A Trigger.dev task which [generates an image from a prompt using Fal.ai](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts)
12+
- When a [form is submitted](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/page.tsx) in the UI, triggering the task using a [server action](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/actions/process-image.ts)
13+
- Showing the [progress of the task](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/processing/%5Bid%5D/ProcessingContent.tsx) on the frontend using Trigger.dev Realtime. This also includes error handling and a fallback UI
14+
- Once the task is completed, showing the generated image on the frontend next to the original image
15+
16+
## GitHub repo
17+
18+
<Card
19+
title="View the project on GitHub"
20+
icon="GitHub"
21+
href="https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation"
22+
>
23+
Click here to view the full code for this project in our examples repository on GitHub. You can
24+
fork it and use it as a starting point for your own project.
25+
</Card>
26+
27+
## Walkthrough video
28+
29+
This video walks through the process of creating this task in a Next.js project.
30+
31+
<div className="w-full h-full aspect-video mb-3">
32+
<iframe
33+
width="100%"
34+
height="100%"
35+
src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4"
36+
title="Trigger.dev walkthrough"
37+
frameborder="0"
38+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
39+
referrerpolicy="strict-origin-when-cross-origin"
40+
allowfullscreen
41+
/>
42+
</div>

‎docs/guides/examples/fal-ai-realtime.mdx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,16 @@ description: "This example task generates an image from a prompt using Fal.ai an
99
This video walks through the process of creating this task in a Next.js project.
1010

1111
<div className="w-full h-full aspect-video mb-3">
12-
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4" title="Trigger.dev walkthrough" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen/>
12+
<iframe
13+
width="100%"
14+
height="100%"
15+
src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4"
16+
title="Trigger.dev walkthrough"
17+
frameborder="0"
18+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
19+
referrerpolicy="strict-origin-when-cross-origin"
20+
allowfullscreen
21+
/>
1322
</div>
1423

1524
## Prerequisites
@@ -20,7 +29,7 @@ This video walks through the process of creating this task in a Next.js project.
2029

2130
## Task code
2231

23-
This task converts an image to a cartoon using fal AI, and uploads the result to Cloudflare R2.
32+
This task generates an image from a prompt using Fal.ai.
2433

2534
```ts trigger/fal-ai-image-from-prompt-realtime.ts
2635
import * as fal from "@fal-ai/serverless-client";

‎docs/guides/introduction.mdx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,17 @@ Get set up fast using our detailed walk-through guides.
3333
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
3434
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
3535

36+
## Example projects
37+
38+
Example projects are full projects with example repos you can fork and use. These are a great way of learning how to encorporate Trigger.dev into your project.
39+
40+
| Example project | Description | Framework | GitHub Repo |
41+
| :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
42+
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
43+
3644
## Example tasks
3745

38-
Tasks you can copy and paste to get started with Trigger.dev. They can all be extended and customized to fit your needs.
46+
Task code you can copy and paste to use in your project. They can all be extended and customized to fit your needs.
3947

4048
| Example task | Description |
4149
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |

‎docs/mint.json

Lines changed: 17 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
{
22
"$schema": "https://mintlify.com/schema.json",
33
"name": "Trigger.dev",
4-
"openapi": [
5-
"/openapi.yml",
6-
"/v3-openapi.yaml"
7-
],
4+
"openapi": ["/openapi.yml", "/v3-openapi.yaml"],
85
"api": {
96
"playground": {
107
"mode": "simple"
@@ -140,30 +137,20 @@
140137
"pages": [
141138
{
142139
"group": "Tasks",
143-
"pages": [
144-
"tasks/overview",
145-
"tasks/schemaTask",
146-
"tasks/scheduled"
147-
]
140+
"pages": ["tasks/overview", "tasks/schemaTask", "tasks/scheduled"]
148141
},
149142
"triggering",
150143
"runs",
151144
"apikeys",
152145
{
153146
"group": "Configuration",
154-
"pages": [
155-
"config/config-file",
156-
"config/extensions/overview"
157-
]
147+
"pages": ["config/config-file", "config/extensions/overview"]
158148
}
159149
]
160150
},
161151
{
162152
"group": "Development",
163-
"pages": [
164-
"cli-dev",
165-
"run-tests"
166-
]
153+
"pages": ["cli-dev", "run-tests"]
167154
},
168155
{
169156
"group": "Deployment",
@@ -173,9 +160,7 @@
173160
"github-actions",
174161
{
175162
"group": "Deployment integrations",
176-
"pages": [
177-
"vercel-integration"
178-
]
163+
"pages": ["vercel-integration"]
179164
}
180165
]
181166
},
@@ -187,13 +172,7 @@
187172
"errors-retrying",
188173
{
189174
"group": "Wait",
190-
"pages": [
191-
"wait",
192-
"wait-for",
193-
"wait-until",
194-
"wait-for-event",
195-
"wait-for-request"
196-
]
175+
"pages": ["wait", "wait-for", "wait-until", "wait-for-event", "wait-for-request"]
197176
},
198177
"queue-concurrency",
199178
"versioning",
@@ -238,10 +217,7 @@
238217
"management/overview",
239218
{
240219
"group": "Tasks API",
241-
"pages": [
242-
"management/tasks/trigger",
243-
"management/tasks/batch-trigger"
244-
]
220+
"pages": ["management/tasks/trigger", "management/tasks/batch-trigger"]
245221
},
246222
{
247223
"group": "Runs API",
@@ -280,9 +256,7 @@
280256
},
281257
{
282258
"group": "Projects API",
283-
"pages": [
284-
"management/projects/runs"
285-
]
259+
"pages": ["management/projects/runs"]
286260
}
287261
]
288262
},
@@ -328,17 +302,11 @@
328302
},
329303
{
330304
"group": "Help",
331-
"pages": [
332-
"community",
333-
"help-slack",
334-
"help-email"
335-
]
305+
"pages": ["community", "help-slack", "help-email"]
336306
},
337307
{
338308
"group": "",
339-
"pages": [
340-
"guides/introduction"
341-
]
309+
"pages": ["guides/introduction"]
342310
},
343311
{
344312
"group": "Frameworks",
@@ -378,6 +346,10 @@
378346
}
379347
]
380348
},
349+
{
350+
"group": "Example projects",
351+
"pages": ["guides/example-projects/realtime-fal-ai"]
352+
},
381353
{
382354
"group": "Example tasks",
383355
"pages": [
@@ -404,20 +376,16 @@
404376
},
405377
{
406378
"group": "Dashboard",
407-
"pages": [
408-
"guides/dashboard/creating-a-project"
409-
]
379+
"pages": ["guides/dashboard/creating-a-project"]
410380
},
411381
{
412382
"group": "Migrations",
413-
"pages": [
414-
"guides/use-cases/upgrading-from-v2"
415-
]
383+
"pages": ["guides/use-cases/upgrading-from-v2"]
416384
}
417385
],
418386
"footerSocials": {
419387
"twitter": "https://twitter.com/triggerdotdev",
420388
"github": "https://github.com/triggerdotdev",
421389
"linkedin": "https://www.linkedin.com/company/triggerdotdev"
422390
}
423-
}
391+
}

0 commit comments

Comments
 (0)