Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/repo/soon.tsx

110 lines4,487 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales1import { ArrowRight, Check, Sparkles } from "lucide-react";
2import { Link, data } from "react-router";
3
4import type { Route } from "./+types/soon";
Social cards for every page: og.g1t.sh5import { page } from "../../lib/meta";
A flat project menu with Code first, views as tabs, and Stripe for every owner6import { ROADMAP, type RoadmapItem, roadmapIn, roadmapItem } from "../../lib/roadmap";
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales7
Social cards for every page: og.g1t.sh8export function meta({ params, ...args }: Route.MetaArgs) {
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales9 const item = roadmapItem(params.feature);
Social cards for every page: og.g1t.sh10 return page(args, {
11 title: `${item?.title ?? "Soon"} · ${params.owner}/${params.repo} · g1t`,
12 description: item ? `Soon on g1t: ${item.summary}` : null,
13 version: item ? [item.title, item.summary] : undefined,
14 });
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales15}
16
17export function loader({ params }: Route.LoaderArgs) {
18 const item = roadmapItem(params.feature);
19 if (!item) throw data(null, { status: 404 });
20 return { item };
21}
22
23/**
24 * A page a project will have: what it is for, what it will do, and what
25 * to use until then. Reached from the project menu's Soon items.
26 */
27export default function Soon({ loaderData, params }: Route.ComponentProps) {
A flat project menu with Code first, views as tabs, and Stripe for every owner28 return <SoonView item={loaderData.item} base={`/${params.owner}/${params.repo}`} />;
29}
30
31/**
32 * A Soon page, for a project's (under `base`, `/<owner>/<project>`) or the
33 * workspace's (`/<owner>/-`).
34 */
35export function SoonView({ item, base }: { item: RoadmapItem; base: string }) {
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales36 const siblings = roadmapIn(item.section).filter((other) => other.key !== item.key);
A flat project menu with Code first, views as tabs, and Stripe for every owner37 const inWorkspace = item.section === "Workspace";
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales38 return (
39 <div className="mx-auto max-w-3xl">
40 <p className="flex items-center gap-2 text-sm text-muted">
A flat project menu with Code first, views as tabs, and Stripe for every owner41 <span>{inWorkspace ? "Across projects" : item.section}</span>
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales42 <span className="text-line-strong">/</span>
43 <span className="text-fg">{item.title}</span>
44 </p>
45 <div className="mt-4 flex flex-wrap items-center gap-3">
46 <h1 className="text-3xl font-semibold tracking-tight">{item.title}</h1>
47 <span className="inline-flex items-center gap-1.5 rounded-full border border-accent/40 bg-accent/10 px-2.5 py-0.5 text-xs font-medium text-accent">
48 <Sparkles size={12} />
49 Soon
50 </span>
51 </div>
52 <p className="mt-3 text-lg text-muted">{item.summary}</p>
53
54 <section className="mt-8 rounded-xl border border-line bg-surface p-6">
55 <p className="leading-relaxed">{item.why}</p>
56 <h2 className="mt-6 text-sm font-medium text-muted">What it will do</h2>
57 <ul className="mt-3 space-y-2.5">
58 {item.plans.map((plan) => (
59 <li key={plan} className="flex gap-3 text-sm">
60 <Check size={16} className="mt-0.5 shrink-0 text-accent" />
61 <span>{plan}</span>
62 </li>
63 ))}
64 </ul>
65 </section>
66
67 {item.today && (
68 <Link
69 to={`${base}/${item.today.path}`}
70 className="group mt-4 flex items-center justify-between gap-4 rounded-xl border border-line px-5 py-4 transition-colors hover:border-line-strong hover:bg-surface"
71 >
72 <span>
73 <span className="block text-xs text-faint">Until then</span>
74 <span className="mt-0.5 block text-sm font-medium">{item.today.label}</span>
75 </span>
76 <ArrowRight size={16} className="text-faint transition-transform group-hover:translate-x-0.5 group-hover:text-fg" />
77 </Link>
78 )}
79
80 {siblings.length > 0 && (
81 <section className="mt-10">
A flat project menu with Code first, views as tabs, and Stripe for every owner82 <h2 className="text-sm font-medium text-muted">
83 Also coming {inWorkspace ? "across projects" : `to ${item.section}`}
84 </h2>
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales85 <ul className="mt-3 grid gap-3 sm:grid-cols-2">
86 {siblings.map((other) => (
87 <li key={other.key}>
88 <Link
89 to={`${base}/soon/${other.key}`}
90 className="block h-full rounded-xl border border-line p-4 transition-colors hover:border-line-strong hover:bg-surface"
91 >
92 <span className="text-sm font-medium">{other.title}</span>
93 <span className="mt-1 block text-sm text-muted">{other.summary}</span>
94 </Link>
95 </li>
96 ))}
97 </ul>
98 </section>
99 )}
100
101 <p className="mt-10 text-xs text-faint">
102 {ROADMAP.length} things are on the way to every project. Want this one sooner, or something else?{" "}
103 <a href="https://g1t.sh/syntaqx/g1t/issues/new" className="text-muted hover:text-fg">
104 Tell us
105 </a>
106 .
107 </p>
108 </div>
109 );
110}