git.iko.soy/urbit.org
on master help sign in
pages: add submission forms and dynamic PR construction
201ebb2Matilde Park
lib/hooks.js+12
compare with master
unifiedsplit
@@ -57,3 +57,15 @@ export const useLocalStorage = (key, defaultValue) => {
57
57
58 return [value, setValue];
58 return [value, setValue];
59};
59};
60+
61+export const useInputChange = () => {
62+ const [input, setInput] = useState({});
63+
64+ const handleInputChange = (e) =>
65+ setInput({
66+ ...input,
67+ [e.currentTarget.name]: e.currentTarget.value,
68+ });
69+
70+ return [input, handleInputChange];
71+};
pages/application/[[...application]].js+3−4
@@ -106,10 +106,9 @@ const ApplicationPage = ({ data, markdown, params }) => {
106 Have an application you'd like to share publicly through
106 Have an application you'd like to share publicly through
107 urbit.org?
107 urbit.org?
108 </p>
108 </p>
109− {/* TODO Submission guide. */}
109+ <Link href="/application/submit">
110− <p className="type-ui text-green-400">
110+ <a className="type-ui text-green-400">Submit your application</a>
111− Learn how to submit your application
111+ </Link>
112− </p>
113 </div>
112 </div>
114 <Link href="/">
113 <Link href="/">
115 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
114 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
pages/application/submit.jsnew file+122
@@ -0,0 +1,122 @@
1+import Link from "next/link";
2+import Container from "../../components/Container";
3+import Section from "../../components/Section";
4+import SingleColumn from "../../components/SingleColumn";
5+import { useInputChange } from "../../lib/hooks";
6+
7+const SubmissionPage = () => {
8+ const [form, handleFormChange] = useInputChange();
9+
10+ const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/application/${
11+ form?.shortcode
12+ }.md&value=${encodeURIComponent(
13+ `+++
14+title = "${form?.appName}"
15+shortcode = "${form?.shortcode}"
16+license = "${form?.license || ""}"
17+image = "${form?.imageUrl || ""}"
18+developer = "${form?.developer || ""}"
19+website = "${form?.website || ""}"
20++++
21+
22+${form?.description || ""}`
23+ )}`;
24+
25+ return (
26+ <Container>
27+ <SingleColumn>
28+ <Section narrow className="space-y-12">
29+ <div className="flex flex-col space-y-4">
30+ <h2>Submit your application</h2>
31+ <p>
32+ Application submissions are accomplished through a GitHub pull
33+ request.
34+ </p>
35+ <p>
36+ You’ll need <a href="https://github.com">a GitHub account</a>{" "}
37+ before you get started to submit your group.
38+ </p>
39+ <p>
40+ First, enter your information and then click “Submit with GitHub.”
41+ You’ll be directed to a GitHub pull request page with a
42+ pre-populated markdown file. Click “Propose new file,” and then
43+ “Create pull request” on the following page.
44+ </p>
45+ </div>
46+ <div className="flex flex-col space-y-4">
47+ <h3>Enter your application information</h3>
48+ <div className="flex flex-col">
49+ <p>Application name (required)</p>
50+ <input
51+ className="bg-wall-100 p-2"
52+ name="appName"
53+ onChange={handleFormChange}
54+ />
55+ </div>
56+ <div className="flex flex-col">
57+ <p>
58+ Shortcode (e.g. <code>~paldev/pals</code>) (required)
59+ </p>
60+ <input
61+ className="bg-wall-100 p-2"
62+ name="shortcode"
63+ onChange={handleFormChange}
64+ />
65+ </div>
66+ <div className="flex flex-col">
67+ <p>App image URL</p>
68+ <input
69+ className="bg-wall-100 p-2"
70+ name="imageUrl"
71+ onChange={handleFormChange}
72+ />
73+ </div>
74+ <div className="flex flex-col">
75+ <p>License (e.g. MIT)</p>
76+ <input
77+ className="bg-wall-100 p-2"
78+ name="license"
79+ onChange={handleFormChange}
80+ />
81+ </div>
82+ <div className="flex flex-col">
83+ <p>Developer</p>
84+ <input
85+ className="bg-wall-100 p-2"
86+ name="developer"
87+ onChange={handleFormChange}
88+ />
89+ </div>
90+ <div className="flex flex-col">
91+ <p>Website</p>
92+ <input
93+ className="bg-wall-100 p-2"
94+ name="website"
95+ onChange={handleFormChange}
96+ />
97+ </div>
98+ <div className="flex flex-col">
99+ <p>Description</p>
100+ <textarea
101+ className="resize-none bg-wall-100 p-2 h-60"
102+ name="description"
103+ onChange={handleFormChange}
104+ />
105+ </div>
106+ </div>
107+ <button
108+ className="button-lg bg-wall-600 text-wall-100"
109+ onClick={() => window.open(href)}
110+ >
111+ Submit with GitHub
112+ </button>
113+ <Link href="/">
114+ <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
115+ </Link>
116+ </Section>
117+ </SingleColumn>
118+ </Container>
119+ );
120+};
121+
122+export default SubmissionPage;
pages/group/[[...group]].js+3−4
@@ -101,10 +101,9 @@ const GroupPage = ({ data, markdown, params }) => {
101 <hr className="text-wall-200" />
101 <hr className="text-wall-200" />
102 <div className="flex flex-col space-y-1">
102 <div className="flex flex-col space-y-1">
103 <p>Have a group you'd like to share publicly through urbit.org?</p>
103 <p>Have a group you'd like to share publicly through urbit.org?</p>
104− {/* TODO Submission guide. */}
104+ <Link href="/group/submit">
105− <p className="type-ui text-green-400">
105+ <a className="type-ui text-green-400">Submit your group</a>
106− Learn how to submit your group.
106+ </Link>
107− </p>
108 </div>
107 </div>
109 <Link href="/">
108 <Link href="/">
110 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
109 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
pages/group/submit.jsnew file+157
@@ -0,0 +1,157 @@
1+import Link from "next/link";
2+import { useState } from "react";
3+import { encode } from "html-entities";
4+import Container from "../../components/Container";
5+import Section from "../../components/Section";
6+import SingleColumn from "../../components/SingleColumn";
7+import { useInputChange } from "../../lib/hooks";
8+
9+const SubmissionPage = () => {
10+ const [form, handleFormChange] = useInputChange();
11+ const [publicGroup, setPublicGroup] = useState(true);
12+
13+ const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/group/${
14+ form?.shortcode
15+ }.md&value=${encodeURIComponent(
16+ `+++
17+title = "${form?.groupName}"
18+shortcode = "${form?.shortcode}"
19+type = "${publicGroup ? "Public" : "Private"}"
20+image = "${form?.imageUrl || ""}"
21+participant_range = "${form?.members || ""}"
22+channels = "${form?.channels || ""}"
23++++
24+
25+${form?.description || ""}`
26+ )}`;
27+
28+ return (
29+ <Container>
30+ <SingleColumn>
31+ <Section narrow className="space-y-12">
32+ <div className="flex flex-col space-y-4">
33+ <h2>Submit your group</h2>
34+ <p>
35+ Groups submissions are accomplished through a GitHub pull request.
36+ </p>
37+ <p>
38+ You’ll need <a href="https://github.com">a GitHub account</a>{" "}
39+ before you get started to submit your group.
40+ </p>
41+ <p>
42+ First, enter your information and then click “Submit with GitHub.”
43+ You’ll be directed to a GitHub pull request page with a
44+ pre-populated markdown file. Click “Propose new file,” and then
45+ “Create pull request” on the following page.
46+ </p>
47+ <p>
48+ Then, to validate that you operate this group, send a DM to{" "}
49+ <Link href="/id/~haddef-sigwen">
50+ <a>~haddef-sigwen</a>
51+ </Link>{" "}
52+ from your group host <code>@p</code> with a link to the pull
53+ request on GitHub. We’ll approve the pull request and your page
54+ will be online shortly.
55+ </p>
56+ </div>
57+ <div className="flex flex-col space-y-4">
58+ <h3>Enter your group information</h3>
59+ <div className="flex flex-col">
60+ <p>Group name (required)</p>
61+ <input
62+ className="bg-wall-100 p-2"
63+ name="groupName"
64+ onChange={handleFormChange}
65+ />
66+ </div>
67+ <div className="flex flex-col">
68+ <p>Group type</p>
69+ <div className="flex space-x-4">
70+ <div
71+ className="flex items-center space-x-2 cursor-pointer"
72+ onClick={() => setPublicGroup(true)}
73+ >
74+ <input
75+ type="radio"
76+ onChange={() => null}
77+ checked={publicGroup}
78+ />
79+ <p>Public</p>
80+ </div>
81+ <div
82+ className="flex items-center space-x-2 cursor-pointer"
83+ onClick={() => setPublicGroup(false)}
84+ >
85+ <input
86+ type="radio"
87+ onChange={() => null}
88+ checked={!publicGroup}
89+ />
90+ <p>Private</p>
91+ </div>
92+ </div>
93+ </div>
94+ <div className="flex flex-col">
95+ <p>
96+ Shortcode (e.g. <code>~bitbet-bolbel/urbit-community</code>)
97+ (required)
98+ </p>
99+ <input
100+ className="bg-wall-100 p-2"
101+ name="shortcode"
102+ onChange={handleFormChange}
103+ />
104+ </div>
105+ <div className="flex flex-col">
106+ <p>Group image URL</p>
107+ <input
108+ className="bg-wall-100 p-2"
109+ name="imageUrl"
110+ onChange={handleFormChange}
111+ />
112+ </div>
113+ <div className="flex flex-col">
114+ <p>
115+ Members (e.g. <code>1000+</code>)
116+ </p>
117+ <input
118+ className="bg-wall-100 p-2"
119+ name="members"
120+ onChange={handleFormChange}
121+ />
122+ </div>
123+ <div className="flex flex-col">
124+ <p>
125+ Channels (e.g. <code>7</code>)
126+ </p>
127+ <input
128+ className="bg-wall-100 p-2"
129+ name="channels"
130+ onChange={handleFormChange}
131+ />
132+ </div>
133+ <div className="flex flex-col">
134+ <p>Description</p>
135+ <textarea
136+ className="resize-none bg-wall-100 p-2 h-60"
137+ name="description"
138+ onChange={handleFormChange}
139+ />
140+ </div>
141+ </div>
142+ <button
143+ className="button-lg bg-wall-600 text-wall-100"
144+ onClick={() => window.open(href)}
145+ >
146+ Submit with GitHub
147+ </button>
148+ <Link href="/">
149+ <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
150+ </Link>
151+ </Section>
152+ </SingleColumn>
153+ </Container>
154+ );
155+};
156+
157+export default SubmissionPage;
pages/id/[id].js+5−4
@@ -153,10 +153,11 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {
153 <hr className="text-wall-200" />
153 <hr className="text-wall-200" />
154 <div className="flex flex-col space-y-1">
154 <div className="flex flex-col space-y-1">
155 <p>Have an Urbit ID?</p>
155 <p>Have an Urbit ID?</p>
156− {/* TODO Submission guide. */}
156+ <Link href="/id/submit">
157− <p className="font-semibold text-green-400">
157+ <a className="type-ui text-green-400">
158− Claim and customize your Urbit.org page
158+ Claim and customize your Urbit ID page
159− </p>
159+ </a>
160+ </Link>
160 </div>
161 </div>
161 <Link href="/">
162 <Link href="/">
162 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
163 <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
pages/id/submit.jsnew file+102
@@ -0,0 +1,102 @@
1+import Link from "next/link";
2+import Container from "../../components/Container";
3+import Section from "../../components/Section";
4+import SingleColumn from "../../components/SingleColumn";
5+import { useInputChange } from "../../lib/hooks";
6+
7+const SubmissionPage = () => {
8+ const [form, handleFormChange] = useInputChange();
9+
10+ const href = `https://github.com/urbit/urbit.org/new/master?filename=/content/id/${form?.ship?.substring(
11+ 1
12+ )}.md&value=${encodeURIComponent(
13+ `+++
14+ship = "${form?.ship}"
15++++
16+
17+${form?.description || ""}`
18+ )}`;
19+
20+ return (
21+ <Container>
22+ <SingleColumn>
23+ <Section narrow className="space-y-12">
24+ <div className="flex flex-col space-y-4">
25+ <h2>Claim your page</h2>
26+ <p>
27+ Urbit ID page claims are accomplished through a GitHub pull
28+ request.
29+ </p>
30+ <p>
31+ You’ll need <a href="https://github.com">a GitHub account</a>{" "}
32+ before you get started.
33+ </p>
34+ <p>
35+ First, enter your information and then click “Submit with GitHub.”
36+ You’ll be directed to a GitHub pull request page with a
37+ pre-populated markdown file. Click “Propose new file,” and then
38+ “Create pull request” on the following page.
39+ </p>
40+ <p>
41+ Then, to validate that you operate this group, send a DM to{" "}
42+ <Link href="/id/~haddef-sigwen">
43+ <a>~haddef-sigwen</a>
44+ </Link>{" "}
45+ from your group host <code>@p</code> with a link to the pull
46+ request on GitHub. We’ll approve the pull request and your page
47+ will be online shortly.
48+ </p>
49+ </div>
50+ <div className="flex flex-col space-y-4">
51+ <h3>Enter your Urbit ID information</h3>
52+ <div className="flex flex-col">
53+ <p>
54+ Urbit ID (e.g. <code>~bitbet-bolbel</code>) (required)
55+ </p>
56+ <input
57+ className="bg-wall-100 p-2"
58+ name="ship"
59+ onChange={handleFormChange}
60+ />
61+ </div>
62+ <div className="flex flex-col">
63+ <p>Hosted groups</p>
64+ <input
65+ className="bg-wall-100 p-2 text-wall-400"
66+ readOnly
67+ value="Submitted groups associated with this ID will automatically appear"
68+ />
69+ </div>
70+ <div className="flex flex-col">
71+ <p>Applications</p>
72+ <input
73+ className="bg-wall-100 p-2 text-wall-400"
74+ readOnly
75+ value="Submitted applications associated with this ID will automatically appear"
76+ />
77+ </div>
78+ <div className="flex flex-col">
79+ <p>Description</p>
80+ <textarea
81+ className="resize-none bg-wall-100 p-2 h-60"
82+ name="description"
83+ onChange={handleFormChange}
84+ />
85+ </div>
86+ </div>
87+ <button
88+ className="button-lg bg-wall-600 text-wall-100"
89+ onClick={() => window.open(href)}
90+ >
91+ Submit with GitHub
92+ </button>
93+ <Link href="/">
94+ <a className="text-xl pt-8 block font-semibold">Urbit.org</a>
95+ </Link>
96+ </Section>
97+ </SingleColumn>
98+ </Container>
99+ );
100+};
101+
102+export default SubmissionPage;