Skip to content

Commit 323a124

Browse files
matt-aitkenmatt-aitken
committed
Merge remote-tracking branch 'origin/main' into queues-page
# Conflicts: # apps/webapp/app/components/SetupCommands.tsx # apps/webapp/app/components/navigation/SideMenu.tsx
2 parents 50593eb + a6e85f0 commit 323a124

11 files changed

Lines changed: 834 additions & 73 deletions

File tree

‎apps/webapp/app/components/ImpersonationBanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1+
import { UserMinusIcon } from "@heroicons/react/20/solid";
12
import { Form } from "@remix-run/react";
2-
import { Paragraph } from "./primitives/Paragraph";
33
import { Button } from "./primitives/Buttons";
4-
import { UserMinusIcon } from "@heroicons/react/20/solid";
54

65
export function ImpersonationBanner() {
76
return (
@@ -13,6 +12,7 @@ export function ImpersonationBanner() {
1312
LeadingIcon={UserMinusIcon}
1413
fullWidth
1514
textAlignLeft
15+
className="text-amber-400"
1616
>
1717
Stop impersonating
1818
</Button>

‎apps/webapp/app/components/SetupCommands.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ClientTabsTrigger,
99
} from "./primitives/ClientTabs";
1010
import { ClipboardField } from "./primitives/ClipboardField";
11+
import { Header3 } from "./primitives/Headers";
1112

1213
type PackageManagerContextType = {
1314
activePackageManager: string;
@@ -59,7 +60,12 @@ function getApiUrlArg() {
5960
return apiUrl ? `-a ${apiUrl}` : undefined;
6061
}
6162

62-
export function InitCommandV3() {
63+
// Add title prop to the component interfaces
64+
type TabsProps = {
65+
title?: string;
66+
};
67+
68+
export function InitCommandV3({ title }: TabsProps) {
6369
const project = useProject();
6470
const projectRef = project.externalRef;
6571
const apiUrlArg = getApiUrlArg();
@@ -75,11 +81,14 @@ export function InitCommandV3() {
7581
value={activePackageManager}
7682
onValueChange={setActivePackageManager}
7783
>
78-
<ClientTabsList>
79-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
80-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
81-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
82-
</ClientTabsList>
84+
<div className="flex items-center gap-4">
85+
{title && <span>{title}</span>}
86+
<ClientTabsList className={title ? "ml-auto" : ""}>
87+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
88+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
89+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
90+
</ClientTabsList>
91+
</div>
8392
<ClientTabsContent value={"npm"}>
8493
<ClipboardField
8594
variant="secondary/medium"
@@ -108,7 +117,7 @@ export function InitCommandV3() {
108117
);
109118
}
110119

111-
export function TriggerDevStepV3() {
120+
export function TriggerDevStepV3({ title }: TabsProps) {
112121
const { activePackageManager, setActivePackageManager } = usePackageManager();
113122

114123
return (
@@ -117,11 +126,14 @@ export function TriggerDevStepV3() {
117126
value={activePackageManager}
118127
onValueChange={setActivePackageManager}
119128
>
120-
<ClientTabsList>
121-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
122-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
123-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
124-
</ClientTabsList>
129+
<div className="flex items-center gap-4">
130+
{title && <Header3>{title}</Header3>}
131+
<ClientTabsList className={title ? "ml-auto" : ""}>
132+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
133+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
134+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
135+
</ClientTabsList>
136+
</div>
125137
<ClientTabsContent value={"npm"}>
126138
<ClipboardField
127139
variant="secondary/medium"
@@ -150,7 +162,7 @@ export function TriggerDevStepV3() {
150162
);
151163
}
152164

153-
export function TriggerLoginStepV3() {
165+
export function TriggerLoginStepV3({ title }: TabsProps) {
154166
const { activePackageManager, setActivePackageManager } = usePackageManager();
155167

156168
return (
@@ -159,11 +171,14 @@ export function TriggerLoginStepV3() {
159171
value={activePackageManager}
160172
onValueChange={setActivePackageManager}
161173
>
162-
<ClientTabsList>
163-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
164-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
165-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
166-
</ClientTabsList>
174+
<div className="flex items-center gap-4">
175+
{title && <span>{title}</span>}
176+
<ClientTabsList className={title ? "ml-auto" : ""}>
177+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
178+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
179+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
180+
</ClientTabsList>
181+
</div>
167182
<ClientTabsContent value={"npm"}>
168183
<ClipboardField
169184
variant="secondary/medium"

‎apps/webapp/app/components/navigation/EnvironmentSelector.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { useNavigation } from "@remix-run/react";
22
import { useEffect, useState } from "react";
33
import { useEnvironmentSwitcher } from "~/hooks/useEnvironmentSwitcher";
4+
import { useFeatures } from "~/hooks/useFeatures";
45
import { type MatchedOrganization } from "~/hooks/useOrganizations";
6+
import { cn } from "~/utils/cn";
7+
import { v3BillingPath } from "~/utils/pathBuilder";
58
import { EnvironmentCombo } from "../environments/EnvironmentLabel";
69
import {
710
Popover,
@@ -11,10 +14,6 @@ import {
1114
PopoverSectionHeader,
1215
} from "../primitives/Popover";
1316
import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
14-
import { cn } from "~/utils/cn";
15-
import { useFeatures } from "~/hooks/useFeatures";
16-
import { v3BillingPath } from "~/utils/pathBuilder";
17-
import { TextLink } from "../primitives/TextLink";
1817

1918
export function EnvironmentSelector({
2019
organization,

‎apps/webapp/app/components/navigation/SideMenu.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
8686
import { SideMenuHeader } from "./SideMenuHeader";
8787
import { SideMenuItem } from "./SideMenuItem";
8888
import { SideMenuSection } from "./SideMenuSection";
89+
import { InlineCode } from "../code/InlineCode";
8990

9091
type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
9192
export type SideMenuProject = Pick<
@@ -138,8 +139,8 @@ export function SideMenu({
138139
>
139140
<div
140141
className={cn(
141-
"flex items-center justify-between px-1 py-1 transition",
142-
showHeaderDivider ? " border-grid-bright" : "border-transparent"
142+
"flex items-center justify-between border-b px-1 py-1 transition duration-300",
143+
showHeaderDivider ? "border-grid-bright" : "border-transparent"
143144
)}
144145
>
145146
<ProjectSelector
@@ -296,7 +297,10 @@ function ProjectSelector({
296297
<PopoverArrowTrigger
297298
isOpen={isOrgMenuOpen}
298299
overflowHidden
299-
className="h-8 w-full justify-between overflow-hidden py-1 pl-1.5"
300+
className={cn(
301+
"h-8 w-full justify-between overflow-hidden py-1 pl-1.5",
302+
user.isImpersonating && "border border-dashed border-amber-400"
303+
)}
300304
>
301305
<span className="flex items-center gap-1.5 overflow-hidden">
302306
<Avatar avatar={organization.avatar} className="size-5" />
@@ -313,25 +317,26 @@ function ProjectSelector({
313317
>
314318
<div className="flex flex-col gap-2 bg-charcoal-750 p-2">
315319
<div className="flex items-center gap-2.5">
316-
<div className="box-content size-10 overflow-clip rounded-sm border border-charcoal-700 bg-charcoal-850">
320+
<div className="box-content size-10 overflow-clip rounded-sm bg-charcoal-800">
317321
<Avatar avatar={organization.avatar} className="size-10" includePadding />
318322
</div>
319323
<div className="space-y-0.5">
320-
<Paragraph variant="extra-small/bright">{organization.title}</Paragraph>
321-
<div className="flex items-baseline">
324+
<Paragraph variant="small/bright">{organization.title}</Paragraph>
325+
<div className="flex items-baseline gap-2">
322326
{plan && (
323-
<Paragraph variant="extra-small">
324-
<TextLink variant="secondary" to={v3BillingPath(organization)}>
325-
{plan}
326-
</TextLink>
327-
</Paragraph>
328-
)}
329-
<Paragraph variant="extra-small">
330327
<TextLink
331328
variant="secondary"
332-
to={organizationTeamPath(organization)}
333-
>{simplur`${organization.membersCount} member[|s]`}</TextLink>
334-
</Paragraph>
329+
className="text-xs"
330+
to={v3BillingPath(organization)}
331+
>
332+
{plan}
333+
</TextLink>
334+
)}
335+
<TextLink
336+
variant="secondary"
337+
className="text-xs"
338+
to={organizationTeamPath(organization)}
339+
>{simplur`${organization.membersCount} member[|s]`}</TextLink>
335340
</div>
336341
</div>
337342
</div>
@@ -341,6 +346,7 @@ function ProjectSelector({
341346
to={organizationSettingsPath(organization)}
342347
fullWidth
343348
iconSpacing="gap-1.5"
349+
className="group-hover/button:border-charcoal-500"
344350
>
345351
<CogIcon className="size-4 text-text-dimmed" />
346352
<span className="text-text-bright">Settings</span>
@@ -350,6 +356,7 @@ function ProjectSelector({
350356
to={v3UsagePath(organization)}
351357
fullWidth
352358
iconSpacing="gap-1.5"
359+
className="group-hover/button:border-charcoal-500"
353360
>
354361
<ChartBarIcon className="size-4 text-text-dimmed" />
355362
<span className="text-text-bright">Usage</span>
@@ -543,9 +550,7 @@ export function DevConnection() {
543550
</div>
544551
<DialogContent>
545552
<DialogHeader>
546-
{isConnected
547-
? "Your dev server is connected to Trigger.dev"
548-
: "Your dev server is not connected to Trigger.dev"}
553+
{isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
549554
</DialogHeader>
550555
<div className="mt-2 flex flex-col gap-3 px-2">
551556
<div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
@@ -564,20 +569,17 @@ export function DevConnection() {
564569
{isConnected ? null : (
565570
<div className="space-y-3">
566571
<PackageManagerProvider>
567-
<TriggerDevStepV3 />
572+
<TriggerDevStepV3 title="Run this command to connect" />
568573
</PackageManagerProvider>
569574
<Paragraph variant="small">
570-
Run this CLI `dev` command to connect to the Trigger.dev servers to start developing
571-
locally. Keep it running while you develop to stay connected.
575+
Run this CLI <InlineCode variant="extra-small">dev</InlineCode> command to connect
576+
to the Trigger.dev servers to start developing locally. Keep it running while you
577+
develop to stay connected. Learn more in the{" "}
578+
<TextLink to={docsPath("cli-dev")}>CLI docs</TextLink>.
572579
</Paragraph>
573580
</div>
574581
)}
575582
</div>
576-
<DialogFooter>
577-
<LinkButton variant="tertiary/medium" LeadingIcon={BookOpenIcon} to={docsPath("cli-dev")}>
578-
CLI docs
579-
</LinkButton>
580-
</DialogFooter>
581583
</DialogContent>
582584
</Dialog>
583585
);

‎apps/webapp/app/components/navigation/SideMenuSection.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export function SideMenuSection({
5050
expanded: {
5151
height: "auto",
5252
transition: {
53-
height: { duration: 0.3, ease: "easeOut" },
53+
height: { duration: 0.3, ease: "easeInOut" },
5454
},
5555
},
5656
collapsed: {
5757
height: 0,
5858
transition: {
59-
height: { duration: 0.2, ease: "easeIn" },
59+
height: { duration: 0.2, ease: "easeInOut" },
6060
},
6161
},
6262
}}
@@ -67,12 +67,12 @@ export function SideMenuSection({
6767
expanded: {
6868
translateY: 0,
6969
opacity: 1,
70-
transition: { duration: 0.3, ease: "easeOut" },
70+
transition: { duration: 0.3, ease: "easeInOut" },
7171
},
7272
collapsed: {
7373
translateY: "-100%",
7474
opacity: 0,
75-
transition: { duration: 0.2, ease: "easeIn" },
75+
transition: { duration: 0.2, ease: "easeInOut" },
7676
},
7777
}}
7878
>

‎apps/webapp/app/components/primitives/Avatar.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import {
22
BuildingOffice2Icon,
33
CodeBracketSquareIcon,
4-
CubeIcon,
54
FaceSmileIcon,
65
FireIcon,
76
RocketLaunchIcon,
87
StarIcon,
9-
} from "@heroicons/react/24/solid";
8+
} from "@heroicons/react/20/solid";
109
import { type Prisma } from "@trigger.dev/database";
1110
import { useLayoutEffect, useRef, useState } from "react";
1211
import { z } from "zod";

‎apps/webapp/app/components/primitives/Popover.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,7 @@ function PopoverArrowTrigger({
175175
>
176176
{children}
177177
</Paragraph>
178-
<DropdownIcon
179-
className={cn(
180-
"h-4 w-4 min-w-[0.75rem] text-text-dimmed transition group-hover:text-text-bright",
181-
isOpen && "-scale-y-100"
182-
)}
183-
/>
178+
<DropdownIcon className="size-4 min-w-[0.75rem] text-text-dimmed transition group-hover:text-text-bright" />
184179
</PopoverTrigger>
185180
);
186181
}

‎docs/docs.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -299,15 +299,22 @@
299299
}
300300
]
301301
},
302+
{
303+
"group": "Python guides",
304+
"pages": [
305+
"guides/python/python-image-processing",
306+
"guides/python/python-crawl4ai",
307+
"guides/python/python-pdf-form-extractor"
308+
]
309+
},
302310
{
303311
"group": "Example projects",
304312
"pages": [
305313
"guides/example-projects/batch-llm-evaluator",
306314
"guides/example-projects/claude-thinking-chatbot",
307315
"guides/example-projects/realtime-fal-ai",
308316
"guides/example-projects/realtime-csv-importer",
309-
"guides/example-projects/vercel-ai-sdk-image-generator",
310-
"guides/python/python-crawl4ai"
317+
"guides/example-projects/vercel-ai-sdk-image-generator"
311318
]
312319
},
313320
{

‎docs/guides/python/python-crawl4ai.mdx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ description: "Learn how to use Python, Crawl4AI and Playwright to create a headl
77
import ScrapingWarning from "/snippets/web-scraping-warning.mdx";
88
import PythonLearnMore from "/snippets/python-learn-more.mdx";
99

10+
## Overview
11+
12+
This demo showcases how to use Trigger.dev with Python to build a web crawler that uses a headless browser to navigate websites and extract content.
13+
1014
## Prerequisites
1115

1216
- A project with [Trigger.dev initialized](/quick-start)
1317
- [Python](https://www.python.org/) installed on your local machine
1418

15-
## Overview
16-
17-
This demo showcases how to use Trigger.dev with Python to build a web crawler that uses a headless browser to navigate websites and extract content.
18-
1919
## Features
2020

2121
- [Trigger.dev](https://trigger.dev) for background task orchestration
@@ -113,7 +113,10 @@ export function installPlaywrightChromium(): BuildExtension {
113113
}
114114
```
115115

116-
Learn more about the [trigger.config.ts](/config/config-file) file including setting default retry settings, customizing the build environment, and more.
116+
<Info>
117+
Learn more about executing scripts in your Trigger.dev project using our Python build extension
118+
[here](/config/extensions/pythonExtension).
119+
</Info>
117120

118121
### Task code
119122

@@ -212,14 +215,14 @@ if __name__ == "__main__":
212215
1. Create a virtual environment `python -m venv venv`
213216
2. Activate the virtual environment, depending on your OS: On Mac/Linux: `source venv/bin/activate`, on Windows: `venv\Scripts\activate`
214217
3. Install the Python dependencies `pip install -r requirements.txt`
215-
4. If you haven't already, copy your project ref from your [Trigger.dev dashboard](https://cloud.trigger.dev) and and add it to the `trigger.config.ts` file.
216-
5. Run the Trigger.dev dev CLI command with with `npx trigger dev@latest dev` (it may ask you to authorize the CLI if you haven't already).
218+
4. If you haven't already, copy your project ref from your [Trigger.dev dashboard](https://cloud.trigger.dev) and add it to the `trigger.config.ts` file.
219+
5. Run the Trigger.dev CLI `dev` command (it may ask you to authorize the CLI if you haven't already).
217220
6. Test the task in the dashboard, using a URL of your choice.
218221

219222
<ScrapingWarning />
220223

221224
## Deploying your task
222225

223-
Deploy the task to production using the CLI command `npx trigger.dev@latest deploy`
226+
Deploy the task to production using the Trigger.dev CLI `deploy` command.
224227

225228
<PythonLearnMore />

0 commit comments

Comments
 (0)