fc50e48 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

pages/ids: add nicknames, sigil colors

commitfc50e48e03ac3ba066a2016829e888068d044166 authorMatilde Park <matilde.park@urbit.org> dateThu 28 Apr 2022, 21:24 (4 years ago) parent5517fbc

6 files changed+120−22

compare with master

unifiedsplit

components/Sigil.js+19−3 components/gateway/GatewayHeader.js+14−2 components/gateway/Image.js+9−6 content/ids/haddef-sigwen.md+2 pages/ids/[id].js+7−3 pages/ids/submit.js+69−8

components/Sigil.js+19−3

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

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

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

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+

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

416 if (patp.length > 14) {

517 return <div />;

618 }

19+ const foreground = foregroundFromBackground(color);

720 return (

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

21+ <div

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

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

24+ >

925 {sigil({

1026 patp: patp,

1127 renderer: reactRenderer,

1228 size: icon ? size / 2 : size,

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

29+ colors: [color, foreground],

1430 icon: icon || false,

1531 })}

1632 </div>

components/gateway/GatewayHeader.js+14−2

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

11import 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+}) => {

413 return (

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

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

817 <h2>{title}</h2>

18+ {subtitle && (

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

20+ )}

921 <p>{item}</p>

1022 </div>

1123 </div>

components/gateway/Image.js+9−6

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

33const GatewayImage = ({

44 error = false,

55 patp = false,

6+ color = "black",

67 image = "",

78 size = 100,

89}) => {

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

2930 if (patp) {

3031 return (

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

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

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

3334 </div>

3435 );

3536 }

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

4445 }

4546

4647 return image ? (

47− <img

48− className="rounded-xl"

49− src={image}

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

51− />

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

49+ <img

50+ className="rounded-xl"

51+ src={image}

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

53+ />

54+ </div>

5255 ) : (

5356 <img

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

content/ids/haddef-sigwen.md+2

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

11+++

22ship = "~haddef-sigwen"

3+nickname = "~am"

4+bgColor = "#dcedce"

35+++

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

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

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

5858 <SingleColumn>

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

6060 <GatewayHeader

61− title={id}

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

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

63+ subtitleMono

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

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

63− patp={id}

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

6467 item="Urbit ID"

6568 />

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

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

169172 type={type}

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

171174 title={each.title}

175+ color={each.bgColor}

172176 image={each.image}

173177 />

174178 ))}

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

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

194198

195199 const applications = getAllPosts(

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

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

197201 `applications/${params.id}`

198202 );

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

pages/ids/submit.js+69−8

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

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

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

55import { 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";

610

711const SubmissionPage = () => {

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

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

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

1317 `+++

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

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

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

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

1522+++

1623

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

1825 )}`;

1926

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

28+ ? form?.bgColor

29+ : "#000000";

30+

2031 return (

2132 <Container>

33+ <Head>

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

35+ {Meta}

36+ </Head>

2237 <SingleColumn>

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

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

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

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

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

5267 <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− />

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"

97+ placeholder="~bitbet-bolbel"

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

109+ <input

110+ placeholder="#000000"

111+ name="bgColor"

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

113+ onChange={handleFormChange}

114+ />

115+ <input

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

117+ name="image"

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

119+ onChange={handleFormChange}

120+ />

121+ </div>

61122 </div>

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

63124 <p>Hosted groups</p>