1bb3fa3 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

pages/applications: add layered bg+image render

commit1bb3fa3bd65f9eea07aad96ac4cdebfb1a3f499f authorMatilde Park <matilde.park@urbit.org> dateThu 28 Apr 2022, 21:25 (4 years ago) parentfc50e48

9 files changed+40−22

compare with master

unifiedsplit

components/ResourceCard.js+2−2 content/applications/~paldev/face.md+1−1 content/applications/~paldev/fafa.md+1−1 content/applications/~paldev/pals.md+1−1 content/applications/~paldev/picture.md+1−1 content/applications/~paldev/rumors.md+1−1 content/applications/~paldev/verse.md+1−1 pages/applications/[[...application]].js+2−1 pages/applications/submit.js+30−13

components/ResourceCard.js+2−2

@@ -1,10 +1,10 @@

11import Link from "next/link";

22import GatewayImage from "./gateway/Image";

4−const ResourceCard = ({ type, shortcode, title, image }) => (

4+const ResourceCard = ({ type, shortcode, title, color, image }) => (

55 <Link href={`/${type}s/${shortcode}`}>

66 <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} />

88 <a className="font-semibold">{title}</a>

99 </div>

1010 </Link>

content/applications/~paldev/face.md+1−1

@@ -5,5 +5,5 @@ shortcode = "~paldev/face"

55description = "see your friends"

66license = "MIT"

77website = "https://pal.dev/suite/face"

8−image = "#3b5998"

8+bgColor = "#3b5998"

99+++

content/applications/~paldev/fafa.md+1−1

@@ -5,5 +5,5 @@ shortcode = "~paldev/fafa"

55description = "2fa otp authenticator app"

66license = "MIT"

77website = "https://pal.dev/suite/fafa"

8−image = "#1a1a2a"

8+bgColor = "#1a1a2a"

99+++

content/applications/~paldev/pals.md+1−1

@@ -5,5 +5,5 @@ developer = "~paldev"

55description = "friendlist for peer discovery"

66license = "MIT"

77website = "https://pal.dev/suite/pals"

8−image = "#99D3BD"

8+bgColor = "#99D3BD"

99+++

content/applications/~paldev/picture.md+1−1

@@ -5,5 +5,5 @@ shortcode = "~paldev/picture"

55description = "a picture frame for the garden"

66license = "MIT"

77website = "https://pal.dev/suite/picture"

8−image = "#DDDDDD"

8+bgColor = "#DDDDDD"

99+++

content/applications/~paldev/rumors.md+1−1

@@ -5,5 +5,5 @@ developer = "~paldev"

55description = "anonymous gossip from friends of friends"

66license = "MIT"

77website = "https://pal.dev/suite/rumors"

8−image = "#bb77dd"

8+bgColor = "#bb77dd"

99+++

content/applications/~paldev/verse.md+1−1

@@ -5,5 +5,5 @@ shortcode = "~paldev/verse"

55description = "a random Bible verse, every day"

66license = "MIT"

77website = "https://pal.dev/suite/verse"

8−image = "#EEEEDD"

8+bgColor = "#EEEEDD"

99+++

pages/applications/[[...application]].js+2−1

@@ -54,7 +54,8 @@ const ApplicationPage = ({ data, markdown, params }) => {

5454 <Section className="space-y-12" narrow>

5555 <GatewayHeader

5656 title={data.title}

57− image={data?.image}

57+ color={data?.bgColor}

58+ image={data?.image || data?.bgColor}

5859 item="Urbit Application"

5960 />

6061 <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";

33import Section from "../../components/Section";

44import SingleColumn from "../../components/SingleColumn";

55import { useInputChange } from "../../lib/hooks";

6+import Head from "next/head";

7+import Meta from "../../components/Meta";

79const SubmissionPage = () => {

810 const [form, handleFormChange] = useInputChange();

@@ -15,6 +17,7 @@ title = "${form?.appName}"

1517shortcode = "${form?.shortcode}"

1618license = "${form?.license || ""}"

1719image = "${form?.imageUrl || ""}"

20+bgColor = "${form?.bgColor || ""}

1821developer = "${form?.developer || ""}"

1922website = "${form?.website || ""}"

2023+++

@@ -24,6 +27,10 @@ ${form?.description || ""}`

2427

2528 return (

2629 <Container>

30+ <Head>

31+ <title>Submit an application • Urbit.org</title>

32+ {Meta}

33+ </Head>

2734 <SingleColumn>

2835 <Section narrow className="space-y-12">

2936 <div className="flex flex-col space-y-4">

@@ -50,34 +57,42 @@ ${form?.description || ""}`

5057 <input

5158 className="bg-wall-100 p-2"

5259 name="appName"

60+ placeholder="pals"

5361 onChange={handleFormChange}

5462 />

5563 </div>

5664 <div className="flex flex-col">

57− <p>

58− Shortcode (e.g. <code>~paldev/pals</code>) (required)

59− </p>

65+ <p>Shortcode (required)</p>

6066 <input

6167 className="bg-wall-100 p-2"

6268 name="shortcode"

69+ placeholder="~paldev/pals"

6370 onChange={handleFormChange}

6471 />

6572 </div>

66− <div className="flex flex-col">

67− <p>

68− App image URL (e.g. `https://...`) or color (e.g. `#FFCED0`)

69− </p>

70− <input

71− className="bg-wall-100 p-2"

72− name="imageUrl"

73− onChange={handleFormChange}

74− />

73+ <div className="flex flex-col w-full">

74+ <p>App image URL and color</p>

75+ <div className="flex space-x-4">

76+ <input

77+ className="flex-1 bg-wall-100 p-2"

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"

86+ onChange={handleFormChange}

87+ />

88+ </div>

7589 </div>

7690 <div className="flex flex-col">

77− <p>License (e.g. MIT)</p>

91+ <p>License</p>

7892 <input

7993 className="bg-wall-100 p-2"

8094 name="license"

95+ placeholder="MIT"

8196 onChange={handleFormChange}

8297 />

8398 </div>

@@ -86,6 +101,7 @@ ${form?.description || ""}`

86101 <input

87102 className="bg-wall-100 p-2"

88103 name="developer"

104+ placeholder="~paldev"

89105 onChange={handleFormChange}

90106 />

91107 </div>

@@ -94,6 +110,7 @@ ${form?.description || ""}`

94110 <input

95111 className="bg-wall-100 p-2"

96112 name="website"

113+ placeholder="https://pal.dev"

97114 onChange={handleFormChange}

98115 />

99116 </div>