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