git.iko.soy/urbit.org
on master help sign in
pages/applications: add layered bg+image render
1bb3fa3Matilde Park
components/ResourceCard.js+2−2
compare with master
unifiedsplit
@@ -1,10 +1,10 @@
1import Link from "next/link";
1import Link from "next/link";
2import GatewayImage from "./gateway/Image";
2import GatewayImage from "./gateway/Image";
3
3
4−const ResourceCard = ({ type, shortcode, title, image }) => (
4+const ResourceCard = ({ type, shortcode, title, color, image }) => (
5 <Link href={`/${type}s/${shortcode}`}>
5 <Link href={`/${type}s/${shortcode}`}>
6 <div className="cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4 mr-2 my-1">
6 <div className="cursor-pointer rounded-xl bg-wall-100 p-4 flex items-center space-x-4 mr-2 my-1">
7− <GatewayImage image={image} size={50} />
7+ <GatewayImage color={color} image={image || color} size={50} />
8 <a className="font-semibold">{title}</a>
8 <a className="font-semibold">{title}</a>
9 </div>
9 </div>
10 </Link>
10 </Link>
content/applications/~paldev/face.md+1−1
@@ -5,5 +5,5 @@ shortcode = "~paldev/face"
5description = "see your friends"
5description = "see your friends"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/face"
7website = "https://pal.dev/suite/face"
8−image = "#3b5998"
8+bgColor = "#3b5998"
9+++
9+++
content/applications/~paldev/fafa.md+1−1
@@ -5,5 +5,5 @@ shortcode = "~paldev/fafa"
5description = "2fa otp authenticator app"
5description = "2fa otp authenticator app"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/fafa"
7website = "https://pal.dev/suite/fafa"
8−image = "#1a1a2a"
8+bgColor = "#1a1a2a"
9+++
9+++
content/applications/~paldev/pals.md+1−1
@@ -5,5 +5,5 @@ developer = "~paldev"
5description = "friendlist for peer discovery"
5description = "friendlist for peer discovery"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/pals"
7website = "https://pal.dev/suite/pals"
8−image = "#99D3BD"
8+bgColor = "#99D3BD"
9+++
9+++
content/applications/~paldev/picture.md+1−1
@@ -5,5 +5,5 @@ shortcode = "~paldev/picture"
5description = "a picture frame for the garden"
5description = "a picture frame for the garden"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/picture"
7website = "https://pal.dev/suite/picture"
8−image = "#DDDDDD"
8+bgColor = "#DDDDDD"
9+++
9+++
content/applications/~paldev/rumors.md+1−1
@@ -5,5 +5,5 @@ developer = "~paldev"
5description = "anonymous gossip from friends of friends"
5description = "anonymous gossip from friends of friends"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/rumors"
7website = "https://pal.dev/suite/rumors"
8−image = "#bb77dd"
8+bgColor = "#bb77dd"
9+++
9+++
content/applications/~paldev/verse.md+1−1
@@ -5,5 +5,5 @@ shortcode = "~paldev/verse"
5description = "a random Bible verse, every day"
5description = "a random Bible verse, every day"
6license = "MIT"
6license = "MIT"
7website = "https://pal.dev/suite/verse"
7website = "https://pal.dev/suite/verse"
8−image = "#EEEEDD"
8+bgColor = "#EEEEDD"
9+++
9+++
pages/applications/[[...application]].js+2−1
@@ -54,7 +54,8 @@ const ApplicationPage = ({ data, markdown, params }) => {
54 <Section className="space-y-12" narrow>
54 <Section className="space-y-12" narrow>
55 <GatewayHeader
55 <GatewayHeader
56 title={data.title}
56 title={data.title}
57+ color={data?.bgColor}
57− image={data?.image}
58+ image={data?.image || data?.bgColor}
58 item="Urbit Application"
59 item="Urbit Application"
59 />
60 />
60 <div className="flex flex-wrap md:flex-nowrap justify-between">
61 <div className="flex flex-wrap md:flex-nowrap justify-between">
pages/applications/submit.js+30−13
@@ -3,6 +3,8 @@ import Container from "../../components/Container";
3import Section from "../../components/Section";
3import Section from "../../components/Section";
4import SingleColumn from "../../components/SingleColumn";
4import SingleColumn from "../../components/SingleColumn";
5import { useInputChange } from "../../lib/hooks";
5import { useInputChange } from "../../lib/hooks";
6+import Head from "next/head";
7+import Meta from "../../components/Meta";
6
8
7const SubmissionPage = () => {
9const SubmissionPage = () => {
8 const [form, handleFormChange] = useInputChange();
10 const [form, handleFormChange] = useInputChange();
@@ -15,6 +17,7 @@ title = "${form?.appName}"
15shortcode = "${form?.shortcode}"
17shortcode = "${form?.shortcode}"
16license = "${form?.license || ""}"
18license = "${form?.license || ""}"
17image = "${form?.imageUrl || ""}"
19image = "${form?.imageUrl || ""}"
20+bgColor = "${form?.bgColor || ""}
18developer = "${form?.developer || ""}"
21developer = "${form?.developer || ""}"
19website = "${form?.website || ""}"
22website = "${form?.website || ""}"
20+++
23+++
@@ -24,6 +27,10 @@ ${form?.description || ""}`
24
27
25 return (
28 return (
26 <Container>
29 <Container>
30+ <Head>
31+ <title>Submit an application • Urbit.org</title>
32+ {Meta}
33+ </Head>
27 <SingleColumn>
34 <SingleColumn>
28 <Section narrow className="space-y-12">
35 <Section narrow className="space-y-12">
29 <div className="flex flex-col space-y-4">
36 <div className="flex flex-col space-y-4">
@@ -50,34 +57,42 @@ ${form?.description || ""}`
50 <input
57 <input
51 className="bg-wall-100 p-2"
58 className="bg-wall-100 p-2"
52 name="appName"
59 name="appName"
60+ placeholder="pals"
53 onChange={handleFormChange}
61 onChange={handleFormChange}
54 />
62 />
55 </div>
63 </div>
56 <div className="flex flex-col">
64 <div className="flex flex-col">
57− <p>
58− Shortcode (e.g. <code>~paldev/pals</code>) (required)
65+ <p>Shortcode (required)</p>
59− </p>
60 <input
66 <input
61 className="bg-wall-100 p-2"
67 className="bg-wall-100 p-2"
62 name="shortcode"
68 name="shortcode"
69+ placeholder="~paldev/pals"
63 onChange={handleFormChange}
70 onChange={handleFormChange}
64 />
71 />
65 </div>
72 </div>
66− <div className="flex flex-col">
73+ <div className="flex flex-col w-full">
67− <p>
68− App image URL (e.g. `https://...`) or color (e.g. `#FFCED0`)
74+ <p>App image URL and color</p>
69− </p>
75+ <div className="flex space-x-4">
70− <input
76+ <input
71− className="bg-wall-100 p-2"
77+ className="flex-1 bg-wall-100 p-2"
72− name="imageUrl"
78+ name="imageUrl"
79+ placeholder="https://..."
80+ onChange={handleFormChange}
81+ />
82+ <input
83+ name="bgColor"
84+ className="bg-wall-100 p-2 flex-1"
85+ placeholder="#FFCED0"
73− onChange={handleFormChange}
86+ onChange={handleFormChange}
74− />
87+ />
88+ </div>
75 </div>
89 </div>
76 <div className="flex flex-col">
90 <div className="flex flex-col">
77− <p>License (e.g. MIT)</p>
91+ <p>License</p>
78 <input
92 <input
79 className="bg-wall-100 p-2"
93 className="bg-wall-100 p-2"
80 name="license"
94 name="license"
95+ placeholder="MIT"
81 onChange={handleFormChange}
96 onChange={handleFormChange}
82 />
97 />
83 </div>
98 </div>
@@ -86,6 +101,7 @@ ${form?.description || ""}`
86 <input
101 <input
87 className="bg-wall-100 p-2"
102 className="bg-wall-100 p-2"
88 name="developer"
103 name="developer"
104+ placeholder="~paldev"
89 onChange={handleFormChange}
105 onChange={handleFormChange}
90 />
106 />
91 </div>
107 </div>
@@ -94,6 +110,7 @@ ${form?.description || ""}`
94 <input
110 <input
95 className="bg-wall-100 p-2"
111 className="bg-wall-100 p-2"
96 name="website"
112 name="website"
113+ placeholder="https://pal.dev"
97 onChange={handleFormChange}
114 onChange={handleFormChange}
98 />
115 />
99 </div>
116 </div>