-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from elwood-software/feature/www-run
www run
- Loading branch information
Showing
8 changed files
with
487 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| 'use client'; | ||
|
|
||
| import {use, useRef} from 'react'; | ||
|
|
||
| import {AnimatedBeam} from '@/components/animated-beam'; | ||
|
|
||
| export default function Flow() { | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const setupRef = useRef<HTMLDivElement>(null); | ||
| const triggerRef = useRef<HTMLDivElement>(null); | ||
| const downloadRef = useRef<HTMLDivElement>(null); | ||
| const convertRef = useRef<HTMLDivElement>(null); | ||
| const uploadRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const steps = [ | ||
| { | ||
| ref: triggerRef, | ||
| text: 'Watch', | ||
| name: 'when', | ||
| desc: 'Any time a file is added to the storage bucket, Elwood Run can execute a workflow', | ||
| }, | ||
| { | ||
| ref: setupRef, | ||
| text: 'Setup the Worker', | ||
| name: 'setup', | ||
| desc: 'Easily install any software your need. Here we install ffmpeg to convert the MP4', | ||
| }, | ||
|
|
||
| { | ||
| ref: downloadRef, | ||
| text: 'Gather the Files', | ||
| name: 'download', | ||
| desc: 'Pull in any sized file from the internet or your storage bucket', | ||
| }, | ||
| { | ||
| ref: convertRef, | ||
| name: 'convert', | ||
| text: 'Transform', | ||
| desc: 'Run any command line tool or script to process the file. Here we convert the MP4 to MP3', | ||
| }, | ||
| { | ||
| ref: uploadRef, | ||
| text: 'Save Your Work', | ||
| name: 'upload', | ||
| desc: 'Put your files back in your storage bucket with a simple copy command', | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div ref={containerRef} className="relative flex flex-col"> | ||
| {steps.map(step => ( | ||
| <div className="flex" key={step.text}> | ||
| <div className="w-3 mr-6"> | ||
| <div | ||
| className="size-3 bg-muted-foreground rounded-full mt-2 z-10" | ||
| ref={step.ref}></div> | ||
| </div> | ||
| <div className="mb-6"> | ||
| <h2 className="font-medium mb-1"> | ||
| {step.text}{' '} | ||
| <small className="text-muted-foreground/40 ml-1"> | ||
| {step.name} | ||
| </small> | ||
| </h2> | ||
| <p className="text-sm text-muted-foreground">{step.desc}</p> | ||
| </div> | ||
| </div> | ||
| ))} | ||
|
|
||
| <span className="text-muted-foreground"> | ||
| <AnimatedBeam | ||
| containerRef={containerRef} | ||
| fromRef={triggerRef} | ||
| toRef={setupRef} | ||
| pathColor="currentColor" | ||
| pathOpacity={1} | ||
| /> | ||
|
|
||
| <AnimatedBeam | ||
| containerRef={containerRef} | ||
| fromRef={setupRef} | ||
| toRef={downloadRef} | ||
| pathColor="currentColor" | ||
| pathOpacity={1} | ||
| /> | ||
|
|
||
| <AnimatedBeam | ||
| containerRef={containerRef} | ||
| fromRef={downloadRef} | ||
| toRef={convertRef} | ||
| pathColor="currentColor" | ||
| pathOpacity={1} | ||
| /> | ||
|
|
||
| <AnimatedBeam | ||
| containerRef={containerRef} | ||
| fromRef={convertRef} | ||
| toRef={uploadRef} | ||
| pathColor="currentColor" | ||
| pathOpacity={1} | ||
| /> | ||
| </span> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import Link from 'next/link'; | ||
| import {Logo, Button, FileIcon, StarIcon} from '@elwood/ui'; | ||
| import {type Metadata} from 'next'; | ||
|
|
||
| import Grid from '@/components/grid'; | ||
|
|
||
| import Flow from './flow'; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: 'Elwood Run', | ||
| }; | ||
|
|
||
| export default async function Page() { | ||
| return ( | ||
| <div className="w-full h-full flex flex-col"> | ||
| <Grid className="z-0" /> | ||
| <div className="container lg:max-w-[40vw] md:max-w-[60vw] size-full relative flex flex-col"> | ||
| <header className="w-full flex flex-col items-center pt-12 pb-3 text-center"> | ||
| <div className="size-12 mb-6"> | ||
| <Link href="https://elwood.software/"> | ||
| <Logo className="size-full fill-brand dark:fill-current" /> | ||
| <span className="sr-only">Elwood</span> | ||
| </Link> | ||
| </div> | ||
| <h1 className="text-5xl md:text-7xl font-extrabold relative z-10 mb-1.5"> | ||
| Elwood Run | ||
| </h1> | ||
| <h2 className="text-xl font-thin text-foreground/80"> | ||
| <strong>Automate your file management.</strong> With Elwood Run, you | ||
| can automate your file management tasks by responding to files as | ||
| they move through your system. | ||
| </h2> | ||
| <div className="flex flex-col md:flex-row items-start justify-center space-y-3 md:space-y-0 md:space-x-3 mt-12 w-full"> | ||
| <div className="flex flex-col items-center"> | ||
| <Button | ||
| size="lg" | ||
| variant="default" | ||
| className="w-full md:w-auto" | ||
| href="https://github.com/elwood-software/run" | ||
| icon={<StarIcon className="size-[1em]" />}> | ||
| Follow on Github | ||
| </Button> | ||
| <small className="text-muted-foreground text-small mt-1"> | ||
| for development updates | ||
| </small> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col items-center"> | ||
| <Button | ||
| size="lg" | ||
| variant="outline" | ||
| className="w-full md:w-auto" | ||
| href="https://discord.elwood.software"> | ||
| Join Discord | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <main className="flex flex-row relative z-10 mt-10"> | ||
| <div className="border bg-background rounded-md shadow-splash mr-10"> | ||
| <header className="border-b bg-border/30 rounded-t-md px-6 py-2 flex justify-between"> | ||
| <div className="space-x-1.5 flex"> | ||
| <div className="size-2.5 bg-foreground/20 rounded-full" /> | ||
| <div className="size-2.5 bg-foreground/20 rounded-full" /> | ||
| <div className="size-2.5 bg-foreground/20 rounded-full" /> | ||
| </div> | ||
| </header> | ||
| <div className="w-full flex flex-row overflow-hidden relative p-6 text-sm"> | ||
| <pre className="mono pr-10">{workflow.trim()}</pre> | ||
| </div> | ||
| </div> | ||
| <Flow /> | ||
| </main> | ||
| </div> | ||
| <footer className="text-center text-muted-foreground/50 text-xs pb-2 pt-12"> | ||
| © The Elwood Technology Company | ||
| </footer> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const workflow = ` | ||
| name: convert-to-mp3 | ||
| when: | ||
| - event: storage.upsert | ||
| name: *.mp4 | ||
| jobs: | ||
| default: | ||
| steps: | ||
| # Install ffmpeg | ||
| - name: setup | ||
| action: install/ffmpeg | ||
| # Download the file | ||
| - name: download | ||
| action: copy | ||
| input: | ||
| src: \${{ event.storage_src }} | ||
| dest: "source.mp4" | ||
| # Convert the file | ||
| - name convert | ||
| action: "bin://ffmpeg" | ||
| input: | ||
| args: | ||
| - "-i" | ||
| - "source.mp4" | ||
| - "-b:a" | ||
| - "192K" | ||
| - "-vn" | ||
| - "output.mp3" | ||
| # Upload | ||
| - name: upload | ||
| action: copy | ||
| input: | ||
| src: "output.mp3" | ||
| dest: \${{ event.storage_dest }} | ||
| `; |
Oops, something went wrong.