Merge remote-tracking branch 'origin/blank-jobs-page-improvements'

apps/webapp/app/components/helpContent/HelpContentText.tsx

@@ -28,17 +28,30 @@ import { Header2 } from "../primitives/Headers";
 import { CodeBlock } from "../code/CodeBlock";
 import { EnvironmentLabel } from "../environments/EnvironmentLabel";
 import { TextLink } from "../primitives/TextLink";
+import FormSegmentedControl from "../primitives/FormSegmentedControl";
+import {
+  GitHubLightIcon,
+  OpenAILightIcon,
+  ResendIcon,
+  SlackIcon,
+} from "@trigger.dev/companyicons";
+import { CalendarDaysIcon, ClockIcon } from "@heroicons/react/20/solid";
 
 export function HowToSetupYourProject() {
   const devEnvironment = useDevEnvironment();
   const appOrigin = useAppOrigin();
   return (
     <>
-      <StepNumber stepNumber="1" title="Run the CLI init command" />
+      <Paragraph spacing>
+        Add Trigger.dev to your Project with an example Job which logs 'Hello
+        World' to the console.
+      </Paragraph>
+
+      <StepNumber
+        stepNumber="1"
+        title="Run the CLI 'init' command from a Next.js project"
+      />
       <StepContentContainer>
-        <Paragraph spacing>
-          Run this CLI command in a terminal window from your Next.js project.
-        </Paragraph>
         <ClientTabs defaultValue="npm">
           <ClientTabsList>
             <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
@@ -73,6 +86,11 @@ export function HowToSetupYourProject() {
         <Paragraph spacing variant="small">
           It will ask you for a "unique ID for your endpoint". You can use the
           default by hitting enter.
+        </Paragraph>{" "}
+        <Paragraph spacing>
+          You’ll notice a new folder in your project called 'jobs' . We’ve added
+          a very simple example Job in <InlineCode>examples.ts</InlineCode> to
+          help you get started.
         </Paragraph>
       </StepContentContainer>
       <StepNumber stepNumber="2" title="Run your Next.js app" />
@@ -81,23 +99,13 @@ export function HowToSetupYourProject() {
           Ensure your Next.js app is running locally on port 3000.
         </Paragraph>
       </StepContentContainer>
-      <StepNumber stepNumber="3" title="Run the CLI dev command" />
+      <StepNumber stepNumber="3" title="Run the CLI 'dev' command" />
       <StepContentContainer>
-        <Paragraph spacing>
-          The CLI <InlineCode>dev</InlineCode> command allows the Trigger.dev
-          service to send messages to your Next.js site. This is required for
-          registering Jobs, triggering them and running Tasks. To achieve this
-          it creates a tunnel (using{" "}
-          <TextLink href="https://ngrok.com/">ngrok</TextLink>) so Trigger.dev
-          can send messages to your machine.
-        </Paragraph>
-        <Paragraph spacing>
-          You should leave the <InlineCode>dev</InlineCode> command running when
-          you're developing.
-        </Paragraph>
         <Paragraph spacing>
           In a{" "}
-          <strong className="text-bright">new terminal window or tab</strong>{" "}
+          <strong className="text-bright">
+            separate terminal window or tab
+          </strong>{" "}
           run:
         </Paragraph>
         <ClientTabs defaultValue="npm">
@@ -128,6 +136,10 @@ export function HowToSetupYourProject() {
             />
           </ClientTabsContent>
         </ClientTabs>
+        <Paragraph spacing variant="small">
+          You should leave the <InlineCode>dev</InlineCode> command running when
+          you're developing.
+        </Paragraph>
       </StepContentContainer>
       <StepNumber stepNumber="4" title="Check for Jobs" />
       <StepContentContainer>

apps/webapp/app/components/navigation/NavBar.tsx

@@ -37,7 +37,7 @@ export function NavBar() {
               LeadingIcon={ChatBubbleLeftRightIcon}
               shortcut={{ key: "f" }}
             >
-              Send us feedback
+              Help & feedback
             </Button>
           }
         />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam._index/route.tsx

@@ -32,6 +32,13 @@ import {
 import { BreadcrumbLink } from "~/components/navigation/NavBar";
 import { requireUserId } from "~/services/session.server";
 import { JobListPresenter } from "~/presenters/JobListPresenter.server";
+import { TextLink } from "~/components/primitives/TextLink";
+import {
+  GitHubLightIcon,
+  OpenAILightIcon,
+  ResendIcon,
+} from "@trigger.dev/companyicons";
+import { ClockIcon, CalendarDaysIcon, SlackIcon } from "lucide-react";
 
 export const loader = async ({ request, params }: LoaderArgs) => {
   const userId = await requireUserId(request);
@@ -138,17 +145,19 @@ export default function Page() {
                       onChange={(e) => setFilterText(e.target.value)}
                     />
                   )}
-                  <HelpTrigger title="How do I setup my Project?" />
+                  <HelpTrigger title="How do I add Trigger.dev to my Next.js app?" />
                 </div>
                 {jobs.length === 0 ? (
-                  <div
-                    className={
-                      "flex w-full justify-center gap-x-4 rounded-md border border-dashed border-indigo-800 px-5 py-8"
-                    }
-                  >
-                    <Paragraph variant="small">
-                      Your Jobs will appear here.
-                    </Paragraph>
+                  <div>
+                    <div
+                      className={
+                        "flex w-full flex-col justify-center gap-x-4 rounded-md border border-dashed border-indigo-800 px-5 py-8"
+                      }
+                    >
+                      <Paragraph variant="small">
+                        Your Jobs will appear here.
+                      </Paragraph>
+                    </div>
                   </div>
                 ) : (
                   <>
@@ -158,13 +167,18 @@ export default function Page() {
               query.`}
                     />
                     {jobs.length === 1 ? (
-                      <Callout
-                        variant="docs"
-                        to={docsPath("documentation/quickstart#your-first-job")}
-                        className="my-3"
-                      >
-                        Create your first Job in code
-                      </Callout>
+                      <>
+                        <Callout
+                          variant="docs"
+                          to={docsPath(
+                            "documentation/quickstart#your-first-job"
+                          )}
+                          className="my-3"
+                        >
+                          Create your first Job in code
+                        </Callout>
+                        <ExampleJobs />
+                      </>
                     ) : (
                       <Callout
                         variant="docs"
@@ -177,7 +191,7 @@ export default function Page() {
                   </>
                 )}
               </div>
-              <HelpContent title="How to setup your Project">
+              <HelpContent title="How to add Trigger.dev to your Next.js app (5 mins)">
                 <HowToSetupYourProject />
               </HelpContent>
             </div>
@@ -187,3 +201,74 @@ export default function Page() {
     </PageContainer>
   );
 }
+
+function ExampleJobs() {
+  return (
+    <div className="mt-6 flex w-full flex-col gap-y-2 rounded bg-slate-900 p-4">
+      <Header2 className="text-slate-300">Example Jobs</Header2>
+      <Paragraph variant="small">
+        If you want more inspiration or just want to dig into the code of a Job,
+        check out our{" "}
+        <TextLink href="https://github.com/triggerdotdev/examples">
+          examples repo
+        </TextLink>
+        .
+      </Paragraph>
+      <div className="h-[1px] w-full bg-slate-800" />
+      <div className="flex gap-1.5">
+        <ClockIcon className="h-4 w-4 pt-0.5 text-slate-100" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/delays">
+            Delays
+          </TextLink>{" "}
+          - Using delays inside Jobs
+        </Paragraph>
+      </div>
+      <div className="flex gap-1.5">
+        <CalendarDaysIcon className="h-4 w-4 pt-0.5 text-slate-100" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/scheduled">
+            Scheduled
+          </TextLink>{" "}
+          - Interval and cron scheduled Jobs
+        </Paragraph>
+      </div>
+      <div className="flex gap-1.5">
+        <GitHubLightIcon className="ml-0.5 h-4 w-4 pt-0.5" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/delays">
+            GitHub
+          </TextLink>{" "}
+          - When a new GitHub issue is opened it adds a “Bug” label to it.
+        </Paragraph>
+      </div>
+      <div className="flex gap-1.5">
+        <OpenAILightIcon className="ml-0.5 h-4 w-4 pt-0.5" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/openai">
+            OpenAI
+          </TextLink>{" "}
+          - Generate images and jokes from a prompt
+        </Paragraph>
+      </div>
+      <div className="flex gap-1.5">
+        <ResendIcon className="ml-0.5 h-4 w-4 pt-0.5" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/resend">
+            Resend
+          </TextLink>{" "}
+          - Sends an email by submitting a form in the Next.js app
+        </Paragraph>
+      </div>{" "}
+      <div className="flex gap-1.5">
+        <SlackIcon className="ml-0.5 h-4 w-4 pt-0.5" />
+        <Paragraph variant="small">
+          <TextLink href="https://github.com/triggerdotdev/examples/tree/main/slack">
+            Slack
+          </TextLink>{" "}
+          - Sends a Slack message when an event is received
+        </Paragraph>
+      </div>
+    </div>
+  );
+}