diff --git a/apps/web/package.json b/apps/web/package.json index 4e501820..9e1393b7 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -45,6 +45,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.54.0", "react-icons": "^5.4.0", + "react-markdown": "^10.1.0", "react-phone-number-input": "^3.4.11", "react-resizable-panels": "^2.1.7", "recharts": "^2.14.1", diff --git a/apps/web/public/opengraph-image.jpg b/apps/web/public/open-graph/default.jpg similarity index 100% rename from apps/web/public/opengraph-image.jpg rename to apps/web/public/open-graph/default.jpg diff --git a/apps/web/public/open-graph/roadmap.jpg b/apps/web/public/open-graph/roadmap.jpg new file mode 100644 index 00000000..63374c4f Binary files /dev/null and b/apps/web/public/open-graph/roadmap.jpg differ diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts index 6db26811..47f0020b 100644 --- a/apps/web/src/app/metadata.ts +++ b/apps/web/src/app/metadata.ts @@ -3,8 +3,8 @@ import { Metadata } from "next"; const title = "OpenCut"; const description = "A simple but powerful video editor that gets the job done. In your browser."; -const openGraphImageUrl = "https://opencut.app/opengraph-image.jpg"; -const twitterImageUrl = "/opengraph-image.jpg"; +const openGraphImageUrl = "https://opencut.app/open-graph/default.jpg"; +const twitterImageUrl = "/open-graph/default.jpg"; export const baseMetaData: Metadata = { metadataBase: new URL("https://opencut.app"), diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx new file mode 100644 index 00000000..6b10db47 --- /dev/null +++ b/apps/web/src/app/roadmap/page.tsx @@ -0,0 +1,247 @@ +import { Metadata } from "next"; +import { Badge } from "@/components/ui/badge"; +import { GithubIcon } from "@/components/icons"; +import Link from "next/link"; +import { Footer } from "@/components/footer"; +import { Header } from "@/components/header"; +import ReactMarkdown from "react-markdown"; +import { cn } from "@/lib/utils"; + +const roadmapItems: { + title: string; + description: string; + status: { + text: string; + type: "complete" | "pending" | "default" | "info"; + }; +}[] = [ + { + title: "Start", + description: + "This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.", + status: { + text: "Completed", + type: "complete", + }, + }, + { + title: "Core UI", + description: + "Built the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.", + status: { + text: "Completed", + type: "complete", + }, + }, + { + title: "Basic Functionality", + description: + "The heart of any video editor. Timeline zoom in/out, making clips longer/shorter, dragging elements around, selection, playhead scrubbing. **This part has to be fucking perfect** because it's what users interact with 99% of the time.", + status: { + text: "In Progress", + type: "pending", + }, + }, + { + title: "Export/Preview Logic", + description: + "The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.", + status: { + text: "In Progress", + type: "pending", + }, + }, + { + title: "Text", + description: + "After media, text is the next most important thing. Font selection with custom font imports, text stroke, colors. All the text essential text properties.", + status: { + text: "Not Started", + type: "default", + }, + }, + { + title: "Effects", + description: + "Adding visual effects to both text and media. Blur, brightness, contrast, saturation, filters, and all the creative tools that make videos pop. This is where the magic happens.", + status: { + text: "Not Started", + type: "default", + }, + }, + { + title: "Transitions", + description: + "Smooth transitions between clips. Fade in/out, slide, zoom, dissolve, and custom transition effects.", + status: { + text: "Not Started", + type: "default", + }, + }, + { + title: "Refine from Here", + description: + "Once we nail the above, we have a **solid foundation** to build anything. Advanced features, performance optimizations, mobile support, desktop app.", + status: { + text: "Future", + type: "info", + }, + }, +]; + +export const metadata: Metadata = { + title: "Roadmap - OpenCut", + description: + "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.", + openGraph: { + title: "OpenCut Roadmap - What's Coming Next", + description: + "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.", + type: "website", + images: [ + { + url: "/open-graph/roadmap.jpg", + width: 1200, + height: 630, + alt: "OpenCut Roadmap", + }, + ], + }, + twitter: { + card: "summary_large_image", + title: "OpenCut Roadmap - What's Coming Next", + description: + "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.", + images: ["/open-graph/roadmap.jpg"], + }, +}; + +export default function RoadmapPage() { + return ( +
+
+
+
+
+
+
+
+
+
+ + + + Open Source + + +

+ Roadmap +

+

+ What's coming next for OpenCut (last updated: January 15, 2025) +

+
+
+ {roadmapItems.map((item, index) => ( +
+
+ + {index + 1}. + +
+
+

{item.title}

+ + {item.status.text} + +
+
+ ( + + {children} + + ), + strong: ({ children }) => ( + + {children} + + ), + }} + > + {item.description} + +
+
+
+
+ ))} +
+ +
+
+

Want to Help?

+

+ OpenCut is open source and built by the community. Every + contribution, no matter how small, helps us build the best + free video editor possible. +

+
+ + + + Start Contributing + + + + + Report Issues + + +
+
+
+
+
+
+
+ ); +} diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx index 10f0e119..43a9db0e 100644 --- a/apps/web/src/components/footer.tsx +++ b/apps/web/src/components/footer.tsx @@ -66,6 +66,14 @@ export function Footer() {

Resources