fc50e48 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

pages/ids: add nicknames, sigil colors

fc50e48Matilde Park4 years ago

components/Sigil.js+19−3

compare with master

unifiedsplit

@@ -1,16 +1,32 @@

1import { sigil, reactRenderer } from "@tlon/sigil-js";

3+export const foregroundFromBackground = (background) => {

4+ const rgb = {

5+ r: parseInt(background.slice(1, 3), 16),

6+ g: parseInt(background.slice(3, 5), 16),

7+ b: parseInt(background.slice(5, 7), 16),

8+ };

9+ const brightness = (299 * rgb.r + 587 * rgb.g + 114 * rgb.b) / 1000;

10+ const whiteBrightness = 255;

11+

12+ return whiteBrightness - brightness < 50 ? "black" : "white";

13+};

14+

3−export const Sigil = ({ patp, size, icon }) => {

15+export const Sigil = ({ patp, size, color = "#000000", icon }) => {

4 if (patp.length > 14) {

16 if (patp.length > 14) {

5 return <div />;

17 return <div />;

6 }

18 }

19+ const foreground = foregroundFromBackground(color);

7 return (

20 return (

21+ <div

8− <div className={icon ? "p-1 bg-black" : ""}>

22+ className={icon ? "p-1" : ""}

23+ style={{ backgroundColor: icon ? color || "black" : "transparent" }}

24+ >

9 {sigil({

25 {sigil({

10 patp: patp,

26 patp: patp,

11 renderer: reactRenderer,

27 renderer: reactRenderer,

12 size: icon ? size / 2 : size,

28 size: icon ? size / 2 : size,

13− colors: ["black", "white"],

29+ colors: [color, foreground],

14 icon: icon || false,

30 icon: icon || false,

15 })}

31 })}

16 </div>

32 </div>

components/gateway/GatewayHeader.js+14−2

@@ -1,11 +1,23 @@

1import GatewayImage from "./Image";

3−const GatewayHeader = ({ image, patp, error, title, item }) => {

3+const GatewayHeader = ({

4+ image,

5+ patp,

6+ color,

7+ subtitle,

8+ subtitleMono,

9+ error,

10+ title,

11+ item,

12+}) => {

4 return (

13 return (

5 <div className="flex items-center space-x-4">

14 <div className="flex items-center space-x-4">

6− <GatewayImage patp={patp} image={image} error={error} />

15+ <GatewayImage patp={patp} color={color} image={image} error={error} />

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

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

8 <h2>{title}</h2>

17 <h2>{title}</h2>

18+ {subtitle && (

19+ <p className={subtitleMono ? "font-mono" : "font-sans"}>{subtitle}</p>

20+ )}

9 <p>{item}</p>

21 <p>{item}</p>

10 </div>

22 </div>

11 </div>

23 </div>

components/gateway/Image.js+9−6

@@ -3,6 +3,7 @@ import Sigil from "../Sigil";

3const GatewayImage = ({

4 error = false,

5 patp = false,

6+ color = "black",

6 image = "",

7 image = "",

7 size = 100,

8 size = 100,

8}) => {

9}) => {

@@ -29,7 +30,7 @@ const GatewayImage = ({

29 if (patp) {

30 if (patp) {

30 return (

31 return (

31 <div className="rounded-xl overflow-hidden">

32 <div className="rounded-xl overflow-hidden">

32− <Sigil patp={patp} size={size} />

33+ <Sigil patp={patp} size={size} color={color} />

33 </div>

34 </div>

34 );

35 );

35 }

36 }

@@ -44,11 +45,13 @@ const GatewayImage = ({

44 }

45 }

46 return image ? (

47 return image ? (

48+ <div className="rounded-xl" style={{ backgroundColor: color }}>

47− <img

49+ <img

48− className="rounded-xl"

50+ className="rounded-xl"

49− src={image}

51+ src={image}

50− style={{ height: size, width: size }}

52+ style={{ height: size, width: size }}

51− />

53+ />

54+ </div>

52 ) : (

55 ) : (

53 <img

56 <img

54 className="object-contain shadow-sm rounded-xl"

57 className="object-contain shadow-sm rounded-xl"

content/ids/haddef-sigwen.md+2

@@ -1,5 +1,7 @@

1+++

2ship = "~haddef-sigwen"

3+nickname = "~am"

4+bgColor = "#dcedce"

3+++

5+++

5Tlon Corporation (2019-2021), Urbit Foundation (2022-)

7Tlon Corporation (2019-2021), Urbit Foundation (2022-)

pages/ids/[id].js+7−3

@@ -58,9 +58,12 @@ const IdPage = ({ data, markdown, applications, groups, network, params }) => {

58 <SingleColumn>

59 <Section className="space-y-12 w-full" narrow>

60 <GatewayHeader

61− title={id}

61+ title={data?.nickname ? data?.nickname : id}

62+ subtitle={data?.nickname ? id : false}

63+ subtitleMono

64+ color={data?.bgColor || "#000000"}

62 image={data?.image || false}

65 image={data?.image || false}

63− patp={id}

66+ patp={!data?.image ? id : false}

64 item="Urbit ID"

67 item="Urbit ID"

65 />

68 />

66 <div className="flex flex-wrap md:flex-nowrap justify-between">

69 <div className="flex flex-wrap md:flex-nowrap justify-between">

@@ -169,6 +172,7 @@ const Creations = ({ id, title, data, type }) => {

169 type={type}

172 type={type}

170 shortcode={`${id}/${each.slug}`}

173 shortcode={`${id}/${each.slug}`}

171 title={each.title}

174 title={each.title}

175+ color={each.bgColor}

172 image={each.image}

176 image={each.image}

173 />

177 />

174 ))}

178 ))}

@@ -193,7 +197,7 @@ export const getServerSideProps = async ({ params, res }) => {

193 ) || { data: {}, content: "" };

197 ) || { data: {}, content: "" };

194

198

195 const applications = getAllPosts(

199 const applications = getAllPosts(

196− ["title", "slug", "image"],

200+ ["title", "slug", "image", "bgColor"],

197 `applications/${params.id}`

201 `applications/${params.id}`

198 );

202 );

199 const groups = getAllPosts(["title", "slug", "image"], `groups/${params.id}`);

203 const groups = getAllPosts(["title", "slug", "image"], `groups/${params.id}`);

pages/ids/submit.js+69−8

@@ -3,6 +3,10 @@ import Container from "../../components/Container";

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

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

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

6+import ob from "urbit-ob";

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

8+import Head from "next/head";

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

7const SubmissionPage = () => {

11const SubmissionPage = () => {

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

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

@@ -12,13 +16,24 @@ const SubmissionPage = () => {

12 )}.md&value=${encodeURIComponent(

16 )}.md&value=${encodeURIComponent(

13 `+++

17 `+++

14ship = "${form?.ship}"

18ship = "${form?.ship}"

19+nickname = "${form?.nickname}"

20+bgcolor = "${form?.bgcolor}"

21+image = "${form?.image}"

15+++

22+++

17${form?.description || ""}`

24${form?.description || ""}`

18 )}`;

25 )}`;

27+ let validColor = /^#[0-9A-F]{6}$/i.test(form?.bgColor)

28+ ? form?.bgColor

29+ : "#000000";

30+

20 return (

31 return (

21 <Container>

32 <Container>

33+ <Head>

34+ <title>Claim an Urbit ID page • Urbit.org</title>

35+ {Meta}

36+ </Head>

22 <SingleColumn>

37 <SingleColumn>

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

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

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

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

@@ -50,14 +65,60 @@ ${form?.description || ""}`

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

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

51 <h3>Enter your Urbit ID information</h3>

66 <h3>Enter your Urbit ID information</h3>

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

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

53− <p>

68+ <p>Urbit ID (required)</p>

69+ <div className="flex items-center">

70+ {form?.image ? (

71+ <img

72+ className="mr-2 rounded-lg"

73+ src={form?.image}

74+ style={{ height: 32, width: 32 }}

75+ />

76+ ) : (

77+ <div

78+ className="flex p-2 rounded-lg mr-2"

79+ style={{

80+ backgroundColor: validColor,

81+ display: form?.ship?.length > 14 ? "none" : "block",

82+ }}

83+ >

84+ <Sigil

85+ icon

86+ color={validColor}

87+ size="25"

88+ patp={

89+ ob.isValidPatp(form?.ship || "") ? form?.ship : "~zod"

90+ }

91+ />

92+ </div>

93+ )}

94+ <input

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

96+ name="ship"

54− Urbit ID (e.g. <code>~bitbet-bolbel</code>) (required)

97+ placeholder="~bitbet-bolbel"

55− </p>

98+ onChange={handleFormChange}

99+ />

100+ </div>

101+ </div>

102+ <div className="flex flex-col">

103+ <p>Nickname (optional)</p>

104+ <input placeholder="Bitbet" className="bg-wall-100 p-2" />

105+ </div>

106+ <div>

107+ <p>Sigil color (or avatar image)</p>

108+ <div className="flex space-x-2">

56− <input

109+ <input

110+ placeholder="#000000"

111+ name="bgColor"

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

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

113+ onChange={handleFormChange}

114+ />

115+ <input

116+ placeholder="https://..."

58− name="ship"

117+ name="image"

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

59− onChange={handleFormChange}

119+ onChange={handleFormChange}

60− />

120+ />

121+ </div>

61 </div>

122 </div>

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

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

63 <p>Hosted groups</p>

124 <p>Hosted groups</p>