git.iko.soy/urbit.org
on bfcd50e help sign in
urbit.org/pages/groups/submit.js
152 lines 5.1 kB history raw
1import Link from "next/link";
2import { useState } from "react";
3import {
4 Container,
5 Section,
6 SingleColumn,
7} from "@urbit/foundation-design-system";
8import { useInputChange } from "../../lib/hooks";
9import Head from "next/head";
10import Meta from "../../components/Meta";
12const SubmissionPage = () => {
13 const [form, handleFormChange] = useInputChange();
14 const [publicGroup, setPublicGroup] = useState(true);
16 const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/groups/${
17 form?.shortcode
18 }.md&value=${encodeURIComponent(
19 `+++
20title = "${form?.groupName}"
21shortcode = "${form?.shortcode}"
22type = "${publicGroup ? "Public" : "Private"}"
23tile = "${form?.tile || ""}"
24participant_range = "${form?.members || ""}"
25+++
27${form?.description || ""}`
28 )}`;
30 return (
31 <Container>
32 <Head>
33 <title>Submit a group • Urbit.org</title>
34 {Meta}
35 </Head>
36 <SingleColumn>
37 <Section narrow className="space-y-12">
38 <div className="flex flex-col space-y-4">
39 <h2>Submit your group</h2>
40 <p>
41 Groups submissions are accomplished through a GitHub pull request.
42 </p>
43 <p>
44 You’ll need <a href="https://github.com">a GitHub account</a>{" "}
45 before you get started to submit your group.
46 </p>
47 <p>
48 First, enter your information and then click “Submit with GitHub.”
49 You’ll be directed to a GitHub pull request page with a
50 pre-populated markdown file. Click “Propose new file,” and then
51 “Create pull request” on the following page.
52 </p>
53 <p>
54 Then, to validate that you operate this group, send a DM to{" "}
55 <Link href="/ids/~haddef-sigwen" passHref>
56 <a>~haddef-sigwen</a>
57 </Link>{" "}
58 from your group host <code>@p</code> with a link to the pull
59 request on GitHub. We’ll approve the pull request and your page
60 will be online shortly.
61 </p>
62 </div>
63 <div className="flex flex-col space-y-4">
64 <h3>Enter your group information</h3>
65 <div className="flex flex-col">
66 <p>Group name (required)</p>
67 <input
68 className="bg-wall-100 p-2"
69 name="groupName"
70 placeholder="Urbit Community"
71 onChange={handleFormChange}
72 />
73 </div>
74 <div className="flex flex-col">
75 <p>Group type</p>
76 <div className="flex space-x-4">
77 <div
78 className="flex items-center space-x-2 cursor-pointer"
79 onClick={() => setPublicGroup(true)}
80 >
81 <input
82 type="radio"
83 onChange={() => null}
84 checked={publicGroup}
85 />
86 <p>Public</p>
87 </div>
88 <div
89 className="flex items-center space-x-2 cursor-pointer"
90 onClick={() => setPublicGroup(false)}
91 >
92 <input
93 type="radio"
94 onChange={() => null}
95 checked={!publicGroup}
96 />
97 <p>Private</p>
98 </div>
99 </div>
100 </div>
101 <div className="flex flex-col">
102 <p>Shortcode (required)</p>
103 <input
104 className="bg-wall-100 p-2"
105 name="shortcode"
106 placeholder="~bitbet-bolbel/urbit-community"
107 onChange={handleFormChange}
108 />
109 </div>
110 <div className="flex flex-col">
111 <p>Group image URL or color</p>
112 <input
113 className="bg-wall-100 p-2"
114 name="tile"
115 placeholder="https://... or #FFCDE0"
116 onChange={handleFormChange}
117 />
118 </div>
119 <div className="flex flex-col">
120 <p>Members</p>
121 <input
122 className="bg-wall-100 p-2"
123 name="members"
124 placeholder="1000+"
125 onChange={handleFormChange}
126 />
127 </div>
128 <div className="flex flex-col">
129 <p>Description</p>
130 <textarea
131 className="resize-none bg-wall-100 p-2 h-60"
132 name="description"
133 onChange={handleFormChange}
134 />
135 </div>
136 </div>
137 <button
138 className="button-lg bg-wall-600 text-wall-100"
139 onClick={() => window.open(href)}
140 >
141 Submit with GitHub
142 </button>
143 <Link href="/" passHref>
144 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
145 </Link>
146 </Section>
147 </SingleColumn>
148 </Container>
149 );
150};
152export default SubmissionPage;