git.iko.soy/urbit.org
on master help sign in
pages, components: recomponentize public gateway pages
commitdc1dded2e609f7bd5c69e8f93e77ede199993540 authorMatilde Park <matilde.park@urbit.org> dateTue 26 Apr 2022, 17:10 (4 years ago) parentf2c50fa
6 files changed+135−104
compare with master
unifiedsplit
components/gateway/Description.js+21 components/gateway/GatewayHeader.js+24 components/gateway/MetadataBlock.js+8 components/gateway/MetadataLink.js+12 pages/group/[[...group]].js+29−49 pages/id/[id].js+41−55
components/gateway/Description.jsnew file+21
@@ -0,0 +1,21 @@
1+import { decode } from "html-entities";
2+
3+const Description = ({ description, fallback, markdown }) => {
4+ return (
5+ (description !== fallback || markdown) && (
6+ <div className="flex flex-col space-y-4">
7+ <p className="font-bold text-wall-400">Description</p>
8+ {markdown ? (
9+ <div
10+ className="flex flex-col space-y-4"
11+ dangerouslySetInnerHTML={{ __html: decode(markdown) }}
12+ />
13+ ) : (
14+ <p>{description}</p>
15+ )}
16+ </div>
17+ )
18+ );
19+};
20+
21+export default Description;
components/gateway/GatewayHeader.jsnew file+24
@@ -0,0 +1,24 @@
1+const GatewayHeader = ({ image, sigil, title, item }) => {
2+ return (
3+ <div className="flex items-center space-x-4">
4+ {image ? (
5+ <img className="rounded-xl" src={image} height={100} width={100} />
6+ ) : (
7+ !sigil && (
8+ <img
9+ className="object-contain shadow-sm rounded-xl"
10+ style={{ height: 100, width: 100 }}
11+ src="https://media.urbit.org/logo/urbit-logo-card.png"
12+ />
13+ )
14+ )}
15+ {sigil && sigil}
16+ <div className="flex flex-col">
17+ <h2>{title}</h2>
18+ <p>{item}</p>
19+ </div>
20+ </div>
21+ );
22+};
23+
24+export default GatewayHeader;
components/gateway/MetadataBlock.jsnew file+8
@@ -0,0 +1,8 @@
1+const MetadataBlock = ({ title, content }) => (
2+ <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
3+ <p className="font-bold text-wall-400">{title}</p>
4+ <p className="font-mono">{content}</p>
5+ </div>
6+);
7+
8+export default MetadataBlock;
components/gateway/MetadataLink.jsnew file+12
@@ -0,0 +1,12 @@
1+import Link from "next/link";
2+
3+const MetadataLink = ({ title, href, content }) => (
4+ <div className="flex flex-col basis-1/2 md:basis-auto">
5+ <p className="font-bold text-wall-400">{title}</p>
6+ <Link href={href}>
7+ <a className="type-ui font-mono text-green-400">{content}</a>
8+ </Link>
9+ </div>
10+);
11+
12+export default MetadataLink;
pages/group/[[...group]].js+29−49
@@ -9,8 +9,11 @@ import SingleColumn from "../../components/SingleColumn";
99import ErrorPage from "../404";
1010import Section from "../../components/Section";
1111import ob from "urbit-ob";
12−import { decode } from "html-entities";
1312import Markdown from "../../components/Markdown";
13+import GatewayHeader from "../../components/gateway/GatewayHeader";
14+import MetadataBlock from "../../components/gateway/MetadataBlock";
15+import MetadataLink from "../../components/gateway/MetadataLink";
16+import Description from "../../components/gateway/Description";
1417
1518const GroupPage = ({ data, markdown, params }) => {
1619 const { group } = params;
@@ -50,61 +53,38 @@ const GroupPage = ({ data, markdown, params }) => {
5053 <SingleColumn>
5154 <Section className="space-y-12" narrow>
5255 <div className="flex items-center space-x-4">
53− {/* Group logo and fallback */}
54− {data.image ? (
55− <img
56− className="rounded-xl"
57− src={data.image}
58− height={100}
59− width={100}
60− />
61− ) : (
62− <img
63− className="object-contain shadow-sm rounded-xl"
64− style={{ height: 100, width: 100 }}
65− src="https://media.urbit.org/logo/urbit-logo-card.png"
66− />
67− )}
68− <div className="flex flex-col">
69− <h2>{data.title}</h2>
70− <p>Urbit Group</p>
71− </div>
56+ <GatewayHeader
57+ title={data.title}
58+ image={data?.image}
59+ item="Urbit ID"
60+ />
7261 </div>
7362 <div className="flex flex-wrap md:flex-nowrap justify-between">
74− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
75− <p className="font-bold text-wall-400">Group Type</p>
76− <p>{data.type ? data.type : "Unknown"}</p>
77− </div>
78− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
79− <p className="font-bold text-wall-400">Members</p>
80− <p>
81− {data.participant_range ? data.participant_range : "Unknown"}
82− </p>
83− </div>
84− <div className="flex flex-col basis-1/2 md:basis-auto">
85− <p className="font-bold text-wall-400">Host</p>
86− <Link href={`/id/${group[0]}`}>
87− <a className="type-ui font-mono text-green-400">{group[0]}</a>
88− </Link>
89− </div>
63+ <MetadataBlock
64+ title="Group Type"
65+ content={data.type ? data.type : "Unknown"}
66+ />
67+ <MetadataBlock
68+ title="Members"
69+ content={
70+ data.participant_range ? data.participant_range : "Unknown"
71+ }
72+ />
73+ <MetadataLink
74+ title="Host"
75+ href={`/id/${group[0]}`}
76+ content={group[0]}
77+ />
9078 <CopyLink
9179 className="basis-1/2 md:basis-auto"
9280 content={data.shortcode ? data.shortcode : data.title}
9381 />
9482 </div>
95− {(data.description !== "A group on Urbit." || markdown) && (
96− <div className="flex flex-col space-y-4">
97− <p className="font-bold text-wall-400">Description</p>
98− {markdown ? (
99− <div
100− className="flex flex-col space-y-4"
101− dangerouslySetInnerHTML={{ __html: decode(markdown) }}
102− />
103− ) : (
104− <p>{data.description}</p>
105− )}
106− </div>
107− )}
83+ <Description
84+ description={data.description}
85+ fallback="A group on Urbit."
86+ markdown={markdown}
87+ />
10888 <hr className="text-wall-200" />
10989 <div className="flex flex-col space-y-6">
11090 <h3>
pages/id/[id].js+41−55
@@ -8,9 +8,12 @@ import SingleColumn from "../../components/SingleColumn";
88import ErrorPage from "../404";
99import Section from "../../components/Section";
1010import ob from "urbit-ob";
11−import { decode } from "html-entities";
1211import Markdown from "../../components/Markdown";
1312import Sigil from "../../components/Sigil";
13+import GatewayHeader from "../../components/gateway/GatewayHeader";
14+import MetadataBlock from "../../components/gateway/MetadataBlock";
15+import MetadataLink from "../../components/gateway/MetadataLink";
16+import Description from "../../components/gateway/Description";
1417import axios from "axios";
1518
1619const IdPage = ({ data, markdown, network, params }) => {
@@ -31,6 +34,12 @@ const IdPage = ({ data, markdown, network, params }) => {
3134 // Galaxies shouldn't show parents, so store it as boolean here for reference.
3235 const isGalaxy = ob.clan(id) === "galaxy";
3336
37+ const sigil = (
38+ <div className="rounded-xl overflow-hidden">
39+ <Sigil patp={id} size={100} />
40+ </div>
41+ );
42+
3443 return (
3544 <Container>
3645 <Head>
@@ -56,67 +65,44 @@ const IdPage = ({ data, markdown, network, params }) => {
5665 <SingleColumn>
5766 <Section className="space-y-12" narrow>
5867 <div className="flex items-center space-x-4">
59− {/* Avatar or sigil */}
60− {data.image ? (
61− <img
62− className="rounded-xl"
63− src={data.image}
64− height={100}
65− width={100}
66− />
67− ) : (
68− <div className="rounded-xl overflow-hidden">
69− <Sigil patp={id} size={100} />
70− </div>
71− )}
72− <div className="flex flex-col">
73− <h2>{id}</h2>
74− <p>Urbit ID</p>
75− </div>
68+ <GatewayHeader
69+ title={id}
70+ image={data?.image || false}
71+ sigil={sigil}
72+ item="Urbit ID"
73+ />
7674 </div>
7775 <div className="flex flex-wrap md:flex-nowrap justify-between">
78− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
79− <p className="font-bold text-wall-400">ID Type</p>
80− <p className="font-mono">
81− {ob.clan(id).slice(0, 1).toUpperCase() + ob.clan(id).slice(1)}
82− </p>
83− </div>
84− <div className="flex flex-col basis-1/2 md:basis-auto mb-4 md:mb-0">
85− <p className="font-bold text-wall-400">Status</p>
86− <p className="font-mono">
87− {network ? "Spawned/Owned" : "Unspawned"}
88− </p>
89− </div>
76+ <MetadataBlock
77+ title="ID Type"
78+ content={
79+ ob.clan(id).slice(0, 1).toUpperCase() + ob.clan(id).slice(1)
80+ }
81+ />
82+ <MetadataBlock
83+ title="Status"
84+ content={network ? "Spawned/Owned" : "Unspawned"}
85+ />
9086 {!isGalaxy && (
91− <div className="flex flex-col basis-1/2 md:basis-auto">
92− <p className="font-bold text-wall-400">Parent</p>
93− <Link href={`/id/${parent}`}>
94− <a className="type-ui font-mono text-green-400">{parent}</a>
95− </Link>
96− </div>
87+ <MetadataLink
88+ title="Parent"
89+ href={`/id/${parent}`}
90+ content={parent}
91+ />
9792 )}
9893 {galaxy && (
99− <div className="flex flex-col basis-1/2 md:basis-auto">
100− <p className="font-bold text-wall-400">Galaxy</p>
101− <Link href={`/id/${galaxy}`}>
102− <a className="type-ui font-mono text-green-400">{galaxy}</a>
103− </Link>
104− </div>
94+ <MetadataLink
95+ title="Galaxy"
96+ href={`/id/${galaxy}`}
97+ content={galaxy}
98+ />
10599 )}
106100 </div>
107− {(data.description !== "An Urbit ID." || markdown) && (
108− <div className="flex flex-col space-y-4">
109− <p className="font-bold text-wall-400">Description</p>
110− {markdown ? (
111− <div
112− className="flex flex-col space-y-4"
113− dangerouslySetInnerHTML={{ __html: decode(markdown) }}
114− />
115− ) : (
116− <p>{data.description}</p>
117− )}
118− </div>
119− )}
101+ <Description
102+ description={data.description}
103+ fallback="An Urbit ID."
104+ markdown={markdown}
105+ />
120106 <a
121107 className="flex items-center"
122108 target="_blank"